/* ============================================================================

   萌哒云 · 全量设计系统 v7.0（雅紫 · 古风淡雅 · 软糯简约 · 低调高级）

   本文件是唯一样式入口：依据全部 PHP/HTML/JS 源码逐一审计 261 个类、

   60+ 个 id 与全部原生元素后从零编写，覆盖系统每个组件，无遗漏无冲突。

   ============================================================================ */



/* ================= 1. 设计令牌 ================= */

:root{

    --paper:#f4f8fd;             /* 淡蓝宣纸 */
    --paper-2:#e7eefb;           /* 淡蓝渐深 */
    --card:#ffffff;              /* 素笺卡片 */

    --ink:#46404f;               /* 墨色 */

    --ink-2:#7a7385;             /* 淡墨 */

    --ink-3:#aba4b8;             /* 灰墨 */

    --line:#e8e4ee;              /* 发丝边线 */

    --violet:#9a8fbe;            /* 淡紫藤 */

    --violet-d:#7c71a8;          /* 紫藤 */

    --violet-dd:#5e548a;         /* 深紫藤 */

    --violet-l:#f4f2f8;          /* 紫藤浅底 */

    --violet-g:linear-gradient(135deg,#a79bd0,#7c71a8);

    --acc:#ad8fb0;               /* 淡胭脂 */

    --acc-g:linear-gradient(120deg,#9a8fbe,#ad8fb0);

    --rouge:#b17d92;             /* 胭脂（警示/删除） */

    --rouge-d:#96647c;

    --rouge-l:#f9f1f4;

    --amber:#3a9e94;             /* 藤黄 */

    --amber-l:#e6f5f2;

    --green:#7ca088;             /* 青瓷绿 */

    --green-l:#eff5f0;

    --blue:#7f97bb;              /* 黛蓝 */

    --blue-l:#f0f3f9;

    --r-lg:20px;                 /* 软糯圆角 */

    --r-md:15px;

    --r-sm:11px;

    --r-pill:999px;

    --shadow-s:0 1px 2px rgba(94,84,138,.04),0 6px 20px rgba(94,84,138,.05);

    --shadow:0 2px 8px rgba(94,84,138,.06),0 18px 42px rgba(94,84,138,.08);

    --shadow-h:0 4px 12px rgba(94,84,138,.08),0 26px 56px rgba(94,84,138,.11);

    --serif:"Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif;

    --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;

    --mono:Consolas,"SFMono-Regular","Courier New",monospace;

    --ease:cubic-bezier(.25,.8,.3,1);

    --ease-pop:cubic-bezier(.22,.9,.32,1);

    --z-top:100;--z-side:1100;--z-sheet:1200;--z-cmdk:1300;--z-float:1350;--z-toast:1400;--z-offline:1450;--z-bar:1500;

}

body.dark{

    --paper:#181521;--paper-2:#201b2c;--card:#242033;

    --ink:#e6e1f0;--ink-2:#aaa1c2;--ink-3:#7f7699;--line:#352e4a;

    --violet:#a395cf;--violet-d:#bdb1e2;--violet-dd:#d2c9ec;--violet-l:#2f2850;

    --violet-g:linear-gradient(135deg,#8d7fc0,#6e639e);

    --acc:#c09cc3;--acc-g:linear-gradient(120deg,#8d7fc0,#b08fb4);

    --rouge:#c993a8;--rouge-d:#d6a7ba;--rouge-l:#3a2733;

    --amber:#5ec4b8;--amber-l:#1f3330;

    --green:#94b89e;--green-l:#243528;

    --blue:#9aadd0;--blue-l:#26304a;

    --shadow-s:0 1px 2px rgba(0,0,0,.28),0 6px 20px rgba(0,0,0,.3);

    --shadow:0 2px 8px rgba(0,0,0,.3),0 18px 42px rgba(0,0,0,.36);

    --shadow-h:0 4px 12px rgba(0,0,0,.36),0 26px 56px rgba(0,0,0,.42);

}



/* ================= 2. 基底与原生元素 ================= */

*,*::before,*::after{box-sizing:border-box;}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;font-size:15px;scroll-padding-top:70px;}

html[data-fs="sm"]{font-size:14px;}

html[data-fs="lg"]{font-size:16px;}

html[data-fs="xl"]{font-size:17px;}

html,body{overflow-x:clip;}

body{

    margin:0;font-family:var(--sans);font-size:14px;line-height:1.8;color:var(--ink);

    background:var(--paper);letter-spacing:.15px;

    -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;

    text-rendering:optimizeLegibility;

    -webkit-tap-highlight-color:transparent;touch-action:manipulation;

    transition:background-color .3s,color .3s;

}

body::before{                    /* 极淡墨韵氛围 */

    content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;

    background:

        radial-gradient(56vw 38vh at 12% -8%,rgba(154,143,190,.07),transparent 65%),

        radial-gradient(50vw 34vh at 92% 2%,rgba(173,143,176,.05),transparent 62%);

}

body.dark::before{

    background:

        radial-gradient(56vw 38vh at 12% -8%,rgba(154,143,190,.10),transparent 65%),

        radial-gradient(50vw 34vh at 92% 2%,rgba(173,143,176,.07),transparent 62%);

}

::selection{background:rgba(154,143,190,.24);color:var(--violet-dd);}

body.dark ::selection{color:#fff;}

::-webkit-scrollbar{width:9px;height:9px;}

::-webkit-scrollbar-track{background:transparent;}

::-webkit-scrollbar-thumb{background:#cdc5de;border-radius:8px;border:2px solid var(--paper);}

body.dark ::-webkit-scrollbar-thumb{background:#453b63;}

a{color:var(--violet-d);text-decoration:none;transition:color .2s;}

a:hover{color:var(--violet-dd);}

img{max-width:100%;height:auto;}

hr{border:none;border-top:1px dashed var(--line);margin:20px 0;}

blockquote{margin:12px 0;padding:12px 18px;border-left:3px solid var(--violet);background:var(--violet-l);border-radius:0 var(--r-md) var(--r-md) 0;color:var(--ink-2);}

code,kbd,.mono{font-family:var(--mono);font-size:12.5px;background:var(--paper-2);border:1px solid var(--line);padding:2px 8px;border-radius:8px;color:var(--rouge-d);word-break:break-all;overflow-wrap:anywhere;}

pre{background:var(--paper-2);border:1px solid var(--line);padding:14px 16px;border-radius:var(--r-md);overflow-x:auto;position:relative;}

pre code{background:transparent;border:none;padding:0;color:var(--ink-2);}

:focus-visible{outline:2px solid var(--violet);outline-offset:2px;border-radius:6px;}

mark{background:var(--amber-l);color:var(--amber);padding:0 4px;border-radius:5px;}

small,.small{font-size:12px;color:var(--ink-3);}

strong,b{font-weight:700;color:var(--ink);}

abbr[title]{text-decoration:underline dotted var(--ink-3);cursor:help;}

del{color:var(--ink-3);}

ins{color:var(--green);text-decoration:none;background:var(--green-l);padding:0 4px;border-radius:4px;}

kbd{background:var(--paper-2);}

figure{margin:14px 0;}

figcaption{font-size:12.5px;color:var(--ink-3);text-align:center;margin-top:8px;}

iframe{max-width:100%;border:none;}

fieldset{border:1px solid var(--line);border-radius:var(--r-md);padding:16px 18px;margin:14px 0;}

legend{font-weight:700;color:var(--violet-d);font-size:13.5px;padding:0 8px;font-family:var(--serif);letter-spacing:1px;}

address{font-style:normal;color:var(--ink-2);}

ul:not([class]),ol:not([class]){padding-left:24px;line-height:2;color:var(--ink-2);}

dl:not([class]){line-height:1.9;}

dt:not([class]){font-weight:700;color:var(--ink);}

dd:not([class]){margin-left:20px;color:var(--ink-2);}

table:not(.tb):not(.doc-tb){border-collapse:collapse;width:100%;font-size:13.5px;}

table:not(.tb):not(.doc-tb) td,table:not(.tb):not(.doc-tb) th{padding:9px 12px;border-bottom:1px dashed var(--line);text-align:left;vertical-align:middle;}

table:not(.tb):not(.doc-tb) th{color:var(--ink-3);font-size:12.5px;border-bottom:1.5px solid var(--line);white-space:nowrap;}

details{margin:8px 0;}

summary{cursor:pointer;color:var(--violet-d);font-size:13px;user-select:none;padding:4px 0;outline:none;transition:color .2s;list-style:none;}

summary::-webkit-details-marker{display:none;}

summary::before{content:"▸";margin-right:6px;color:var(--ink-3);transition:transform .2s;display:inline-block;}

details[open]>summary::before{transform:rotate(90deg);}

summary:hover{color:var(--violet-dd);}

dialog{border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-h);padding:24px;max-width:min(560px,92vw);background:var(--card);color:var(--ink);}

dialog::backdrop{background:rgba(40,33,56,.42);backdrop-filter:blur(3px);}

progress{appearance:none;width:100%;height:8px;border:none;border-radius:99px;overflow:hidden;background:var(--paper-2);}

progress::-webkit-progress-bar{background:var(--paper-2);border-radius:99px;}

progress::-webkit-progress-value{background:var(--violet-g);border-radius:99px;}

progress::-moz-progress-bar{background:var(--violet);border-radius:99px;}

meter{width:100%;height:8px;}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;}}

html.rm *,html.rm *::before,html.rm *::after{animation-duration:.01ms!important;transition-duration:.01ms!important;}



/* ================= 3. 布局骨架 ================= */

.shell{display:flex;align-items:flex-start;}

.wrap{flex:1;min-width:0;max-width:1160px;margin:16px auto;padding:0 20px;}

.footer{

    text-align:center;color:var(--ink-3);font-size:12px;padding:20px 16px;

    font-family:var(--serif);letter-spacing:2px;line-height:2;

}

.footer .ver{background:var(--violet-l);color:var(--violet-d);border-radius:var(--r-pill);padding:1px 9px;font-size:11px;}

.footer-ai{margin-left:6px;}

.section{margin:18px 0;}

.ico{display:inline-flex;width:18px;height:18px;vertical-align:-3px;}

.dot{width:8px;height:8px;border-radius:50%;display:inline-block;}

.err{color:var(--rouge-d);}

.done{color:var(--green);}

.sub{color:var(--ink-2);font-size:13.5px;line-height:1.8;margin:10px 0;}

.hint{font-size:12.5px;color:var(--ink-2);line-height:1.8;opacity:.92;}

.greet{margin-bottom:6px;}

.skip-link{

    position:fixed;left:-9999px;top:8px;z-index:2000;

    background:var(--violet-g);color:#fff;padding:8px 18px;border-radius:10px;

}

.skip-link:focus{left:8px;}



/* ================= 4. 顶栏 ================= */

.topbar{

    position:sticky;top:0;z-index:var(--z-top);

    display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;

    min-height:54px;padding:0 20px;

    background:var(--paper);

    background:color-mix(in srgb,var(--paper) 82%,transparent);

    backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);

    border-bottom:1px solid var(--line);

    transition:box-shadow .3s;

}

.topbar.scrolled{box-shadow:0 6px 24px rgba(94,84,138,.07);}

.topbar .brand{display:flex;align-items:center;gap:11px;flex:1;min-width:0;}

.topbar .seal{

    width:33px;height:33px;flex:none;border-radius:11px;

    background:var(--violet-g);color:#fff;

    display:flex;align-items:center;justify-content:center;

    font-family:var(--serif);font-size:16px;font-weight:700;

    box-shadow:0 3px 10px rgba(124,113,168,.28),inset 0 1px 0 rgba(255,255,255,.35);

    transition:transform .4s var(--ease);

}



.topbar .brand-t{

    font-family:var(--serif);font-size:16px;font-weight:700;letter-spacing:2px;

    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;

}

.topbar-right{display:flex;align-items:center;gap:8px;flex:none;}

.top-clock{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:.5px;}

.top-logout{

    padding:7px 16px;border-radius:var(--r-pill);font-size:13px;color:var(--ink-2);

    border:1px solid var(--line);background:transparent;transition:all .25s;flex:none;

}

.top-logout:hover{color:var(--rouge-d);border-color:var(--rouge);background:var(--rouge-l);}

.dark-toggle{

    width:35px;height:35px;flex:none;border:1px solid var(--line);border-radius:50%;

    background:transparent;cursor:pointer;position:relative;transition:transform .35s var(--ease);

}

.dark-toggle:hover{border-color:var(--violet);}

.dark-toggle::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--violet-g);}

body.dark .dark-toggle::before{background:radial-gradient(circle at 66% 34%,transparent 40%,var(--violet) 44%);}

.top-search{

    width:35px;height:35px;flex:none;border:1px solid var(--line);border-radius:50%;

    background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;

    color:var(--ink-3);transition:all .25s var(--ease);

}

.top-search:hover{color:var(--violet-d);border-color:var(--violet);background:var(--violet-l);}

.top-search svg{width:16px;height:16px;}

.nav-toggle{display:none;}



/* ================= 5. 侧边导航 ================= */

.side{

    position:sticky;top:54px;flex:none;width:204px;

    height:calc(100vh - 54px);overflow-y:auto;

    padding:16px 12px 24px;

}

.side-nav{display:flex;flex-direction:column;gap:2px;}

.side-i{

    display:flex;align-items:center;gap:11px;

    padding:8px 13px;border-radius:var(--r-md);

    color:var(--ink-2);font-size:13.5px;letter-spacing:.5px;position:relative;

    transition:background .22s var(--ease),color .22s;

}

.side-i .side-ico{width:21px;height:21px;flex:none;display:flex;align-items:center;justify-content:center;}

.side-i .side-ico svg{width:20px;height:20px;}

.side-i .side-t{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

.side-i:hover{background:var(--violet-l);color:var(--violet-dd);}

.side-i.on{

    background:var(--violet-l);color:var(--violet-dd);font-weight:700;

    box-shadow:inset 0 0 0 1px var(--line);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--violet) 30%,transparent);

}

.side-i.on .side-t{color:var(--violet-dd);}

.side-i.on .side-ico{color:var(--violet-d);}

.nav-badge{

    min-width:18px;height:18px;line-height:18px;text-align:center;flex:none;

    background:var(--rouge);color:#fff;

    border-radius:var(--r-pill);font-size:10.5px;font-weight:600;padding:0 5px;

}

.side-i.on .nav-badge{background:var(--rouge);color:#fff;}



/* ================= 6. 卡片 / 问候 / 统计 ================= */

.card{

    background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);

    box-shadow:var(--shadow-s);padding:18px 20px;margin-bottom:14px;min-width:0;

    transition:box-shadow .3s;

    content-visibility:auto;contain-intrinsic-size:auto 200px;

}

.card:hover{box-shadow:var(--shadow);}

.card h2{

    margin:0 0 12px;padding-bottom:9px;font-size:15px;font-weight:700;

    font-family:var(--serif);letter-spacing:2px;color:var(--ink);

    display:flex;align-items:center;gap:8px;flex-wrap:wrap;row-gap:8px;

    border-bottom:1px dashed var(--line);

}

.card h2::before{

    content:"";width:5px;height:16px;border-radius:99px;flex:none;

    background:var(--violet);

}

.card h2 .btn,.card h2 .btn-sm{margin-left:auto;flex:none;}

.card h2>span[style*="float:right"]{margin-left:auto;}

.greeting{

    position:relative;overflow:hidden;

    background:var(--violet-l);color:var(--ink);

    border:1px solid var(--line);

    border:1px solid color-mix(in srgb,var(--violet) 22%,transparent);

    border-radius:var(--r-lg);padding:17px 22px;margin-bottom:14px;

}

.greeting::after{content:"";position:absolute;right:-40px;top:-50px;width:150px;height:150px;border-radius:50%;background:rgba(154,143,190,.10);}

.greeting::before{content:"";position:absolute;right:64px;bottom:-58px;width:100px;height:100px;border-radius:50%;background:rgba(173,143,176,.08);}

.greeting .g-title{font-size:19px;font-weight:700;font-family:var(--serif);letter-spacing:2px;color:var(--violet-dd);position:relative;}

.greeting .g-sub{font-size:13px;margin-top:6px;letter-spacing:.5px;color:var(--ink-2);position:relative;}

.greeting a{color:var(--violet-d);position:relative;}

.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:11px;margin-bottom:14px;}

.stat{

    position:relative;overflow:hidden;min-width:0;

    background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);

    box-shadow:var(--shadow-s);padding:14px 16px;

    transition:box-shadow .3s;

}

.stat:hover{box-shadow:var(--shadow);}

.stat::after{content:"";position:absolute;right:-16px;bottom:-16px;width:58px;height:58px;border-radius:50%;background:var(--violet-l);opacity:.5;}

.stat .num{font-size:24px;font-weight:700;color:var(--violet-dd);font-variant-numeric:tabular-nums;line-height:1.3;position:relative;}

.stat .label{font-size:12.5px;color:var(--ink-3);margin-top:2px;letter-spacing:1.5px;position:relative;}

a.stat{color:inherit;text-decoration:none;}



/* ================= 7. 按钮 ================= */

.btn,button.btn{

    display:inline-flex;align-items:center;justify-content:center;gap:6px;

    min-height:40px;

    padding:8px 18px;border:1px solid var(--line);border:1px solid color-mix(in srgb,var(--violet) 26%,var(--line));border-radius:var(--r-md);

    background:var(--violet-l);color:var(--violet-dd);font-size:13.5px;line-height:1.5;font-weight:600;

    letter-spacing:.5px;cursor:pointer;transition:all .22s var(--ease);white-space:nowrap;

    font-family:var(--sans);text-decoration:none;position:relative;overflow:hidden;max-width:100%;

}

.btn:hover{border-color:var(--violet);color:var(--violet-dd);background:var(--violet-l);background:color-mix(in srgb,var(--violet) 16%,var(--violet-l));}

.btn:active{transform:scale(.985);}

.btn:disabled,.btn.loading{opacity:.6;pointer-events:none;}

.btn.loading::after{content:"";width:12px;height:12px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite;}

@keyframes spin{to{transform:rotate(360deg);}}

.btn-primary{background:var(--violet-g);border-color:transparent;color:#fff;box-shadow:0 4px 14px rgba(124,113,168,.26);}

.btn-primary:hover{background:var(--violet-g);color:#fff;filter:brightness(1.05);box-shadow:0 6px 18px rgba(124,113,168,.32);}

.btn-danger{background:linear-gradient(135deg,var(--rouge),var(--rouge-d));border-color:transparent;color:#fff;}

.btn-danger:hover{color:#fff;filter:brightness(1.06);}

.btn-sm{padding:5px 13px;font-size:12.5px;border-radius:var(--r-sm);}

.btn-mini{padding:2px 10px;font-size:12px;border-radius:var(--r-sm);}

.btn-block,.btn-lg{width:100%;padding:12px 20px;font-size:14.5px;}

.btn-light{background:var(--paper-2);color:var(--ink-2);border-color:var(--line);}

button:not([class]){

    display:inline-flex;align-items:center;justify-content:center;gap:6px;

    padding:8px 18px;border:1px solid var(--line);border:1px solid color-mix(in srgb,var(--violet) 26%,var(--line));border-radius:var(--r-md);

    background:var(--violet-l);color:var(--violet-dd);font-size:13.5px;line-height:1.5;font-weight:600;

    cursor:pointer;transition:all .22s var(--ease);white-space:nowrap;font-family:var(--sans);

}

button:not([class]):hover{border-color:var(--violet);color:var(--violet-dd);background:var(--violet-l);background:color-mix(in srgb,var(--violet) 16%,var(--violet-l));}

button:not([class]):active{transform:scale(.985);}

input[type=submit],input[type=button],input[type=reset]{

    width:auto;display:inline-flex;align-items:center;justify-content:center;

    padding:8px 18px;border:1.5px solid var(--line);border:1px solid color-mix(in srgb,var(--violet) 26%,var(--line));border-radius:var(--r-md);

    background:var(--violet-l);color:var(--violet-dd);font-size:13.5px;font-weight:600;cursor:pointer;transition:all .22s var(--ease);

}

input[type=submit]:hover,input[type=button]:hover{border-color:var(--violet);color:var(--violet-dd);background:var(--violet-l);}

.inline-form{display:inline-flex;gap:5px;align-items:center;flex-wrap:wrap;margin:2px 2px 2px 0;vertical-align:middle;max-width:100%;}

.inline-form select{max-width:140px;}

.ripple{position:absolute;border-radius:50%;pointer-events:none;background:currentColor;opacity:.07;transform:scale(0);animation:ripple .45s var(--ease) forwards;}

@keyframes ripple{to{transform:scale(2.6);opacity:0;}}



/* ================= 8. 标签 / 提示条 / 空态 ================= */

.tag{

    display:inline-flex;align-items:center;gap:4px;

    padding:2px 11px;border-radius:var(--r-pill);font-size:12px;line-height:1.7;

    white-space:nowrap;font-weight:600;letter-spacing:.5px;border:1px solid transparent;

}

.tag-green{background:var(--green-l);color:var(--green);border-color:color-mix(in srgb,var(--green) 20%,transparent);}

.tag-red{background:var(--rouge-l);color:var(--rouge-d);border-color:color-mix(in srgb,var(--rouge) 20%,transparent);}

.tag-orange{background:var(--amber-l);color:var(--amber);border-color:color-mix(in srgb,var(--amber) 22%,transparent);}

.tag-gray{background:var(--paper-2);color:var(--ink-3);border-color:var(--line);}

.tag-blue{background:var(--blue-l);color:var(--blue);border-color:color-mix(in srgb,var(--blue) 20%,transparent);}

.risk-badge{display:inline-flex;padding:3px 12px;border-radius:var(--r-pill);background:var(--rouge-l);color:var(--rouge-d);font-size:12px;font-weight:700;}

.alert{

    border-radius:var(--r-md);padding:10px 15px;margin-bottom:12px;font-size:13px;

    display:flex;align-items:center;gap:8px;flex-wrap:wrap;line-height:1.9;

    border:1px solid transparent;position:relative;

}

.alert-ok{background:var(--green-l);border-color:color-mix(in srgb,var(--green) 22%,transparent);color:#4f7a63;}

.alert-err{background:var(--rouge-l);border-color:color-mix(in srgb,var(--rouge) 20%,transparent);color:var(--rouge-d);}

body.dark .alert-ok{color:var(--green);}

.alert .alert-x{

    margin-left:auto;flex:none;width:24px;height:24px;border:none;border-radius:50%;

    background:transparent;color:inherit;opacity:.55;cursor:pointer;font-size:14px;line-height:1;

    display:flex;align-items:center;justify-content:center;padding:0;min-height:0;

}

.alert .alert-x:hover{opacity:1;background:rgba(0,0,0,.06);}

.empty{padding:36px 16px;text-align:center;color:var(--ink-3);font-size:13.5px;}

.ok-banner{background:var(--green-l);border:1px solid color-mix(in srgb,var(--green) 22%,transparent);color:#4f7a63;border-radius:var(--r-md);padding:14px 18px;margin-bottom:16px;}

.warn,.upstream-banner{background:var(--amber-l);border:1px solid color-mix(in srgb,var(--amber) 24%,transparent);color:var(--amber);border-radius:var(--r-md);padding:13px 18px;margin-bottom:16px;font-size:13.5px;}

.empty-state{text-align:center;padding:44px 20px;color:var(--ink-3);}

.empty-state .es-ico{width:60px;height:60px;margin:0 auto 14px;border-radius:18px;background:var(--violet-l);color:var(--violet-d);display:flex;align-items:center;justify-content:center;font-size:24px;}

.empty-state .es-t{font-weight:700;color:var(--ink-2);font-size:14px;margin-bottom:4px;font-family:var(--serif);letter-spacing:1px;}

.empty-state .es-d{font-size:12.5px;}



/* ================= 9. 表单 ================= */

.form-row{display:block;margin-bottom:12px;position:relative;}

.form-row label{display:block;font-weight:600;font-size:13px;color:var(--ink-2);margin-bottom:7px;letter-spacing:.5px;}

.form-row .hint{margin-top:6px;}

.form-row.focus>label{color:var(--violet-d);}

.req-star{color:var(--rouge);margin-left:3px;font-weight:700;}

input:not([type=checkbox]):not([type=radio]):not([type=range]),

select,textarea{

    width:100%;padding:10px 15px;

    border:1.5px solid var(--line);border-radius:var(--r-md);

    background:var(--paper);color:var(--ink);

    font-size:14px;font-family:var(--sans);line-height:1.5;

    transition:border-color .25s,box-shadow .25s,background .25s;

    max-width:100%;

}

input:hover:not(:focus):not([disabled]),select:hover:not(:focus),textarea:hover:not(:focus){border-color:var(--violet);border-color:color-mix(in srgb,var(--violet) 40%,var(--line));}

input:focus,select:focus,textarea:focus{

    outline:none;background:var(--card);border-color:var(--violet);

    box-shadow:0 0 0 4px var(--violet-l);box-shadow:0 0 0 4px color-mix(in srgb,var(--violet) 13%,transparent);

}

body.dark input:not([type=checkbox]):not([type=radio]):not([type=range]),body.dark select,body.dark textarea{background:var(--paper-2);}

body.dark input:focus,body.dark select:focus,body.dark textarea:focus{background:var(--card);}

textarea{resize:vertical;min-height:80px;}

select{

    appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:40px;

    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%237c71a8' stroke-width='2' stroke-linecap='round'/></svg>");

    background-repeat:no-repeat;background-position:right 15px center;

}

select option{background:var(--card);color:var(--ink);}

select[multiple]{min-height:120px;padding:8px;}

select[multiple] option{padding:6px 10px;border-radius:6px;}

input::placeholder,textarea::placeholder{color:var(--ink-3);opacity:.75;}

input[type=checkbox],input[type=radio]{

    width:18px!important;height:18px!important;min-width:18px;max-width:18px;flex:none;margin:0;

    appearance:none;-webkit-appearance:none;cursor:pointer;

    border:2px solid #c9c0dc;border-radius:6px;background:var(--card);

    vertical-align:-3px;transition:border-color .2s,background .2s,box-shadow .2s;position:relative;

}

input[type=checkbox]:hover,input[type=radio]:hover{border-color:var(--violet);box-shadow:0 0 0 3px var(--violet-l);}

input[type=radio]{border-radius:50%;}

input[type=checkbox]:checked{background:var(--violet);border-color:var(--violet);animation:ckPop .22s var(--ease-pop);box-shadow:0 0 0 3px var(--violet-l);}

input[type=checkbox]:checked::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:9px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg);}

input[type=radio]:checked{border-color:var(--violet-d);background:radial-gradient(circle,var(--violet-d) 0 40%,var(--card) 46%);box-shadow:0 0 0 3px var(--violet-l);}

input[type=checkbox]:focus-visible,input[type=radio]:focus-visible{outline:2px solid var(--violet);outline-offset:2px;}

@keyframes ckPop{0%{transform:scale(.9);}100%{transform:scale(1);}}

label:has(>input[type=checkbox]),label:has(>input[type=radio]){display:inline-flex!important;align-items:center;gap:8px;font-weight:normal;cursor:pointer;margin-right:16px;}

label:not(.pkg-item):has(>input[type=radio]){

    padding:9px 18px;margin:0 10px 10px 0;border-radius:var(--r-pill);

    border:1.5px solid var(--line);background:var(--paper);color:var(--ink-2);

    font-size:13.5px;letter-spacing:.5px;transition:all .2s var(--ease);user-select:none;

}

label:not(.pkg-item):has(>input[type=radio]):hover{border-color:var(--violet);color:var(--violet-dd);background:var(--violet-l);}

label:not(.pkg-item):has(>input[type=radio]:checked){

    border-color:var(--violet-d);background:var(--violet-l);color:var(--violet-dd);font-weight:700;

    box-shadow:0 0 0 3px color-mix(in srgb,var(--violet) 12%,transparent);

}

label:has(>input[type=checkbox])+br,label:has(>input[type=radio])+br{display:none;}

input[type=number]{appearance:textfield;}

input[type=number]::-webkit-inner-spin-button{opacity:.4;cursor:pointer;}

input[type=date],input[type=time],input[type=datetime-local],input[type=month]{font-variant-numeric:tabular-nums;}

input[type=range]{width:100%;appearance:none;height:6px;border-radius:99px;padding:0;background:var(--paper-2);border:none;outline:none;}

input[type=range]::-webkit-slider-thumb{appearance:none;width:20px;height:20px;border-radius:50%;cursor:pointer;background:var(--violet-g);box-shadow:0 2px 8px rgba(124,113,168,.35);border:2px solid #fff;}

input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;cursor:pointer;background:var(--violet);border:2px solid #fff;}

input[type=file]{font-size:13px;color:var(--ink-2);}

input[type=file]::file-selector-button{margin-right:12px;padding:8px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-2);color:var(--ink-2);cursor:pointer;font-family:var(--sans);transition:all .2s;}

input[type=file]::file-selector-button:hover{border-color:var(--violet);color:var(--violet-d);}

input[type=color]{width:56px;height:38px;padding:4px;cursor:pointer;}

input[disabled],select[disabled],textarea[disabled]{opacity:.55;cursor:not-allowed;background:var(--paper-2);}

input[readonly]{background:var(--paper-2);color:var(--ink-2);}

.f-invalid input,.f-invalid select,.f-invalid textarea{border-color:var(--rouge)!important;box-shadow:0 0 0 4px var(--rouge-l)!important;box-shadow:0 0 0 4px color-mix(in srgb,var(--rouge) 12%,transparent)!important;}

.f-msg{display:none;font-size:12px;color:var(--rouge-d);margin-top:5px;}

.f-invalid .f-msg{display:block;}

@keyframes shake{0%,100%{transform:translateX(0);}25%,75%{transform:translateX(-3.5px);}50%{transform:translateX(3.5px);}}

.shake{animation:shake .38s ease;}

.f-count{display:block;position:static;text-align:right;font-size:10.5px;color:var(--ink-3);padding:2px 2px 0;line-height:1.4;pointer-events:none;font-variant-numeric:tabular-nums;}

.f-count.near{color:var(--amber);}

.f-count.full{color:var(--rouge-d);}

.pw-wrap{position:relative;}

.pw-wrap input{padding-right:46px!important;}

.pw-eye{position:absolute;right:6px;top:8px;width:34px;height:34px;border:none;border-radius:50%;background:transparent;color:var(--ink-3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;min-height:0;transition:color .2s,background .2s;}

.pw-eye:hover{color:var(--violet-d);background:var(--violet-l);}

.pw-eye svg{width:18px;height:18px;}

.pw-meter{display:flex;gap:5px;margin-top:8px;}

.pw-meter i{flex:1;height:4px;border-radius:99px;background:var(--paper-2);transition:background .3s;}

.pw-meter[data-lv="1"] i:nth-child(1){background:var(--rouge);}

.pw-meter[data-lv="2"] i:nth-child(-n+2){background:var(--amber);}

.pw-meter[data-lv="3"] i:nth-child(-n+3){background:var(--blue);}

.pw-meter[data-lv="4"] i{background:var(--green);}

.pw-meter-t{font-size:11.5px;color:var(--ink-3);margin-top:5px;min-height:16px;}

.pw-caps{display:none;margin-top:6px;font-size:12px;color:var(--amber);background:var(--amber-l);border:1px solid color-mix(in srgb,var(--amber) 24%,transparent);border-radius:8px;padding:4px 10px;}

.pw-caps.on{display:block;}

.captcha-row{display:flex;gap:10px;align-items:center;}

.captcha-img{height:44px;border-radius:var(--r-md);border:1px solid var(--line);cursor:pointer;flex:none;}

.captcha-input{flex:1;}

.retail-input{max-width:110px;display:inline-block;}

.retail-rate{max-width:90px;display:inline-block;}

.renew-sel{width:auto;display:inline-block;padding:4px 30px 4px 10px;font-size:12.5px;}

.flex{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

.bulk-ck{width:18px!important;height:18px!important;min-width:18px;vertical-align:middle;cursor:pointer;}

.form-stick{position:sticky;bottom:calc(74px + env(safe-area-inset-bottom,0px));z-index:50;background:var(--card);background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:10px;border-radius:15px;box-shadow:var(--shadow);}



/* 向导 */

.wz-steps{display:flex;justify-content:space-between;margin:6px 0 14px;position:relative;gap:4px;}

.wz-steps::before{content:"";position:absolute;top:17px;left:6%;right:6%;height:4px;border-radius:99px;background:var(--paper-2);}

.wz-dot{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;flex:1;min-width:0;}

.wz-dot i{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--paper-2);color:var(--ink-3);font-size:14px;font-style:normal;font-weight:700;transition:all .3s var(--ease);box-shadow:var(--shadow-s);flex:none;}

.wz-dot span{font-size:12px;color:var(--ink-3);transition:color .3s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}

.wz-dot.on i{background:var(--violet-g);color:#fff;box-shadow:0 5px 14px rgba(124,113,168,.32);}

.wz-dot.on span{color:var(--violet-dd);font-weight:700;}

.wz-dot.done i{background:var(--violet-l);color:var(--violet-d);}

.wz-dot.done span{color:var(--violet-d);}

.wz-step{display:none;}

.wz-step.on{display:block;animation:fadeUp .35s ease both;}

.wz-title{font-size:15.5px;font-weight:700;font-family:var(--serif);margin:2px 0 14px;padding-bottom:10px;border-bottom:1px dashed var(--line);letter-spacing:1px;}

.wz-nav{display:flex;gap:10px;margin-top:18px;padding-top:15px;border-top:1px dashed var(--line);align-items:center;}

.wz-tip{font-size:12.5px;color:var(--ink-3);margin-left:auto;}

.wz-bar{height:6px;background:var(--paper-2);border-radius:99px;overflow:hidden;margin-bottom:16px;}

.wz-bar i{display:block;height:100%;background:var(--violet-g);border-radius:99px;transition:width .4s var(--ease);}

.steps{display:flex;gap:8px;margin:14px 0;flex-wrap:wrap;}



/* ================= 10. 表格 / 分页 / 页签 ================= */

.tb-wrap{overflow-x:auto;border-radius:var(--r-md);-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:var(--card);}

table.tb{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px;}

table.tb th{

    text-align:left;font-size:12px;font-weight:700;color:var(--ink-3);letter-spacing:1px;

    padding:8px 12px;border-bottom:1.5px solid var(--line);white-space:nowrap;background:var(--paper);

    position:sticky;top:0;z-index:2;user-select:none;

}

table.tb td{padding:9px 12px;border-bottom:1px dashed var(--line);vertical-align:middle;font-variant-numeric:tabular-nums;}

table.tb tr:last-child td{border-bottom:none;}

table.tb tbody tr{transition:background .2s;}

table.tb tbody tr:nth-child(even){background:var(--paper);background:color-mix(in srgb,var(--paper) 55%,transparent);}

table.tb tbody tr:hover{background:var(--violet-l);}

body.dark table.tb tbody tr:nth-child(even){background:rgba(255,255,255,.02);}

table.tb td b{color:var(--ink);}

/* 推广榜：我的行高亮 */

table.tb tr.row-me td{background:color-mix(in srgb,var(--violet-l) 65%,transparent);font-weight:600;}

body.dark table.tb tr.row-me td{background:rgba(162,148,203,.14);}

table.tb tr.row-me td:first-child{border-radius:10px 0 0 10px;}

table.tb tr.row-me td:last-child{border-radius:0 10px 10px 0;}

.tb-wrap .tb th:first-child,.tb-wrap .tb td:first-child{padding-left:16px;}

table.tb th.sortable{cursor:pointer;transition:color .2s;}

table.tb th.sortable:hover{color:var(--violet-dd);}

table.tb th .sort-arrow{display:inline-block;margin-left:4px;font-size:10px;opacity:.35;transition:all .2s;}

table.tb th.sort-asc .sort-arrow{opacity:1;color:var(--violet-d);}

table.tb th.sort-desc .sort-arrow{opacity:1;color:var(--violet-d);transform:rotate(180deg);}

.tb-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:1px;}

.tb-dot.g{background:var(--green);}

.tb-dot.r{background:var(--rouge-d);}

.tb-dot.o{background:var(--amber);}

.tb-dot.gray{background:var(--ink-3);}

.th-cell{max-width:240px;}

.tb-filter{display:flex;align-items:center;gap:8px;margin:0 0 14px;max-width:320px;}

.tb-filter input{flex:1;padding:9px 16px;border-radius:var(--r-pill);background:var(--card);}

.tb-filter-n{font-size:12px;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums;}

.logdetail{max-width:420px;font-size:12px;color:var(--ink-2);white-space:pre-wrap;word-break:break-all;}

.pagination{display:flex;gap:7px;flex-wrap:wrap;margin-top:16px;align-items:center;}

.pagination a,.pagination span{

    min-width:36px;height:36px;line-height:36px;text-align:center;

    border-radius:var(--r-sm);font-size:13px;color:var(--ink-2);

    border:1px solid var(--line);background:var(--card);padding:0 8px;

    transition:all .2s;

}

.pagination a:hover{border-color:var(--violet);color:var(--violet-dd);}

.pagination .cur,.pagination span.cur{background:var(--violet-g);border-color:transparent;color:#fff;font-weight:700;}

.tabs{display:flex;gap:2px;flex-wrap:wrap;margin-bottom:13px;background:var(--paper-2);padding:4px;border-radius:var(--r-pill);width:max-content;max-width:100%;border:1px solid var(--line);}

.tabs a{

    padding:7px 17px;border-radius:var(--r-pill);font-size:13px;color:var(--ink-2);

    display:inline-flex;align-items:center;gap:6px;transition:all .22s;white-space:nowrap;

    font-weight:500;letter-spacing:.5px;border:1px solid transparent;

}

.tabs a:hover{color:var(--violet-dd);}

.tabs a.on{background:var(--card);color:var(--violet-dd);font-weight:700;box-shadow:var(--shadow-s);border-color:var(--line);}

body.dark .tabs a.on{background:var(--violet-l);border-color:transparent;}

.tabs-sub{font-size:12px;color:var(--ink-3);margin-left:6px;align-self:center;}



/* ================= 11. 主机卡片 ================= */

.host-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;}

.host-card{

    background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);

    box-shadow:var(--shadow-s);padding:16px 18px;position:relative;overflow:hidden;min-width:0;

    transition:box-shadow .3s;

}

.host-card:hover{box-shadow:var(--shadow);}

.host-card::before{

    content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:99px;

    background:var(--violet);opacity:0;transition:opacity .3s;

}

.host-card:hover::before{opacity:.6;}

.host-card .hc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}

.host-card .hc-user{font-size:16px;font-weight:700;font-family:var(--serif);word-break:break-all;letter-spacing:.5px;}

.host-card .hc-pw{font-size:12px;color:var(--ink-2);margin-top:6px;}

.host-card .hc-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:13px 0;}

.host-card .hc-spec{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);padding:9px 4px;text-align:center;min-width:0;}

.host-card .hc-spec b{display:block;font-size:14px;color:var(--violet-dd);font-variant-numeric:tabular-nums;}

.host-card .hc-spec span{font-size:11px;color:var(--ink-3);}

.host-card .hc-expire{font-size:12.5px;color:var(--ink-2);margin-top:4px;line-height:1.8;}

.host-card .hc-ops{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px;}

.hc-u{color:var(--ink-3);font-size:12px;}

.countdown{height:7px;background:var(--paper-2);border-radius:99px;overflow:hidden;margin-top:7px;}

.countdown i{display:block;height:100%;border-radius:99px;transition:width .6s var(--ease);}



/* ================= 12. 套餐卡片 ================= */

.pkg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:10px;}

.pkg-item{position:relative;display:block;cursor:pointer;}

.pkg-item input{position:absolute;opacity:0;pointer-events:none;}

.pkg-item .pkg-box{border:1.5px solid var(--line);border-radius:var(--r-lg);padding:15px 16px;height:100%;background:var(--card);transition:all .25s var(--ease);position:relative;}

.pkg-item .pkg-box:hover{border-color:var(--violet);box-shadow:var(--shadow-s);}

.pkg-item input:checked + .pkg-box{border-color:var(--violet-d);background:var(--violet-l);box-shadow:0 6px 18px rgba(124,113,168,.16);}

.pkg-item input:checked + .pkg-box::after{

    content:"✓";position:absolute;top:10px;right:12px;width:22px;height:22px;border-radius:50%;

    background:var(--violet-g);color:#fff;font-size:13px;display:flex;align-items:center;justify-content:center;

}

.pkg-item input:focus-visible + .pkg-box{outline:2px solid var(--violet);outline-offset:3px;}

.pkg-item .pkg-name{font-weight:700;font-size:15px;font-family:var(--serif);letter-spacing:1px;}

.pkg-item .pkg-price{font-size:22px;font-weight:700;color:var(--violet-dd);margin:8px 0 4px;font-variant-numeric:tabular-nums;}

.pkg-item .pkg-price small{font-size:12px;color:var(--ink-3);font-weight:400;}

.pkg-item .pkg-specs{font-size:12.5px;color:var(--ink-2);line-height:1.9;}



/* ================= 13. 仪表 / 图表 / 时长 ================= */

.meter{height:8px;background:var(--paper-2);border-radius:99px;overflow:hidden;}

.meter i{display:block;height:100%;border-radius:99px;background:var(--violet-g);transition:width .6s var(--ease);}

.meter.warn i{background:linear-gradient(135deg,#c9ab72,#3a9e94);}

.meter.full i{background:linear-gradient(135deg,#c48ba0,#96647c);}

.dur-strip{

    position:relative;margin:10px 0;

    overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;

    scrollbar-width:none;scroll-snap-type:x proximity;

    padding:4px 2px;

}

.dur-strip::-webkit-scrollbar{display:none;}

.dur-track{display:flex;gap:7px;width:max-content;min-width:100%;}

.dur-t{

    flex:1 0 auto;min-width:62px;text-align:center;scroll-snap-align:center;

    padding:9px 12px;font-size:13px;color:var(--ink-2);letter-spacing:.5px;

    background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r-pill);

    cursor:pointer;user-select:none;-webkit-user-select:none;transition:all .22s var(--ease);

}

.dur-t:hover{border-color:var(--violet);color:var(--violet-dd);background:var(--violet-l);}

.dur-t.on{background:var(--violet-g);color:#fff;border-color:transparent;font-weight:700;box-shadow:0 3px 10px rgba(124,113,168,.28);}

.dur-slider{width:100%;padding:6px 2px 0;}

.dur-slider input[type=range]{width:100%;margin:0;display:block;}

.dur-ticks{display:flex;justify-content:space-between;width:100%;margin-top:10px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}

.dur-ticks::-webkit-scrollbar{display:none;}

.dur-ticks span{flex:1 0 auto;min-width:56px;text-align:center;font-size:12.5px;color:var(--ink-3);cursor:pointer;padding:6px 0;border-radius:8px;transition:all .2s;user-select:none;}

.dur-ticks span:hover{color:var(--violet-dd);background:var(--violet-l);}

.dur-ticks span.on{color:#fff;font-weight:700;background:var(--violet-g);}

.trend-row{display:flex;gap:18px;flex-wrap:wrap;}

.trend-item{flex:1;min-width:220px;}

.trend-svg{width:100%;height:auto;display:block;}

.donut-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap;}

.donut-legend{font-size:13px;line-height:2;}

.donut-legend .dot{margin-right:6px;}



/* ================= 14. 推广链接 ================= */

.reflink-new{background:var(--violet-l);border:1.5px dashed var(--violet);border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px;text-align:center;cursor:pointer;transition:all .25s;color:var(--violet-dd);font-weight:600;letter-spacing:1px;}

.reflink-new:hover{border-style:solid;}

.reflink-list{display:flex;flex-direction:column;gap:12px;}

.reflink-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 16px;transition:border-color .25s,box-shadow .25s;}

.reflink-item:hover{border-color:var(--violet);border-color:color-mix(in srgb,var(--violet) 40%,var(--line));box-shadow:var(--shadow-s);}

.reflink-main{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}

.reflink-name{font-weight:700;font-size:14px;letter-spacing:.5px;}

.reflink-url{font-size:12.5px;word-break:break-all;color:var(--ink-2);font-family:var(--mono);}

.reflink-meta{font-size:12px;color:var(--ink-3);margin-top:6px;font-variant-numeric:tabular-nums;}

.reflink-ops{display:flex;gap:6px;margin-left:auto;flex:none;}



/* ================= 15. 文档页 ================= */

.doc-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow-s);}

.doc-head{border-bottom:1px dashed var(--line);padding-bottom:14px;margin-bottom:16px;}

.doc-h{font-family:var(--serif);letter-spacing:1px;color:var(--ink);}

.doc-h2{font-size:19px;margin:20px 0 10px;}

.doc-h3{font-size:16.5px;margin:16px 0 8px;}

.doc-h4{font-size:15px;margin:14px 0 6px;}

.doc-h5{font-size:13.5px;margin:12px 0 6px;color:var(--ink-2);}

.doc-intro{color:var(--ink-2);font-size:13px;margin-top:6px;}

.doc-tools{display:flex;gap:10px;margin:14px 0;flex-wrap:wrap;}

.doc-search{max-width:300px;border-radius:var(--r-pill);}

.doc-sec{margin:10px 0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;transition:border-color .25s,box-shadow .25s;}

.doc-sec:hover{border-color:var(--violet);border-color:color-mix(in srgb,var(--violet) 35%,var(--line));}

.doc-sec[open]{box-shadow:var(--shadow-s);}

.doc-sec>summary{padding:13px 18px;font-weight:700;font-size:13.5px;color:var(--ink);background:var(--paper);display:flex;align-items:center;gap:8px;letter-spacing:.5px;}

.doc-sec>summary::before{content:"";}

.doc-sec>summary:hover{background:var(--violet-l);color:var(--violet-dd);}

.doc-sec-arrow{margin-left:auto;transition:transform .25s;color:var(--ink-3);width:16px;height:16px;flex:none;}

.doc-sec-arrow::before{content:"▸";}

.doc-sec[open]>summary .doc-sec-arrow{transform:rotate(90deg);}

.doc-sec-body{padding:8px 20px 16px;}

.doc-p{line-height:1.95;color:var(--ink-2);margin:8px 0;}

.doc-ul{padding-left:22px;line-height:2.05;color:var(--ink-2);}

.doc-pre{font-size:12.5px;margin:10px 0;}

.doc-tb{width:100%;border-collapse:collapse;font-size:13px;margin:10px 0;}

.doc-tb th,.doc-tb td{border:1px solid var(--line);padding:8px 12px;text-align:left;}

.doc-tb th{background:var(--paper);color:var(--ink-2);}

.doc-toc{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:12px 16px;margin:12px 0;font-size:13px;columns:2;column-gap:24px;}

.doc-toc-a{display:block;padding:5px 10px;color:var(--ink-2);border-radius:8px;transition:background .2s,color .2s;break-inside:avoid;}

.doc-toc-a:hover{background:var(--violet-l);color:var(--violet-dd);}



/* ================= 16. 聊天 / AI ================= */

.chat-box{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:16px;max-height:480px;overflow-y:auto;overscroll-behavior:contain;}

.chat-input{display:flex;gap:10px;margin-top:12px;}

.chat-input input{flex:1;min-width:0;}

.chat-input .btn{flex:none;}

.chat-seat{font-size:12px;color:var(--ink-3);font-weight:400;font-family:var(--sans);letter-spacing:.5px;}

.bubble{max-width:78%;padding:11px 16px;border-radius:16px;margin:8px 0;font-size:13.5px;line-height:1.75;white-space:pre-wrap;word-break:break-word;}

.bubble.who-agent,.bubble.who-admin{margin-left:auto;background:var(--violet-g);color:#fff;border-bottom-right-radius:6px;box-shadow:0 3px 10px rgba(124,113,168,.2);}

.bubble.who-client,.bubble.who-ai,.bubble.who-user{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:6px;}

.who{font-size:11.5px;color:var(--ink-3);margin:0 4px;}

.chat-msg{display:flex;margin-bottom:14px;animation:fadeUp .3s ease both;}

.chat-msg .bubble{max-width:72%;}

.chat-msg .who{margin-bottom:4px;}

.chat-msg.me{justify-content:flex-end;}

.chat-msg.me .bubble{background:var(--violet-g);color:#fff;border-bottom-right-radius:4px;box-shadow:0 3px 10px rgba(124,113,168,.2);}

.chat-msg.me .who{text-align:right;color:var(--violet-d);}

.chat-msg.other .bubble{background:var(--card);border:1px solid var(--line);border-bottom-left-radius:4px;}

.chat-msg.ai .bubble{background:var(--violet-l);border:1px solid var(--line);border-bottom-left-radius:4px;}

.chat-msg.sys{justify-content:center;}

.chat-msg.sys .bubble{background:transparent;box-shadow:none;color:var(--ink-3);font-size:12px;padding:2px 10px;}

.ai-shell{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-s);padding:18px;}

.ai-box{max-height:56vh;overflow-y:auto;padding:6px 2px;overscroll-behavior:contain;}

.ai-msg{margin:10px 0;display:flex;gap:10px;animation:fadeUp .3s ease both;}

.ai-msg>div{max-width:82%;}

.ai-msg .bubble{margin:0;}

.ai-msg .bot .bubble,.ai-msg.bot .bubble{background:var(--violet-l);border-radius:4px 16px 16px 16px;padding:12px 16px;line-height:1.85;font-size:13.5px;border:1px solid var(--line);}

.ai-msg.user{justify-content:flex-end;}

.ai-msg.user .who{text-align:right;color:var(--violet-d);}

.ai-msg .box,.ai-msg.user .bubble{margin-left:auto;background:var(--violet-g);color:#fff;border-radius:16px 4px 16px 16px;padding:12px 16px;line-height:1.75;box-shadow:0 3px 10px rgba(124,113,168,.2);border:none;}

.ai-input{display:flex;gap:10px;margin-top:14px;}

.ai-input input{flex:1;min-width:0;}

.ai-input .btn{flex:none;}

.ai-quick{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0;}

.ai-quick button:not([class]),.ai-quick .btn{border-radius:var(--r-pill);font-size:12.5px;padding:6px 14px;}



/* ================= 17. 新手引导 / 风控 / 悬浮编辑 ================= */

.ob-mask{position:fixed;inset:0;background:rgba(40,33,56,.42);backdrop-filter:blur(3px);z-index:var(--z-toast);animation:fadeIn .25s ease both;}

.ob-box{

    position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1401;

    width:min(560px,92vw);max-height:86vh;overflow-y:auto;overscroll-behavior:contain;

    background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);

    box-shadow:var(--shadow-h);padding:22px;animation:pop .4s var(--ease) both;

}

.ob-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;}

.ob-title{font-family:var(--serif);font-size:18px;font-weight:700;letter-spacing:2px;}

.ob-close{margin-left:auto;border:1px solid var(--line);background:var(--paper-2);min-width:34px;height:34px;border-radius:99px;cursor:pointer;font-size:13px;color:var(--ink-2);padding:0 12px;transition:all .2s;}

.ob-close:hover{color:var(--violet-dd);border-color:var(--violet);}

.ob-body{line-height:1.9;color:var(--ink-2);font-size:13.5px;}

.ob-steps{margin:14px 0;display:flex;flex-direction:column;gap:12px;}

.ob-step{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);transition:border-color .25s;}

.ob-step .ob-num{display:inline-flex;width:26px;height:26px;border-radius:50%;background:var(--violet-g);color:#fff;align-items:center;justify-content:center;font-size:12.5px;margin-right:0;flex:none;font-weight:700;}

.ob-step.done{border-color:color-mix(in srgb,var(--green) 35%,transparent);background:var(--green-l);}

.ob-step.done .ob-num{background:var(--green);}

.ob-step.done .ob-t{color:var(--green);}

.ob-steps .ob-t{font-weight:700;color:var(--violet-dd);margin:0 0 3px;letter-spacing:.5px;}

.ob-steps .ob-d{font-size:12.5px;color:var(--ink-2);line-height:1.7;}

.ob-foot{display:flex;gap:10px;margin-top:18px;align-items:center;flex-wrap:wrap;}

.ob-btn{flex:1;}

.ob-never{font-size:12.5px;color:var(--ink-3);cursor:pointer;}

.ob-fab{

    position:fixed;right:20px;bottom:calc(90px + env(safe-area-inset-bottom,0px));z-index:900;

    min-width:46px;height:46px;border-radius:99px;border:none;cursor:pointer;padding:0 18px;

    background:var(--violet-g);color:#fff;font-size:13.5px;letter-spacing:1px;

    box-shadow:0 8px 22px rgba(124,113,168,.35);transition:transform .25s,box-shadow .25s;

}

.ob-fab:hover{filter:brightness(1.05);}

.ob-tip{font-size:12.5px;color:var(--ink-3);margin-top:10px;}

.risk-box{background:var(--rouge-l);border:1.5px solid var(--rouge);border-radius:var(--r-lg);padding:20px 22px;margin:14px 0;}

.risk-desc{line-height:1.9;color:var(--ink-2);font-size:13.5px;}

.ta-modal{position:fixed;inset:0;z-index:1400;display:flex;align-items:center;justify-content:center;background:rgba(40,33,56,.42);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .22s ease both;padding:20px;}

.ta-modal-box{width:min(760px,94vw);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;box-shadow:var(--shadow-h);animation:pop .3s var(--ease-pop) both;}

.ta-modal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}

.ta-modal-title{font-family:var(--serif);font-weight:700;font-size:15px;color:var(--ink);letter-spacing:1px;}

.ta-modal-close{padding:7px 20px;border:none;border-radius:var(--r-pill);cursor:pointer;background:var(--violet-g);color:#fff;font-size:13px;font-weight:600;transition:all .2s;font-family:var(--sans);min-height:0;}

.ta-modal-close:hover{filter:brightness(1.06);}

.ta-modal-area{width:100%;height:min(46vh,420px);padding:14px 16px;font-size:14px;line-height:1.9;border:1.5px solid var(--line);border-radius:var(--r-md);resize:none;background:var(--paper);color:var(--ink);}

.ta-modal-area:focus{outline:none;border-color:var(--violet);box-shadow:0 0 0 4px var(--violet-l);box-shadow:0 0 0 4px color-mix(in srgb,var(--violet) 13%,transparent);}

.ta-modal-count{margin-top:8px;text-align:right;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;}

.ta-expand-btn{margin-top:6px;padding:4px 12px;font-size:12px;border:1px dashed var(--violet);border-radius:var(--r-sm);background:transparent;color:var(--violet-d);cursor:pointer;transition:all .2s;min-height:0;}

.ta-expand-btn:hover{background:var(--violet-l);border-style:solid;}



/* ================= 18. Toast / 回顶 / 进度条 / 离线 ================= */

.toast{position:fixed;left:50%;bottom:40px;transform:translateX(-50%) translateY(20px);z-index:var(--z-toast);background:rgba(52,46,66,.94);color:#f5f2fa;padding:11px 26px;border-radius:var(--r-pill);font-size:13px;letter-spacing:.5px;box-shadow:0 10px 26px rgba(40,33,56,.3);opacity:0;pointer-events:none;transition:all .3s;max-width:88vw;text-align:center;}

.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

.toast-stack{position:fixed;left:50%;bottom:44px;transform:translateX(-50%);z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:max-content;max-width:92vw;}

.toast-item{display:flex;align-items:center;gap:8px;background:rgba(52,46,66,.94);color:#f5f2fa;padding:10px 20px;border-radius:var(--r-pill);font-size:13px;letter-spacing:.5px;box-shadow:0 10px 26px rgba(40,33,56,.3);animation:toastIn .32s var(--ease-pop) both;max-width:92vw;backdrop-filter:blur(8px);}

body.dark .toast-item{background:rgba(230,225,240,.95);color:#2c2740;}

.toast-item.out{animation:toastOut .28s ease both;}

.toast-item .t-ico{width:16px;height:16px;flex:none;display:flex;}

.toast-item.t-ok .t-ico{color:#8fc7a4;}

.toast-item.t-err .t-ico{color:#eba8bd;}

.toast-item.t-info .t-ico{color:#b9abe0;}

body.dark .toast-item.t-ok .t-ico{color:#3d7357;}

body.dark .toast-item.t-err .t-ico{color:#a84675;}

body.dark .toast-item.t-info .t-ico{color:#6554b8;}

@keyframes toastIn{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}

@keyframes toastOut{to{opacity:0;transform:translateY(5px);}}

#backTop{position:fixed;right:22px;bottom:26px;width:44px;height:44px;border-radius:50%;border:none;z-index:900;background:var(--violet-g);color:#fff;font-size:17px;cursor:pointer;box-shadow:0 6px 18px rgba(124,113,168,.34);opacity:0;pointer-events:none;transition:all .3s;transform:translateY(10px);}

#backTop.show{opacity:1;pointer-events:auto;transform:translateY(0);}

#backTop svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);}

#backTop .bt-arrow{position:relative;z-index:1;}

.pagebar{position:fixed;top:0;left:0;height:2px;z-index:var(--z-bar);width:0;background:var(--violet);border-radius:0 2px 2px 0;transition:width .3s var(--ease),opacity .4s;}

.offline-bar{position:fixed;top:0;left:0;right:0;z-index:var(--z-offline);background:#96647c;color:#fff;text-align:center;font-size:12.5px;padding:7px 12px;letter-spacing:.5px;transform:translateY(-100%);transition:transform .35s var(--ease);}

.offline-bar.on{transform:none;}

.copy-flash{animation:copyFlash .5s ease;}

@keyframes copyFlash{0%{background:var(--green-l);}100%{background:var(--paper-2);}}

.pre-copy{position:absolute;top:8px;right:8px;padding:4px 12px;font-size:11.5px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--ink-3);cursor:pointer;opacity:0;transition:all .2s;min-height:0;z-index:2;}

pre:hover .pre-copy{opacity:1;}

.pre-copy:hover{color:var(--violet-dd);border-color:var(--violet);}

@media (hover:none){.pre-copy{opacity:.85;}}

a.ext-link::after{content:"↗";font-size:.75em;margin-left:2px;opacity:.45;}



/* ================= 19. 底部抽屉 / 指令面板 ================= */

.sheet-mask{position:fixed;inset:0;z-index:var(--z-sheet);background:rgba(40,33,56,.42);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .3s;}

.sheet-mask.on{opacity:1;}

.sheet{position:fixed;left:0;right:0;bottom:0;z-index:1201;background:var(--card);border-radius:22px 22px 0 0;border-top:1px solid var(--line);box-shadow:0 -10px 44px rgba(40,33,56,.22);padding:12px 18px calc(18px + env(safe-area-inset-bottom,0px));transform:translateY(102%);transition:transform .36s var(--ease);max-height:82vh;overflow-y:auto;overscroll-behavior:contain;}

.sheet.on{transform:translateY(0);}

.sheet-grip{width:40px;height:4px;border-radius:99px;background:var(--line);margin:0 auto 14px;}

.sheet-title{font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:3px;text-align:center;margin-bottom:14px;color:var(--ink);}

.sheet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;}

.sheet-grid a{display:flex;flex-direction:column;align-items:center;gap:7px;padding:13px 4px;border-radius:var(--r-md);color:var(--ink-2);font-size:11.5px;transition:background .2s,color .2s;position:relative;}

.sheet-grid a:hover{background:var(--violet-l);color:var(--violet-dd);}

.sheet-grid a.on{background:var(--violet-l);color:var(--violet-dd);font-weight:700;}

.sheet-grid a svg{width:22px;height:22px;}

.sheet-grid a .nav-badge{position:absolute;top:4px;right:calc(50% - 23px);}

.sheet-actions{display:flex;gap:8px;margin-top:16px;padding-top:14px;border-top:1px dashed var(--line);flex-wrap:wrap;justify-content:center;}

.sheet-actions button{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--paper);color:var(--ink-2);font-size:12.5px;cursor:pointer;transition:all .2s;min-height:0;}

.sheet-actions button:hover{border-color:var(--violet);color:var(--violet-dd);background:var(--violet-l);}

@media (min-width:721px){

    .sheet{left:50%;right:auto;bottom:24px;transform:translate(-50%,120%);width:min(560px,94vw);border-radius:var(--r-lg);padding-bottom:18px;border:1px solid var(--line);}

    .sheet.on{transform:translate(-50%,0);}

}

.cmdk-mask{position:fixed;inset:0;z-index:var(--z-cmdk);background:rgba(40,33,56,.4);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:12vh 16px 16px;opacity:0;transition:opacity .22s;}

.cmdk-mask.on{opacity:1;}

.cmdk{width:min(560px,100%);background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-h);overflow:hidden;transform:translateY(6px);transition:transform .26s var(--ease-out);}

.cmdk-mask.on .cmdk{transform:none;}

.cmdk-input{width:100%;border:none!important;background:transparent!important;padding:16px 20px;font-size:15px;box-shadow:none!important;border-radius:0;border-bottom:1px solid var(--line)!important;min-height:0;}

.cmdk-list{max-height:min(46vh,380px);overflow-y:auto;padding:8px;overscroll-behavior:contain;}

.cmdk-item{display:flex;align-items:center;gap:11px;padding:10px 13px;border-radius:var(--r-sm);color:var(--ink-2);font-size:13.5px;cursor:pointer;transition:background .15s;}

.cmdk-item svg{width:18px;height:18px;flex:none;color:var(--ink-3);}

.cmdk-item .cmdk-hint{margin-left:auto;font-size:11px;color:var(--ink-3);}

.cmdk-item.sel{background:var(--violet-l);color:var(--violet-dd);}

.cmdk-item.sel svg{color:var(--violet-d);}

.cmdk-empty{padding:30px;text-align:center;color:var(--ink-3);font-size:13px;}



/* ================= 20. 登录 / 引导页 ================= */

body.login-bg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px 16px;

    background:
        radial-gradient(900px 500px at 12% 8%,rgba(127,151,187,.20),transparent 60%),
        radial-gradient(700px 460px at 88% 92%,rgba(110,160,205,.16),transparent 60%),
        radial-gradient(rgba(106,130,170,.05) 1px,transparent 1px),
        linear-gradient(160deg,var(--paper),var(--paper-2));
    background-size:auto,auto,24px 24px,auto;}

body.login-bg::before{opacity:.6;}

.login-box{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:20px;padding:28px 26px;box-shadow:0 24px 64px rgba(94,84,138,.16);animation:pop .45s var(--ease) both;}

.login-brand{text-align:center;margin-bottom:24px;}

.login-brand .logo{width:56px;height:56px;margin:0 auto 12px;border-radius:16px;background:var(--violet-g);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:25px;font-weight:700;box-shadow:0 8px 22px rgba(124,113,168,.32);}

.login-box h1{font-size:18px;margin:0;text-align:center;font-family:var(--serif);letter-spacing:2px;}

.login-box .slogan,.subtitle{text-align:center;color:var(--ink-3);font-size:12.5px;margin-top:8px;letter-spacing:1px;}

.login-box input{margin-bottom:14px;padding:12px 16px;}

.login-box .pw-wrap{margin-bottom:14px;}

.login-box .pw-wrap input{margin-bottom:0;}

.login-box .btn{margin-top:6px;}

.login-box .tip,.login-box .hint{display:block;text-align:center;margin-top:14px;}

.login-box button[type=submit],.login-box input[type=submit]{width:100%;padding:12px 20px;border:none;border-radius:var(--r-md);background:var(--violet-g);color:#fff;font-size:14.5px;letter-spacing:2px;font-weight:700;box-shadow:0 6px 18px rgba(124,113,168,.3);transition:all .25s var(--ease);}

.login-box button[type=submit]:hover,.login-box input[type=submit]:hover{filter:brightness(1.06);color:#fff;background:var(--violet-g);}

.login-box button[type=submit]:active{transform:scale(.985);}

.feat,.features{display:flex;gap:10px;justify-content:center;margin-top:18px;flex-wrap:wrap;font-size:12px;color:var(--ink-3);}

.hero{text-align:center;margin-bottom:18px;}

.entries{display:flex;flex-direction:column;gap:10px;}

.entries .entry{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 18px;transition:border-color .2s;display:flex;gap:12px;align-items:center;color:var(--ink);}

.entries .entry:hover{border-color:var(--violet);}

.entries .entry .e-ico{flex:none;}

.entries .entry .e-txt{flex:1;min-width:0;}

.entries .entry .go{text-align:center;margin-top:0;font-size:12.5px;color:var(--violet-d);}

.seal-badge{display:inline-flex;align-items:center;gap:6px;background:var(--violet-l);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 13px;font-size:12px;}

.seal-badge-zh{font-weight:700;color:var(--violet-d);font-family:var(--serif);letter-spacing:1px;}

.seal-badge-en{color:var(--ink-3);font-size:11px;letter-spacing:.5px;}

.seal-badge-stats{font-size:12px;color:var(--ink-3);}



/* ================= 21. 其它组件 ================= */

.skeleton{position:relative;overflow:hidden;background:var(--paper-2);border-radius:var(--r-sm);min-height:14px;}

.skeleton::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transform:translateX(-100%);animation:skl 1.5s infinite;}

body.dark .skeleton::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);}

@keyframes skl{to{transform:translateX(100%);}}

.timeline{position:relative;padding-left:22px;}

.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line);border-radius:2px;}

.timeline .tl-i{position:relative;padding-bottom:16px;}

.timeline .tl-i::before{content:"";position:absolute;left:-21px;top:5px;width:10px;height:10px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 3px var(--violet-l);}

.seg{display:inline-flex;background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px;gap:2px;}

.seg button{border:none;background:transparent;padding:6px 16px;border-radius:var(--r-pill);font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:all .2s;min-height:0;}

.seg button.on{background:var(--card);color:var(--violet-dd);font-weight:700;box-shadow:var(--shadow-s);}

.chip{display:inline-flex;align-items:center;gap:5px;padding:4px 13px;border-radius:var(--r-pill);background:var(--paper-2);border:1px solid var(--line);font-size:12.5px;color:var(--ink-2);cursor:pointer;transition:all .2s;user-select:none;}

.chip:hover{border-color:var(--violet);color:var(--violet-dd);}

.chip.on{background:var(--violet-g);color:#fff;border-color:transparent;}

.avatar{width:38px;height:38px;border-radius:50%;flex:none;display:inline-flex;align-items:center;justify-content:center;background:var(--violet-g);color:#fff;font-weight:700;font-size:15px;font-family:var(--serif);}

.dot-pulse{position:relative;}

.dot-pulse::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid currentColor;opacity:.4;animation:dotPing 1.8s ease-out infinite;}

@keyframes dotPing{from{transform:scale(.6);opacity:.6;}to{transform:scale(1.5);opacity:0;}}

.divider{display:flex;align-items:center;gap:12px;color:var(--ink-3);font-size:12px;margin:18px 0;letter-spacing:2px;}

.divider::before,.divider::after{content:"";flex:1;height:1px;background:var(--line);}

.kbd{display:inline-block;padding:1px 7px;border-radius:6px;font-size:11.5px;background:var(--paper-2);border:1px solid var(--line);border-bottom-width:2px;color:var(--ink-2);font-family:var(--sans);}

#qrbox{text-align:center;}

#qrimg{margin:0 auto;display:block;}

#qrbox .btn,#qrbox+div .btn{margin-top:4px;}



/* ================= 22. 入场动画 ================= */

@keyframes fadeUp{from{opacity:0;transform:translateY(7px);}to{opacity:1;transform:none;}}

@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}

@keyframes pop{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

.wrap .card,.wrap .stats,.wrap .greeting,.wrap .host-grid,.wrap .pkg-grid{animation:fadeUp .5s var(--ease) both;}

.wrap>.card:nth-of-type(2),.wrap>.stats:nth-of-type(2){animation-delay:.06s;}

.wrap>.card:nth-of-type(3),.wrap>.stats:nth-of-type(3){animation-delay:.12s;}

.wrap>.card:nth-of-type(n+4){animation-delay:.18s;}



/* ================= 23. 移动端深度适配（≤720px） ================= */

@media (max-width:720px){

    html{scroll-padding-top:62px;}

    body{font-size:14px;padding-bottom:calc(70px + env(safe-area-inset-bottom,0px));}

    .wrap{margin:12px auto;padding:0 12px;max-width:100%;}



    /* 顶栏紧凑不挤压 */

    .topbar{min-height:52px;padding:0 12px;gap:8px;background:var(--paper);background:color-mix(in srgb,var(--paper) 88%,transparent);}

    .topbar .seal{width:29px;height:29px;border-radius:9px;font-size:14px;}

    .topbar .brand{gap:8px;}

    .topbar .brand-t{font-size:14px;letter-spacing:.5px;max-width:38vw;}

    .topbar-right{gap:6px;}

    .top-clock{display:none;}

    .top-logout{padding:6px 12px;font-size:12px;}

    .dark-toggle,.top-search{width:33px;height:33px;}



    /* 底部标签栏 */

    .side{

        position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;height:auto;z-index:var(--z-side);

        background:var(--card);

        background:color-mix(in srgb,var(--card) 94%,transparent);

        backdrop-filter:blur(20px) saturate(1.2);-webkit-backdrop-filter:blur(20px) saturate(1.2);

        border-top:1px solid var(--line);

        box-shadow:0 -4px 24px rgba(94,84,138,.09);

        padding:6px 10px calc(6px + env(safe-area-inset-bottom,0px));

        overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;

    }

    .side::-webkit-scrollbar{display:none;}

    .side-nav{flex-direction:row;gap:2px;width:max-content;min-width:100%;justify-content:flex-start;}

    .side-nav.nav-5{width:100%;justify-content:space-around;}

    .side-i{flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:6px 10px;min-width:60px;min-height:50px;border-radius:14px;font-size:11px;transition:background .25s var(--ease),transform .15s;}

    .side-i:active{transform:scale(.94);}

    .side-i .side-ico,.side-i .side-ico svg{width:21px;height:21px;}

    .side-i .side-t{font-size:10.5px;letter-spacing:.3px;}

    .side-i .nav-badge{position:absolute;top:2px;right:calc(50% - 21px);min-width:15px;height:14px;line-height:14px;font-size:9px;padding:0 4px;}

    .side-i.tab-more.on{background:var(--paper-2);box-shadow:none;}



    /* 悬浮元素避让底栏，三层错位互不遮挡 */

    #backTop{bottom:calc(88px + env(safe-area-inset-bottom,0px));right:14px;width:40px;height:40px;font-size:16px;}

    .toast,.toast-stack{bottom:calc(96px + env(safe-area-inset-bottom,0px));}

    .ob-fab{bottom:calc(148px + env(safe-area-inset-bottom,0px));height:44px;font-size:13px;padding:0 16px;}

    .footer{padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px));font-size:11.5px;}



    /* 触控目标 */

    .btn{min-height:42px;padding:10px 18px;}

    .btn-sm{min-height:36px;padding:7px 14px;}

    .btn-mini{min-height:32px;padding:4px 12px;}

    input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px;padding:12px 15px;min-height:46px;border-radius:12px;}

    textarea{min-height:96px;}

    input[type=checkbox],input[type=radio]{width:21px!important;height:21px!important;min-width:21px;max-width:21px;}

    input[type=checkbox]:checked::after{left:6px;top:2.5px;width:5px;height:10px;}

    .renew-sel{min-height:36px;}

    .pw-eye{top:6px;}

    .captcha-img{height:46px;}



    /* 卡片节奏 */

    .card{padding:15px 14px;border-radius:15px;margin-bottom:11px;}

    .card h2{font-size:15px;margin-bottom:13px;padding-bottom:9px;letter-spacing:1.5px;}

    .greeting{padding:15px 18px;border-radius:15px;margin-bottom:11px;}

    .greeting .g-title{font-size:17px;letter-spacing:2px;}

    .greeting .g-sub{font-size:12px;}

    .stats{gap:10px;margin-bottom:13px;}

    .stats{grid-template-columns:repeat(2,1fr);gap:9px;}

    .stat{min-width:0;padding:11px 13px;border-radius:13px;}

    .stat .num{font-size:20px;}

    .host-grid{grid-template-columns:1fr;gap:12px;}

    .host-card{padding:14px;border-radius:14px;}

    .host-card .hc-specs{gap:7px;}

    .host-card .hc-ops>.btn{flex:1 1 calc(50% - 7px);justify-content:center;}

    .host-card .hc-ops>.inline-form{flex:1 1 100%;display:flex;}

    .host-card .hc-ops>.inline-form .renew-sel{flex:1;width:auto;max-width:none;}

    .host-card .hc-ops>.inline-form .btn{flex:none;}

    .pkg-grid{grid-template-columns:1fr;gap:11px;}

    .pkg-item .pkg-box{padding:16px;}

    .pkg-item .pkg-price{font-size:19px;}

    .doc-card{padding:18px 15px;border-radius:16px;}

    .doc-head{display:flex;flex-direction:column;gap:10px;}

    .doc-search{max-width:100%;}

    .doc-tools{margin:0;}

    .doc-toc{columns:1;}

    .trend-item{min-width:100%;}



    /* 聊天吸附底部 */

    .chat-box{max-height:50vh;}

    .chat-input{position:sticky;bottom:0;z-index:5;background:var(--card);padding:10px 0 2px;border-top:1px dashed var(--line);}

    .ai-input{position:sticky;bottom:0;z-index:5;background:var(--card);padding:10px 0 2px;border-top:1px dashed var(--line);}

    .chat-msg .bubble{max-width:88%;}

    .ai-shell{padding:16px;}

    .ai-msg>div{max-width:92%;}



    /* 页签横滑 */

    .tabs{width:100%;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;scroll-snap-type:x proximity;}

    .tabs::-webkit-scrollbar{display:none;}

    .tabs a{flex:1 0 auto;justify-content:center;scroll-snap-align:center;}

    .tabs-sub{flex:none;}



    /* 表格卡片化 */

    table.tb.tb-cardify thead{display:none;}

    table.tb.tb-cardify tr:has(>th){display:none;}

    table.tb.tb-cardify,table.tb.tb-cardify tbody,table.tb.tb-cardify tr,table.tb.tb-cardify td{display:block;width:100%;}

    table.tb.tb-cardify tbody tr{background:var(--card)!important;border:1px solid var(--line);border-radius:15px;margin-bottom:11px;padding:5px 14px 5px 17px;box-shadow:var(--shadow-s);position:relative;overflow:hidden;}

    table.tb.tb-cardify tbody tr::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:99px;background:var(--violet);opacity:.5;}

    table.tb.tb-cardify td{border-bottom:1px dashed var(--line);padding:10px 0;display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:right;font-size:13px;min-height:24px;flex-wrap:wrap;}

    table.tb.tb-cardify td:last-child{border-bottom:none;}

    table.tb.tb-cardify td::before{content:attr(data-label);color:var(--ink-3);font-size:11px;flex:none;font-weight:600;letter-spacing:1px;}

    table.tb.tb-cardify td[data-label=""]::before{display:none;}

    table.tb.tb-cardify td[data-label=""]{justify-content:flex-end;}

    table.tb.tb-cardify td .inline-form{justify-content:flex-end;}

    table.tb.tb-cardify td .mono{font-size:11.5px;}

    .tb-wrap:has(table.tb-cardify){border:none;overflow:visible;background:transparent;}

    table.tb:not(.tb-cardify){white-space:nowrap;}

    .tb-filter{max-width:100%;}

    .tb-filter input{min-height:40px;font-size:14px;}

    .logdetail{max-width:100%;}



    /* 弹层底部抽屉化 */

    .ob-box{left:0;right:0;top:auto;bottom:0;transform:none;width:100%;max-height:86vh;border-radius:22px 22px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom,0px));animation:sheetUp .36s var(--ease) both;}

    @keyframes sheetUp{from{transform:translateY(22px);opacity:0;}to{transform:none;opacity:1;}}

    .ta-modal{padding:0;align-items:flex-end;}

    .ta-modal-box{width:100%;border-radius:22px 22px 0 0;padding:18px 16px calc(16px + env(safe-area-inset-bottom,0px));animation:sheetUp .32s var(--ease) both;}

    .ta-modal-area{height:38vh;}

    dialog{position:fixed;bottom:0;left:0;right:0;top:auto;margin:0;max-width:100%;width:100%;border-radius:22px 22px 0 0;padding:22px 20px calc(20px + env(safe-area-inset-bottom,0px));}

    .risk-box{border-radius:16px;}

    .login-box{padding:30px 22px;border-radius:20px;}



    /* 分页 / 向导 */

    .pagination{gap:6px;justify-content:center;}

    .pagination a,.pagination span{min-width:38px;height:38px;line-height:38px;border-radius:11px;}

    .wz-dot span{display:none;}

    .wz-steps::before{left:8%;right:8%;}

    .wz-step{min-width:0;padding:4px 2px;}

    .wz-nav{position:sticky;bottom:0;z-index:5;background:var(--card);padding:12px 0 calc(6px + env(safe-area-inset-bottom,0px));margin-top:14px;}

    .wz-nav .btn{flex:1;}

    .wz-tip{display:none;}

    .dur-ticks span{min-width:64px;font-size:12px;padding:8px 0;}

    .dur-t{min-width:68px;padding:11px 14px;font-size:13.5px;}

    .dur-strip{padding:4px 0;}

    .cmdk-mask{padding-top:8vh;}

    .cmdk{border-radius:17px;}

    #qrimg{width:min(240px,70vw)!important;height:auto!important;aspect-ratio:1;}

    .reflink-ops{margin-left:0;width:100%;justify-content:flex-end;}

    .form-stick{bottom:calc(74px + env(safe-area-inset-bottom,0px));}

    body.standalone{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px));}

}



/* ================= 24. 小屏精修（≤380px） ================= */

@media (max-width:380px){

    html{font-size:14px;}

    .stat .num{font-size:19px;}

    .side-i{min-width:54px;padding:6px 8px;}

    .topbar .brand-t{max-width:30vw;font-size:13.5px;}

    .greeting .g-title{font-size:16px;}

    .host-card .hc-spec b{font-size:12px;}

    .card h2{font-size:14px;}

    .btn{padding:10px 14px;}

    .sheet-grid{grid-template-columns:repeat(4,1fr);}

}



/* ================= 25. 横屏矮屏 ================= */

@media (max-width:920px) and (max-height:500px){

    .side-i{min-height:42px;padding:4px 10px;}

    .side{padding-top:3px;}

    body{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px));}

}



/* ================= 26. 平板（721–1024px） ================= */

@media (min-width:721px) and (max-width:1024px){

    .side{width:192px;}

    .wrap{padding:0 16px;}

    .stats{gap:10px;}

    .stats{grid-template-columns:repeat(3,1fr);}

    .host-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}

}



/* ================= 27. 宽屏（≥1440px） ================= */

@media (min-width:1440px){

    .wrap{max-width:1260px;}

    .side{width:232px;}

}



/* ================= 28. 深色微调 ================= */

body.dark .login-box{background:var(--card);}

body.dark input[type=checkbox],body.dark input[type=radio]{border-color:#574b78;}



/* ================= 29. 打印 ================= */

@media print{

    .topbar,.side,#backTop,.ob-fab,.toast,.toast-stack,.dark-toggle,.top-search,

    .pagebar,.offline-bar,.sheet,.sheet-mask,.cmdk-mask,body::before{display:none!important;}

    .card{box-shadow:none;border:1px solid #ddd;page-break-inside:avoid;}

    body{background:#fff;padding-bottom:0;}

}



/* ================= 30. 动效与操作反馈系统（v7.1） ================= */



/* 动效令牌：统一的节奏语言 */

:root{

    --dur-1:.14s;                /* 微反馈（按压/hover） */

    --dur-2:.24s;                /* 常规过渡 */

    --dur-3:.4s;                 /* 入场/弹层 */

    --ease-out:cubic-bezier(.22,.9,.32,1);

    --ease-spring:cubic-bezier(.25,.9,.3,1);

}



/* --- 按压反馈：一切可点元素 --- */

.btn:active,.side-i:active,.tabs a:active,.chip:active,

.sheet-grid a:active,.cmdk-item:active,.pkg-box:active,

.pagination a:active,.entry:active{transform:scale(.985);}

.btn,.side-i,.tabs a,.chip,.pagination a{transition:transform var(--dur-1) var(--ease-out),background var(--dur-2),color var(--dur-2),border-color var(--dur-2),box-shadow var(--dur-2);}



/* --- 卡片入场：滚动揭示（JS 驱动，无 JS 时直接可见） --- */

.rv-arm{opacity:0;transform:translateY(9px);}

.rv-in{opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out);}

/* 旧的整页 fadeUp 交由揭示系统接管，避免双重动画 */

.wrap .card,.wrap .stats,.wrap .greeting,.wrap .host-grid,.wrap .pkg-grid{animation:none;}



/* --- 提示条入场 --- */

.alert,.ok-banner,.warn,.upstream-banner{animation:alertIn .38s var(--ease-out) both;}

@keyframes alertIn{from{opacity:0;transform:translateY(-4px);}to{opacity:1;transform:none;}}

.alert.alert-shake{animation:shake .45s ease;}



/* --- 按钮成功反馈：对勾闪现 --- */

.btn.feedback-ok{background:var(--green)!important;border-color:transparent!important;color:#fff!important;box-shadow:0 4px 14px rgba(124,160,136,.35);}

.btn.feedback-ok::before{content:"✓";margin-right:2px;font-weight:700;}



/* --- 字段校验通过：淡绿描边 + 对勾 --- */

.form-row.f-ok>input,.form-row.f-ok>select,.form-row.f-ok>textarea,

.form-row.f-ok>.pw-wrap>input{border-color:color-mix(in srgb,var(--green) 55%,var(--line))!important;}

.form-row.f-ok>input,.form-row.f-ok>select,.form-row.f-ok>textarea{padding-right:36px;}

.form-row.f-ok::after{

    content:"✓";position:absolute;right:13px;top:33px;

    color:var(--green);font-size:13px;font-weight:700;

    animation:tickIn .3s var(--ease-spring) both;pointer-events:none;

}

.form-row.f-ok:has(.pw-wrap)::after{content:none;}

.form-row.f-ok:has(.pw-wrap)>input,.form-row.f-ok:has(.pw-wrap) input{}



@keyframes tickIn{from{opacity:0;transform:scale(.75);}to{opacity:1;transform:scale(1);}}



/* --- 角标数值变化弹跳 --- */

.nav-badge.bump{animation:badgeBump .45s var(--ease-spring);}

@keyframes badgeBump{0%{transform:scale(.92);}55%{transform:scale(1.1);}100%{transform:scale(1);}}



/* --- 排序列高亮 --- */

table.tb th.sort-asc,table.tb th.sort-desc{background:var(--violet-l);color:var(--violet-dd);}

table.tb td.col-sorted{background:var(--violet-l);background:color-mix(in srgb,var(--violet-l) 45%,transparent);}



/* --- 底栏激活项滑动指示（JS 驱动的 FLIP 胶囊） --- */

.nav-ink{

    position:absolute;z-index:0;border-radius:14px;pointer-events:none;

    background:var(--violet-l);

    box-shadow:inset 0 0 0 1px var(--line);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--violet) 26%,transparent);

    transition:left .42s var(--ease-out),width .42s var(--ease-out),top .42s var(--ease-out),height .42s var(--ease-out),opacity .2s;

    opacity:0;

}

.side-nav{position:relative;}

.side-nav .side-i{z-index:1;}

@media (max-width:720px){

    .side-nav.ink-on .side-i.on{background:transparent;box-shadow:none;}      /* 激活背景交给滑动胶囊（仅胶囊就位时） */

    .side-i.on .side-t,.side-i.on .side-ico{color:var(--violet-dd);}

}

@media (min-width:721px){.nav-ink{display:none;}}



/* --- 主题切换平滑过渡 --- */

html.theme-anim body,html.theme-anim .card,html.theme-anim .topbar,html.theme-anim .side,

html.theme-anim input,html.theme-anim select,html.theme-anim textarea,html.theme-anim .btn,

html.theme-anim .stat,html.theme-anim .host-card,html.theme-anim .tabs,html.theme-anim .alert,

html.theme-anim .pkg-box,html.theme-anim table.tb th,html.theme-anim table.tb td,

html.theme-anim .chat-box,html.theme-anim .bubble,html.theme-anim .doc-sec,html.theme-anim .tag{

    transition:background-color .32s ease,border-color .32s ease,color .32s ease,box-shadow .32s ease!important;

}



/* --- 页面离开淡出（配合顶部进度条） --- */

body.leaving .wrap,body.leaving .topbar{opacity:.45;transition:opacity .18s ease;}



/* --- 聊天输入中状态 --- */

.typing-dots{display:inline-flex;gap:4px;padding:10px 14px;}

.typing-dots i{width:6px;height:6px;border-radius:50%;background:var(--ink-3);animation:tp 1.1s infinite;}

.typing-dots i:nth-child(2){animation-delay:.18s;}

.typing-dots i:nth-child(3){animation-delay:.36s;}

@keyframes tp{0%,60%,100%{transform:translateY(0);opacity:.5;}30%{transform:translateY(-4px);opacity:1;}}



/* --- Toast 增加进度条变体 --- */

.toast-item{position:relative;overflow:hidden;}

.toast-item .t-bar{position:absolute;left:0;bottom:0;height:2px;background:rgba(255,255,255,.45);border-radius:2px;animation:tbar linear forwards;}

body.dark .toast-item .t-bar{background:rgba(60,50,90,.4);}

@keyframes tbar{from{width:100%;}to{width:0;}}



/* --- 表格行按压 --- */

table.tb tbody tr{transition:background .2s;}

table.tb tbody tr:active{background:var(--violet-l);}



/* --- 顶栏滚动收缩 --- */

.topbar{transition:min-height .28s var(--ease-out),box-shadow .3s;}

@media (min-width:721px){

    .topbar.scrolled{min-height:50px;}

}



/* --- 锚点跳转目标闪烁提示 --- */

.anchor-flash{animation:anchorFlash 1.6s ease;}

@keyframes anchorFlash{0%,100%{background:transparent;}25%{background:var(--violet-l);}}



/* --- 骨架呼吸 --- */

.skeleton{animation:sklBreath 1.8s ease-in-out infinite;}

@keyframes sklBreath{0%,100%{opacity:1;}50%{opacity:.72;}}



/* --- 复制成功对勾 --- */

.copy-flash{animation:copyFlash .5s ease;}



/* --- 空态淡入 --- */

.empty,.empty-state{animation:fadeUp .4s var(--ease-out) both;}



/* --- 新手引导步骤依次浮现 --- */

.ob-step{animation:fadeUp .4s var(--ease-out) both;}

.ob-step:nth-child(2){animation-delay:.08s;}

.ob-step:nth-child(3){animation-delay:.16s;}

.ob-step:nth-child(4){animation-delay:.24s;}



/* --- 抽屉项目错峰浮现 --- */

.sheet.on .sheet-grid a{animation:fadeUp .32s var(--ease-out) both;}

.sheet.on .sheet-grid a:nth-child(4n+2){animation-delay:.04s;}

.sheet.on .sheet-grid a:nth-child(4n+3){animation-delay:.08s;}

.sheet.on .sheet-grid a:nth-child(4n){animation-delay:.12s;}



/* --- 减少动态偏好覆盖 --- */

@media (prefers-reduced-motion:reduce){

    .rv-arm{opacity:1;transform:none;}

    .nav-ink{transition:none;}

    .typing-dots i{animation:none;}

}



/* ================= 31. v8.0 布局深度精修（电脑 + 手机） ================= */



/* --- 布局节奏：区块呼吸一致 --- */

.wrap>.card:last-child,.wrap>.host-grid:last-child{margin-bottom:4px;}

.shell{align-items:stretch;}

.side{align-self:flex-start;}



/* --- 电脑端侧栏：分组呼吸与精致 hover --- */

@media (min-width:721px){

    .side-i{margin-bottom:2px;}

    .side-i:hover{padding-left:16px;}

    .side-i{transition:background .22s var(--ease),color .22s,padding .22s var(--ease);}

}



/* --- 统计卡等高对齐 --- */

.stats{align-items:stretch;}

.stat{display:flex;flex-direction:column;justify-content:center;}



/* --- 表格首列强调、末列操作右齐 --- */

table.tb td:first-child{font-weight:500;color:var(--ink);}

table.tb td:last-child .inline-form{margin-right:0;}



/* --- 卡片标题与内容间距规范 --- */

.card p{margin:8px 0;}

.card>*:last-child{margin-bottom:0;}



/* --- 登录页：垂直节奏优化 --- */

.login-box form{margin-top:18px;}

.login-box .captcha-row{margin-bottom:14px;}



/* --- 页脚与内容拉开 --- */

.footer{margin-top:14px;}



/* --- 文档页目录双栏仅在宽屏 --- */

@media (max-width:900px){.doc-toc{columns:1;}}



/* --- 手机端布局精修 --- */

@media (max-width:720px){

    /* 内容左右留白统一 12px，卡片圆角统一 */

    .wrap{padding:0 12px;}

    /* 问候横幅与统计卡间距一致 */

    .greeting{margin-bottom:13px;}

    /* 表单行距收紧，拇指路径更短 */

    .form-row{margin-bottom:13px;}

    /* 表格筛选框通栏 */

    .tb-filter{margin-bottom:11px;}

    /* 底栏项目均分且居中（nav-5 模式） */

    .side-nav.nav-5 .side-i{flex:1;min-width:0;}

    /* 主机卡规格格 2×2（小屏不挤） */

    .host-card .hc-specs{grid-template-columns:repeat(4,1fr);}

    /* 抽屉九宫格行高舒适 */

    .sheet-grid a{padding:14px 4px;}

    /* 指令面板更贴顶 */

    .cmdk-mask{padding-top:6vh;}

    /* 分页居中且加大触控 */

    .pagination{margin-top:14px;}

}



@media (max-width:380px){

    .host-card .hc-specs{grid-template-columns:repeat(2,1fr);}

}



/* --- 横屏时内容不再过宽 --- */

@media (min-width:721px) and (max-height:500px){

    .wrap{max-width:1000px;}

}



/* ---------- 消息铃铛（v4.2） ---------- */

.top-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink-2);transition:all .22s;}

.top-bell:hover{color:var(--violet-d);border-color:var(--violet);background:var(--violet-l);transform:translateY(-1px);}

.bell-dot{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;line-height:17px;text-align:center;background:linear-gradient(135deg,var(--rouge),var(--rouge-d));color:#fff;border-radius:999px;font-size:10px;font-weight:700;padding:0 4px;box-shadow:0 2px 6px rgba(133,81,144,.4);}



/* ---------- v8.5 导航精修 + 青碧色系 ---------- */

@media (min-width:721px){

    .side-i{overflow:hidden;}

    .side-i::before{

        content:"";position:absolute;left:0;top:50%;transform:translateY(-50%) scaleY(0);

        width:3.5px;height:60%;border-radius:99px;background:var(--violet-g);

        transition:transform .25s var(--ease);

    }

    .side-i:hover::before{transform:translateY(-50%) scaleY(1);}

    .side-i.on::before{transform:translateY(-50%) scaleY(1);background:rgba(255,255,255,.85);}

    .side-i .side-ico{color:var(--ink-3);transition:color .22s;}

    .side-i:hover .side-ico{color:var(--violet-d);}

    .side-i.on .side-ico{color:#fff;}

}



/* ---------- v8.7 导航分组标题 ---------- */

@media (min-width:721px){

    .side-group{

        padding:14px 13px 5px;font-size:11px;letter-spacing:1.5px;

        color:var(--ink-3);font-weight:700;user-select:none;

    }

    .side-group:first-child{padding-top:4px;}

}

@media (max-width:720px){

    .side-group{display:none;}

}



/* ---------- v8.8 公告卡片 ---------- */

.ann{

    display:flex;align-items:flex-start;gap:14px;position:relative;

    background:linear-gradient(135deg,var(--violet-l),color-mix(in srgb,var(--violet-l) 55%,var(--card)));

    border:1px solid var(--line);border-left:4px solid var(--violet-d);

    border-radius:var(--r-md);padding:16px 46px 16px 18px;margin-bottom:18px;

    box-shadow:var(--shadow-s);animation:fadeUp .4s var(--ease) both;

}

.ann-ico{

    flex:none;width:38px;height:38px;border-radius:12px;

    background:var(--violet-g);color:#fff;display:flex;align-items:center;justify-content:center;

    box-shadow:0 4px 10px rgba(106,90,163,.3);

}

.ann-t{font-weight:700;font-family:var(--serif);letter-spacing:1px;font-size:14.5px;color:var(--violet-dd);}

.ann-c{margin-top:4px;font-size:13.5px;line-height:1.85;color:var(--ink-2);word-break:break-word;}

.ann-x{

    position:absolute;top:10px;right:10px;width:28px;height:28px;border:none;border-radius:50%;

    background:transparent;color:var(--ink-3);font-size:16px;cursor:pointer;transition:all .2s;line-height:1;

}

.ann-x:hover{background:var(--rouge-l);color:var(--rouge-d);}

.ann.ann-hide{display:none;}



/* ---------- v8.9 职员编辑卡 ---------- */

.staff-edit{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);}

.staff-edit input[name=username]{width:140px;flex:none;}

.staff-edit select[name=role]{width:130px;flex:none;}

.staff-edit input[name=password]{width:170px;flex:none;}

@media (max-width:720px){

    .staff-edit input[name=username],.staff-edit select[name=role],.staff-edit input[name=password]{flex:1 1 100%;width:100%;}

}



/* ---------- v9.0 开通主机页（从0重写） ---------- */

.cr-wrap{display:flex;gap:18px;align-items:flex-start;}

.cr-main{flex:1;min-width:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-s);padding:22px 24px;}

.cr-step{margin-bottom:22px;}

.cr-step:last-child{margin-bottom:4px;}

.cr-step-h{

    display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;

    font-size:15px;letter-spacing:1px;color:var(--ink);margin-bottom:12px;

}

.cr-step-h i{

    width:26px;height:26px;border-radius:50%;flex:none;font-style:normal;font-size:13px;

    background:var(--violet-g);color:#fff;display:flex;align-items:center;justify-content:center;

    box-shadow:0 3px 8px rgba(106,90,163,.3);

}

.cr-row{display:flex;gap:14px;flex-wrap:wrap;}

.cr-inp{display:flex;gap:8px;align-items:center;}

.cr-inp input{flex:1;min-width:0;}

.cr-dice{

    flex:none;padding:0 14px;height:41px;border:1px dashed var(--violet);border-radius:var(--r-md);

    background:transparent;color:var(--violet-d);font-size:12.5px;cursor:pointer;transition:all .2s;white-space:nowrap;

}

.cr-dice:hover{background:var(--violet-l);border-style:solid;}

.pkg-node{font-size:11.5px;color:var(--ink-3);margin-top:2px;}

.pkg-price s{color:var(--ink-3);font-weight:400;}

.pkg-specs{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:12px;color:var(--ink-2);margin-top:6px;line-height:1.8;}

.pkg-specs b{color:var(--violet-d);}



/* 结算栏 */

.cr-side{flex:none;width:300px;position:sticky;top:76px;}

.cr-sum{

    background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);

    box-shadow:var(--shadow);padding:20px 22px;

}

.cr-sum-t{font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:1px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px dashed var(--line);}

.cr-sum-row{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--ink-2);padding:6px 0;}

.cr-sum-row b{color:var(--ink);font-weight:600;max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.cr-sum-total{border-top:1px dashed var(--line);margin-top:6px;padding-top:12px;}

.cr-sum-total b{color:#5e548a;font-size:22px;font-variant-numeric:tabular-nums;}
.cr-sum-total b.is-short{color:var(--rouge-d)!important;}

.cr-sum-bal b{color:var(--ink-3);font-weight:400;font-size:12.5px;}

.cr-warn{

    background:var(--rouge-l);border:1px solid color-mix(in srgb,var(--rouge) 30%,transparent);

    color:var(--rouge-d);border-radius:var(--r-sm);padding:8px 12px;font-size:12.5px;margin-top:8px;

}

.cr-go{
    width:100%;margin-top:14px;padding:13px;border:none;border-radius:var(--r-md);
    background:linear-gradient(135deg,#8679b4,#635596);color:#fff;font-size:15px;font-weight:700;letter-spacing:2px;
    cursor:pointer;box-shadow:0 8px 20px rgba(80,66,140,.42);transition:all .25s var(--ease);
    font-family:var(--sans);
}

.cr-go:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 10px 26px rgba(106,90,163,.45);}

.cr-go:active{transform:scale(.98);}



@media (max-width:900px){
    .cr-wrap{flex-direction:column;animation:none;}
    .cr-side{width:100%;position:static;margin-bottom:80px;}
    /* 深度修复：时长条(.dur-t flex-shrink:0)的 min-content 会把表单撑到 ~489px 溢出移动视口，
       显式宽度让 .cr-main 严格等于容器宽，溢出内容交给 .dur-strip 的 overflow-x:auto 横滚消化 */
    .cr-main{width:100%;}
}
@media (max-width:720px){
    .cr-main{padding:16px;}
    /* 深度修复：容器绝无动画/变换，保证 .cr-side 的 fixed 以视口为参照（不再乱飘） */
    .cr-wrap{flex-direction:column;animation:none;transform:none;padding-bottom:64px;}
    .cr-side{
        position:fixed;left:0;right:0;top:auto;
        bottom:calc(60px + env(safe-area-inset-bottom,0px));
        z-index:var(--z-float);
        margin:0;padding:0 10px;
        transform:none;
    }
    .cr-sum{
        display:flex;align-items:center;gap:12px;padding:10px 14px;
        background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
        box-shadow:0 -4px 24px rgba(78,63,126,.18),0 2px 10px rgba(94,84,138,.08);
    }
    .cr-sum-t,.cr-sum-row:not(.cr-sum-total),.cr-sum-bal,.cr-side .hint{display:none;}
    /* 余额不足警告在移动端横条内换行可见，不再被隐藏 */
    #sumWarn{display:none;}
    #sumWarn:not(:empty){display:block;flex-basis:100%;}
    #sumWarn .cr-warn{margin:0;padding:6px 10px;font-size:11.5px;border-radius:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .cr-sum-total{border:none;margin:0;padding:0;flex:1;min-width:0;}
    .cr-sum-total span{display:none;}
    .cr-sum-total b{font-size:17px;display:block;letter-spacing:.3px;}
    .cr-go{margin:0;flex:none;width:auto;padding:11px 22px;font-size:13.5px;letter-spacing:1px;min-height:44px;}
    /* 深色模式下结算横条同样清晰 */
    body.dark .cr-sum{background:var(--card);border-color:var(--line);}
    /* 开通页移动端：回顶按钮避让固定结算条（结算条 fixed bottom:60px 高约 64-90px） */
    body:has(.cr-side) #backTop{bottom:calc(155px + env(safe-area-inset-bottom,0px));}
}



/* ---------- v9.2 下一步引导卡（小白导航） ---------- */

.next-step{

    display:flex;align-items:center;gap:14px;flex-wrap:wrap;

    border-radius:var(--r-lg);padding:16px 20px;margin-bottom:16px;

    text-decoration:none;box-shadow:var(--shadow-s);transition:all .25s var(--ease);

    animation:fadeUp .4s var(--ease) both;

}

.next-step:hover{transform:translateY(-2px);box-shadow:var(--shadow);}

.next-urgent{background:linear-gradient(135deg,var(--rouge-l),color-mix(in srgb,var(--rouge-l) 60%,var(--card)));border:1.5px solid var(--rouge);}

.next-warn{background:linear-gradient(135deg,var(--amber-l),color-mix(in srgb,var(--amber-l) 60%,var(--card)));border:1.5px solid var(--amber);}

.next-ok{background:linear-gradient(135deg,var(--violet-l),color-mix(in srgb,var(--violet-l) 60%,var(--card)));border:1.5px solid var(--violet);}

.ns-t{font-weight:700;font-size:15px;font-family:var(--serif);color:var(--ink);}

.ns-d{font-size:13px;color:var(--ink-2);flex:1;min-width:200px;}

.ns-go{

    flex:none;padding:8px 20px;border-radius:999px;font-size:13px;font-weight:700;

    background:var(--violet-g);color:#fff;box-shadow:0 4px 12px rgba(106,90,163,.3);

}

.next-urgent .ns-go{background:linear-gradient(135deg,var(--rouge),var(--rouge-d));}

.next-warn .ns-go{background:linear-gradient(135deg,var(--amber),#8f7355);}



/* ---------- v9.3 套餐配额 ---------- */

.pkg-full{opacity:.55;pointer-events:none;}

.pkg-quota{margin-top:6px;}

.pkg-full .pkg-box{border-style:dashed;}



/* ---------- v9.5 代理商注册页（从0重设计） ---------- */

.reg-bg{display:flex;align-items:stretch;justify-content:center;padding:0;}

.reg-wrap{

    display:flex;width:min(980px,96vw);min-height:min(640px,92vh);margin:auto;

    background:var(--card);border:1px solid var(--line);border-radius:24px;

    overflow:hidden;box-shadow:0 30px 80px rgba(71,47,102,.2);

    animation:pop .5s var(--ease) both;

}

.reg-side{

    flex:0 0 40%;padding:44px 36px;color:#fdfcff;position:relative;overflow:hidden;

    background:linear-gradient(155deg,#8b7bc0 0%,#6a5aa3 55%,#4e3f7e 100%);

    display:flex;flex-direction:column;

}

.reg-side::after{content:"";position:absolute;right:-50px;top:-50px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.1);}

.reg-side::before{content:"";position:absolute;left:-40px;bottom:-60px;width:160px;height:160px;border-radius:50%;background:rgba(255,255,255,.07);}

.reg-brand{position:relative;}

.reg-logo{

    width:54px;height:54px;border-radius:16px;background:rgba(255,255,255,.18);

    display:flex;align-items:center;justify-content:center;

    font-family:var(--serif);font-size:26px;font-weight:700;backdrop-filter:blur(6px);

    box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);

}

.reg-sitename{font-family:var(--serif);font-size:20px;font-weight:700;letter-spacing:2px;margin-top:16px;}

.reg-slogan{font-size:13px;opacity:.85;margin-top:6px;letter-spacing:1px;}

.reg-feats{margin-top:36px;position:relative;display:flex;flex-direction:column;gap:18px;}

.reg-feat{display:flex;gap:14px;align-items:flex-start;}

.reg-feat i{

    font-style:normal;flex:none;width:34px;height:34px;border-radius:50%;

    background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;

    font-size:12px;font-weight:700;

}

.reg-feat b{display:block;font-size:14.5px;letter-spacing:.5px;}

.reg-feat span{font-size:12px;opacity:.8;}

.reg-foot{margin-top:auto;position:relative;font-size:13px;opacity:.9;}

.reg-foot a{color:#fff;font-weight:700;}



.reg-main{flex:1;display:flex;align-items:center;justify-content:center;padding:34px 34px;min-width:0;}

.reg-card{width:100%;max-width:430px;}

.reg-title{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:1px;color:var(--ink);margin:0;}

.reg-sub{font-size:13px;color:var(--ink-3);margin:8px 0 20px;}

.reg-sub b{color:var(--violet-d);}

.reg-field{margin-bottom:13px;}

.reg-field label{display:block;font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:6px;}

.reg-2col{display:flex;gap:12px;}

.reg-2col .reg-field{flex:1;min-width:0;}

.reg-pwbar{height:4px;border-radius:99px;background:var(--paper-2);margin-top:7px;overflow:hidden;}

.reg-pwbar i{display:block;height:100%;width:0;border-radius:99px;transition:all .3s;background:var(--rouge);}

.reg-pwbar.s1 i{width:25%;background:var(--rouge);}

.reg-pwbar.s2 i{width:45%;background:#c9a45c;}

.reg-pwbar.s3 i{width:65%;background:#c9a45c;}

.reg-pwbar.s4 i{width:85%;background:var(--green);}

.reg-pwbar.s5 i{width:100%;background:var(--green);}

.reg-agree{

    border:1px solid var(--line);border-radius:var(--r-md);padding:10px 14px;

    background:var(--paper);margin-bottom:12px;

}

.reg-agree summary{cursor:pointer;color:var(--violet-d);font-size:13.5px;font-weight:600;}

.reg-agree-body{white-space:pre-wrap;font-size:12.5px;line-height:1.9;margin-top:10px;max-height:200px;overflow:auto;color:var(--ink-2);}

.reg-check{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink-2);margin-bottom:14px;cursor:pointer;font-weight:normal;}

.reg-pay-label{font-size:13px;font-weight:600;color:var(--ink-2);margin-bottom:8px;}

.reg-pays{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}

.reg-pay{

    display:inline-flex;cursor:pointer;

}

.reg-pay input{position:absolute;opacity:0;pointer-events:none;}

.reg-pay span{

    padding:9px 22px;border:1.5px solid var(--line);border-radius:999px;font-size:13.5px;

    color:var(--ink-2);transition:all .22s;background:var(--card);

}

.reg-pay input:checked+span{

    border-color:var(--violet-d);background:var(--violet-l);color:var(--violet-d);font-weight:700;

    box-shadow:0 3px 10px rgba(106,90,163,.18);

}

.reg-go{

    width:100%;padding:13px;border:none;border-radius:var(--r-md);

    background:var(--violet-g);color:#fff;font-size:15px;font-weight:700;letter-spacing:2px;

    cursor:pointer;box-shadow:0 8px 20px rgba(106,90,163,.32);transition:all .25s;font-family:var(--sans);

}

.reg-go:hover{filter:brightness(1.07);transform:translateY(-1px);}

.reg-go:active{transform:scale(.98);}

.reg-login-link{text-align:center;font-size:13px;color:var(--ink-3);margin-top:14px;}

@media (max-width:860px){

    .reg-side{display:none;}

    .reg-wrap{min-height:auto;}

    .reg-main{padding:26px 20px;}

}

@media (max-width:520px){

    .reg-2col{flex-direction:column;gap:0;}

}



/* ================= 我的分站（v5.0） ================= */

.subsite-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:16px 0 20px;}

.subsite-w{background:rgba(124,113,168,.07);border:1px solid rgba(124,113,168,.16);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;}

.subsite-w b{font-size:15px;color:var(--tx1,#2c2840);}

.subsite-w span{font-size:13px;color:var(--tx3,#8b86a3);line-height:1.6;}

.subsite-new{display:flex;flex-direction:column;gap:12px;max-width:460px;}

.subsite-domain{display:flex;align-items:center;gap:0;border:1.5px solid rgba(124,113,168,.35);border-radius:12px;overflow:hidden;background:var(--bg-input,#fff);}

.subsite-domain input{flex:1;border:none !important;background:transparent !important;padding:12px 14px;font-size:15px;box-shadow:none !important;min-width:0;}

.subsite-domain b{padding:12px 14px;background:rgba(124,113,168,.1);color:#7c71a8;font-size:14px;white-space:nowrap;}

.subsite-new input:not([type=hidden]){padding:12px 14px;}

.subsite-new .btn-lg{align-self:flex-start;padding:12px 32px;font-size:15px;border-radius:12px;}

.subsite-card .subsite-url{font-size:18px;font-weight:600;color:#7c71a8;background:rgba(124,113,168,.08);border:1px dashed rgba(124,113,168,.35);border-radius:12px;padding:14px 18px;margin:12px 0;word-break:break-all;}

.subsite-ops{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px;}

.subsite-rename{display:flex;gap:8px;max-width:380px;}

.subsite-rename input{flex:1;padding:9px 12px;min-width:0;}

.subsite-tips{margin:6px 0 2px;padding-left:20px;line-height:2;color:var(--tx2,#565064);font-size:14px;}

@media (max-width:520px){

    .subsite-domain b{font-size:12px;padding:12px 8px;}

    .subsite-new .btn-lg{width:100%;}

}



/* 分站解析状态 */

.subsite-dns{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 16px;border-radius:12px;font-size:13.5px;}

.subsite-dns b{display:block;margin-bottom:3px;font-size:14.5px;}

.subsite-dns span{color:var(--tx3,#8b86a3);line-height:1.6;flex:1;min-width:200px;}

.subsite-dns.ok{background:rgba(95,143,126,.08);border:1px solid rgba(95,143,126,.25);}

.subsite-dns.ok b{color:#5f8f7e;}

.subsite-dns.warn{background:rgba(199,154,86,.08);border:1px solid rgba(199,154,86,.3);}

.subsite-dns.warn b{color:#b08a3e;}

.subsite-dns form{margin-left:auto;}



/* ============ 手机端主机表/操作列错乱修复（v10.1） ============ */

@media (max-width:820px){

    table.tb.tb-cardify td:has(form){flex-direction:column;align-items:stretch;text-align:left;gap:8px;}

    table.tb.tb-cardify td:has(form)::before{margin-bottom:2px;}

    table.tb.tb-cardify td form.inline-form{display:flex;flex-wrap:wrap;gap:6px;align-items:center;justify-content:flex-start;}

    table.tb.tb-cardify td form.inline-form .btn{flex:1;justify-content:center;text-align:center;min-width:72px;}

    table.tb.tb-cardify td form.inline-form input[name=password]{flex:1;min-width:0;width:auto !important;padding:7px 10px !important;}

    table.tb.tb-cardify td .renew-sel{flex:1;min-width:80px;}

    table.tb.tb-cardify td{min-width:0 !important;}

    table.tb.tb-cardify td[data-label="密码"]{justify-content:flex-start;}

    table.tb.tb-cardify td[data-label="密码"]::before{margin-right:auto;}

    .card>form[method=get]{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}

    .card>form[method=get] input[name=q]{flex:1;min-width:140px;}

}



/* ============ 补齐审计发现的缺失样式（v10.2） ============ */

/* 开关组件（系统设置等处使用） */

.switch{position:relative;display:inline-block;width:46px;height:26px;flex:none;}

.switch input{position:absolute;opacity:0;width:0;height:0;}

.switch i{position:absolute;inset:0;background:#cfc9e0;border-radius:999px;transition:background .25s;cursor:pointer;}

.switch i::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(60,50,90,.25);transition:transform .25s;}

.switch input:checked + i{background:var(--violet,#7c71a8);}

.switch input:checked + i::after{transform:translateX(20px);}

.switch input:focus-visible + i{outline:2px solid var(--violet,#7c71a8);outline-offset:2px;}

body.dark .switch i{background:#454058;}

body.dark .switch input:checked + i{background:#8b7fc0;}



/* 公告卡片（.ann 容器内嵌 .ann-body 文本区，勿套卡片样式） */



/* ============ 工具类（收编内联样式 v10.3） ============ */

.u-mt6{margin-top:6px;}.u-mt8{margin-top:8px;}.u-mt10{margin-top:10px;}.u-mt12{margin-top:12px;}

.u-mt14{margin-top:14px;}.u-mt16{margin-top:16px;}.u-mt20{margin-top:20px;}.u-mt24{margin-top:24px;}

.u-mb6{margin-bottom:6px;}.u-mb8{margin-bottom:8px;}.u-mb10{margin-bottom:10px;}.u-mb12{margin-bottom:12px;}

.u-mb14{margin-bottom:14px;}.u-mb16{margin-bottom:16px;}.u-mb20{margin-bottom:20px;}

.u-fr{float:right;}

.u-tc{text-align:center;}

.u-muted{color:#999;}

.u-green{color:#5f8f7e;}.u-teal{color:#3a9e94;}.u-rouge{color:#855190;}.u-link2{color:#6a5aa3;}

.u-nowrap{white-space:nowrap;}

.u-mw480{max-width:480px;}.u-mw520{max-width:520px;}.u-mw560{max-width:560px;}.u-mw640{max-width:640px;}

.u-dib{display:inline-block;}

.u-lh19{line-height:1.9;}



/* 工具类第二轮 */

.u-inp{padding:7px 10px;border:1px solid var(--line);border-radius:10px;background:var(--bg-input,#fff);color:var(--ink,#2c2840);}

.u-inp-sm{padding:3px 6px;border:1px solid var(--line);border-radius:10px;background:var(--bg-input,#fff);color:var(--ink,#2c2840);}

.u-w80{width:80px;}.u-w90{width:90px;}.u-w100{width:100px;}.u-w150{width:150px;}.u-w160{width:160px;}.u-w200{width:200px;}

.u-ptr{cursor:pointer;}

.u-fs12{font-size:12px;}.u-fs13{font-size:13px;}.u-fs14{font-size:14px;}

.u-mb4{margin-bottom:4px;}

.u-tagm{margin:0 6px 6px 0;}



/* 工具类第三轮 */

.u-muted3{color:var(--ink-3);}

.u-flex2{flex:2;min-width:300px;margin-bottom:0;}

.u-flex1b{flex:1;min-width:260px;margin-bottom:0;}

.u-mr10{margin-right:10px;}

.u-mt3{margin-top:3px;}

.u-ml8{margin-left:8px;}.u-mlauto{margin-left:auto;}

.u-mb10{margin-bottom:10px;}

.u-fs15{font-size:15px;}

.u-fw600{font-weight:600;}

.u-hide{display:none;}

.u-flexw{display:flex;flex-wrap:wrap;gap:10px;}

.u-cell-min{min-width:280px;}

.u-w30{width:30%;}



/* ============================================================================

   v11.0 主题层 · 紫雾（朦胧软糯 · 低调克制 · 古风舒适）

   在 v7~v10 令牌之上整体提亮、加雾感、柔化一切边界与阴影

   ============================================================================ */

:root{

    --paper:#f6f4fb;

    --paper-2:#efeaf6;

    --card:#fdfcfe;

    --ink:#4a4258;

    --ink-2:#7d748e;

    --ink-3:#a89fb9;

    --line:#e7e1f1;

    --violet:#a294cb;

    --violet-d:#8479b3;

    --violet-dd:#66599a;

    --violet-l:#f5f2fa;

    --violet-g:linear-gradient(135deg,#b3a7d9,#8479b3);

    --acc:#b498bc;

    --acc-g:linear-gradient(120deg,#a294cb,#b498bc);

    --r-lg:22px; --r-md:16px; --r-sm:12px;

    --shadow-s:0 1px 3px rgba(102,89,154,.05),0 8px 24px rgba(102,89,154,.06);

    --shadow:0 2px 10px rgba(102,89,154,.07),0 20px 48px rgba(102,89,154,.09);

    --shadow-h:0 6px 16px rgba(102,89,154,.1),0 30px 64px rgba(102,89,154,.13);

}



/* 朦胧紫雾背景：多层雾渐变 + 极淡纹理，不抢眼 */

body{

    background:

        radial-gradient(1200px 500px at 85% -10%, rgba(163,148,203,.14), transparent 60%),

        radial-gradient(900px 420px at -10% 30%, rgba(180,152,188,.1), transparent 55%),

        radial-gradient(700px 700px at 50% 110%, rgba(148,137,196,.1), transparent 60%),

        var(--paper);

    background-attachment:fixed;

}



/* 卡片：雾面微光 */

.card{

    background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(253,252,254,.96));

    border:1px solid rgba(231,225,241,.9);

    box-shadow:var(--shadow-s);

    backdrop-filter:blur(6px);

}

.card:hover{box-shadow:var(--shadow);}

body.dark .card{background:linear-gradient(180deg,rgba(40,35,56,.85),rgba(36,32,51,.95));}



/* 按钮：软糯胶囊 + 按压反馈 */

.btn{border-radius:var(--r-pill);letter-spacing:.5px;transition:transform .18s var(--ease-pop),box-shadow .25s,filter .2s;}

.btn:active{transform:scale(.96);}

.btn-primary{background:var(--violet-g);box-shadow:0 6px 18px rgba(132,121,179,.28);}

.btn-primary:hover{filter:brightness(1.07);box-shadow:0 10px 26px rgba(132,121,179,.36);}



/* 输入框：雾面内凹 */

input,select,textarea{

    background:rgba(255,255,255,.7);

    border:1.5px solid var(--line);

    border-radius:var(--r-sm);

    transition:border-color .2s,box-shadow .2s,background .2s;

}

input:focus,select:focus,textarea:focus{

    border-color:var(--violet);

    background:#fff;

    box-shadow:0 0 0 4px rgba(163,148,203,.15);

    outline:none;

}

body.dark input,body.dark select,body.dark textarea{background:rgba(24,21,33,.6);}

body.dark input:focus,body.dark select:focus,body.dark textarea:focus{background:rgba(24,21,33,.9);}



/* 标签：更淡更圆 */

.tag{border-radius:var(--r-pill);letter-spacing:.5px;}



/* 侧栏：雾面导航 */

.side-i{border-radius:14px;transition:background .2s,color .2s,transform .15s;}

.side-i:hover{transform:translateX(3px);}

.side-i.on{background:var(--violet-g);box-shadow:0 6px 16px rgba(132,121,179,.3);}



/* 提示条：柔化 */

.alert{border-radius:14px;backdrop-filter:blur(4px);}



/* 表格行hover更轻 */

table.tb tbody tr:hover{background:rgba(163,148,203,.08);}



/* 页面进场：柔和上浮 */

.wrap>*:not(.cr-wrap){animation:mistIn .4s var(--ease) both;}

@keyframes mistIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){.wrap>*{animation:none;}}



/* ================= v11.0 注册页 · 步骤式紫雾 ================= */

.reg2-bg{display:flex;align-items:stretch;justify-content:center;min-height:100vh;}

.reg2-wrap{display:flex;width:100%;min-height:100vh;}

.reg2-side{

    width:400px;flex:none;position:relative;overflow:hidden;color:#fff;

    background:linear-gradient(165deg,#6e639e 0%,#8479b3 45%,#a294cb 100%);

    padding:52px 42px;display:flex;flex-direction:column;

}

.reg2-side::after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.1);filter:blur(2px);}

.reg2-side::before{content:"";position:absolute;left:-50px;bottom:-80px;width:200px;height:200px;border-radius:50%;background:rgba(255,255,255,.08);}

.reg2-side>*{position:relative;}

.reg2-logo{

    width:56px;height:56px;border-radius:18px;background:rgba(255,255,255,.16);

    border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(6px);

    display:flex;align-items:center;justify-content:center;

    font-family:var(--serif);font-size:26px;font-weight:700;

}

.reg2-sitename{font-family:var(--serif);font-size:22px;font-weight:700;letter-spacing:3px;margin-top:18px;}

.reg2-slogan{font-size:13px;opacity:.88;margin-top:8px;letter-spacing:2px;}

.reg2-feats{margin-top:40px;display:flex;flex-direction:column;gap:16px;}

.reg2-feat{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;padding:13px 16px;backdrop-filter:blur(4px);transition:background .2s,transform .2s;}

.reg2-feat:hover{background:rgba(255,255,255,.14);transform:translateX(4px);}

.reg2-feat i{

    font-style:normal;font-family:var(--serif);font-size:15px;font-weight:700;flex:none;

    width:32px;height:32px;border-radius:10px;background:rgba(255,255,255,.2);

    display:flex;align-items:center;justify-content:center;

}

.reg2-feat b{display:block;font-size:14.5px;letter-spacing:.5px;}

.reg2-feat span{font-size:12px;opacity:.82;line-height:1.6;}

.reg2-foot{margin-top:auto;font-size:13px;opacity:.92;}

.reg2-foot a{color:#fff;font-weight:700;}



.reg2-main{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:40px 30px;min-width:0;overflow-y:auto;}

.reg2-card{width:100%;max-width:520px;animation:mistIn .5s var(--ease) both;}

.reg2-title{font-family:var(--serif);font-size:24px;font-weight:700;letter-spacing:2px;color:var(--ink);margin:0;}

.reg2-sub{font-size:13px;color:var(--ink-3);margin:10px 0 18px;}

.reg2-sub b{color:var(--violet-dd);font-size:16px;}



/* 步骤指示器 */

.reg2-steps{display:flex;gap:8px;margin-bottom:22px;}

.reg2-steps span{

    flex:1;display:flex;align-items:center;justify-content:center;gap:7px;

    font-size:12.5px;color:var(--ink-3);background:var(--violet-l);

    border:1px solid var(--line);border-radius:var(--r-pill);padding:8px 6px;letter-spacing:1px;

}

.reg2-steps span i{

    font-style:normal;width:19px;height:19px;border-radius:50%;font-size:11px;

    background:#fff;color:var(--violet-d);display:flex;align-items:center;justify-content:center;font-weight:700;

}

.reg2-steps span.on{background:var(--violet-g);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(132,121,179,.25);}

.reg2-steps span.on i{background:rgba(255,255,255,.25);color:#fff;}



/* 步骤分组卡 */

.reg2-sec{

    background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(253,252,254,.95));

    border:1px solid var(--line);border-radius:var(--r-lg);

    padding:20px 22px;margin-bottom:16px;box-shadow:var(--shadow-s);

}

.reg2-sec-t{

    display:flex;align-items:center;gap:9px;font-family:var(--serif);

    font-size:15px;font-weight:700;color:var(--ink);letter-spacing:1.5px;margin-bottom:16px;

}

.reg2-sec-t i{

    font-style:normal;width:24px;height:24px;border-radius:8px;font-size:12.5px;

    background:var(--violet-g);color:#fff;display:flex;align-items:center;justify-content:center;

}

.reg2-sec .reg-field{margin-bottom:12px;}

.reg2-sec .reg-2col .reg-field{margin-bottom:0;}

.reg2-sec .reg-2col{margin-bottom:12px;}

.reg2-sec .reg-2col:last-child{margin-bottom:0;}



@media (max-width:900px){

    .reg2-side{display:none;}

    .reg2-main{padding:28px 18px;}

}

@media (max-width:520px){

    .reg2-sec{padding:16px 14px;}

    .reg2-steps span{font-size:11px;gap:5px;padding:7px 4px;}

}



/* ================= v11.1 紫雾 · 全页组件深化 ================= */

/* 概览统计卡：雾面瓦片 + 悬浮 */

.stat{

    background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(245,242,250,.85));

    border:1px solid rgba(231,225,241,.9);border-radius:18px;

    transition:transform .22s var(--ease-pop),box-shadow .25s;

}

.stat:hover{transform:translateY(-3px);box-shadow:var(--shadow);}

.stat::after{background:radial-gradient(circle,rgba(163,148,203,.18),transparent 70%);width:70px;height:70px;}

.stat .num{font-family:var(--serif);letter-spacing:.5px;}

.stat .label{letter-spacing:2px;}

body.dark .stat{background:linear-gradient(160deg,rgba(40,35,56,.9),rgba(32,28,45,.9));}



/* 卡片标题：衬线古风 */

.card h2{font-family:var(--serif);letter-spacing:1.5px;font-weight:700;}

.card h2 .btn{font-family:var(--sans);letter-spacing:.5px;}



/* 登录盒：雾面悬浮 */

.login-box{

    background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(253,252,254,.97));

    backdrop-filter:blur(10px);border-radius:24px;border:1px solid rgba(231,225,241,.9);

    box-shadow:0 10px 30px rgba(102,89,154,.12),0 30px 80px rgba(102,89,154,.16);

}

.login-brand .logo{border-radius:19px;box-shadow:0 10px 26px rgba(132,121,179,.36),0 0 0 6px rgba(163,148,203,.12);}

body.dark .login-box{background:linear-gradient(180deg,rgba(40,35,56,.94),rgba(36,32,51,.97));}



/* 侧栏分组标题 */

.side-group{font-family:var(--serif);letter-spacing:2.5px;}



/* 空状态与提示 */

.empty{border-radius:18px;}

.hint{line-height:1.8;}





/* 选中文本色 */

::selection{background:rgba(163,148,203,.28);}



/* v11.2：全局隐藏原生滚动条（保留滚动能力） */

html{scrollbar-width:none;-ms-overflow-style:none;}

::-webkit-scrollbar{width:0;height:0;display:none;}



/* 密码强度条空态隐藏（未输入时不占位） */

.reg-pwbar{opacity:0;transition:opacity .25s;}

.reg-pwbar[class*="s"]:not(.s0){opacity:1;}



/* ================= v11.4 文档页双栏 + 折叠侧栏 ================= */

/* 文档页：左目录右内容 */

.doc-layout{display:flex;gap:18px;align-items:flex-start;margin-top:14px;}

.doc-toc-col{flex:none;width:200px;position:sticky;top:14px;max-height:calc(100vh - 40px);overflow-y:auto;}

.doc-main{flex:1;min-width:0;}

.doc-toc{display:flex;flex-direction:column;gap:4px;background:var(--violet-l);border:1px solid var(--line);border-radius:14px;padding:10px;}

.doc-toc-a{font-size:12.5px;color:var(--ink-2);padding:7px 11px;border-radius:9px;transition:all .2s;text-decoration:none;line-height:1.5;}

.doc-toc-a:hover{background:#fff;color:var(--violet-dd);}

.doc-sec{border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:rgba(255,255,255,.6);overflow:hidden;}

.doc-sec summary{padding:13px 16px;font-weight:700;font-family:var(--serif);letter-spacing:1px;cursor:pointer;color:var(--ink);list-style:none;display:flex;align-items:center;}

.doc-sec summary::-webkit-details-marker{display:none;}

.doc-sec-body{padding:4px 18px 16px;line-height:1.9;}

@media (max-width:820px){

    .doc-layout{flex-direction:column;}

    .doc-toc-col{width:100%;position:static;max-height:none;}

    .doc-toc{flex-direction:row;flex-wrap:wrap;}

}



/* 到期告急脉冲 */

@keyframes alertPulse{0%,100%{box-shadow:0 0 0 0 rgba(133,81,144,.35);}50%{box-shadow:0 0 0 5px rgba(133,81,144,0);}}



/* 打印样式：报表/对账单打印时只留内容区 */

@media print{

    .side,.topbar,.side-i,.side-group,.nav-badge,#cmdk,#kbdHelp,.cfloat,.dark-toggle,.top-logout,.alert .btn,.wz-nav{display:none !important;}

    body{background:#fff !important;}

    .wrap{margin:0 !important;padding:0 !important;max-width:100% !important;}

    .card{box-shadow:none !important;border:1px solid #ccc !important;break-inside:avoid;}

    .footer{display:none !important;}

}



/* 移动端底部快捷栏 */

.mbar{display:none;}

@media (max-width:720px){

    .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1400;background:rgba(253,252,254,.92);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 4px calc(6px + env(safe-area-inset-bottom,0px));}

    .mbar-i{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 0;color:var(--ink-3);text-decoration:none;font-size:10.5px;border-radius:10px;}

    .mbar-i.on{color:var(--violet-dd);font-weight:600;}

    .mbar-i.on svg{stroke:var(--violet-d);}

    body{padding-bottom:58px;}

    body.dark .mbar{background:rgba(30,26,45,.92);border-top-color:#352e4a;}

}



/* ================= 移动端适配加固（v6.7） ================= */

@media (max-width:720px){

    body{overflow-x:hidden;}

    .card,.greeting,.doc-card,.alert{overflow-wrap:anywhere;}

    .mono{font-size:11.5px;word-break:break-all;}

    pre,.logdetail{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}

    .card img,.card video,.doc-card img{max-width:100%;height:auto;}

    .topbar .brand-t{max-width:30vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

    .card details>div{max-width:100%!important;}

    .inline-form,.u-flexw{max-width:100%;}

    .inline-form input,.inline-form select,select{max-width:100%;}

    .card h2{overflow-wrap:anywhere;}

    .tag{white-space:nowrap;}

}



/* ================= 登录/注册页移动端精修（v7.2） ================= */

@media (max-width:720px){

    .login-box{width:calc(100% - 24px);margin:14px auto;padding:22px 18px;}

    .login-box h1{font-size:18px;letter-spacing:1px;}

    /* 登录方式切换按钮：等宽并排 */

    .login-box .u-flexw .btn-sm{flex:1;justify-content:center;text-align:center;min-width:0;white-space:nowrap;font-size:12.5px;padding:8px 6px;}

    /* 邮箱验证码行：输入框+按钮不溢出 */

    .login-box div[style*="display:flex"]{flex-wrap:wrap;}

    .login-box div[style*="display:flex"] input{flex:1 1 100%;}

    .login-box div[style*="display:flex"] .btn{flex:1 1 100%;margin-top:6px;}

    /* 2FA动态码输入框 */

    .login-box input[name=totp]{letter-spacing:3px;text-align:center;}

    /* 注册页协议/向导 */

    .reg2-wrap{padding:0 10px;}

    /* 向导步骤条小屏横滑 */

    .wz-steps{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;}

    .wz-steps::-webkit-scrollbar{display:none;}

}





/* 阶段6 · 小学化 UX 样式 */

.spec-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;padding:6px 0;}

.spec-cell{background:rgba(154,143,190,.06);border:1px solid rgba(154,143,190,.15);border-radius:8px;padding:6px 4px;text-align:center;}

.spec-cell .num{font-size:14px;color:#6b5b95;font-weight:600;line-height:1.2;}

.spec-cell .lab{font-size:10.5px;color:#7a7385;margin-top:2px;letter-spacing:.5px;}

.spec-grid-mini{display:flex;flex-wrap:wrap;gap:4px;font-size:11px;color:#5e548a;}

.spec-grid-mini .sg-cell{background:rgba(154,143,190,.08);padding:2px 6px;border-radius:5px;}

.spec-grid-mini .sg-cell b{color:#6b5b95;margin-right:2px;}

.dq-band{display:inline-flex;flex-direction:column;line-height:1.4;padding:3px 8px;border-radius:6px;border-left:3px solid;}

.dq-band .dq-main{font-size:12px;color:#5e548a;}

.dq-band .dq-sub{font-size:10.5px;color:#7a7385;margin-top:1px;}

.dq-band--green{background:rgba(95,143,126,.08);border-left-color:#5f8f7e;}

.dq-band--orange{background:rgba(217,181,108,.12);border-left-color:#d9b56c;}

.dq-band--red{background:rgba(196,90,98,.1);border-left-color:#c45a62;}

.dq-band--gray{background:rgba(154,143,190,.08);border-left-color:#a591c4;}

.status-band{display:flex;flex-direction:column;padding:8px 12px;border-radius:8px;border-left:3px solid;}

.status-band .sb-main{font-size:13px;font-weight:600;}

.status-band .sb-sub{font-size:11.5px;color:#7a7385;margin-top:3px;line-height:1.5;}

.status-band .sb-act{display:inline-block;margin-top:6px;padding:3px 10px;background:#6b5b95;color:#fff;border-radius:5px;font-size:11px;text-decoration:none;}

.status-band--green{background:rgba(95,143,126,.08);border-left-color:#5f8f7e;}

.status-band--green .sb-main{color:#3f6e5e;}

.status-band--orange{background:rgba(217,181,108,.12);border-left-color:#d9b56c;}

.status-band--orange .sb-main{color:#7d5e2c;}

.status-band--red{background:rgba(196,90,98,.1);border-left-color:#c45a62;}

.status-band--red .sb-main{color:#8a3a40;}

.status-band--gray{background:rgba(154,143,190,.08);border-left-color:#a591c4;}

.status-band--gray .sb-main{color:#5e548a;}

.status-tip{font-size:10.5px;color:#7a7385;margin-top:2px;line-height:1.4;}

/* === 阶段6 T6.6 · 引导动画 === */

.mdy-steps{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;padding:20px 16px;background:linear-gradient(135deg,#f9f8f6,#fff);border:1px dashed #e8e4ee;border-radius:12px;margin-bottom:14px;}

.mdy-step{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;min-width:88px;animation:mdyStepIn .6s cubic-bezier(.22,.9,.32,1) both;}

.mdy-step:nth-child(1){animation-delay:0s}.mdy-step:nth-child(2){animation-delay:.12s}.mdy-step:nth-child(3){animation-delay:.24s}.mdy-step:nth-child(4){animation-delay:.36s}.mdy-step:nth-child(5){animation-delay:.48s}.mdy-step:nth-child(6){animation-delay:.6s}.mdy-step:nth-child(7){animation-delay:.72s}

.mdy-step-dot{width:34px;height:34px;border-radius:50%;background:#fff;border:2px solid #a591c4;color:#6b5b95;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:13px;transition:transform .3s;}

.mdy-step:hover .mdy-step-dot{transform:scale(1.15);background:#6b5b95;color:#fff;}

.mdy-step-label{margin-top:6px;font-size:11px;color:#5e548a;text-align:center;line-height:1.4;}

.mdy-step-arrow{color:#a591c4;font-size:18px;padding:0 4px;animation:mdyArrowDraw 1.2s ease-out both;animation-delay:.9s;}

.mdy-step-arrow svg{display:block;}

@keyframes mdyStepIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

@keyframes mdyArrowDraw{from{stroke-dashoffset:24;opacity:0;}to{stroke-dashoffset:0;opacity:1;}}



/* 折叠详情面板（基础六步向导链接用） */

details{margin-top:8px;}

details summary{padding:6px 0;}

details summary:hover{color:#5e548a;}

details[open] summary{margin-bottom:10px;}
/* === 阶段6 T6.7 · dashboard 卡片化 === */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:14px;}
.stat{background:#fffefd;border:1px solid #e8e4ee;border-radius:12px;padding:14px 16px;position:relative;overflow:hidden;transition:box-shadow .2s;}
.stat:hover{box-shadow:0 6px 20px rgba(94,84,138,.1);}
.stat .num{font-size:28px;font-weight:600;color:#6b5b95;line-height:1.1;letter-spacing:-.5px;}
.stat .lab{font-size:12px;color:#7a7385;margin-top:4px;letter-spacing:.5px;}
.stat .delta{font-size:11.5px;margin-top:6px;display:flex;align-items:center;gap:3px;}
.stat .delta-up{color:#5f8f7e;}
.stat .delta-down{color:#c45a62;}
.stat .delta-zero{color:#a591c4;}
.stat .icon{position:absolute;right:12px;top:12px;width:24px;height:24px;opacity:.25;}
.stat .icon svg{width:100%;height:100%;}
.stat.is-danger{border-left:3px solid #c45a62;}
.stat.is-warn{border-left:3px solid #d9b56c;}
.stat.is-good{border-left:3px solid #5f8f7e;}

/* === 阶段7-A · stat 快捷动作 === */
.stat-actions{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px;}
.stat-act{font-size:10.5px;padding:3px 8px;border-radius:5px;text-decoration:none;background:rgba(154,143,190,.1);color:#6b5b95;border:1px solid transparent;}
.stat-act:hover{background:#a591c4;color:#fff;}
.stat-act-danger{background:rgba(196,90,98,.1);color:#c45a62;border:1px solid transparent;}
.stat-act-danger:hover{background:#c45a62;color:#fff;}

/* === 阶段7-B · 充值面板 === */
.num-big{font-size:32px;color:#6b5b95;font-weight:600;letter-spacing:-.5px;margin:0 6px;}
.recharge-title{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;}
.recharge-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:10px;}
.rec-opt{display:block;text-align:center;padding:10px;border:1px solid #d8d3e0;border-radius:8px;background:#fffefd;color:#6b5b95;text-decoration:none;font-size:13px;transition:all .2s;}
.rec-opt:hover{border-color:#a591c4;background:rgba(154,143,190,.08);}
.stat-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}
.stat-actions a{font-size:12px;padding:3px 8px;border:1px solid #d8d3e0;border-radius:6px;background:#fff;color:#6b5b95;text-decoration:none;transition:all .2s;}
.stat-actions a:hover{border-color:#a591c4;background:rgba(154,143,190,.08);}
.stat-actions a.kind-danger{border-color:#c08497;color:#9b4a5e;}
.stat-actions a.kind-danger:hover{background:rgba(192,132,151,.1);}

/* === 阶段7-E · 新手引导 === */
.onb-card{background:linear-gradient(135deg,#f9f8f6,#fffefd);border:1px solid #e8e4ee;border-radius:14px;padding:16px 18px;margin-bottom:14px;position:relative;}
.onb-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;}
.onb-title{font-size:14px;font-weight:600;color:#5e548a;letter-spacing:.5px;}
.onb-progress-text{font-size:12px;color:#7a7385;}
.onb-hide{color:#a591c4;text-decoration:none;font-size:18px;line-height:1;padding:0 6px;}
.onb-hide:hover{color:#6b5b95;}
.onb-bar{height:6px;background:rgba(154,143,190,.12);border-radius:3px;overflow:hidden;margin-bottom:12px;}
.onb-bar-fill{height:100%;background:linear-gradient(90deg,#a591c4,#6b5b95);border-radius:3px;transition:width .6s cubic-bezier(.22,.9,.32,1);}
.onb-steps{list-style:none;padding:0;margin:0;}
.onb-steps li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px dashed #efeaf4;}
.onb-steps li:last-child{border-bottom:none;}
.onb-step-done .onb-step-label{color:#5f8f7e;text-decoration:line-through;opacity:.7;}
.onb-step-todo .onb-step-label{color:#5e548a;font-weight:600;}
.onb-tick{flex:0 0 24px;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;}
.onb-step-done .onb-tick{background:#5f8f7e;color:#fff;}
.onb-step-todo .onb-tick{background:#fff;border:2px solid #a591c4;color:#6b5b95;}
.onb-step-body{flex:1;min-width:0;}
.onb-step-desc{font-size:11.5px;color:#7a7385;margin-top:3px;line-height:1.5;}
.onb-step-action{display:inline-block;margin-top:5px;font-size:11px;padding:3px 9px;background:#6b5b95;color:#fff;border-radius:5px;text-decoration:none;}
.onb-step-action:hover{background:#5e548a;}

/* ===== 阶段7-F 实时通知 ===== */
.topbar-right{position:relative;}
.rtn-bell{position:relative;display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink-2);cursor:pointer;transition:all .22s;padding:0;}
.rtn-bell:hover,.rtn-bell.rtn-on{color:var(--violet-d);border-color:var(--violet);background:var(--violet-l);transform:translateY(-1px);}
.rtn-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;line-height:17px;text-align:center;background:linear-gradient(135deg,#c45a62,#c08497);color:#fff;border-radius:999px;font-size:10px;font-weight:700;padding:0 4px;box-shadow:0 2px 6px rgba(133,81,144,.4);}
.rtn-bell.rtn-ring svg{animation:rtnRing .8s var(--ease-pop);}
@keyframes rtnRing{0%,100%{transform:rotate(0);}20%{transform:rotate(14deg);}40%{transform:rotate(-12deg);}60%{transform:rotate(8deg);}80%{transform:rotate(-6deg);}}
.rtn-panel{position:absolute;right:0;top:44px;width:344px;max-width:calc(100vw - 20px);background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-h);z-index:var(--z-sheet);display:none;overflow:hidden;}
.rtn-panel.rtn-open{display:block;animation:rtnIn .22s var(--ease-pop) both;}
@keyframes rtnIn{from{opacity:0;transform:translateY(-6px) scale(.98);}to{opacity:1;transform:none;}}
.rtn-panel-head{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,rgba(154,143,190,.08),rgba(255,255,255,0));}
.rtn-panel-title{font-size:13.5px;font-weight:600;color:var(--violet-dd);letter-spacing:1px;}
.rtn-readall{border:1px solid var(--line);background:var(--card);color:var(--violet-d);font-size:11.5px;padding:4px 10px;border-radius:999px;cursor:pointer;transition:all .2s;font-family:inherit;}
.rtn-readall:hover{background:var(--violet-g);color:#fff;border-color:transparent;}
.rtn-list{max-height:352px;overflow-y:auto;}
.rtn-item{display:flex;gap:9px;padding:10px 14px;text-decoration:none;border-bottom:1px dashed var(--line);cursor:pointer;transition:background .18s;color:inherit;}
.rtn-item:last-child{border-bottom:none;}
.rtn-item:hover{background:var(--violet-l);}
.rtn-item .rtn-dot{flex:none;width:7px;height:7px;border-radius:50%;margin-top:6px;background:var(--line);}
.rtn-item.rtn-item-unread .rtn-dot{background:var(--violet-d);box-shadow:0 0 0 3px rgba(124,113,168,.18);}
.rtn-item.rtn-lv-warn{border-left:3px solid #d9b56c;}
.rtn-item.rtn-lv-critical{border-left:3px solid #c45a62;}
.rtn-item-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.rtn-item-title{font-size:12.5px;font-weight:600;color:var(--ink);line-height:1.4;}
.rtn-item-unread .rtn-item-title{color:var(--violet-dd);}
.rtn-item-txt{font-size:11.5px;color:var(--ink-2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.rtn-item-time{font-size:10.5px;color:var(--ink-3);}
.rtn-empty{padding:26px 14px;text-align:center;font-size:12px;color:var(--ink-3);letter-spacing:1px;}
.rtn-panel-foot{padding:8px 14px;font-size:10.5px;color:var(--ink-3);border-top:1px solid var(--line);background:var(--paper);letter-spacing:.5px;}
.rtn-toast{position:fixed;left:50%;bottom:44px;transform:translateX(-50%) translateY(20px);z-index:var(--z-toast);background:rgba(52,46,66,.94);color:#f5f2fa;padding:11px 22px;border-radius:var(--r-pill);font-size:13px;letter-spacing:.5px;box-shadow:0 10px 26px rgba(40,33,56,.3);opacity:0;pointer-events:none;transition:all .3s;max-width:88vw;text-align:center;}
.rtn-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
body.dark .rtn-toast{background:rgba(230,225,240,.95);color:#2c2740;}
@media (max-width:720px){
    .rtn-panel{position:fixed;top:56px;left:10px;right:10px;width:auto;max-width:none;}
    .rtn-toast{bottom:calc(96px + env(safe-area-inset-bottom,0px));}
}
@media print{.rtn-bell,.rtn-panel,.rtn-toast{display:none!important;}}


/* ============================================================================
   萌哒云 · 设计系统 v8.1 追加补丁（聚焦 docs / 协议 + 403 提示）
   - doc-tabs / doc-panel tab 切换
   - 协议文档卡片美化
   - 403 页 mobile-friendly
   - 关键空状态 fallback
   ============================================================================ */

/* ===== 1. 文档 Tab 切换 ===== */
.doc-tabs{
    display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;
    padding:6px;background:var(--paper-2);border-radius:var(--r-md);
    border:1px solid var(--line);
}
.doc-tab{
    border:1px solid transparent;background:transparent;color:var(--ink-2);
    padding:7px 16px;border-radius:var(--r-sm);font-size:13px;cursor:pointer;
    transition:all .2s var(--ease);font-family:inherit;
}
.doc-tab:hover{color:var(--violet-d);background:var(--card);}
.doc-tab.on{
    background:var(--violet-g);color:#fff;border-color:transparent;
    box-shadow:0 4px 14px rgba(124,113,168,.26);
}
.doc-panel{display:none;}
.doc-panel.on{display:block;}

/* ===== 2. 协议卡片 ===== */
.doc-card-proto{
    max-width:880px;margin:0 auto;
    background:var(--card);border:1px solid var(--line);
    border-radius:var(--r-md);padding:32px 40px;
    line-height:1.95;color:var(--ink);
}
.proto-h{
    font-family:var(--serif);font-size:26px;font-weight:700;
    color:var(--violet-dd);margin:0 0 6px;letter-spacing:2px;
}
.proto-meta{
    font-size:13px;color:var(--ink-3);margin-bottom:24px;padding-bottom:18px;
    border-bottom:1px dashed var(--line);font-family:var(--mono);
}
.proto-body h3{
    font-size:17px;color:var(--violet-d);margin:26px 0 10px;
    font-weight:600;font-family:var(--serif);
}
.proto-body p{margin:8px 0 14px;text-align:justify;color:var(--ink-2);}
.proto-body strong{color:var(--ink);font-weight:700;}
.proto-body ul,.proto-body ol{padding-left:24px;color:var(--ink-2);line-height:2;}
.proto-body a{color:var(--violet-d);text-decoration:underline;}
@media (max-width:640px){
    .doc-card-proto{padding:22px 18px;}
    .proto-h{font-size:22px;}
    .doc-tabs{gap:4px;padding:4px;}
    .doc-tab{padding:6px 10px;font-size:12px;}
}

/* ===== 3. 403 页面 mobile 友好 ===== */
.mdy-403 .actions{flex-wrap:wrap;}
@media (max-width:480px){
    .mdy-403{padding:32px 22px;}
    .mdy-403 h1{font-size:18px;letter-spacing:4px;}
    .mdy-403 .sub{font-size:13px;}
    .mdy-403 .actions{flex-direction:column;align-items:stretch;}
    .mdy-403 a,.mdy-403 button{width:100%;box-sizing:border-box;}
}

/* ===== 4. 空状态 / 加载失败通用样式 ===== */
.empty-state{
    text-align:center;padding:60px 20px;color:var(--ink-3);
}
.empty-state .empty-ico{
    width:64px;height:64px;margin:0 auto 14px;opacity:.6;
    color:var(--ink-3);
}
.empty-state .empty-h{
    font-size:16px;color:var(--ink-2);margin-bottom:8px;font-weight:500;
}
.empty-state .empty-t{
    font-size:13.5px;color:var(--ink-3);line-height:1.8;max-width:380px;margin:0 auto;
}

/* ===== 5. 协议头部徽章 ===== */
.proto-badge{
    display:inline-block;padding:2px 10px;border-radius:var(--r-pill);
    background:var(--violet-l);color:var(--violet-dd);font-size:11.5px;
    font-family:var(--mono);margin-left:8px;vertical-align:2px;
}

/* ===== 6. SMTP 测试面板 ===== */
.smtp-test-row{
    display:flex;gap:8px;align-items:center;margin-top:10px;
    padding:10px 12px;background:var(--paper-2);border-radius:var(--r-sm);
    border:1px dashed var(--line);
}
.smtp-test-row .smtp-test-result{
    font-size:12.5px;color:var(--ink-2);font-family:var(--mono);
    flex:1;min-width:0;word-break:break-all;
}
.smtp-test-row .ok{color:var(--green);}
.smtp-test-row .err{color:var(--rouge-d);}

/* ===== 7. 错误码对照卡 ===== */
.err-code-card{
    background:var(--paper-2);border:1px solid var(--line);border-radius:var(--r-md);
    padding:14px 18px;margin-top:10px;
}
.err-code-card .row{
    display:flex;gap:12px;padding:6px 0;border-bottom:1px dashed var(--line);
    font-size:12.5px;
}
.err-code-card .row:last-child{border-bottom:none;}
.err-code-card .code{
    font-family:var(--mono);color:var(--violet-d);font-weight:700;
    flex:none;width:60px;
}
.err-code-card .desc{color:var(--ink-2);line-height:1.7;}

/* ===== 8. 增强表单必填标记 ===== */
.form-row.required label{font-weight:600;}
.form-row.required label::after{content:" *";color:var(--rouge);font-weight:700;}

/* ===== 9. End of v8.1 ===== */

/* ===== v8.2 东方美学 · 淡雅商务 · 多动画 ===== */

@keyframes mdyFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes mdyFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes mdySlideIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:translateX(0)}}
@keyframes mdyFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes mdyPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes mdyBreathe{0%,100%{opacity:.85}50%{opacity:1}}
@keyframes mdyShimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}

.mdy-fade{animation:mdyFadeIn .5s ease-out both}
.mdy-fade-up{animation:mdyFadeUp .65s ease-out both}
.mdy-slide-in{animation:mdySlideIn .5s ease-out both}
.mdy-float{animation:mdyFloat 4.5s ease-in-out infinite}
.mdy-pulse{animation:mdyPulse 2.5s ease-in-out infinite}
.mdy-breath{animation:mdyBreathe 3.5s ease-in-out infinite}

/* 墨韵印章 */
.mdy-seal{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:8px;
  background:linear-gradient(135deg,var(--violet-g),var(--violet-dd));
  color:#fff;font-weight:700;letter-spacing:1px;
  box-shadow:0 4px 14px rgba(107,91,149,.32);
  position:relative;overflow:hidden;
}
.mdy-seal::after{
  content:"";position:absolute;inset:2px;border-radius:6px;
  border:1px dashed rgba(255,255,255,.45);pointer-events:none;
}

/* 顶栏品牌 */
.brand-wrap{display:flex;align-items:center;gap:10px}
.brand-seal{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,#7c71a8,#6b5b95);
  color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:700;letter-spacing:1px;font-size:15px;
  box-shadow:0 4px 12px rgba(107,91,149,.28);
  transition:transform .35s var(--ease);
}
.brand-seal:hover{transform:rotate(-6deg) scale(1.06)}
.brand-text{font-size:14px;letter-spacing:2px;color:var(--ink-2)}

/* 登录/注册背景 */
body.login-bg{
  background:
    radial-gradient(1200px 800px at 90% -10%,rgba(165,145,196,.18),transparent 60%),
    radial-gradient(900px 700px at -10% 110%,rgba(107,91,149,.10),transparent 60%),
    url('https://api.elaina.cat/random/') center/cover no-repeat fixed,
    var(--paper);
}
body.login-bg::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:rgba(247,245,241,.78);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.login-box{
  animation:mdyFadeUp .8s ease-out both;
  position:relative;overflow:hidden;
}
.login-box::before{
  content:"";position:absolute;left:0;top:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--violet-g),var(--violet-dd),transparent);
}
.login-box::after{
  content:"";position:absolute;right:-40px;top:-40px;width:180px;height:180px;
  background:radial-gradient(circle,rgba(165,145,196,.18),transparent 70%);
  border-radius:50%;pointer-events:none;animation:mdyFloat 8s ease-in-out infinite;
}
.login-brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:6px}

.login-box input,.form-row input,.form-row select,.form-row textarea{
  transition:border-color .25s,box-shadow .25s,background .25s;
}
.login-box input:focus,.form-row input:focus,.form-row select:focus,.form-row textarea:focus{
  border-color:var(--violet-g);
  box-shadow:0 0 0 3px rgba(124,113,168,.15);
  outline:none;
}

.btn,.login-box button[type=submit],.login-box button{
  position:relative;overflow:hidden;
  transition:transform .2s,box-shadow .25s,background .25s;
}
.btn:hover,.login-box button[type=submit]:hover,.login-box button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(107,91,149,.28);
}
.btn:active,.login-box button[type=submit]:active{transform:translateY(0)}
.btn::after,.login-box button[type=submit]::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .8s ease;
}
.btn:hover::after,.login-box button[type=submit]:hover::after{transform:translateX(120%)}

.card{transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(107,91,149,.10)}

#topClock{font-family:"JetBrains Mono",Consolas,monospace;color:var(--ink-3)}

.side-i{transition:background .22s,padding .22s,color .22s;position:relative}
.side-i::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:0;background:var(--violet-g);border-radius:2px;
  transition:height .25s;
}
.side-i:hover::before,.side-i.on::before{height:60%}

::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:var(--violet-l)}

::selection{background:var(--violet-l);color:var(--violet-dd)}

.tb tbody tr{transition:background .22s}
.tb tbody tr:hover{background:var(--paper-2)}

.empty-state .empty-ico{animation:mdyBreathe 3.5s ease-in-out infinite}

.toast-item{animation:mdySlideIn .35s ease-out both}

@media (max-width:780px){
  .login-box{padding:28px 22px !important}
  .login-box h1{font-size:18px !important}
  body.login-bg{background-attachment:scroll}
}

/* ================= v9.1 移动端显示修复（巡检整改） ================= */
/* 1. 数据表：窄屏不再把多列压到不可读，保持内容自然宽并允许横向滑动查看 */
@media (max-width:720px){
    .tb-wrap>table.tb{min-width:max-content;}
    .tb-wrap>table.tb td,.tb-wrap>table.tb th{white-space:nowrap;}
}
/* 2. 向导式长表单底部操作条（如系统设置）：窄屏按钮换行，主按钮独占一行完整显示 */
@media (max-width:720px){
    .wz-nav{flex-wrap:wrap;}
    .wz-nav .btn{flex:1 1 auto;padding-left:14px;padding-right:14px;white-space:nowrap;}
    .wz-nav .btn-primary{flex:1 1 100%;margin-left:0;}
}
/* 3. 移动端悬浮元素统一避让底部导航（mbar 高约 62px）与回顶按钮层级 */
#pwaBar,.pwa-tip{z-index:1350;}   /* 低于 mbar(1400)，且不再遮挡 */
body:has(.mbar) #pwaBar{bottom:calc(78px + env(safe-area-inset-bottom,0px));}
body:has(.mbar) .pwa-tip{bottom:calc(78px + env(safe-area-inset-bottom,0px));}

/* ============================================================
   萌哒云 · 液态设计系统  (liquid.css)
   Apple Aero + 液态玻璃 + 淡雅古风 + 低调克制可爱
   浅色调 · 低饱和 · 大圆角 · 含蓄动效
   ============================================================ */

/* ---------- 设计令牌 ---------- */
:root{
  /* 色板：低饱和、柔和、淡雅 */
  --paper:#f7f6fb;
  --paper-2:#f2f0f8;
  --card:rgba(255,255,255,.72);
  --card-solid:#ffffff;
  --ink:#3d3847;
  --ink-2:#74708a;
  --ink-3:#a8a3bd;
  --line:rgba(120,112,150,.18);
  --line-soft:rgba(120,112,150,.10);

  /* 主色：淡雅紫（降饱和） */
  --violet:#9a8fc4;
  --violet-d:#b3a9d6;
  --violet-dd:#c9c0e4;
  --violet-l:rgba(154,143,196,.12);
  --violet-g:linear-gradient(135deg,#a89ed0,#8b7fb8);

  /* 点缀：青瓷玉绿、哑金 */
  --celadon:#8fb8a0;
  --celadon-l:rgba(143,184,160,.14);
  --gold:#c2a97a;
  --gold-l:rgba(194,169,122,.14);

  /* 语义色：柔和不刺眼 */
  --ok:#86b89a;
  --err:#c08a9a;
  --warn:#c9b48a;

  /* 液态玻璃 */
  --glass-blur:14px;
  --glass-bg:rgba(255,255,255,.72);
  --glass-border:rgba(154,143,196,.20);
  --glass-shadow:0 4px 20px rgba(94,84,138,.06);

  /* 圆角：大圆角 · 可爱友好 */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-xl:28px;
  --r-pill:999px;

  /* 阴影：柔和 */
  --sh-1:0 2px 10px rgba(94,84,138,.05);
  --sh-2:0 6px 24px rgba(94,84,138,.08);
  --sh-3:0 12px 40px rgba(94,84,138,.12);

  /* 动效：含蓄、短时长 */
  --ease:cubic-bezier(.4,.0,.2,1);
  --dur:.18s;

  /* 字体 */
  --serif:"Noto Serif SC","Source Han Serif SC","STSong","SimSun",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB",sans-serif;
}

/* ---------- 基础 ---------- */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  font-family:var(--sans);color:var(--ink);
  min-height:100vh;overflow-x:hidden;
  background:
    radial-gradient(50vw 40vh at 8% -6%,rgba(154,143,196,.10),transparent 65%),
    radial-gradient(45vw 35vh at 95% 0%,rgba(143,184,160,.08),transparent 60%),
    var(--paper);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;letter-spacing:.2px;line-height:1.6;
}
::selection{background:rgba(154,143,196,.22);}
a{color:var(--violet);text-decoration:none;transition:color var(--dur) var(--ease);}
a:hover{color:var(--violet-d);}
img{max-width:100%;}

/* ---------- 液态玻璃基类 ---------- */
.glass,.card,.topbar,.side,.alert,.ann,.next-step,.pagination,.tag,.chip,
.doc-card,.chat-box,.ai-box,.stat-card,.entry,.how-i,.app-card,.modal{
  background:var(--glass-bg);
  backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-border);
  border-radius:var(--r-md);
  box-shadow:var(--glass-shadow);
}

/* 顶部高光描边（液态玻璃质感关键） */
.card::before,.glass::before,.topbar::before,.side::before,.entry::before,.stat-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0) 40%);
  mix-blend-mode:overlay;opacity:.7;
}

/* ---------- 顶栏 Aero ---------- */
.topbar{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:11px 22px;margin:0;border-radius:0;
  border-left:none;border-right:none;border-top:none;
  background:rgba(247,246,251,.78);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 4px 16px rgba(94,84,138,.04);
}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:700;}
.brand .seal{
  width:30px;height:30px;flex:none;border-radius:9px;
  background:var(--violet-g);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  box-shadow:0 3px 10px rgba(124,113,168,.28),inset 0 1px 0 rgba(255,255,255,.4);
  transition:transform var(--dur) var(--ease);
}
.brand .seal:hover{transform:rotate(-4deg) scale(1.05);}
.brand-t{font-size:15px;letter-spacing:2px;color:var(--ink);}
.topbar-right{display:flex;align-items:center;gap:12px;}
.top-user{display:flex;align-items:center;gap:8px;}
.top-avatar{width:30px;height:30px;border-radius:50%;background:var(--violet-l);object-fit:cover;}
.top-user-name{font-size:13px;color:var(--ink-2);}
.top-bell,.rtn-bell{position:relative;color:var(--ink-2);background:none;border:none;cursor:pointer;padding:6px;border-radius:var(--r-sm);transition:all var(--dur) var(--ease);}
.top-bell:hover,.rtn-bell:hover{background:var(--violet-l);color:var(--violet);}
.bell-dot,.rtn-badge{position:absolute;top:-2px;right:-2px;min-width:16px;height:16px;border-radius:var(--r-pill);background:var(--err);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.top-clock{font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums;}
.top-logout{font-size:13px;color:var(--ink-3);padding:5px 14px;border-radius:var(--r-pill);transition:all var(--dur) var(--ease);}
.top-logout:hover{background:var(--line-soft);color:var(--err);}

/* ---------- 布局壳 ---------- */
.shell{display:flex;min-height:calc(100vh - 56px);}
.side{
  position:sticky;top:56px;flex:none;width:220px;height:calc(100vh - 56px);
  margin:0;border-radius:0;border-top:none;border-bottom:none;border-left:none;
  background:rgba(247,246,251,.70);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  overflow-y:auto;padding:14px 12px;
  scrollbar-width:thin;scrollbar-color:var(--line-soft) transparent;
}
.side::-webkit-scrollbar{width:4px;}
.side::-webkit-scrollbar-thumb{background:var(--line-soft);border-radius:4px;}
.side-nav{display:flex;flex-direction:column;gap:2px;}
.side-g{margin-bottom:2px;}
.side-group{
  font-size:11px;letter-spacing:2px;color:var(--ink-3);
  padding:10px 10px 6px;text-transform:none;font-family:var(--serif);
}
.side-g-items{display:flex;flex-direction:column;gap:1px;}
.side-i{
  display:flex;align-items:center;gap:10px;
  padding:9px 12px;border-radius:var(--r-sm);
  color:var(--ink-2);font-size:13.5px;
  transition:all var(--dur) var(--ease);
  position:relative;
}
.side-i:hover{background:var(--violet-l);color:var(--ink);}
.side-i.on{
  background:linear-gradient(90deg,rgba(154,143,196,.16),rgba(154,143,196,.04));
  color:var(--ink);font-weight:600;
}
.side-i.on::before{
  content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
  border-radius:0 3px 3px 0;background:var(--violet-g);
}
.side-ico{width:18px;height:18px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--ink-3);}
.side-i.on .side-ico{color:var(--violet);}
.side-t{flex:1;white-space:nowrap;}
.nav-badge{min-width:18px;height:18px;border-radius:var(--r-pill);background:var(--err);color:#fff;font-size:10px;display:flex;align-items:center;justify-content:center;padding:0 5px;}

.wrap{flex:1;min-width:0;padding:24px 28px;max-width:100%;}

/* ---------- 卡片 ---------- */
.card{position:relative;padding:22px 24px;margin-bottom:18px;overflow:hidden;}
.card h2{font-family:var(--serif);font-size:17px;letter-spacing:2px;margin-bottom:14px;color:var(--ink);position:relative;display:inline-block;}
.card h2::after{
  content:"";position:absolute;left:0;bottom:-5px;width:36px;height:2px;
  background:linear-gradient(90deg,var(--violet),transparent);
  border-radius:2px;
}
.card h3{font-family:var(--serif);font-size:15px;letter-spacing:1px;margin:14px 0 10px;color:var(--ink);}

/* ---------- 按钮：圆润友好 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 18px;border:none;border-radius:var(--r-pill);
  font-size:13.5px;font-family:var(--sans);cursor:pointer;
  transition:all var(--dur) var(--ease);
  background:var(--violet-l);color:var(--violet-d);
  border:1px solid transparent;line-height:1.4;white-space:nowrap;
}
.btn:hover{background:var(--violet-g);color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px rgba(154,143,196,.25);}
.btn:active{transform:translateY(0);}
.btn-primary{background:var(--violet-g);color:#fff;}
.btn-primary:hover{filter:brightness(1.06);}
.btn-danger{background:rgba(192,138,154,.14);color:var(--err);}
.btn-danger:hover{background:var(--err);color:#fff;}
.btn-sm{padding:5px 12px;font-size:12px;}
.btn-mini{padding:3px 10px;font-size:11.5px;}
.btn-lg{padding:11px 26px;font-size:15px;}
.btn-block{width:100%;}
.btn-light{background:var(--card-solid);color:var(--ink-2);border:1px solid var(--line);}
.btn-light:hover{border-color:var(--violet);color:var(--violet);}

/* ---------- 表格 ---------- */
.tb{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;}
.tb th{
  text-align:left;padding:11px 14px;font-weight:600;color:var(--ink-2);
  font-size:12px;letter-spacing:1px;
  background:var(--line-soft);border-bottom:1px solid var(--line);
}
.tb th:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm);}
.tb th:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0;}
.tb td{padding:11px 14px;border-bottom:1px solid var(--line-soft);color:var(--ink);vertical-align:middle;}
.tb tr:hover td{background:var(--violet-l);}
.tb tr:last-child td{border-bottom:none;}

/* ---------- 表单 ---------- */
.form-row{margin-bottom:16px;}
.form-row label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:6px;font-weight:500;}
input[type=text],input[type=password],input[type=email],input[type=number],
input[type=tel],input[type=url],input[type=date],input[type=search],
select,textarea{
  width:100%;padding:9px 14px;border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:13.5px;font-family:var(--sans);
  background:rgba(255,255,255,.7);color:var(--ink);
  transition:all var(--dur) var(--ease);outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--violet);background:#fff;
  box-shadow:0 0 0 3px var(--violet-l);
}
textarea{resize:vertical;min-height:90px;line-height:1.6;}
select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a8a3bd' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px;}
.checkbox-row,.radio-row{display:flex;align-items:center;gap:8px;}

/* ---------- 标签 / 药丸 ---------- */
.tag{display:inline-block;padding:3px 10px;border-radius:var(--r-pill);font-size:11.5px;font-weight:500;}
.tag-green{background:var(--celadon-l);color:var(--celadon);}
.tag-red{background:rgba(192,138,154,.14);color:var(--err);}
.tag-blue{background:var(--violet-l);color:var(--violet);}
.tag-gold{background:var(--gold-l);color:var(--gold);}
.tag-gray{background:var(--line-soft);color:var(--ink-3);}
.chip{padding:4px 12px;font-size:12px;cursor:pointer;transition:all var(--dur) var(--ease);}
.chip:hover{border-color:var(--violet);color:var(--violet);}
.chip.on{background:var(--violet-g);color:#fff;border-color:transparent;}

/* ---------- 统计卡 ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-bottom:20px;}
.stat-card{position:relative;padding:18px 20px;display:flex;flex-direction:column;gap:6px;transition:transform var(--dur) var(--ease);}
.stat-card:hover{transform:translateY(-2px);}
.stat-card .sc-ico{width:36px;height:36px;border-radius:10px;background:var(--violet-l);color:var(--violet-d);display:flex;align-items:center;justify-content:center;margin-bottom:4px;}
.stat-card .sc-val{font-size:24px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;}
.stat-card .sc-label{font-size:12.5px;color:var(--ink-3);letter-spacing:.5px;}
.stat-card .sc-delta{font-size:11px;margin-top:2px;}
.delta-up{color:var(--celadon);}
.delta-down{color:var(--err);}
.delta-zero{color:var(--ink-3);}

/* ---------- 提示条 ---------- */
.alert{padding:12px 18px;border-radius:var(--r-sm);font-size:13.5px;margin-bottom:16px;display:flex;align-items:center;gap:10px;position:relative;}
.alert-ok{background:var(--celadon-l);color:var(--celadon);border-color:rgba(143,184,160,.25);}
.alert-err{background:rgba(192,138,154,.12);color:var(--err);border-color:rgba(192,138,154,.25);}

/* ---------- 公告 ---------- */
.ann{padding:14px 18px;margin-bottom:18px;}
.ann-t{font-family:var(--serif);font-size:14px;color:var(--violet);margin-bottom:6px;letter-spacing:1px;}
.ann-body{font-size:13px;color:var(--ink-2);line-height:1.7;}

/* ---------- 问候语 ---------- */
.greeting{font-family:var(--serif);font-size:20px;letter-spacing:3px;color:var(--ink);margin-bottom:18px;}
.greeting .sub{font-size:13px;color:var(--ink-3);letter-spacing:1px;margin-left:8px;}

/* ---------- 下一步引导 ---------- */
.next-step{display:flex;align-items:center;gap:14px;padding:16px 20px;border-radius:var(--r-md);margin-bottom:18px;cursor:pointer;transition:all var(--dur) var(--ease);}
.next-step:hover{transform:translateX(3px);}
.next-step .ns-t{font-weight:600;font-size:14px;}
.next-step .ns-d{font-size:12.5px;color:var(--ink-3);margin-top:2px;}
.next-step .ns-go{margin-left:auto;font-size:12.5px;color:var(--violet);font-weight:600;}
.next-ok{background:var(--celadon-l);border-color:rgba(143,184,160,.25);}
.next-warn{background:var(--gold-l);border-color:rgba(194,169,122,.25);}
.next-urgent{background:rgba(192,138,154,.12);border-color:rgba(192,138,154,.25);}

/* ---------- 分页 ---------- */
.pagination{display:flex;gap:6px;justify-content:center;margin:20px 0;padding:8px;}
.pagination a,.pagination span{
  min-width:34px;height:34px;display:flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);font-size:13px;color:var(--ink-2);
  background:var(--card-solid);border:1px solid var(--line);
  transition:all var(--dur) var(--ease);padding:0 10px;
}
.pagination a:hover{border-color:var(--violet);color:var(--violet);}
.pagination .cur{background:var(--violet-g);color:#fff;border-color:transparent;}

/* ---------- 弹窗 ---------- */
.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(61,56,71,.4);backdrop-filter:blur(4px);}
.modal-inner{background:var(--card-solid);border-radius:var(--r-lg);padding:26px;max-width:520px;width:100%;box-shadow:var(--sh-3);}

/* ---------- 登录盒 ---------- */
.login-box{max-width:400px;margin:8vh auto;padding:34px 30px;background:rgba(255,255,255,.82);backdrop-filter:blur(20px);border-radius:var(--r-xl);border:1px solid var(--glass-border);box-shadow:var(--sh-3);}

/* ---------- 主机卡 / 套餐卡 ---------- */
.host-card,.pkg-box{padding:18px;border-radius:var(--r-md);background:var(--glass-bg);border:1px solid var(--line);transition:all var(--dur) var(--ease);}
.host-card:hover,.pkg-box:hover{border-color:var(--violet);box-shadow:var(--sh-2);transform:translateY(-2px);}

/* ---------- 图表容器 ---------- */
.donut-wrap{display:flex;align-items:center;gap:16px;}
.trend-row{display:grid;gap:16px;}

/* ---------- 代码块 ---------- */
.code,.pre{background:rgba(154,143,196,.08);border:1px solid var(--line-soft);border-radius:var(--r-sm);padding:12px 14px;font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12.5px;color:var(--ink-2);overflow-x:auto;}

/* ---------- 工具类 ---------- */
.u-mt10{margin-top:10px;}.u-mb14{margin-bottom:14px;}.u-lh19{line-height:1.9;}.u-mw520{max-width:520px;margin:0 auto;}
.mono{font-family:"SF Mono",Menlo,Consolas,monospace;}
.hint{font-size:12.5px;color:var(--ink-3);line-height:1.7;}
.divider{height:1px;background:var(--line-soft);margin:18px 0;}

/* ---------- 动效：克制入场 ---------- */
@keyframes mdyIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.card,.stat-card,.alert,.ann,.entry,.how-i{animation:mdyIn .35s var(--ease) both;}
.card:nth-child(2),.stat-card:nth-child(2){animation-delay:.04s;}
.card:nth-child(3),.stat-card:nth-child(3){animation-delay:.08s;}

/* 尊重减弱动画 */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;}
}

/* ---------- 响应式 ---------- */
@media (max-width:900px){
  .side{position:fixed;left:0;top:56px;bottom:0;z-index:90;transform:translateX(-100%);transition:transform .25s var(--ease);}
  .shell.side-open .side{transform:translateX(0);}
  .wrap{padding:16px;}
  .stats{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  .stats{grid-template-columns:1fr;}
  .topbar{padding:10px 14px;}
  .brand-t{display:none;}
}

/* ============================================================
   深度增强层 · 全组件精致化
   低调 · 克制 · 可爱 · 统一液态玻璃语言
   ============================================================ */

/* ---------- 工具栏容器 ---------- */
.mdy-toolbar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;margin:12px 0 18px;
  background:rgba(255,255,255,.55);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);
  border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}

/* ---------- 实时时钟（胶囊） ---------- */
[data-mdy-clock]{
  display:inline-flex;align-items:center;
  padding:5px 14px;border-radius:var(--r-pill);
  background:linear-gradient(135deg,rgba(154,143,196,.12),rgba(143,184,160,.10));
  border:1px solid rgba(154,143,196,.18);
  color:var(--violet-d);
  font-family:"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  font-size:12.5px;font-weight:600;letter-spacing:.3px;
  white-space:nowrap;transition:all var(--dur) var(--ease);
}
[data-mdy-clock]:hover{background:rgba(154,143,196,.20);transform:translateY(-1px);}

/* ---------- 主题切换按钮 ☀🌙 ---------- */
[data-mdy-theme-btn]{
  cursor:pointer;padding:6px 14px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.7);border:1px solid var(--glass-border);
  color:var(--ink-2);font-size:14px;line-height:1;
  transition:all var(--dur) var(--ease);
  box-shadow:var(--sh-1);
}
[data-mdy-theme-btn]:hover{
  background:var(--violet-l);border-color:var(--violet);
  color:var(--violet-d);transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(154,143,196,.18);
}
[data-mdy-theme-btn].mdy-theme-active,
[data-mdy-theme-btn][aria-pressed="true"]{
  background:var(--violet-g);color:#fff;border-color:transparent;
  box-shadow:0 3px 10px rgba(124,113,168,.30);
}

/* ---------- 刷新按钮 ⟳ ---------- */
[data-mdy-refresh]{
  cursor:pointer;padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.7);border:1px solid var(--glass-border);
  color:var(--ink-2);font-size:13px;line-height:1;
  display:inline-flex;align-items:center;gap:4px;
  transition:all var(--dur) var(--ease);
}
[data-mdy-refresh]:hover{
  background:var(--celadon-l);border-color:var(--celadon);
  color:var(--celadon);transform:translateY(-1px);
}
[data-mdy-refresh].mdy-refresh-spinning{animation:mdy-spin .8s linear infinite;}
@keyframes mdy-spin{to{transform:rotate(360deg);}}

/* ---------- 复制按钮 ⧉ ---------- */
[data-mdy-copy]{
  cursor:pointer;padding:6px 12px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.7);border:1px solid var(--glass-border);
  color:var(--ink-2);font-size:13px;line-height:1;
  transition:all var(--dur) var(--ease);
}
[data-mdy-copy]:hover{
  background:var(--gold-l);border-color:var(--gold);
  color:var(--gold);transform:translateY(-1px);
}

/* ---------- 通知徽标 ---------- */
[data-mdy-badge]{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:20px;height:20px;padding:0 6px;
  border-radius:var(--r-pill);
  background:linear-gradient(135deg,#c08a9a,#a87a8e);
  color:#fff;font-size:11px;font-weight:700;
  box-shadow:0 2px 8px rgba(192,138,154,.35);
  transition:all var(--dur) var(--ease);
}
[data-mdy-badge]:hover{transform:scale(1.12);}
[data-mdy-badge].mdy-badge-active{animation:mdy-pulse 1.8s ease-in-out infinite;}
@keyframes mdy-pulse{0%,100%{box-shadow:0 2px 8px rgba(192,138,154,.35);}50%{box-shadow:0 2px 14px rgba(192,138,154,.55);}}

/* ---------- 网络状态指示器 ---------- */
[data-mdy-network]{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:var(--r-pill);
  font-size:12px;font-weight:500;
}
[data-mdy-network].mdy-net-online{color:var(--celadon);background:var(--celadon-l);}
[data-mdy-network].mdy-net-offline{color:var(--err);background:rgba(192,138,154,.12);}
[data-mdy-network]::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;}
[data-mdy-network].mdy-net-online::before{animation:mdy-dotpulse 2s ease-in-out infinite;}
@keyframes mdy-dotpulse{0%,100%{opacity:1;}50%{opacity:.4;}}

/* ---------- 问候语增强 ---------- */
.greeting,.greet{
  position:relative;padding:18px 22px;margin-bottom:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.8),rgba(247,246,251,.6));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border:1px solid var(--glass-border);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
}
.greeting .g-title,.greet .g-title{
  font-family:var(--serif);font-size:20px;font-weight:700;
  letter-spacing:3px;color:var(--ink);
}
.greeting .g-sub,.greet .g-sub{
  font-size:13px;color:var(--ink-2);margin-top:6px;letter-spacing:1px;
}
.greeting a,.greet a{color:var(--violet-d);font-weight:500;}

/* ---------- Bing 横幅 ---------- */
.mdy-bing-banner{
  height:220px;border-radius:var(--r-lg);
  background-size:cover;background-position:center;
  box-shadow:var(--sh-2);margin:0 0 18px;
  position:relative;overflow:hidden;
  border:1px solid var(--glass-border);
}
.mdy-bing-banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(61,56,71,.45) 100%);
}

/* ---------- 古诗条 ---------- */
.mdy-poem-bar{
  margin:18px 0 0;padding:16px 20px;
  background:linear-gradient(135deg,rgba(194,169,122,.08),rgba(154,143,196,.06));
  border:1px solid rgba(194,169,122,.18);
  border-radius:var(--r-md);
  font-family:var(--serif);font-size:14px;color:var(--ink-2);
  letter-spacing:2px;text-align:center;line-height:1.8;
}

/* ---------- 仪表盘统计卡（.stat） ---------- */
.stats .stat{
  position:relative;padding:18px 20px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--glass-border);border-radius:var(--r-lg);
  box-shadow:var(--sh-1);
  transition:all var(--dur) var(--ease);
  display:flex;flex-direction:column;gap:4px;
}
.stats .stat:hover{transform:translateY(-2px);box-shadow:var(--sh-2);}
.stats .stat .num{font-size:26px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1;}
.stats .stat .lab,.stats .stat .label{font-size:12.5px;color:var(--ink-3);letter-spacing:.5px;margin-top:2px;}

/* ---------- 进度条 meter ---------- */
.meter{
  height:8px;border-radius:var(--r-pill);
  background:rgba(154,143,196,.10);
  overflow:hidden;position:relative;
}
.meter i{
  display:block;height:100%;border-radius:var(--r-pill);
  background:var(--violet-g);
  transition:width .6s var(--ease);
}
.meter.full i{background:linear-gradient(90deg,var(--celadon),#6ba88a);}

/* ---------- 环形图 ---------- */
.donut-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;}
.donut-legend{display:flex;flex-direction:column;gap:8px;}
.donut-legend>div{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);}
.donut-legend .dot{width:10px;height:10px;border-radius:50%;flex:none;}

/* ---------- 趋势图 ---------- */
.trend-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;}
.trend-item{
  padding:14px 16px;
  background:rgba(255,255,255,.6);
  border:1px solid var(--glass-border);border-radius:var(--r-md);
}
.trend-svg{width:100%;height:110px;display:block;}

/* ---------- 页脚 ---------- */
.footer{
  margin-top:30px;padding:18px 0;
  text-align:center;font-size:12px;color:var(--ink-3);
  letter-spacing:1px;border-top:1px solid var(--line-soft);
}
.footer .ver{
  display:inline-block;padding:2px 10px;margin:0 4px;
  background:var(--line-soft);border-radius:var(--r-pill);
  color:var(--ink-2);font-size:11px;
}

/* ---------- 标签 tag 增强 ---------- */
.tag{
  display:inline-flex;align-items:center;
  padding:3px 11px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:500;line-height:1.6;
}
.tag-green{background:var(--celadon-l);color:var(--celadon);}
.tag-red{background:rgba(192,138,154,.14);color:var(--err);}
.tag-blue{background:var(--violet-l);color:var(--violet-d);}
.tag-gold{background:var(--gold-l);color:var(--gold);}
.tag-gray{background:var(--line-soft);color:var(--ink-3);}

/* ---------- 表格包裹与筛选 ---------- */
.tb-wrap{overflow-x:auto;border-radius:var(--r-md);}
.tb-filter{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
}
.tb-filter input[type=search]{
  max-width:280px;padding:8px 14px;
  border-radius:var(--r-pill);border:1px solid var(--line);
  background:rgba(255,255,255,.7);font-size:13px;
}
.tb-filter input[type=search]:focus{border-color:var(--violet);background:#fff;box-shadow:0 0 0 3px var(--violet-l);}
.tb-filter-n{font-size:12px;color:var(--ink-3);}

/* ---------- 通用间距工具 ---------- */
.u-mt10{margin-top:10px;}.u-mt16{margin-top:16px;}.u-mt20{margin-top:20px;}
.u-mb6{margin-bottom:6px;}.u-mb12{margin-bottom:12px;}.u-mb14{margin-bottom:14px;}
.u-fs13{font-size:13px;}
.u-flex1b{flex:1;min-width:280px;}
.u-flex2{flex:2;min-width:280px;}
.u-teal{color:var(--celadon)!important;}

/* ---------- 页面标题 ---------- */
.page-title{
  font-family:var(--serif);font-size:22px;font-weight:700;
  letter-spacing:3px;color:var(--ink);margin-bottom:18px;
  padding-bottom:12px;border-bottom:1px solid var(--line-soft);
}

/* ---------- Toast 统一 ---------- */
.toast-item,.mdy-toast{
  display:flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:var(--r-md);
  background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
  box-shadow:var(--sh-2);border:1px solid var(--glass-border);
  font-size:13.5px;color:var(--ink);
}

/* ---------- 模态框 ---------- */
.modal-inner,.mdy-modal-box{
  background:rgba(255,255,255,.92);backdrop-filter:blur(20px);
  border:1px solid var(--glass-border);border-radius:var(--r-xl);
  box-shadow:var(--sh-3);
}
.mdy-modal-overlay,.modal{backdrop-filter:blur(6px);background:rgba(61,56,71,.35);}

/* ---------- 印章 logo 增强 ---------- */
.brand .seal{
  border-radius:10px;
  box-shadow:0 4px 14px rgba(124,113,168,.30),inset 0 1px 0 rgba(255,255,255,.5);
}

/* ---------- 侧边栏当前项增强 ---------- */
.side-i.on{
  background:linear-gradient(90deg,rgba(154,143,196,.18),rgba(154,143,196,.02));
  box-shadow:inset 0 0 0 1px rgba(154,143,196,.12);
}
.side-i.on::before{
  background:var(--violet-g);border-radius:0 4px 4px 0;
}

/* ---------- 所有可交互元素统一过渡 ---------- */
button,a,.btn,.tag,.chip,.side-i,.stat,.stat-card,.card,.entry,
input,select,textarea,[data-mdy-theme-btn],[data-mdy-refresh],[data-mdy-copy],
[data-mdy-badge],[data-mdy-clock]{
  transition:all var(--dur) var(--ease);
}

/* ============================================================
   v7 精修层 · 滚动条 / 通知中心 / 移动端 / 紧凑排版
   ============================================================ */

/* ---------- 自定义滚动条：细窄、淡雅、不占视觉 ---------- */
*{
  scrollbar-width:thin;
  scrollbar-color:rgba(154,143,196,.28) transparent;
}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:rgba(154,143,196,.28);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:rgba(154,143,196,.5);}
::-webkit-scrollbar-corner{background:transparent;}
/* 隐藏横向滚动条的滚动按钮残留 */
::-webkit-scrollbar-button{display:none;}

/* ---------- 通知中心（合并版）面板精修 ---------- */
.rtn-bell{
  width:34px;height:34px;border-radius:50%;
  border:1px solid var(--glass-border);background:rgba(255,255,255,.65);
  backdrop-filter:blur(8px);box-shadow:var(--sh-1);
}
.rtn-bell:hover,.rtn-bell.rtn-on{
  background:var(--violet-l);border-color:var(--violet);color:var(--violet-d);
  transform:translateY(-1px);
}
.rtn-badge{
  background:linear-gradient(135deg,#c08a9a,#a87a8e);
  box-shadow:0 2px 8px rgba(192,138,154,.4);
  min-width:17px;height:17px;line-height:17px;font-size:10px;
}
.rtn-panel{
  border-radius:var(--r-lg);border:1px solid var(--glass-border);
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:var(--sh-3);overflow:hidden;
}
.rtn-panel-head{padding:12px 16px;border-bottom:1px solid var(--line-soft);background:linear-gradient(135deg,rgba(154,143,196,.10),rgba(255,255,255,0));}
.rtn-panel-title{font-family:var(--serif);font-size:14px;letter-spacing:2px;color:var(--ink);}
.rtn-msgs{
  font-size:12px;color:var(--violet-d);text-decoration:none;
  padding:4px 12px;border-radius:var(--r-pill);
  border:1px solid var(--glass-border);background:rgba(255,255,255,.7);
  transition:all var(--dur) var(--ease);
}
.rtn-msgs:hover{background:var(--violet-l);color:var(--violet-dd);}
.rtn-readall{
  font-size:11.5px;padding:4px 12px;border-radius:var(--r-pill);
  border:1px solid var(--glass-border);background:rgba(255,255,255,.7);
  color:var(--ink-2);cursor:pointer;
}
.rtn-readall:hover{background:var(--violet-g);color:#fff;}
.rtn-list{max-height:360px;overflow-y:auto;}
.rtn-item{border-bottom:1px solid var(--line-soft);}
.rtn-item:hover{background:var(--violet-l);}
.rtn-panel-foot{
  padding:9px 16px;font-size:11px;color:var(--ink-3);
  border-top:1px solid var(--line-soft);background:rgba(247,246,251,.6);
  text-align:center;letter-spacing:.5px;
}

/* ---------- 顶栏精修：紧凑轻量 ---------- */
.topbar{padding:9px 20px;}
.topbar-right{gap:10px;}
.top-avatar{width:30px;height:30px;border:2px solid rgba(255,255,255,.8);box-shadow:var(--sh-1);}
.top-logout{padding:5px 12px;}

/* ---------- 移动端汉堡按钮 ---------- */
.mb-menu-btn{
  display:none;width:34px;height:34px;flex:none;
  align-items:center;justify-content:center;
  border:1px solid var(--glass-border);border-radius:50%;
  background:rgba(255,255,255,.65);cursor:pointer;
  box-shadow:var(--sh-1);transition:all var(--dur) var(--ease);
}
.mb-menu-btn:hover{background:var(--violet-l);border-color:var(--violet);}
.mb-menu-btn i,.mb-menu-btn i::before,.mb-menu-btn i::after{
  content:"";display:block;width:15px;height:1.6px;border-radius:2px;
  background:var(--ink-2);position:relative;transition:all .22s var(--ease);
}
.mb-menu-btn i::before{position:absolute;top:-5px;left:0;}
.mb-menu-btn i::after{position:absolute;top:5px;left:0;}
body.nav-open .mb-menu-btn i{background:transparent;}
body.nav-open .mb-menu-btn i::before{top:0;transform:rotate(45deg);}
body.nav-open .mb-menu-btn i::after{top:0;transform:rotate(-45deg);}
/* 侧栏打开时遮罩 */
@media (max-width:720px){
  .mb-menu-btn{display:inline-flex;}
  body.nav-open::after{
    content:"";position:fixed;inset:0;z-index:110;
    background:rgba(61,56,71,.28);backdrop-filter:blur(2px);
  }
  body.nav-open .topbar,body.nav-open .wrap{filter:none;}
}

/* ---------- 侧边栏精修 ---------- */
.side{padding:12px 10px;width:208px;}
.side-i{padding:8px 11px;border-radius:var(--r-sm);gap:9px;}
.side-group{font-size:10.5px;padding:8px 10px 5px;}
.wrap{padding:20px 22px;}

/* ---------- 遥距更紧凑（娇小好看） ---------- */
.card{padding:18px 20px;margin-bottom:14px;}
.card h2{font-size:16px;margin-bottom:12px;}
.stats{gap:12px;margin-bottom:14px;}
.stat-card{padding:15px 17px;}
.stat-card .sc-val{font-size:21px;}
.greeting,.greet{padding:15px 18px;margin-bottom:14px;}
.greeting .g-title,.greet .g-title{font-size:18px;}
.mdy-bing-banner{height:190px;margin-bottom:14px;}
.footer{margin-top:18px;padding:14px 0;}
.u-mt20{margin-top:14px;}

/* ---------- 移动端快捷栏精修 ---------- */
.mbar{box-shadow:0 -2px 14px rgba(94,84,138,.06);}
.mbar-i.on{
  background:var(--violet-l);border-radius:12px;color:var(--violet-dd);
}
.mbar-i.on svg{stroke:var(--violet-d);}

/* ============================================================
   移动端适配（≤720px）
   ============================================================ */
@media (max-width:720px){
  .topbar{padding:8px 12px;gap:8px;}
  .brand-t{font-size:13px;letter-spacing:1px;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .top-clock{display:none;}
  .top-user-name{display:none;}
  .top-logout{font-size:12px;padding:4px 10px;}
  .shell{display:block;}
  .side{
    position:fixed;left:0;top:52px;bottom:0;z-index:120;
    width:min(240px,76vw);height:auto;
    transform:translateX(-105%);
    transition:transform .28s var(--ease);
    background:rgba(247,246,251,.94);
    backdrop-filter:blur(20px) saturate(160%);
    -webkit-backdrop-filter:blur(20px) saturate(160%);
    border-right:1px solid var(--glass-border);
    box-shadow:12px 0 40px rgba(94,84,138,.12);
  }
  body.nav-open .side{transform:translateX(0);}
  .wrap{padding:14px 12px 84px;}
  .stats{grid-template-columns:repeat(2,1fr);gap:10px;}
  .stat-card{padding:13px 14px;}
  .stat-card .sc-val{font-size:19px;}
  .card{padding:15px 14px;border-radius:var(--r-md);}
  .mb-show{display:flex !important;}
  .mb-hide{display:none !important;}
  .greeting .g-title,.greet .g-title{font-size:16px;letter-spacing:2px;}
  .mdy-bing-banner{height:140px;border-radius:var(--r-md);}
  .mdy-poem-bar{display:none;}
  .footer{font-size:11px;margin-bottom:64px;}
  .login-box{margin:5vh auto;padding:26px 20px;border-radius:var(--r-lg);}
  /* 通知面板：手机全宽下拉 */
  .rtn-panel{
    position:fixed;left:10px;right:10px;top:56px;width:auto;
    max-width:none;border-radius:var(--r-lg);
  }
  .rtn-list{max-height:56vh;}
  .btn-lg{width:100%;}
  .pagination a,.pagination span{min-width:32px;height:32px;}
  /* 表格手机端卡片化 */
  .tb-cardify thead{display:none;}
  .tb-cardify tbody tr{
    display:block;margin-bottom:10px;padding:10px 12px;
    background:rgba(255,255,255,.7);
    border:1px solid var(--glass-border);border-radius:var(--r-md);
  }
  .tb-cardify tbody td{
    display:flex;justify-content:space-between;gap:10px;
    padding:5px 0;border-bottom:1px dashed var(--line-soft);
    font-size:12.5px;text-align:right;
  }
  .tb-cardify tbody td:last-child{border-bottom:none;}
  .tb-cardify tbody td::before{
    content:attr(data-label);color:var(--ink-3);
    font-size:11.5px;text-align:left;flex:none;
  }
}

/* ---------- 超小屏（≤400px） ---------- */
@media (max-width:400px){
  .stats{grid-template-columns:1fr 1fr;}
  .brand .seal{width:26px;height:26px;font-size:13px;}
  .wrap{padding:10px 8px 78px;}
  .card{padding:13px 11px;}
}

/*!
 * 萌哒云 R10 增强样式 - 紫色主题 + 全部新组件
 */

/* ========== CSS 变量（紫色主题）========== */
:root {
    --mdy-purple-50:  #f3efff;
    --mdy-purple-100: #e0d7ff;
    --mdy-purple-200: #c2afff;
    --mdy-purple-300: #a388ff;
    --mdy-purple-400: #8b66ff;
    --mdy-purple-500: #6d4ce6;
    --mdy-purple-600: #5a36d4;
    --mdy-purple-700: #4826ad;
    --mdy-purple-800: #341a7d;
    --mdy-purple-900: #1f0f4d;
    --mdy-grad: linear-gradient(135deg, hsl(265,70%,70%) 0%, hsl(280,60%,55%) 50%, hsl(295,60%,45%) 100%);
    --mdy-grad-soft: linear-gradient(135deg, hsl(265,65%,90%) 0%, hsl(280,55%,85%) 100%);
    --mdy-shadow-purple: 0 4px 16px rgba(109, 76, 230, 0.25);
    --mdy-shadow-soft: 0 2px 8px rgba(0,0,0,0.06);
}

/* ========== 暗色主题 ========== */
[data-mdy-theme="dark"] {
    --mdy-bg: #1a1430;
    --mdy-text: #e8e3f5;
    --mdy-border: #2a1f4d;
}
[data-mdy-theme="light"] {
    --mdy-bg: #fff;
    --mdy-text: #2a2348;
    --mdy-border: #e8e3f5;
}

/* ========== 顶栏用户卡片 ========== */
.top-user { display:flex; align-items:center; gap:10px; }
.top-avatar {
    width:36px; height:36px; border-radius:50%; background:var(--mdy-grad);
    border:2px solid #fff; box-shadow:var(--mdy-shadow-soft);
    object-fit:cover; transition: transform .2s;
}
.top-avatar:hover { transform: scale(1.1); }
.top-avatar.mdy-avatar-loading { opacity:.5; animation: mdy-pulse 1.2s infinite; }
.top-avatar.mdy-avatar-ready { animation: mdy-fadein .35s ease; }
.top-avatar.mdy-avatar-fallback { opacity:.7; }
@keyframes mdy-pulse { 0%,100% { opacity:.4 } 50% { opacity:.8 } }
@keyframes mdy-fadein { from { opacity:0; transform:scale(.8) } to { opacity:1; transform:scale(1) } }

/* ========== 一言 / 古诗 ========== */
.mdy-quote {
    margin:0; padding:14px 18px; background:var(--mdy-grad-soft);
    border-left:4px solid var(--mdy-purple-500); border-radius:6px;
    color:var(--mdy-purple-800); font-size:15px; line-height:1.6;
    font-style:italic; box-shadow:var(--mdy-shadow-soft);
    animation: mdy-fadein .4s ease;
}
.mdy-quote-from { display:block; margin-top:6px; font-size:12px; color:var(--mdy-purple-600); font-style:normal; }
.mdy-quote-loading, .mdy-poem-loading, .mdy-qrcode-loading {
    color:var(--mdy-purple-500); font-size:13px; font-style:italic;
    padding:8px; text-align:center;
}
.mdy-poem { padding:10px 14px; background:rgba(255,255,255,.85); border-radius:6px; border:1px solid var(--mdy-purple-100); }
.mdy-poem-title { font-size:16px; font-weight:600; color:var(--mdy-purple-700); margin-bottom:4px; }
.mdy-poem-author { font-size:12px; color:var(--mdy-purple-500); margin-bottom:6px; }
.mdy-poem-content { font-size:14px; line-height:1.7; color:var(--mdy-purple-800); }
.mdy-poem-empty, .mdy-quote-empty { color:var(--mdy-purple-400); font-size:13px; }

/* ========== 二维码弹出 ========== */
.mdy-qr-pop { display:inline-block; padding:10px; background:#fff; border-radius:8px; box-shadow:var(--mdy-shadow-purple); }
.mdy-qrcode-img { display:block; max-width:240px; border-radius:4px; }
.mdy-qrcode-tip { margin-top:6px; text-align:center; font-size:12px; color:var(--mdy-purple-600); }
.mdy-qrcode-empty { color:var(--mdy-purple-400); }

/* ========== 短链接结果 ========== */
.mdy-shorten-out { color:var(--mdy-purple-700); font-family:monospace; background:var(--mdy-purple-50); padding:2px 6px; border-radius:3px; }

/* ========== 节假日标签 ========== */
.g-holiday, .mdy-holiday-tag {
    display:inline-block; padding:3px 10px; margin-left:8px;
    background:var(--mdy-grad); color:#fff; font-size:12px;
    border-radius:10px; box-shadow:var(--mdy-shadow-purple);
    animation: mdy-fadein .3s ease;
}

/* ========== Bing Banner ========== */
.mdy-bing-banner {
    height:240px; border-radius:14px; background-size:cover; background-position:center;
    box-shadow:var(--mdy-shadow-purple); margin:14px 0;
    position:relative; overflow:hidden; animation: mdy-fadein .5s ease;
}
.mdy-bing-banner::after {
    content:''; position:absolute; inset:0;
    background:linear-gradient(180deg, transparent 50%, rgba(0,0,0,.4) 100%);
}

/* ========== Toast（增强）========== */
.mdy-toast-box {
    position:fixed; top:24px; right:24px; z-index:999999;
    display:flex; flex-direction:column; gap:8px;
    pointer-events:none; max-width:380px;
}
.mdy-toast {
    display:flex; align-items:center; gap:8px;
    padding:10px 16px; background:#fff; color:var(--mdy-purple-900);
    border-radius:8px; box-shadow:0 4px 24px rgba(0,0,0,.18);
    border-left:4px solid var(--mdy-purple-500);
    transform:translateX(120%); transition:transform .25s ease;
    pointer-events:auto; font-size:14px; min-width:200px;
}
.mdy-toast-show { transform:translateX(0); }
.mdy-toast-success { border-left-color:#22c55e; }
.mdy-toast-warn { border-left-color:#f59e0b; }
.mdy-toast-error { border-left-color:#ef4444; }
.mdy-toast-loading { border-left-color:var(--mdy-purple-300); }
.mdy-toast-icon { font-size:18px; font-weight:700; color:var(--mdy-purple-500); }
.mdy-toast-success .mdy-toast-icon { color:#22c55e; }
.mdy-toast-warn .mdy-toast-icon { color:#f59e0b; }
.mdy-toast-error .mdy-toast-icon { color:#ef4444; }
.mdy-toast-msg { flex:1; }
.mdy-toast-action {
    background:transparent; border:1px solid currentColor;
    color:var(--mdy-purple-500); padding:3px 10px;
    border-radius:4px; cursor:pointer; font-size:12px;
}
.mdy-toast-action:hover { background:var(--mdy-purple-50); }

/* ========== 模态框 ========== */
.mdy-modal-overlay {
    position:fixed; inset:0; background:rgba(31,15,77,.55);
    z-index:999998; display:flex; align-items:center; justify-content:center;
    opacity:0; transition:opacity .2s ease;
    backdrop-filter:blur(4px);
}
.mdy-modal-show { opacity:1; }
.mdy-modal-box {
    background:#fff; border-radius:12px; padding:0;
    max-width:90vw; max-height:90vh; overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.3);
    transform:scale(.9); transition:transform .2s ease;
    display:flex; flex-direction:column;
}
.mdy-modal-show .mdy-modal-box { transform:scale(1); }
.mdy-modal-sm { width:340px; }
.mdy-modal-md { width:520px; }
.mdy-modal-lg { width:780px; }
.mdy-modal-title {
    padding:14px 20px; font-size:16px; font-weight:600;
    color:var(--mdy-purple-800); border-bottom:1px solid var(--mdy-purple-100);
    background:var(--mdy-grad-soft);
}
.mdy-modal-body {
    padding:18px 20px; font-size:14px; color:var(--mdy-purple-900);
    overflow:auto; flex:1;
}
.mdy-modal-foot {
    padding:12px 20px; display:flex; gap:8px; justify-content:flex-end;
    border-top:1px solid var(--mdy-purple-100); background:var(--mdy-purple-50);
}
.mdy-modal-btn {
    padding:7px 16px; border-radius:6px; border:1px solid var(--mdy-purple-200);
    background:#fff; color:var(--mdy-purple-700); cursor:pointer;
    font-size:14px; transition:all .2s;
}
.mdy-modal-btn:hover { background:var(--mdy-purple-50); border-color:var(--mdy-purple-300); }
.mdy-modal-btn-primary {
    background:var(--mdy-grad); color:#fff; border:none;
    box-shadow:var(--mdy-shadow-purple);
}
.mdy-modal-btn-primary:hover { filter:brightness(1.1); }

/* ========== 实时时钟 ========== */
[data-mdy-clock] {
    display:inline-block; padding:4px 10px;
    background:var(--mdy-grad-soft); border-radius:6px;
    color:var(--mdy-purple-800); font-family:'SF Mono','Consolas',monospace;
    font-size:14px; font-weight:500;
    border:1px solid var(--mdy-purple-100);
}
.mdy-holiday-checking::before {
    content:'⏳'; margin-right:4px; animation: mdy-spin 1s linear infinite;
}
@keyframes mdy-spin { to { transform:rotate(360deg) } }

/* ========== 主题切换按钮 ========== */
[data-mdy-theme-btn] {
    cursor:pointer; padding:6px 12px; border-radius:6px;
    background:transparent; border:1px solid var(--mdy-purple-200);
    color:var(--mdy-purple-700); font-size:13px;
    transition:all .2s;
}
[data-mdy-theme-btn]:hover { background:var(--mdy-purple-50); }
.mdy-theme-active { background:var(--mdy-grad); color:#fff !important; border-color:transparent !important; }

/* ========== 刷新按钮 ========== */
[data-mdy-refresh] {
    cursor:pointer; padding:5px 12px; border-radius:5px;
    background:transparent; border:1px solid var(--mdy-purple-200);
    color:var(--mdy-purple-600); font-size:12px;
    transition:all .2s; display:inline-flex; align-items:center; gap:4px;
}
[data-mdy-refresh]:hover { background:var(--mdy-purple-50); border-color:var(--mdy-purple-400); }
.mdy-refresh-spinning { animation: mdy-spin 1s linear infinite; }
.mdy-refresh-spinning::before { content:'⟳'; }

/* ========== 复制按钮 ========== */
[data-mdy-copy] {
    cursor:pointer; padding:3px 8px; border-radius:4px;
    background:var(--mdy-purple-50); border:1px solid var(--mdy-purple-100);
    color:var(--mdy-purple-700); font-size:11px; margin-left:4px;
    transition:all .15s;
}
[data-mdy-copy]:hover { background:var(--mdy-purple-100); }

/* ========== 网络状态指示器 ========== */
[data-mdy-network] { display:inline-flex; align-items:center; gap:4px; font-size:12px; padding:3px 8px; border-radius:4px; }
.mdy-net-online { color:#22c55e; background:rgba(34,197,94,.1); }
.mdy-net-offline { color:#ef4444; background:rgba(239,68,68,.1); }
.mdy-net-online::before { content:'●'; color:#22c55e; animation: mdy-pulse 2s infinite; }
.mdy-net-offline::before { content:'●'; color:#ef4444; }

/* ========== 通知徽标 ========== */
[data-mdy-badge] {
    display:inline-block; min-width:18px; height:18px; line-height:18px;
    background:var(--mdy-grad); color:#fff; font-size:11px;
    border-radius:9px; padding:0 6px; text-align:center; font-weight:600;
    box-shadow:var(--mdy-shadow-purple);
}
.mdy-badge-active { animation: mdy-pulse 1.5s infinite; }

/* ========== 表单校验 ========== */
[data-mdy-required], [data-mdy-pattern], [data-mdy-minlength] { transition:box-shadow .2s; }
.mdy-input-error {
    box-shadow:0 0 0 2px rgba(239,68,68,.4) !important;
    border-color:#ef4444 !important;
    animation: mdy-shake .3s;
}
@keyframes mdy-shake {
    0%,100% { transform:translateX(0) }
    25% { transform:translateX(-4px) }
    75% { transform:translateX(4px) }
}

/* ========== 搜索过滤 ========== */
[data-mdy-search] {
    padding:8px 14px; border-radius:8px; border:1px solid var(--mdy-purple-100);
    background:#fff; color:var(--mdy-purple-900); font-size:14px;
    transition:border-color .2s, box-shadow .2s;
}
[data-mdy-search]:focus {
    outline:none; border-color:var(--mdy-purple-400);
    box-shadow:0 0 0 3px rgba(139,102,255,.18);
}
[data-mdy-search-count]::after {
    content:' (' attr(data-mdy-search-count) ')';
    color:var(--mdy-purple-500); font-size:12px; margin-left:6px;
}

/* ========== 增强 ID 输入/按钮（紫色）========== */
.btn-primary {
    background:var(--mdy-grad) !important;
    border-color:var(--mdy-purple-600) !important;
    box-shadow:var(--mdy-shadow-purple);
}
.btn-primary:hover { filter:brightness(1.1); }

/* ========== 滚动条紫色 ========== */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:var(--mdy-purple-50); }
::-webkit-scrollbar-thumb { background:var(--mdy-purple-300); border-radius:5px; }
::-webkit-scrollbar-thumb:hover { background:var(--mdy-purple-500); }
/* ============================================================================
   萌哒云设计系统 R11 · 东方美学全局增强层（patch_r10.css）
   ----------------------------------------------------------------------------
   加载顺序：style.css(@import app.css) → patch_r9.css → patch_r10.css（本文件，最终覆盖）
   设计纲领：
     ① 淡蓝渐变 · 无深色（根除 body.dark / data-mdy-theme=dark）
     ② Aero 透明玻璃拟态（侧栏/顶栏/卡片/弹窗/表单）
     ③ 软拟态浮起 · 苹果式缓动与回弹
     ④ 东方美学：宣纸光晕、衬线标题、印章强调、发丝高光
   ============================================================================ */

/* ============================================================
   ① 根除深色：任何深色主题令牌一律回落浅色宣纸
   ============================================================ */
body.dark,
[data-mdy-theme="dark"],
html.dark body {
    --paper:#f4f8fd; --paper-2:#e7eefb; --card:#ffffff;
    --ink:#46404f; --ink-2:#7a7385; --ink-3:#aba4b8; --line:#e8e4ee;
    --violet:#9a8fbe; --violet-d:#7c71a8; --violet-dd:#5e548a; --violet-l:#f4f2f8;
    --violet-g:linear-gradient(135deg,#a79bd0,#7c71a8);
    --acc:#ad8fb0; --acc-g:linear-gradient(120deg,#9a8fbe,#ad8fb0);
    --rouge:#b17d92; --rouge-d:#96647c; --rouge-l:#f9f1f4;
    --amber:#3a9e94; --amber-l:#e6f5f2;
    --green:#7ca088; --green-l:#eff5f0;
    --blue:#7f97bb; --blue-l:#f0f3f9;
    --mdy-bg:#fff; --mdy-text:#2a2348; --mdy-border:#e8e3f5;
    background:#f4f8fd;
}

/* ============================================================
   ② 两套配色统一：patch_r9 的「紫色主题」对齐 app.css 淡雅紫藤
   ============================================================ */
:root {
    --mdy-purple-50:#f5f3fa;  --mdy-purple-100:#eae5f3; --mdy-purple-200:#d6cde8;
    --mdy-purple-300:#bcb0da; --mdy-purple-400:#9a8fbe; --mdy-purple-500:#8a7db5;
    --mdy-purple-600:#7c6ea6; --mdy-purple-700:#5e548a; --mdy-purple-800:#4c4573;
    --mdy-purple-900:#3c3658;
    --mdy-grad:linear-gradient(135deg,#a79bd0 0%,#8576ad 55%,#75669e 100%);
    --mdy-grad-soft:linear-gradient(135deg,#f2eef9 0%,#e8e2f3 100%);
    --mdy-shadow-purple:0 4px 16px rgba(124,113,168,.18);
    --mdy-shadow-soft:0 2px 10px rgba(94,84,138,.07);
}

/* ============================================================
   ③ 淡蓝渐变背景 + 宣纸光晕（主应用，无深色）
   ============================================================ */
body {
    background:
        radial-gradient(1100px 620px at 86% -12%, rgba(165,160,214,.20), transparent 62%),
        radial-gradient(820px 520px at -8% 18%, rgba(132,178,214,.16), transparent 55%),
        radial-gradient(900px 560px at 50% 118%, rgba(196,172,196,.14), transparent 60%),
        linear-gradient(180deg, #edf3fb 0%, #f6f9fd 46%, #eff4fb 100%);
    background-attachment: fixed;
}
@media (max-width: 820px) {
    body { background-attachment: scroll; }
}

/* ============================================================
   ④ Aero 透明玻璃拟态
   ============================================================ */

/* —— 侧边栏：贴边玻璃，透出背景光晕，内凹高光 —— */
.side {
    background: color-mix(in srgb, var(--paper) 70%, transparent);
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(244,248,253,.38));
    backdrop-filter: blur(22px) saturate(1.35);
    -webkit-backdrop-filter: blur(22px) saturate(1.35);
    border-right: 1px solid rgba(255,255,255,.65);
    box-shadow: inset -1px 0 0 rgba(255,255,255,.4), 0 8px 30px rgba(94,84,138,.06);
    border-radius: 0 22px 22px 0;
}
body.dark .side,
[data-mdy-theme="dark"] .side {
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(244,248,253,.38));
}

/* —— 顶栏：在已有玻璃上精修，加柔和投影与描边 —— */
.topbar {
    background: color-mix(in srgb, var(--paper) 76%, transparent);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid rgba(255,255,255,.6);
    box-shadow: 0 6px 24px rgba(94,84,138,.06);
}

/* —— 卡片：半透明素笺 + 发丝高光 + 悬停浮起 —— */
.card {
    background: color-mix(in srgb, var(--card) 82%, transparent);
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.72));
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: 0 1px 2px rgba(94,84,138,.05), 0 12px 34px rgba(94,84,138,.07),
                inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.card:hover {
    transform: translateY(-3px);
    border-color: rgba(154,143,190,.28);
    box-shadow: 0 3px 10px rgba(94,84,138,.07), 0 22px 48px rgba(94,84,138,.11),
                inset 0 1px 0 rgba(255,255,255,.95);
}

/* —— 弹窗 / Toast：玻璃化 —— */
.mdy-modal-box {
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,250,255,.9));
    backdrop-filter: blur(24px) saturate(1.3);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.8);
    box-shadow: 0 30px 80px rgba(94,84,138,.16), inset 0 1px 0 rgba(255,255,255,.9);
    border-radius: 18px;
}
.mdy-modal-overlay { background: rgba(140,130,185,.28); backdrop-filter: blur(6px); }
.mdy-toast {
    background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,250,255,.9));
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 12px;
}

/* —— 表单控件：轻玻璃 + 聚焦光晕 —— */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
select, textarea {
    background: rgba(255,255,255,.72);
    border: 1px solid var(--line);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus,
input[type="number"]:focus, input[type="search"]:focus, input[type="tel"]:focus,
input[type="url"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
    background: rgba(255,255,255,.92);
    border-color: var(--violet);
    box-shadow: 0 0 0 4px rgba(154,143,190,.16);
    outline: none;
}

/* ============================================================
   ⑤ 苹果式动效：过渡 · 浮起 · 回弹 · 入场
   ============================================================ */

/* —— 侧栏导航项：悬停左滑高亮，激活态拟态胶囊 —— */
.side-i {
    transition: transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease),
                box-shadow .22s var(--ease);
}
.side-i:hover {
    transform: translateX(3px);
    background: rgba(154,143,190,.12);
    color: var(--violet-dd);
}
.side-i.on {
    background: linear-gradient(120deg, rgba(154,143,190,.18), rgba(173,143,176,.14));
    color: var(--violet-dd);
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.7), inset 0 0 0 1px rgba(154,143,190,.18);
}

/* —— 按钮：点击回弹 + 悬停微升 —— */
.btn, button.btn, input[type="submit"], input[type="button"], input[type="reset"] {
    transition: transform .18s var(--ease-pop), box-shadow .22s var(--ease), filter .22s var(--ease),
                background .22s var(--ease);
}
.btn:hover, button.btn:hover { transform: translateY(-1px); }
.btn:active, button.btn:active, input[type="submit"]:active, input[type="button"]:active {
    transform: scale(.97);
}

/* —— 印章：悬停轻旋 —— */
.topbar .seal { transition: transform .4s var(--ease), box-shadow .4s var(--ease); }
.topbar .seal:hover { transform: rotate(-8deg) scale(1.06); }

/* —— 列表/表行悬停 —— */
.tb tbody tr { transition: background .18s var(--ease); }
.tb tbody tr:hover { background: rgba(154,143,190,.06); }

/* —— 卡片/区块入场动画 —— */
@keyframes r10-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
.card { animation: r10-rise .45s var(--ease) both; }

/* 无障碍：偏好减少动态时关闭动画 */
@media (prefers-reduced-motion: reduce) {
    .card, .side-i, .btn, button.btn { animation: none; transition: none; }
    .card:hover { transform: none; }
}

/* ============================================================
   ⑥ 东方美学细节：衬线标题 · 发丝高光 · 淡雅滚动条
   ============================================================ */

/* 一级标题用衬线，增添书卷气 */
.card h1, .card h2, .greeting h1, .greeting h2, .page-title {
    font-family: var(--serif);
    letter-spacing: .5px;
    font-weight: 600;
}

/* 强调主按钮：紫藤渐变 + 顶部高光 */
.btn-primary,
button.btn-primary {
    background: var(--violet-g) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(124,113,168,.28), inset 0 1px 0 rgba(255,255,255,.35) !important;
}
.btn-primary:hover { filter: brightness(1.05); box-shadow: 0 10px 24px rgba(124,113,168,.34), inset 0 1px 0 rgba(255,255,255,.4) !important; }

/* 滚动条：宣纸轨道 + 紫藤滑块 */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(231,238,251,.55); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #bcb0da, #9a8fbe); border-radius: 8px; border: 2px solid rgba(231,238,251,.6); }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #9a8fbe, #7c71a8); }

/* ============================================================================
   R12 · 阶段6 T6.3 详情壳（host_view / order_view / ticket_view）样式补全
   ----------------------------------------------------------------------------
   之前 ticket_view 等详情壳引用的 .grid-2/.lab/.val/.chat-list/.chat-row/
   .chat-meta/.chat-name/.chat-time/.chat-content/.chat-admin/.chat-agent/
   .chat-client 等类未在 app.css / liquid.css 中定义，导致详情壳页面
   沟通记录、时间线字段全裸奔（无卡片、无网格、无左右气泡）。
   这里集中补全，覆盖 patch_r10 的浅色宣纸 + 紫藤主题。
   ============================================================================ */

/* --- 字段网格：2 列自适应，移动端自动降为 1 列 --- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
    margin-top: 4px;
}
.grid-2 > div {
    min-width: 0;
    word-break: break-word;
}
@media (max-width: 640px) {
    .grid-2 { grid-template-columns: 1fr; }
}

/* --- 字段标签 / 值（描述列表） --- */
.lab {
    font-size: 11.5px;
    color: var(--ink-3);
    letter-spacing: .5px;
    margin-bottom: 2px;
    text-transform: none;
}
.val {
    font-size: 13.5px;
    color: var(--ink);
    line-height: 1.6;
    word-break: break-word;
}

/* mono 在 app.css 已有，但 ticket_view 用于 #id 单号场景，给个小调整 */
.val .mono { font-size: 13px; }

/* --- 沟通记录（聊天气泡列表） --- */
.chat-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chat-row {
    display: flex;
    flex-direction: column;
    max-width: 78%;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--paper);
    border: 1px solid var(--line);
    box-shadow: 0 1px 4px rgba(94,84,138,.05);
    word-break: break-word;
    animation: mdy-fade-up .25s var(--ease, ease) both;
}
@keyframes mdy-fade-up {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* 客服消息（admin）—— 左对齐，紫藤底色 */
.chat-row.chat-admin {
    align-self: flex-start;
    background: linear-gradient(135deg, rgba(165,145,196,.10), rgba(107,91,149,.06));
    border-color: rgba(165,145,196,.32);
    border-bottom-left-radius: 4px;
}
.chat-row.chat-admin .chat-name { color: var(--violet-dd, #5e548a); font-weight: 600; }
/* 我方（agent/client）—— 右对齐，紫色实底 */
.chat-row.chat-agent,
.chat-row.chat-client {
    align-self: flex-end;
    background: var(--violet-g, linear-gradient(135deg,#a79bd0,#7c71a8));
    border-color: transparent;
    color: #fff;
    border-bottom-right-radius: 4px;
    box-shadow: 0 4px 14px rgba(124,113,168,.22);
}
.chat-row.chat-agent .chat-name,
.chat-row.chat-client .chat-name {
    color: rgba(255,255,255,.92);
    font-weight: 600;
}
.chat-row.chat-agent .chat-time,
.chat-row.chat-client .chat-time {
    color: rgba(255,255,255,.75);
}
.chat-row.chat-agent .chat-content,
.chat-row.chat-client .chat-content {
    color: #fff;
}

/* 沟通记录元信息（姓名 + 时间） */
.chat-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 12px;
}
.chat-name { color: var(--violet-d, #7c71a8); }
.chat-time { color: var(--ink-3); font-size: 11.5px; }

/* 沟通内容 */
.chat-content {
    font-size: 13.5px;
    line-height: 1.7;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 移动端：全宽气泡更易读 */
@media (max-width: 640px) {
    .chat-row { max-width: 92%; }
}

/* ============================================================================
   萌哒云设计系统 R13 · 莫兰迪淡雅紫玻璃 · 商务治愈增强层 v2（patch_r11.css）
   ----------------------------------------------------------------------------
   加载顺序：app.css → liquid.css → patch_r9.css → patch_r10.css → 本文件（最终覆盖）
   设计纲领（五维）：
     ① 商务高级感 —— 低饱和灰紫主色、克制的层次留白、tabular-nums 数字、
        精细节距、大模糊低对比阴影层级、光带与渐变描边
     ② 莫兰迪淡雅紫色玻璃 —— 随机艺术背景 + 莫兰迪紫纱遮罩（任意图均压成
        淡紫玻璃），半透明白紫玻璃（blur 26px saturate 150% + 顶部高光 + 发丝描边）
     ③ 东方设计美学 —— 衬线标题、朱砂印章、窗棂回纹、竖排萌字水印、
        墨晕意象、宣纸质感、双角角饰
     ④ 苹果动画效果 —— spring 弹性缓动、光泽扫过、stagger 入场、模糊淡入、
        按压回弹、玻璃淡入、hover 浮起、Ken Burns 背景缓动
     ⑤ 全面美好治愈设计 —— 加圆角、柔光阴影、渐变柔和、呼吸光晕、
        空状态与徽章圆润化、焦点环、尊重 reduced-motion
   ----------------------------------------------------------------------------
   背景图源：--bg-rand（默认 https://api.elaina.cat/random/）
   随机图 + 莫兰迪紫纱（多层高不透明度渐变）→ 无论返回什么图都保持淡紫玻璃视觉
   ============================================================================ */

/* ============ ① 莫兰迪淡雅紫 · 设计令牌（覆盖式） ============ */
:root {
    /* 基底：雾紫宣纸 */
    --paper:#f5f2fa;
    --paper-2:#ebe6f4;
    --card:#fffdfe;

    /* 墨色：紫灰调 */
    --ink:#423d57;
    --ink-2:#6e6887;
    --ink-3:#a59fb9;

    /* 边线：淡紫发丝 */
    --line:#e6e1f1;
    --line-strong:rgba(159,149,201,.40);

    /* 紫色：莫兰迪淡紫藤（低饱和 · 灰调 · 高级） */
    --violet:#9f95c9;
    --violet-d:#8277b6;
    --violet-dd:#61589f;
    --violet-l:#f1eef9;
    --violet-g:linear-gradient(135deg,#b1a8d8 0%,#8d83bd 55%,#7c72b1 100%);

    /* 强调色：紫胭脂 / 青玉 */
    --acc:#b4a6ca;
    --acc-g:linear-gradient(120deg,#a89dcb,#c3b3cb);
    --rouge:#b085a3;
    --rouge-d:#966e91;
    --rouge-l:#f8f1f6;
    --amber:#55ada2;
    --amber-l:#e4f4f1;
    --green:#8baa98;
    --green-l:#edf4f0;
    --blue:#8ba3c6;
    --blue-l:#eef2f9;

    /* 圆角：治愈加大 */
    --r-sm:12px;
    --r-md:18px;
    --r-lg:24px;
    --r-xl:30px;
    --r-pill:999px;

    /* 阴影：大模糊 · 低对比 · 紫灰调 */
    --shadow-s:0 1px 2px rgba(94,84,138,.05),0 8px 22px rgba(110,100,160,.06);
    --shadow:0 2px 10px rgba(94,84,138,.07),0 22px 48px rgba(110,100,160,.10);
    --shadow-h:0 4px 14px rgba(94,84,138,.10),0 30px 64px rgba(110,100,160,.13);

    /* 苹果缓动：顺畅 + spring 回弹 */
    --ease:cubic-bezier(.25,.8,.3,1);
    --ease-pop:cubic-bezier(.34,1.56,.64,1);
    --dur:.28s;

    /* 玻璃参数 */
    --glass-blur:26px;
    --glass-sat:1.5;
    --glass-bg:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,.38));
    --glass-bg-2:linear-gradient(180deg,rgba(255,255,255,.82),rgba(249,246,255,.60));
    --glass-border:rgba(255,255,255,.72);
    --glass-high:inset 0 1px 0 rgba(255,255,255,.75);

    /* 随机艺术背景图源（JS 可追加 ?t= 时间戳强制换图） */
    --bg-rand:url("https://api.elaina.cat/random/");
    --bg-rand-pos:center center;
}

/* 深色模式一律回落莫兰迪浅色（延续 R11 无深色策略，但换紫调） */
body.dark,
[data-mdy-theme="dark"],
html.dark body {
    --paper:#f5f2fa; --paper-2:#ebe6f4; --card:#fffdfe;
    --ink:#423d57; --ink-2:#6e6887; --ink-3:#a59fb9; --line:#e6e1f1;
    --violet:#9f95c9; --violet-d:#8277b6; --violet-dd:#61589f; --violet-l:#f1eef9;
    --violet-g:linear-gradient(135deg,#b1a8d8,#7c72b1);
    --acc:#b4a6ca; --acc-g:linear-gradient(120deg,#a89dcb,#c3b3cb);
    --rouge:#b085a3; --rouge-d:#966e91; --rouge-l:#f8f1f6;
    --amber:#55ada2; --amber-l:#e4f4f1;
    --green:#8baa98; --green-l:#edf4f0;
    --blue:#8ba3c6; --blue-l:#eef2f9;
    --mdy-bg:#f5f2fa; --mdy-text:#423d57; --mdy-border:#e6e1f1;
    background:#f5f2fa;
}

/* ============ ② 莫兰迪紫纱 · 随机艺术背景体系（主应用 + 登录页） ============ */
body {
    /* 随机图在最底层，上面叠 3~4 层莫兰迪紫纱（高不透明度）把任意图压成淡紫玻璃 */
    background-color:#f3effa;
    background-image:
        /* 顶层高光纱：压低亮度、统一色温 */
        linear-gradient(162deg, rgba(245,242,250,.94) 0%, rgba(240,236,248,.88) 42%, rgba(235,229,246,.93) 100%),
        /* 紫纱 II：莫兰迪淡紫叠影，让图像呈现透纱观感 */
        linear-gradient(180deg, rgba(200,190,232,.50), rgba(171,157,222,.46)),
        /* 紫纱 I：柔和光斑纱 */
        radial-gradient(1100px 620px at 86% -12%, rgba(196,182,236,.26), transparent 62%),
        /* 随机图本体 */
        var(--bg-rand);
    background-size:auto,auto,auto,cover;
    background-position:var(--bg-rand-pos);
    background-repeat:repeat,repeat,repeat,no-repeat;
    background-attachment:fixed;
}
body.login-bg {
    background-color:#ece7f6;
    background-image:
        linear-gradient(165deg, rgba(246,243,252,.94) 0%, rgba(238,233,247,.90) 50%, rgba(232,225,244,.94) 100%),
        linear-gradient(180deg, rgba(196,186,230,.54), rgba(166,152,220,.50)),
        radial-gradient(rgba(140,124,190,.04) 1px, transparent 1px),
        var(--bg-rand);
    background-size:auto,auto,26px 26px,cover;
    background-position:var(--bg-rand-pos);
    background-repeat:repeat,repeat,repeat,no-repeat;
    background-attachment:fixed;
}
@media (max-width: 820px) {
    body, body.login-bg { background-attachment: scroll; }
}

/* 治愈系：缓慢呼吸的淡紫光斑（背景之上、内容之下）+ 细腻颗粒 */
body::after {
    content: "";
    position: fixed;
    inset: -20%;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(34vw 26vh at 22% 30%, rgba(190,178,236,.16), transparent 62%),
        radial-gradient(30vw 24vh at 78% 64%, rgba(178,164,226,.14), transparent 60%),
        radial-gradient(rgba(255,255,255,.7) 1px, transparent 1.5px);
    background-size:auto,auto,28px 28px;
    animation: r12-breathe 24s ease-in-out infinite alternate;
}
@keyframes r12-breathe {
    from { transform: translate3d(-1.2%, -1%, 0) scale(1); opacity: .82; }
    to   { transform: translate3d(1.4%, 1.2%, 0) scale(1.05); opacity: 1; }
}

/* 主页氛围层：顶部渐变光带（越界柔光），东方“远山淡影”意象 */
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 46vh;
    z-index: -1;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,.34), transparent),
        radial-gradient(58% 90% at 50% 0%, rgba(190,178,238,.20), transparent 68%);
    opacity: .9;
}

/* ============ ③ 莫兰迪紫玻璃 · 组件体系（焕新升级） ============ */

/* —— 玻璃基面：白紫玻璃 + 顶部高光 + 发丝描边 + 底部淡紫光带 —— */
.glass, .card, .topbar, .side, .alert, .ann, .next-step, .pagination,
.tag, .chip, .doc-card, .chat-box, .ai-box, .stat-card, .entry, .how-i,
.app-card, .modal, .login-box {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-high), var(--shadow);
}

/* —— 玻璃卡片：素笺浮起 + 双角回纹 + hover 紫晕光带 —— */
.card {
    position: relative;
    box-shadow: var(--glass-high), 0 2px 10px rgba(94,84,138,.06), 0 14px 36px rgba(110,100,160,.08);
    transition: transform var(--dur) var(--ease), box-shadow .34s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
    overflow: hidden;
}
.card::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(179,166,222,.8), rgba(131,119,182,.9), transparent);
    opacity: 0;
    transition: opacity .34s var(--ease);
    pointer-events: none;
    border-radius: 2px;
}
.card:hover {
    transform: translateY(-4px);
    border-color: rgba(160,146,204,.38);
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(250,247,255,.50));
    box-shadow: var(--glass-high), 0 4px 14px rgba(94,84,138,.08), 0 30px 62px rgba(110,100,160,.14);
}
.card:hover::before { opacity: 1; }

/* —— 顶栏：融雾玻璃 + 底部发丝渐变 —— */
.topbar {
    background: linear-gradient(180deg, rgba(250,248,255,.76), rgba(244,240,252,.58));
    backdrop-filter: blur(26px) saturate(1.6);
    -webkit-backdrop-filter: blur(26px) saturate(1.6);
    border-bottom: 1px solid rgba(255,255,255,.68);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 6px 26px rgba(110,100,160,.07);
}
.topbar::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(159,149,201,.40), transparent);
    pointer-events: none;
}

/* —— 侧栏：贴边玻璃 · 内凹高光 · 底部淡紫光带 —— */
.side {
    background: linear-gradient(180deg, rgba(255,255,255,.60), rgba(244,240,253,.40));
    backdrop-filter: blur(28px) saturate(1.45);
    -webkit-backdrop-filter: blur(28px) saturate(1.45);
    border-right: 1px solid rgba(255,255,255,.70);
    box-shadow: inset -1px 0 0 rgba(255,255,255,.5), 0 10px 34px rgba(110,100,160,.07);
}

/* —— 登录框：莫兰迪紫玻璃 + spring 入场 + 双层玻璃 —— */
.login-box {
    position: relative;
    background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(251,248,255,.64));
    backdrop-filter: blur(30px) saturate(1.5);
    -webkit-backdrop-filter: blur(30px) saturate(1.5);
    border: 1px solid rgba(255,255,255,.88);
    border-radius: 26px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 30px 90px rgba(110,100,160,.22), 0 8px 30px rgba(110,100,160,.10);
    animation: r12-pop .6s var(--ease-pop) both;
    overflow: hidden;
}
.login-box::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(190,178,236,.9), transparent);
    pointer-events: none;
}
@keyframes r12-pop {
    from { opacity: 0; transform: translateY(18px) scale(.965); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.login-brand .logo {
    background: var(--violet-g);
    box-shadow: 0 10px 26px rgba(124,113,168,.34), inset 0 1px 0 rgba(255,255,255,.35);
}

/* —— 弹窗 / Toast / 面板：白紫玻璃 + spring 缩放 —— */
.mdy-modal-box, .toast-item, .mdy-toast, .cmdk-box, .kbd-box {
    background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(249,246,255,.90));
    backdrop-filter: blur(28px) saturate(1.4);
    -webkit-backdrop-filter: blur(28px) saturate(1.4);
    border: 1px solid rgba(255,255,255,.92);
    box-shadow: 0 30px 90px rgba(96,86,150,.20), inset 0 1px 0 rgba(255,255,255,.95);
    border-radius: 20px;
}
.mdy-modal-box { animation: r12-sheet .42s var(--ease-pop) both; }
@keyframes r12-sheet {
    from { opacity: 0; transform: translateY(22px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.mdy-modal-overlay {
    background: rgba(120,108,180,.30);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.mdy-toast, .toast-item { border-radius: 14px; }

/* —— 表单：玻璃输入（内凹微光）+ 紫光聚焦 + 浮起 —— */
input[type="text"], input[type="password"], input[type="email"], input[type="number"],
input[type="search"], input[type="tel"], input[type="url"], input[type="date"],
select, textarea {
    background: rgba(255,255,255,.62);
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    box-shadow: inset 0 1.5px 3px rgba(94,84,138,.05), inset 0 0 0 1px rgba(255,255,255,.4);
    transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), transform .2s var(--ease);
}
input:not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus {
    background: rgba(255,255,255,.95);
    border-color: var(--violet-d);
    box-shadow: 0 0 0 4px rgba(159,149,201,.18), 0 4px 18px rgba(124,113,168,.10), inset 0 1.5px 3px rgba(94,84,138,.04);
    outline: none;
    transform: translateY(-1px);
}
input:not([type=checkbox]):not([type=radio]):hover, select:hover, textarea:hover {
    border-color: var(--line-strong);
}

/* —— 按钮：紫藤渐变 + 顶部高光 + 光泽扫过 + 按压回弹 —— */
.btn-primary, button.btn-primary, .login-box button[type=submit],
.login-box input[type=submit], .hero-cta .c1, .top .t-links a.t-cta {
    background: var(--violet-g) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 8px 22px rgba(124,113,168,.30), inset 0 1px 0 rgba(255,255,255,.38), inset 0 0 0 1px rgba(255,255,255,.08) !important;
    position: relative;
    overflow: hidden;
    letter-spacing: .4px;
}
.btn-primary:hover, button.btn-primary:hover, .login-box button[type=submit]:hover {
    filter: brightness(1.07) saturate(1.04);
    box-shadow: 0 12px 32px rgba(124,113,168,.40), inset 0 1px 0 rgba(255,255,255,.48) !important;
    transform: translateY(-1px);
}
.btn-primary:active, button.btn-primary:active, .login-box button[type=submit]:active {
    transform: scale(.96);
}
/* 光泽扫过（治愈亮点） */
.btn-primary::after, button.btn-primary::after, .login-box button[type=submit]::after,
.hero-cta .c1::after, .top .t-links a.t-cta::after {
    content: "";
    position: absolute;
    top: 0; left: -70%;
    width: 45%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.38), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}
.btn-primary:hover::after, button.btn-primary:hover::after, .login-box button[type=submit]:hover::after,
.hero-cta .c1:hover::after, .top .t-links a.t-cta:hover::after {
    animation: r12-shine .65s var(--ease) forwards;
}
@keyframes r12-shine {
    from { left: -70%; }
    to   { left: 130%; }
}

/* 通用按钮：轻玻璃 + 回弹 */
.btn, button.btn, input[type="submit"], input[type="button"], input[type="reset"] {
    border-radius: var(--r-sm);
    transition: transform .18s var(--ease-pop), box-shadow .24s var(--ease), filter .24s var(--ease), background .24s var(--ease);
}
.btn:hover, button.btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(110,100,160,.12); }
.btn:active, button.btn:active, input[type="submit"]:active, input[type="button"]:active {
    transform: scale(.955);
}

/* —— 侧栏导航：悬停滑入 + 激活紫玻璃胶囊 + 左侧光条 —— */
.side-i {
    position: relative;
    transition: transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease), box-shadow .22s var(--ease);
    border-radius: 12px;
}
.side-i:hover {
    transform: translateX(4px);
    background: rgba(160,146,204,.14);
    color: var(--violet-dd);
}
.side-i.on {
    background: linear-gradient(120deg, rgba(170,156,214,.22), rgba(196,181,214,.16));
    color: var(--violet-dd);
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(160,146,204,.22);
}
.side-i.on::before {
    content: "";
    position: absolute;
    left: 0; top: 22%; bottom: 22%;
    width: 3px;
    border-radius: 3px;
    background: var(--violet-g);
    box-shadow: 0 0 10px rgba(124,113,168,.5);
}

/* 顶栏激活项：底部光点 */
.topbar .t-links a[aria-current], .topbar .nav a.on {
    position: relative;
}
.topbar .t-links a[aria-current]::after, .topbar .nav a.on::after {
    content: "";
    position: absolute;
    left: 20%; right: 20%; bottom: -3px;
    height: 2px;
    border-radius: 2px;
    background: var(--violet-g);
}

/* ============ ④ 东方设计美学 · 细节（焕新） ============ */

/* 衬线标题 + 字距 */
.card h1, .card h2, .greeting h1, .greeting h2, .page-title, .login-box h1,
.hero h1, .how h3, .entry h2, .app-info h3, .seal, .brand {
    font-family: var(--serif);
}
.hero h1, .login-box h1, .how h3, .entry h2 {
    letter-spacing: 4px;
}
.hero h1, .login-box h1 {
    background: linear-gradient(120deg, #3a3453, #6a5fa0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* 数字：商务表格统一等宽数字 */
.tb td, .tb th, .val, .mono, .stat-card, .cr-sum, .amount, .num {
    font-variant-numeric: tabular-nums;
    letter-spacing: .2px;
}

/* 印章：朱砂紫 + 呼吸光晕 + 悬停回正 */
.seal, .brand .seal, .login-brand .logo {
    position: relative;
}
.brand .seal, .login-brand .logo {
    background: var(--violet-g);
    box-shadow: 0 6px 18px rgba(124,113,168,.32), inset 0 1px 0 rgba(255,255,255,.38);
    animation: r12-seal-breathe 4.5s ease-in-out infinite;
}
@keyframes r12-seal-breathe {
    0%, 100% { box-shadow: 0 6px 18px rgba(124,113,168,.30), inset 0 1px 0 rgba(255,255,255,.38); }
    50%      { box-shadow: 0 8px 26px rgba(124,113,168,.46), inset 0 1px 0 rgba(255,255,255,.5); }
}
.brand .seal:hover, .topbar .seal:hover {
    transform: rotate(-6deg) scale(1.08);
    animation-play-state: paused;
}

/* 窗棂双角回纹：卡片左上 + 右下（东方建筑细节点睛，焕新） */
.card::after, .stat-card::after, .entry::after {
    content: "";
    position: absolute;
    bottom: 10px; right: 10px;
    width: 16px; height: 16px;
    border-bottom: 1.5px solid rgba(159,149,201,.40);
    border-right: 1.5px solid rgba(159,149,201,.40);
    border-bottom-right-radius: 8px;
    opacity: .45;
    pointer-events: none;
    transition: opacity .3s var(--ease);
}
.card:hover::after, .stat-card:hover::after, .entry:hover::after {
    opacity: .9;
}
/* 左上角饰（保持） */
.card::before, .stat-card::before, .entry::before {
    content: "";
    position: absolute;
    top: 10px; left: 10px;
    width: 22px; height: 22px;
    border-top: 1.5px solid rgba(159,149,201,.55);
    border-left: 1.5px solid rgba(159,149,201,.55);
    border-top-left-radius: 8px;
    opacity: .55;
    pointer-events: none;
}
.card:hover::before, .stat-card:hover::before, .entry:hover::before {
    opacity: .95;
}

/* 发丝高光 · 行情条 / 分隔装饰 */
.hero-line, .page-title::after {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--violet), transparent);
    border-radius: 2px;
}

/* 滚动条：雾紫轨道 + 紫藤滑块 */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: rgba(240,236,250,.55); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c4bade, #9f95c9);
    border-radius: 8px;
    border: 2px solid rgba(240,236,250,.65);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #9f95c9, #8277b6); }

/* 表格：表头雾紫 · 悬停淡紫 · 斑马呼吸 */
.tb th {
    background: linear-gradient(180deg, rgba(240,236,251,.9), rgba(233,227,246,.72));
    color: var(--violet-dd);
    letter-spacing: .5px;
}
.tb tbody tr {
    transition: background .2s var(--ease), box-shadow .2s var(--ease);
}
.tb tbody tr:hover {
    background: rgba(170,156,214,.07);
    box-shadow: inset 3px 0 0 rgba(159,149,201,.35);
}

/* 徽章 / 标签：圆润治愈 + 渐变描边 */
.tag, .chip, .badge, .app-feats span, .feat, .livebar i {
    border-radius: var(--r-pill);
}
.chip, .tag {
    background: rgba(241,238,249,.85);
    border: 1px solid rgba(160,146,204,.22);
    color: var(--violet-dd);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}

/* Toast 滑入 */
.mdy-toast, .toast-item {
    animation: r12-toast .5s var(--ease-pop) both;
}
@keyframes r12-toast {
    from { opacity: 0; transform: translateY(14px) scale(.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============ ⑤ 苹果动画 · 全面治愈细节（焕新） ============ */

/* 卡片 / 区块 stagger 入场：模糊淡入 + 上浮（苹果风） */
@keyframes r12-rise {
    from { opacity: 0; transform: translateY(16px); filter: blur(6px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
.card, .stat-card, .entry, .how-i, .app-card, .pagination, .doc-card {
    animation: r12-rise .55s var(--ease) both;
}
.card:nth-child(2), .stat-card:nth-child(2), .entry:nth-child(2) { animation-delay: .06s; }
.card:nth-child(3), .stat-card:nth-child(3), .entry:nth-child(3) { animation-delay: .12s; }
.card:nth-child(4), .stat-card:nth-child(4), .entry:nth-child(4) { animation-delay: .18s; }
.card:nth-child(5), .stat-card:nth-child(5), .entry:nth-child(5) { animation-delay: .24s; }

/* 顶栏滚动顿挫：玻璃淡入平滑 */
.topbar, .top {
    transition: background .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}

/* 进度条：紫藤泡沫 + 光泽 */
.meter i, .progress i, progress::-webkit-progress-value {
    background: linear-gradient(90deg, #b9aedb, #8d83bd);
    border-radius: var(--r-pill);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 0 12px rgba(124,113,168,.25);
}

/* 选中文本：淡紫墨韵 */
::selection { background: rgba(159,149,201,.26); color: #3a3453; }

/* 链接：紫藤过渡 + 下划线生长 */
a { transition: color .22s var(--ease); }
a:hover { color: var(--violet-dd); }

/* 空状态：治愈柔化 */
.empty, .cmdk-empty, .no-data {
    opacity: .85;
}

/* 焦点可见环：紫光（可访问性） */
a:focus-visible, button:focus-visible, .side-i:focus-visible {
    outline: 2px solid rgba(159,149,201,.55);
    outline-offset: 2px;
    border-radius: 6px;
}

/* 优雅降级：偏好减少动效 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001s !important;
    }
    body, body.login-bg { background-attachment: fixed; }
    body::after { animation: none; }
    .card:hover, .stat-card:hover, .entry:hover { transform: none; }
}
/* ============================================================================
   萌哒云设计系统 R14 · 云岫紫璃 · 深度换新层（patch_r12.css）
   ----------------------------------------------------------------------------
   加载顺序：app.css → liquid.css → patch_r9 → patch_r10 → patch_r11(R13) → 本文件
   R14 在 R13 之上完成的不是“微调”，而是三个维度的换新：
     ① 布局重构 —— 页面骨骼重排：主区呼吸网格、统计卡整齐栅格化、
        侧栏分组饰线化、顶栏三区化、登录框双层玻璃化
     ② 层级修复 —— 彻底治理“样式遮挡/错乱”：全局 z-index 纪律化、
        卡片 hover 不再压相邻内容、底部快捷栏/引导层/附件弹窗分层、表格溢出滚动
     ③ 组件重设计 —— 统计卡/表格/按钮/标签/弹窗/分页全部换新观感：
        图标圆底玻璃、粘性毛玻璃表头、按钮光泽分层、弹窗 spring 入场
   设计语言延续：莫兰迪淡雅紫玻璃 · 东方设计美学 · 苹果动效 · 全面治愈
   ============================================================================ */

/* ================= ① 布局重构 · 页面骨骼换新 ================= */

/* 主区：呼吸网格（间距体系统一） */
.wrap {
    max-width: 1240px;
    margin: 22px auto 40px;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
/* 各区块组间隙 */
.wrap > .section,
.wrap > .card,
.wrap > .stats,
.wrap > .greeting { margin: 0; }
/* 区块错落：让卡片与区块在纵向有“山谷感” */
.wrap > .section { padding: 2px 0; }

/* 顶栏：三区结构 · 更高更安定 */
.topbar {
    min-height: 58px;
    padding: 0 24px;
    gap: 16px;
}
.topbar .brand { gap: 12px; }
.topbar .seal {
    width: 35px; height: 35px;
    border-radius: 12px;
    font-size: 17px;
    letter-spacing: 0;
}
.topbar .brand-t {
    font-family: var(--serif);
    letter-spacing: 2px;
    font-size: 15.5px;
}
/* 顶栏右侧：头像圆形化 · 退出按钮细化 */
.topbar-right { gap: 10px; }
.top-avatar {
    width: 30px; height: 30px;
    border-radius: 50% !important;
    object-fit: cover;
    box-shadow: 0 0 0 2px rgba(255,255,255,.85), 0 2px 8px rgba(124,113,168,.22);
}
.top-user { display: inline-flex; align-items: center; gap: 7px; }
.top-user-name { font-size: 13px; color: var(--ink-2); letter-spacing: .5px; }
.top-logout {
    font-size: 12.5px;
    padding: 6px 14px;
    border-radius: var(--r-pill);
    background: rgba(241,238,249,.72);
    border: 1px solid rgba(160,146,204,.22);
    color: var(--violet-dd);
    transition: all .24s var(--ease);
}
.top-logout:hover {
    background: var(--rouge-l);
    border-color: rgba(176,133,163,.4);
    color: var(--rouge-d);
    box-shadow: 0 4px 14px rgba(150,110,145,.14);
}
.top-clock {
    font-variant-numeric: tabular-nums;
    font-size: 12.5px;
    color: var(--ink-3);
    letter-spacing: 1px;
}

/* 侧栏：加宽 · 分组饰线 → 导航层次更分明 */
.side {
    width: 218px;
    padding: 18px 13px 28px;
}
.side-nav { gap: 3px; }
.side-g { margin-bottom: 2px; }
/* 组标题：东方式竖线 + 圆点 + 均衡字距 */
.side-group {
    font-size: 11.5px;
    color: var(--ink-3);
    letter-spacing: 3px;
    padding: 10px 12px 6px;
    position: relative;
}
.side-group::before {
    content: "";
    position: absolute;
    left: 3px; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 12px;
    border-radius: 3px;
    background: var(--violet-g);
    opacity: .5;
}
.side-group::after {
    width: 6px; height: 6px;
    border-width: 1.2px;
    margin-right: 1px;
    opacity: .7;
}
.side-g:not(:first-child) .side-group { border-top: 1px dashed rgba(159,149,201,.18); margin-top: 4px; }
.side-g-items { padding: 2px 0; }
.side-i { padding: 9px 13px; border-radius: 12px; gap: 12px; }
/* 导航图标：淡紫圆底玻璃 */
.side-i .side-ico {
    width: 26px; height: 26px;
    border-radius: 9px;
    background: rgba(255,255,255,.6);
    box-shadow: inset 0 0 0 1px rgba(160,146,204,.16), 0 1px 3px rgba(94,84,138,.06);
    transition: all .24s var(--ease);
}
.side-i.on .side-ico {
    background: var(--violet-g);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(124,113,168,.32), inset 0 1px 0 rgba(255,255,255,.4);
}
.side-i .side-ico svg { stroke: currentColor; }
/* 激活项：右侧光点 */
.side-i.on::after {
    content: "";
    position: absolute;
    right: 9px; top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--violet-g);
    box-shadow: 0 0 8px rgba(124,113,168,.55);
}
.side-i.on { padding-right: 24px; }
.nav-badge {
    background: linear-gradient(135deg, #c093b6, #966e91);
    color: #fff;
    font-size: 10.5px;
    box-shadow: 0 2px 8px rgba(150,110,145,.35);
}

/* ================= ② 统计卡栅格化 · 整齐不再参差 ================= */
.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(216px, 1fr));
    gap: 14px;
    margin: 0;
}
/* 统计卡：玻璃图标底 + 渐变数值 + 底部光带 */
.stat {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 16px;
    border-radius: var(--r-lg);
    background: linear-gradient(180deg, rgba(255,255,255,.74), rgba(250,247,255,.46));
    backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat));
    border: 1px solid rgba(255,255,255,.78);
    box-shadow: var(--glass-high), 0 2px 10px rgba(94,84,138,.06), 0 16px 38px rgba(110,100,160,.09);
    overflow: hidden;
    transition: transform .3s var(--ease-pop), box-shadow .34s var(--ease), border-color .3s var(--ease);
    animation: r14-stat-in .5s var(--ease) both;
}
.stat::before {
    content: "";
    position: absolute;
    top: -1px; left: 12%; right: 12%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(179,166,222,.85), transparent);
    border-radius: 2px;
}
.stat::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(159,149,201,.35), transparent);
    opacity: 0;
    transition: opacity .3s var(--ease);
}
.stat:hover { transform: translateY(-3px); border-color: rgba(160,146,204,.34); z-index: 2; }
.stat:hover::after { opacity: 1; }
.stat:nth-child(2) { animation-delay: .05s; }
.stat:nth-child(3) { animation-delay: .1s; }
.stat:nth-child(4) { animation-delay: .15s; }
.stat:nth-child(5) { animation-delay: .2s; }
.stat:nth-child(6) { animation-delay: .25s; }
.stat:nth-child(7) { animation-delay: .3s; }
@keyframes r14-stat-in {
    from { opacity: 0; transform: translateY(14px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
/* 图标：圆底玻璃 */
.stat .icon {
    width: 38px; height: 38px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(241,238,249,.9), rgba(233,226,247,.72));
    box-shadow: inset 0 0 0 1px rgba(160,146,204,.2), 0 2px 8px rgba(110,100,160,.08);
}
.stat .icon svg { width: 20px; height: 20px; }
/* 数值：渐变大字 + 等宽数字 */
.stat .num {
    font-size: 25px;
    font-weight: 650;
    letter-spacing: .5px;
    background: linear-gradient(120deg, #3a3453, #6a5fa0 70%, #885f84);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}
/* 标签与涨跌 */
.stat .lab { font-size: 12.5px; color: var(--ink-2); letter-spacing: .8px; }
.stat .delta {
    font-size: 11.5px;
    padding: 2px 9px;
    border-radius: var(--r-pill);
    align-self: flex-start;
}
.stat .delta-up { background: var(--amber-l); color: #2f8a80; }
.stat .delta-down { background: var(--rouge-l); color: var(--rouge-d); }
.stat .delta-zero { background: rgba(241,238,249,.8); color: var(--ink-3); }
/* 语义色左缘 */
.stat.is-warn { border-left: 3px solid #c69a6b; }
.stat.is-danger { border-left: 3px solid #c07a93; }
.stat.is-good { border-left: 3px solid #8baa98; }
/* 快捷动作 */
.stat .q-act,
.stat-actions a, .stat-actions button {
    font-size: 12px;
    color: var(--violet-dd);
    background: rgba(241,238,249,.7);
    border: 1px solid rgba(160,146,204,.2);
    border-radius: var(--r-pill);
    padding: 3px 10px;
    transition: all .22s var(--ease);
}
.stat .q-act:hover, .stat-actions a:hover, .stat-actions button:hover {
    background: var(--violet-g);
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(124,113,168,.3);
}

/* ================= ③ 组件重设计 ================= */

/* —— 卡片：更疏朗的内边距 · 标题前缀饰线 —— */
.card { padding: 20px 22px; }
.card h2 {
    font-family: var(--serif);
    letter-spacing: 2px;
    font-size: 17px;
    position: relative;
    padding-left: 12px;
    margin-bottom: 14px;
}
.card h2::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 15px;
    border-radius: 4px;
    background: var(--violet-g);
    box-shadow: 0 0 8px rgba(124,113,168,.35);
}
.card h3 { font-family: var(--serif); letter-spacing: 1.5px; }
/* 卡片渐变描边精修 */
.card {
    border-radius: var(--r-lg);
    background:
        linear-gradient(180deg, rgba(255,255,255,.8), rgba(251,248,255,.5)),
        var(--glass-bg);
}
.card:hover { z-index: 2; }

/* —— 表格：粘性毛玻璃表头 · 行内呼吸 —— */
.tb-wrap {
    overflow-x: auto;
    border-radius: var(--r-md);
    -webkit-overflow-scrolling: touch;
}
.tb { border-collapse: separate; border-spacing: 0; width: 100%; }
.tb th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: linear-gradient(180deg, rgba(243,240,252,.96), rgba(235,229,248,.9));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 11px 12px;
    border-bottom: 1px solid rgba(160,146,204,.26);
}
.tb td {
    padding: 10.5px 12px;
    font-size: 13px;
    border-bottom: 1px dashed rgba(159,149,201,.14);
}
.tb tbody tr { transition: background .2s var(--ease); }
.tb tbody tr:hover td { background: rgba(170,156,214,.06); }
/* 斑马呼吸（交叠处淡紫） */
.tb tbody tr:nth-child(even) td { background: rgba(244,241,252,.5); }
.tb tbody tr:nth-child(even):hover td { background: rgba(170,156,214,.07); }

/* —— 按钮：光泽分层 · 统一按压回弹 —— */
.btn { letter-spacing: .5px; }
.btn-primary {
    background-image: linear-gradient(135deg, #b1a8d8 0%, #8d83bd 55%, #7c72b1 100%);
    box-shadow: 0 8px 20px rgba(124,113,168,.28), inset 0 1px 0 rgba(255,255,255,.4), inset 0 0 0 1px rgba(255,255,255,.1);
}
.btn-danger {
    background: linear-gradient(135deg, #c191a8, #a86f90);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 8px 18px rgba(150,110,145,.24), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn-danger:hover { filter: brightness(1.06); color: #fff !important; }
.btn-light {
    background: rgba(255,255,255,.7);
    color: var(--violet-dd);
    border: 1px solid rgba(160,146,204,.3);
}

/* —— 标签徽章：语义色玻璃 —— */
.tag { letter-spacing: .5px; padding: 2.5px 11px; }
.tag-green { background: var(--green-l); color: #4c7d63; }
.tag-red { background: var(--rouge-l); color: var(--rouge-d); }
.tag-orange { background: #f7eee0; color: #a8773f; }
.tag-gray { background: rgba(241,238,249,.85); color: var(--ink-3); }
.tag-blue { background: #eef2f9; color: #5f7fa8; }

/* —— 分页 —— */
.pagination { gap: 6px; }
.pagination a, .pagination span, .pagination .page {
    border-radius: var(--r-sm);
    background: rgba(255,255,255,.72);
    border: 1px solid rgba(160,146,204,.24);
    color: var(--ink-2);
    padding: 5px 12px;
    font-size: 12.5px;
    transition: all .22s var(--ease);
}
.pagination a:hover { background: var(--violet-l); color: var(--violet-dd); transform: translateY(-1px); }
.pagination .on, .pagination .active {
    background: var(--violet-g) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 12px rgba(124,113,168,.3);
}

/* —— Tabs / 步骤 —— */
.tabs a, .tabs span, .doc-tabs a {
    border-radius: var(--r-pill);
    padding: 7px 16px;
    background: rgba(255,255,255,.6);
    border: 1px solid rgba(160,146,204,.2);
    color: var(--ink-2);
    font-size: 13px;
    transition: all .24s var(--ease);
}
.tabs a:hover, .doc-tabs a:hover { background: var(--violet-l); color: var(--violet-dd); }
.tabs a.on, .doc-tabs a.on {
    background: var(--violet-g);
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 5px 14px rgba(124,113,168,.3);
}
.mdy-steps .mdy-step-dot {
    background: var(--violet-g);
    box-shadow: 0 3px 10px rgba(124,113,168,.3);
}

/* —— 时间线 —— */
.timeline { padding-left: 4px; }
.timeline::before { background: linear-gradient(180deg, rgba(159,149,201,.5), rgba(159,149,201,.12)); }

/* —— 警报：治愈圆角 · 细分色 —— */
.alert {
    border-radius: var(--r-md);
    padding: 12px 16px;
    border: 1px solid rgba(160,146,204,.22);
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,245,253,.6));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.alert-ok { background: linear-gradient(180deg, rgba(239,247,243,.92), rgba(229,241,234,.7)); border-color: rgba(139,170,152,.3); color: #3d6b55; }
.alert-err { background: linear-gradient(180deg, rgba(250,241,245,.94), rgba(246,232,238,.72)); border-color: rgba(192,122,147,.3); color: #8e5470; }
.alert-info { background: linear-gradient(180deg, rgba(238,242,249,.94), rgba(228,234,246,.74)); border-color: rgba(139,163,198,.3); color: #4e6d96; }

/* —— 空状态：治愈居中 —— */
.empty, .empty-state, .cmdk-empty, .no-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 30px 12px;
    color: var(--ink-3);
    font-size: 13px;
    letter-spacing: 1px;
}

/* —— 待办卡 / 下一步卡 —— */
.next-step {
    border-radius: var(--r-md);
    border: 1px solid rgba(160,146,204,.24);
    background: linear-gradient(180deg, rgba(255,255,255,.78), rgba(249,246,255,.5));
    padding: 14px 16px;
    transition: all .26s var(--ease);
}
.next-step:hover { transform: translateY(-2px); box-shadow: var(--shadow-h); }

/* —— 步骤/进度条 —— */
.meter, .progress {
    border-radius: var(--r-pill);
    background: rgba(228,222,244,.5);
    overflow: hidden;
}
.meter i, .progress i { border-radius: var(--r-pill); }

/* —— 输入区：统一内凹玻璃 —— */
.u-inp, .inline-form input, .captcha-input {
    background: rgba(255,255,255,.64);
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    box-shadow: inset 0 1.5px 3px rgba(94,84,138,.05);
    transition: all .24s var(--ease);
}
.u-inp:focus, .inline-form input:focus, .captcha-input:focus {
    border-color: var(--violet-d);
    background: rgba(255,255,255,.96);
    box-shadow: 0 0 0 4px rgba(159,149,201,.16);
    outline: none;
}

/* ================= ④ 层级修复 · 样式遮挡错乱治理 ================= */

/* 卡片 hover 浮起不再压住相邻内容 */
.card:hover, .stat:hover, .entry:hover, .app-card:hover, .doc-card:hover { z-index: 2; }

/* —— z-index 全局纪律（R14 修复：引导层/附件弹窗/底部栏/Toast 不再互扰） —— */
:root {
    --z-ta: 1380;        /* 附件审查弹窗：高于一切浮层内容，低于 toast */
    --z-mbar: 1390;      /* 移动端底部快捷栏：内容之上，所有浮层之下 */
}
/* 底部快捷栏：从 1400 降至 1390，不再与 Toast/引导层抢层 */
.mbar { z-index: var(--z-mbar) !important; }
/* 工单附件审查弹窗（原 1400 与 Toast 同级冲突 → 降为专用层） */
.ta-modal { z-index: var(--z-ta) !important; }
/* 引导层：遮罩与主体统一在 Toast 之下、快捷栏之上 */
.ob-mask { z-index: 1395 !important; }
.ob-box { z-index: 1396 !important; }
/* 底部动作条(SHEET)：沿用变量的基础上保持 +1，避免硬编码漂移 */
.sheet { z-index: calc(var(--z-sheet) + 1) !important; }
/* Toast 保持最高提示优先级 */
.toast, .toast-stack, .mdy-toast, .toast-item, .rtn-toast { z-index: var(--z-toast) !important; }
/* 弹窗遮罩统一 */
.mdy-modal-overlay, .cmdk-mask { z-index: var(--z-cmdk) !important; }
.mdy-modal-box { z-index: calc(var(--z-cmdk) + 1) !important; }
/* 通知面板挂接自适应顶栏高度（不再因 topbar 加高而错位） */
.rtn-panel { top: calc(100% + 10px) !important; }

/* 长列表/表单卡内部滚动条细滑 */
.tb-wrap::-webkit-scrollbar { height: 8px; }

/* 修复表格筛选栏/选项栏的密集感 */
.tb-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 4px;
}
.tb-filter select, .tb-filter input { min-height: 32px; }

/* 弹窗内容滚动安全 */
.mdy-modal-box, .cmdk-box, .sheet, .ta-modal-box {
    scrollbar-width: thin;
    scrollbar-color: rgba(159,149,201,.5) transparent;
}

/* ================= ⑤ 登录页 · 双层玻璃换新 ================= */
.login-box {
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.9), rgba(251,248,255,.68));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.96),
        0 40px 110px rgba(96,86,150,.26),
        0 10px 36px rgba(96,86,150,.12);
    padding: 34px 38px 30px;
    max-width: 420px;
    margin: 7vh auto;
}
/* 品牌：光晕印章 + 标题渐变 */
.login-brand { margin-bottom: 6px; }
.login-brand .logo {
    width: 46px; height: 46px;
    font-size: 22px;
    border-radius: 15px;
    background: var(--violet-g);
    box-shadow:
        0 0 0 6px rgba(159,149,201,.14),
        0 12px 30px rgba(124,113,168,.38),
        inset 0 1px 0 rgba(255,255,255,.42);
}
.login-box h1 {
    font-size: 22px;
    letter-spacing: 6px;
    margin: 14px 0 4px;
    background: linear-gradient(120deg, #3a3453, #6a5fa0 75%, #8a6790);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.login-box form {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 16px;
}
.login-box input[type=text], .login-box input[type=password], .login-box input:not([type]) {
    padding: 12px 14px;
}
.login-box button[type=submit], .login-box input[type=submit] {
    padding: 12px 14px;
    border-radius: 13px;
    font-size: 15px;
    letter-spacing: 6px;
}
/* 验证码行贴近 */
.captcha-row { justify-content: center; gap: 8px; }
/* 底部链接疏朗 */
.login-box .u-tc { letter-spacing: 1px; }
.login-box a { color: var(--violet-d); border-bottom: 1px dashed rgba(159,149,201,.4); }

/* ================= ⑥ 移动端适配（≤ 820px） ================= */
@media (max-width: 820px) {
    .wrap { padding: 0 14px; margin: 14px auto 30px; gap: 13px; }
    .topbar { padding: 0 14px; min-height: 54px; }
    .top-user-name, .top-clock { display: none; }
    .stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
    .stats .stat { padding: 14px; }
    .stat .num { font-size: 21px; }
    .side { width: 232px; padding: 14px 11px 20px; }
    .login-box { margin: 4vh 14px; padding: 26px 22px 24px; max-width: none; }
    .card { padding: 16px 15px; }
    /* 底部 mbar 与内容互不遮挡 */
    .wrap { padding-bottom: 6px; }
    .tb th { position: static; }
}

/* ================= ⑦ 苹果动效 · 治愈细节精修 ================= */

/* 进场：卡片/区块微错落 */
@keyframes r14-layer-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.greeting, .stats, .section, .host-grid, .pkg-grid {
    animation: r14-layer-in .48s var(--ease) both;
}
/* 弹窗：spring 深化 */
.mdy-modal-box, .sheet { animation-duration: .46s; }

/* 链接下划线生长（亚克力感） */
.wrap a:not(.btn):not(.side-i):not(.pagination a) {
    border-bottom: 1px dashed transparent;
    transition: all .22s var(--ease);
}
.wrap a:not(.btn):not(.side-i):not(.pagination a):hover {
    border-bottom-color: rgba(159,149,201,.35);
}

/* 选中文本：紫墨 */
::selection { background: rgba(159,149,201,.28); color: #332e4c; }

/* 数字 / 摘要：统一等宽 */
.val, .num-big, .amount, .cr-sum, .stat .num, .pkg-price {
    font-variant-numeric: tabular-nums;
}

/* 滚动条：紫藤滑块（细化） */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #c9c1e4, #9f95c9);
    border: 2.5px solid rgba(242,238,251,.7);
    border-radius: 8px;
}

/* 页脚：东方分隔线与底色 */
.footer {
    border-top: 1px dashed rgba(159,149,201,.2);
    padding-top: 18px;
    margin-top: 8px;
}
.footer .ver {
    background: linear-gradient(135deg, rgba(241,238,249,.9), rgba(233,226,247,.7));
    color: var(--violet-d);
    box-shadow: inset 0 0 0 1px rgba(160,146,204,.18);
}

/* 聚焦可见：统一紫环 */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid rgba(159,149,201,.6);
    outline-offset: 2px;
    border-radius: 6px;
}

/* 优雅降级 */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001s !important;
    }
    .stat, .greeting, .stats, .section, .host-grid, .pkg-grid { animation: none; }
}
/* ============================================================================
   萌哒云设计系统 R15 · 全视口适配与背景分辨率治理层（patch_r13.css）
   ----------------------------------------------------------------------------
   加载顺序：app.css → liquid.css → patch_r9 → patch_r10 → patch_r11 → patch_r12 → 本文件（最终覆盖）
   R15 目标：
     ① 背景图多分辨率适配 —— 按视口宽高比/DPI 调整背景锚点与纱层浓度，
        竖屏与横屏均保持"莫兰迪紫纱玻璃"主视觉不跑偏
     ② 全设备全视口适配 —— 中屏(821-1100)/平板/手机/极窄屏/横屏分别修正
        侧栏、统计卡、表格、登录框、弹窗、底部栏的呼吸与溢出
     ③ 交互体验 —— 触屏 44px 触控目标、iOS 输入防缩放、横向溢出治理
   设计语言延续：莫兰迪淡雅紫玻璃 · 东方设计美学 · 苹果动效 · 全面治愈
   ============================================================================ */

/* ================= ① 背景图 · 多分辨率适配 ================= */

/* 基准：竖图/横图均锚定偏上（角色/主题主体常在中上部，避免被裁掉） */
:root {
    --bg-rand-pos: center 24%;
}
body.login-bg {
    background-position: var(--bg-rand-pos);
}
body {
    background-position: var(--bg-rand-pos);
}

/* 宽屏（≥1441 及常规桌面 16:9/16:10）：图片主体居中即可 */
@media (min-width: 1441px) {
    :root { --bg-rand-pos: center center; }
}

/* 中屏（821–1100，常见 1024×768 / 1280×800 iPad 横屏）：微偏上，避免底部留白失衡 */
@media (min-width: 821px) and (max-width: 1100px) {
    :root { --bg-rand-pos: center 30%; }
}

/* 手机竖屏（≤580 宽）：cover 下横向裁切剧烈，锚点上移保留主体；文字纱更浓
   保证前景可读 */
@media (max-width: 580px) and (orientation: portrait) {
    :root { --bg-rand-pos: center 32%; }
}

/* 手机/平板横屏（矮视口）：高度受限，锚定中上，图片纵向给足呼吸 */
@media (max-height: 540px) and (orientation: landscape) {
    :root { --bg-rand-pos: center 28%; }
}

/* 高 DPI / 极小屏：纱层略浓一档，稳定对比度，防背景抢读 */
@media (max-width: 420px) {
    body {
        background-image:
            linear-gradient(162deg, rgba(245,242,250,.95) 0%, rgba(240,236,248,.92) 42%, rgba(235,229,246,.95) 100%),
            linear-gradient(180deg, rgba(200,190,232,.55), rgba(171,157,222,.52)),
            radial-gradient(1100px 620px at 86% -12%, rgba(196,182,236,.26), transparent 62%),
            var(--bg-rand);
    }
    body.login-bg {
        background-image:
            linear-gradient(165deg, rgba(246,243,252,.96) 0%, rgba(238,233,247,.92) 50%, rgba(232,225,244,.96) 100%),
            linear-gradient(180deg, rgba(196,186,230,.58), rgba(166,152,220,.55)),
            radial-gradient(rgba(140,124,190,.04) 1px, transparent 1px),
            var(--bg-rand);
    }
}

/* 呼吸光斑在矮屏/小屏减弱，避免视觉占位影响内容区 */
@media (max-height: 540px) {
    body::after { opacity: .55; animation: none; }
}

/* ================= ② 横向溢出治理 ================= */

/* 全局禁止横向滚动（装饰性溢出元素不再撑出滚动条；不破坏 .tb-wrap 内部滚动） */
html, body {
    overflow-x: hidden;
    overflow-x: clip;
}

/* 长单词 / 长链接不撑破卡片 */
.card, .wrap, .alert, .chat-content, .val, .tb td {
    overflow-wrap: break-word;
    word-break: break-word;
}
img, video, svg, canvas, iframe {
    max-width: 100%;
    height: auto;
}
svg, canvas, iframe { height: auto; }

/* ================= ③ 中屏适配（821–1100） ================= */
@media (min-width: 821px) and (max-width: 1100px) {
    /* 侧栏微收：保留 12px 图标呼吸，压缩文字字距 */
    .side { width: 200px; padding: 16px 11px 24px; }
    .side-i { padding: 8.5px 12px; gap: 10px; }
    .wrap { padding: 0 18px; }
    .stats { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
}

/* ================= ④ 手机/小屏适配（项链断点 640/520/420） ================= */

/* ≤640：内容呼吸收窄、表格字压一档、弹窗贴边 */
@media (max-width: 640px) {
    .wrap { padding: 0 12px; gap: 12px; }
    .topbar { padding: 0 12px; }
    .card { padding: 15px 14px; }
    .card h2 { font-size: 15.5px; margin-bottom: 12px; }
    .stats { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 9px; }
    .stat { padding: 13px 13px 12px; }
    .stat .num { font-size: 19px; }
    .tb th { font-size: 12px; letter-spacing: .5px; padding: 10px 9px; }
    .tb td { font-size: 12.5px; padding: 9.5px 9px; }
    /* 表头与数据不换行：窄屏表格在 .tb-wrap 内横向滚动（标准移动端行为） */
    .tb th, .tb td { white-space: nowrap; }
    /* 弹窗：近全宽 + 安全高度 + 内部滚动 */
    .mdy-modal-box, .cmdk-box, .ta-modal-box {
        width: calc(100vw - 22px);
        max-width: calc(100vw - 22px);
        max-height: 88vh;
        overflow-y: auto;
        border-radius: 18px;
    }
    .mdy-modal-overlay, .cmdk-mask { padding: 11px; }
    /* 附件审查弹窗同样贴合 */
    .ta-modal {
        left: 11px; right: 11px; top: 50%;
        transform: translateY(-50%);
        width: auto;
    }
    /* 分组导航在抽屉里保持呼吸 */
    .side { width: min(248px, 80vw); }
}

/* ≤520：统计卡双列保底，极窄屏不至于单列拉高；操作区换行 */
@media (max-width: 520px) {
    .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .stats .stat { padding: 12px 12px 11px; }
    .stat .num { font-size: 18px; }
    /* 按钮组 / 筛选栏换行而非溢出 */
    .btn-row, .tb-filter, .actions, .u-ops, .form-actions {
        flex-wrap: wrap;
        gap: 7px !important;
    }
    .btn-row .btn, .u-ops .btn { min-width: 0; flex: 1 1 auto; }
    /* 登录框：贴边 + 内容可滚动（防矮横屏/小屏溢出） */
    .login-box {
        margin: 3vh 12px;
        padding: 22px 18px 20px;
        max-height: 92vh;
        overflow-y: auto;
    }
    .login-box h1 { letter-spacing: 3px; }
    /* 通知面板替代 rtn 浮层：底部到达式（仿 iOS sheet） */
    .rtn-panel {
        position: fixed;
        left: 10px; right: 10px; top: auto; bottom: 8px;
        width: auto; max-width: none;
        border-radius: 18px;
    }
    .rtn-panel.rtn-open { animation: r13-sheet-up .32s var(--ease-pop) both; }
    @keyframes r13-sheet-up {
        from { opacity: 0; transform: translateY(24px) scale(.98); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
}

/* ≤420：极窄屏细节（首页入口卡、步骤、App 卡、页脚） */
@media (max-width: 420px) {
    /* 官网/门户：入口卡与步骤单列化，图片区域隐形收窄 */
    .entry-card, .how-step, .app-card { padding: 14px 13px; }
    .hero h1, .login-box h1 { font-size: 20px; }
    .card h2 { font-size: 15px; }
    /* 顶栏：汉堡 + 品牌即可，其余自然隐藏（已由 .top-user-name/.top-clock 机制接管） */
    .topbar { min-height: 52px; }
    .mbar-i { font-size: 10px; }
    /* 键盘弹起友好：输入聚焦时收起底部栏阴影层 */
    .mbar { padding-bottom: calc(5px + env(safe-area-inset-bottom, 0px)); }
    /* 极窄下统计卡数字仍一屏可读 */
    .stat .num { font-size: 16.5px; }
    .stat .lab { font-size: 11.5px; }
}

/* ================= ⑤ 手机横屏（矮视口专用） ================= */
@media (max-height: 540px) and (orientation: landscape) {
    body { background-attachment: scroll; }
    body.login-bg { background-attachment: scroll; }
    /* 顶栏压矮：让内容区有更多竖屏空间 */
    .topbar { min-height: 48px; }
    .wrap { margin: 10px auto 16px; padding-bottom: 8px; }
    .login-box { margin: 2.5vh auto; padding: 18px 22px 16px; max-height: 94vh; overflow-y: auto; }
    .login-box form { gap: 8px; margin-top: 10px; }
    /* mbar 与内容区的安全距离 */
    body:has(.mbar) .wrap { padding-bottom: 84px; }
}

/* ================= ⑥ 触控目标 · iOS 防缩放 ================= */

/* 触屏设备：交互元素 44px 级触控高度（苹果 HIG） */
@media (hover: none) {
    .side-i { min-height: 44px; padding-top: 11px; padding-bottom: 11px; }
    .mbar-i { min-height: 44px; }
    .btn, button, .tabs a, .pagination a, .chip, .tag {
        min-height: 36px;
    }
    input[type="text"], input[type="password"], input[type="email"],
    input[type="number"], input[type="search"], input[type="tel"],
    input[type="url"], input[type="date"], select, textarea {
        font-size: 16px;   /* iOS：≥16px 才不会聚焦时自动放大页面 */
        min-height: 40px;
    }
}

/* ================= ⑦ 治愈细节 · 收尾 ================= */

/* 极窄/小屏下分页按钮收缩 */
@media (max-width: 520px) {
    .pagination a, .pagination span, .pagination .page {
        padding: 4.5px 9px;
        font-size: 12px;
    }
}

/* 高像素密度：图标线条细度保持（1px 视觉 = 1.5px 物理） */
@media (min-resolution: 2dppx) {
    .seal, .side-ico, .top-avatar { -webkit-font-smoothing: antialiased; }
}

/* 无障碍：偏好减少动效时同步收敛新动效 */
@media (prefers-reduced-motion: reduce) {
    .rtn-panel.rtn-open { animation: none; }
    body::after, .brand .seal, .login-brand .logo { animation: none !important; }
}