admin343/browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix 前端优化

Browse Source
This commit is contained in:
npc0-hue
2026-07-21 13:44:23 +08:00
parent 0cb91b5f88
commit b06623d0ce
11 changed files with 386 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files
platform_web/theme/base.css
+68 -27
View File
@@ -8,42 +8,82 @@ button{font:inherit}
:root[data-custom-background=true] .workspace-background-layer::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,7,11,.28) 0,rgba(4,7,11,.1) 216px,transparent 42%),linear-gradient(180deg,rgba(4,7,11,.02),rgba(4,7,11,.1));pointer-events:none}
:root[data-custom-background=true] .workspace-background-layer{filter:saturate(.92) contrast(.96) brightness(.94);opacity:1}
.global-particle-layer{position:fixed;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:var(--ultimate-effect-alpha);mix-blend-mode:screen;overflow:hidden}
:root[data-custom-background=true] .global-particle-layer{opacity:.08}
:root[data-custom-background=true] .global-particle-layer{opacity:.42}
.global-particle-layer span{position:absolute;display:block;pointer-events:none}
.global-particle-orbit{right:9vw;bottom:6vh;width:min(36vw,440px);aspect-ratio:1;border:2px solid color-mix(in srgb,var(--accent) 42%,transparent);border-radius:50%;box-shadow:0 0 34px color-mix(in srgb,var(--accent) 18%,transparent),inset 0 0 42px color-mix(in srgb,var(--accent) 12%,transparent);opacity:.62;transform:rotate(12deg)}
.global-particle-orbit::after,.global-particle-orbit::before{content:"";position:absolute;inset:18%;border:1px solid color-mix(in srgb,var(--gold) 34%,transparent);border-radius:inherit}
.global-particle-orbit::after{inset:34%;border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
.global-particle-orbit-secondary{right:23vw;top:9vh;bottom:auto;width:min(18vw,230px);opacity:.36;transform:rotate(-18deg)}
.global-particle-sweep{top:-12vh;left:63vw;width:28px;height:118vh;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--accent) 42%,transparent),transparent);opacity:.42;transform:rotate(24deg);filter:blur(1px)}
.global-particle-ribbon{left:-12vw;bottom:24vh;width:128vw;height:120px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--pink) 24%,transparent),color-mix(in srgb,var(--gold) 16%,transparent),transparent);opacity:.28;transform:rotate(-11deg);filter:blur(18px)}
:root[data-theme-palette=magical-girl] .global-particle-ribbon{display:none}
.global-particle-frame{width:120px;height:120px;border:2px solid color-mix(in srgb,var(--gold) 44%,transparent);opacity:.46}
.global-particle-frame-tl{top:18px;left:20px;border-right:0;border-bottom:0}
.global-particle-frame-br{right:22px;bottom:24px;border-left:0;border-top:0}
.global-particle-glint{--particle-index:0;--particle-x:12%;--particle-y:16%;left:var(--particle-x);top:var(--particle-y);width:9px;height:9px;opacity:.46;transform:rotate(45deg)}
.global-particle-glint::after,.global-particle-glint::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--sparkle) 76%,transparent);border-radius:999px}
.global-particle-glint::after{transform:rotate(90deg)}
:root[data-theme-palette=mecha-black] .global-particle-ribbon{background:repeating-linear-gradient(90deg,transparent 0 80px,color-mix(in srgb,var(--gold) 24%,transparent) 81px 86px,transparent 87px 150px);opacity:.32;filter:blur(2px)}
:root[data-theme-palette=mecha-black] .global-particle-glint{width:6px;height:18px;border:1px solid color-mix(in srgb,var(--accent) 54%,transparent);background:color-mix(in srgb,var(--accent) 18%,transparent)}
:root[data-theme-palette=mecha-black] .global-particle-glint::after,:root[data-theme-palette=mecha-black] .global-particle-glint::before{display:none}
:root[data-theme-palette=magical-girl] .global-particle-orbit{border-color:color-mix(in srgb,var(--sparkle) 62%,transparent);box-shadow:0 0 44px color-mix(in srgb,var(--pink) 28%,transparent),inset 0 0 34px color-mix(in srgb,var(--gold) 14%,transparent)}
:root[data-theme-palette=magical-girl] .global-particle-frame{border-radius:22px;box-shadow:0 0 22px color-mix(in srgb,var(--gold) 22%,transparent)}
@media (prefers-reduced-motion:no-preference){.global-particle-orbit{animation:particle-orbit-drift 22s linear infinite}
.global-particle-orbit-secondary{animation-duration:30s;animation-direction:reverse}
.global-particle-sweep{animation:particle-sweep 12s ease-in-out infinite}
@media (prefers-reduced-motion:no-preference){.global-particle-sweep{animation:particle-sweep 12s ease-in-out infinite}
.global-particle-glint{animation:particle-glint 4.8s ease-in-out infinite;animation-delay:calc(var(--particle-index) * -.42s)}
}
@media (prefers-reduced-motion:reduce){.global-particle-layer *{animation:none!important}
}
@keyframes particle-orbit-drift{from{transform:rotate(12deg)}
to{transform:rotate(372deg)}
}
@keyframes particle-sweep{0%,100%{transform:translateX(-18vw) rotate(24deg);opacity:.18}
48%{transform:translateX(18vw) rotate(24deg);opacity:.46}
}
@keyframes particle-glint{0%,100%{opacity:.18;transform:scale(.72) rotate(45deg)}
50%{opacity:.68;transform:scale(1.16) rotate(45deg)}
}
.global-orbital-construct{--construct-index:0;--construct-x:78%;--construct-y:78%;--construct-size:min(42vw,520px);--construct-drift:0deg;left:var(--construct-x);top:var(--construct-y);width:var(--construct-size);aspect-ratio:1;border-radius:50%;clip-path:circle(49% at 50% 50%);opacity:0;overflow:hidden;transform:translate(-50%,-50%) rotate(var(--construct-drift));background:var(--orbital-construct-image) center/contain no-repeat transparent;filter:var(--orbital-construct-filter);mix-blend-mode:screen}
.global-orbital-construct::before,.global-orbital-construct::after{content:none}
.global-particle-lightfall{top:-28vh;width:clamp(54px,8vw,112px);height:152vh;background:var(--magic-lightfall,linear-gradient(180deg,transparent,rgba(154,247,255,.34),transparent));opacity:.32;filter:blur(10px);transform:translate3d(0,-8vh,0) rotate(8deg);mix-blend-mode:screen}
.global-particle-lightfall-a{left:18vw}
.global-particle-lightfall-b{left:54vw;width:clamp(72px,10vw,136px);opacity:.24;transform:translate3d(0,-18vh,0) rotate(11deg)}
.global-particle-lightfall-c{left:82vw;width:clamp(42px,6vw,84px);opacity:.2;transform:translate3d(0,-4vh,0) rotate(6deg)}
.global-particle-side-ray{display:none;top:9vh;width:min(42vw,520px);height:74vh;background:var(--magic-side-rays,linear-gradient(90deg,color-mix(in srgb,var(--accent) 24%,transparent),transparent));opacity:.34;filter:blur(11px);transform:translate3d(0,0,0) skewY(-12deg);mix-blend-mode:screen}
.global-particle-side-ray-left{left:-11vw}
.global-particle-side-ray-right{right:-11vw;transform:scaleX(-1) skewY(-12deg)}
:root[data-theme-palette=mecha-black] .global-orbital-construct{display:block;opacity:.22}
:root[data-theme-palette=mecha-black] .global-particle-side-ray{display:none}
:root[data-theme-palette=magical-girl] .global-orbital-construct{display:block;opacity:.24}
:root[data-theme-palette=magical-girl] .global-particle-lightfall{opacity:.14;filter:blur(15px)}
:root[data-theme-palette=magical-girl] .global-particle-side-ray{display:block}
:root[data-custom-background=true] .global-orbital-construct{opacity:.2}
:root[data-custom-background=true][data-theme-palette=mecha-black] .global-orbital-construct{display:block;opacity:.16}
:root[data-custom-background=true][data-theme-palette=magical-girl] .global-orbital-construct{opacity:.18}
:root[data-custom-background=true] .global-particle-lightfall{opacity:.2}
:root[data-custom-background=true] .global-particle-side-ray{opacity:.28}
@media (prefers-reduced-motion:no-preference){.global-orbital-construct{animation:orbital-construct-drift 26s linear infinite;animation-delay:calc(var(--construct-index) * -5s)}
.global-particle-lightfall{animation:magic-lightfall-fall 13s ease-in-out infinite}
.global-particle-lightfall-b{animation-duration:17s;animation-delay:-7s}
.global-particle-lightfall-c{animation-duration:19s;animation-delay:-3s}
.global-particle-side-ray{animation:magic-side-ray-pulse 7s ease-in-out infinite}
.global-particle-side-ray-right{animation-name:magic-side-ray-pulse-right;animation-delay:-3.5s}
}
@keyframes orbital-construct-drift{from{transform:translate(-50%,-50%) rotate(var(--construct-drift))}
to{transform:translate(-50%,-50%) rotate(calc(var(--construct-drift) + 360deg))}
}
@keyframes magic-lightfall-fall{0%,100%{opacity:.14;transform:translate3d(0,-24vh,0) rotate(8deg)}
45%{opacity:.42;transform:translate3d(0,8vh,0) rotate(8deg)}
}
@keyframes magic-side-ray-pulse{0%,100%{opacity:.16;transform:translate3d(-4vw,0,0) skewY(-12deg)}
50%{opacity:.44;transform:translate3d(2vw,0,0) skewY(-12deg)}
}
@keyframes magic-side-ray-pulse-right{0%,100%{opacity:.16;transform:translate3d(4vw,0,0) scaleX(-1) skewY(-12deg)}
50%{opacity:.44;transform:translate3d(-2vw,0,0) scaleX(-1) skewY(-12deg)}
}
.action-strip button,.app-account-button,.app-menu-toggle,.auth-mode-tabs button,.confirm-actions button,.icon-command,.primary-command,.profile-save-button,.row-actions button,.runtime-action-item,.section-tab,.segmented-button,.state-action,.table-link-button,.theme-upload{position:relative;isolation:isolate;overflow:hidden;transition:border-color 140ms ease,box-shadow 160ms ease,color 140ms ease,filter 160ms ease,transform 120ms ease}
.action-strip button::before,.app-account-button::before,.app-menu-toggle::before,.auth-mode-tabs button::before,.confirm-actions button::before,.icon-command::before,.primary-command::before,.profile-save-button::before,.row-actions button::before,.runtime-action-item::before,.section-tab::before,.segmented-button::before,.state-action::before,.table-link-button::before,.theme-upload::before{content:"";position:absolute;inset:-64%;z-index:0;border-radius:inherit;background:var(--command-ring-sheen,radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 64%)),conic-gradient(from 0deg,transparent 0 18%,color-mix(in srgb,var(--accent) 34%,transparent) 20% 22%,transparent 24% 54%,color-mix(in srgb,var(--gold) 26%,transparent) 56% 58%,transparent 60% 100%);opacity:0;pointer-events:none;transform:scale(.68) rotate(-14deg);transition:opacity 150ms ease,transform 420ms cubic-bezier(.16,1,.3,1);mix-blend-mode:screen}
.action-strip button>* ,.app-account-button>* ,.app-menu-toggle>* ,.auth-mode-tabs button>* ,.confirm-actions button>* ,.icon-command>* ,.primary-command>* ,.profile-save-button>* ,.row-actions button>* ,.runtime-action-item>* ,.section-tab>* ,.segmented-button>* ,.state-action>* ,.table-link-button>* ,.theme-upload>*{position:relative;z-index:1}
.action-strip button:focus-visible::before,.action-strip button:hover::before,.app-account-button:focus-visible::before,.app-account-button:hover::before,.app-menu-toggle:focus-visible::before,.app-menu-toggle:hover::before,.auth-mode-tabs button:focus-visible::before,.auth-mode-tabs button:hover::before,.confirm-actions button:focus-visible::before,.confirm-actions button:hover::before,.icon-command:focus-visible::before,.icon-command:hover::before,.primary-command:focus-visible::before,.primary-command:hover::before,.profile-save-button:focus-visible::before,.profile-save-button:hover::before,.row-actions button:focus-visible::before,.row-actions button:hover::before,.runtime-action-item:focus-visible::before,.runtime-action-item:hover::before,.section-tab:focus-visible::before,.section-tab:hover::before,.segmented-button:focus-visible::before,.segmented-button:hover::before,.state-action:focus-visible::before,.state-action:hover::before,.table-link-button:focus-visible::before,.table-link-button:hover::before,.theme-upload:focus-visible::before,.theme-upload:hover::before{opacity:.72;transform:scale(1) rotate(18deg)}
.action-strip button:active,.app-account-button:active,.app-menu-toggle:active,.auth-mode-tabs button:active,.confirm-actions button:active,.icon-command:active,.primary-command:active,.profile-save-button:active,.row-actions button:active,.runtime-action-item:active,.section-tab:active,.segmented-button:active,.state-action:active,.table-link-button:active,.theme-upload:active{transform:translateY(1px)}
.action-strip button:disabled::before,.icon-command:disabled::before,.primary-command:disabled::before,.row-actions button:disabled::before,.theme-upload:disabled::before{content:none}
.app-nav-group-button{overflow:hidden;isolation:isolate;transition:border-color 140ms ease,box-shadow 160ms ease,color 140ms ease,transform 120ms ease}
.app-nav-group-button::after{content:"";position:absolute;inset:-70%;z-index:0;border-radius:inherit;background:var(--command-ring-sheen,radial-gradient(circle,color-mix(in srgb,var(--accent) 24%,transparent),transparent 66%));opacity:0;transform:scale(.64) rotate(-16deg);transition:opacity 150ms ease,transform 420ms cubic-bezier(.16,1,.3,1);pointer-events:none;mix-blend-mode:screen}
.app-nav-group-button:focus-visible::after,.app-nav-group-button:hover::after,.app-nav-item-active::after{opacity:.62;transform:scale(1) rotate(14deg)}
.app-nav-group-button:active{transform:translateY(1px)}
.app-nav-copy{position:relative;z-index:1}
.app-nav-group-button::before{z-index:1}
.mobile-sidebar-handle::after{background:var(--command-ring-sheen),var(--frame-accessory-top) center top/28px 10px no-repeat;background-repeat:no-repeat;opacity:.78}
@media (prefers-reduced-motion:reduce){.action-strip button,.app-account-button,.app-menu-toggle,.app-nav-group-button,.auth-mode-tabs button,.confirm-actions button,.icon-command,.primary-command,.profile-save-button,.row-actions button,.runtime-action-item,.section-tab,.segmented-button,.state-action,.table-link-button,.theme-upload{transition:none}
.action-strip button::before,.app-account-button::before,.app-menu-toggle::before,.app-nav-group-button::after,.auth-mode-tabs button::before,.confirm-actions button::before,.icon-command::before,.primary-command::before,.profile-save-button::before,.row-actions button::before,.runtime-action-item::before,.section-tab::before,.segmented-button::before,.state-action::before,.table-link-button::before,.theme-upload::before{transition:none;transform:none}
}
.mobile-sidebar-backdrop,.mobile-sidebar-close,.mobile-sidebar-handle{display:none}
@keyframes mobile-sidebar-beacon{0%,100%{opacity:.48;transform:scaleY(.72)}
50%{opacity:1;transform:scaleY(1)}
@@ -193,7 +233,8 @@ to{transform:rotate(372deg)}
.summary-tone-warning{border-left-color:var(--gold)}
.summary-tone-neutral{border-left-color:var(--accent)}
.metric-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.metric-card,.overview-card{min-height:104px;display:grid;align-content:space-between;gap:12px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--panel-material);backdrop-filter:blur(22px) saturate(1.28);box-shadow:var(--panel-shadow);position:relative;isolation:isolate;overflow:hidden}
.catalog-card,.console-panel{border:1px solid var(--line);border-radius:8px;background:var(--sugar-dust),linear-gradient(135deg,color-mix(in srgb,var(--surface) 22%,transparent),color-mix(in srgb,var(--surface-raised) 14%,transparent));-webkit-backdrop-filter:blur(10px) saturate(.9);backdrop-filter:blur(10px) saturate(.9);box-shadow:var(--panel-shadow);padding:16px;position:relative;isolation:isolate;overflow:hidden}
.metric-card,.overview-card{min-height:104px;display:grid;align-content:space-between;gap:12px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--sugar-dust),linear-gradient(135deg,color-mix(in srgb,var(--surface) 22%,transparent),color-mix(in srgb,var(--surface-raised) 14%,transparent));-webkit-backdrop-filter:blur(10px) saturate(.9);backdrop-filter:blur(10px) saturate(.9);box-shadow:var(--panel-shadow);position:relative;isolation:isolate;overflow:hidden}
.catalog-card::before,.console-panel::before,.metric-card::before,.overview-card::before,.server-card::before,.server-detail-header::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(255,255,255,.9),color-mix(in srgb,var(--accent) 35%,transparent),color-mix(in srgb,var(--pink) 24%,transparent),rgba(255,255,255,.46));mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;opacity:.86;z-index:2;pointer-events:none}
.catalog-card::after,.confirm-panel::after,.console-panel::after,.drawer-panel::after,.metric-card::after,.overview-card::after,.server-card::after,.server-detail-header::after{content:"";position:absolute;inset:0;background:var(--frame-accessory-top),var(--frame-accessory-bottom),var(--shine-sweep),var(--jelly-highlight);background-size:var(--frame-accessory-size),34px 34px,auto;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat;background-position:right 6px top 5px,left 6px bottom 5px,right 10px top 8px,center;opacity:var(--frame-accessory-opacity);z-index:0;pointer-events:none}
.metric-label{color:var(--ink-faint);font-size:13px}
@@ -207,12 +248,11 @@ to{transform:rotate(372deg)}
.console-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.overview-card{min-height:132px;gap:10px}
.overview-card p{margin:0;color:var(--ink-faint);font-size:13px}
.catalog-card,.console-panel{border:1px solid var(--line);border-radius:8px;background:var(--panel-material);backdrop-filter:blur(22px) saturate(1.28);box-shadow:var(--panel-shadow);padding:16px;position:relative;isolation:isolate;overflow:hidden}
:where(
.metric-card,.overview-card,.console-panel,.catalog-card,.server-card,.server-detail-header,.resource-table-wrap,.provider-table-wrap,.server-table-wrap,.plugin-group,.operation-item,.confirm-panel,.drawer-panel
)>*{position:relative;z-index:1}
:root[data-theme-palette=mecha-black] .catalog-card,:root[data-theme-palette=mecha-black] .confirm-panel,:root[data-theme-palette=mecha-black] .console-panel,:root[data-theme-palette=mecha-black] .drawer-panel,:root[data-theme-palette=mecha-black] .metric-card,:root[data-theme-palette=mecha-black] .operation-item,:root[data-theme-palette=mecha-black] .overview-card,:root[data-theme-palette=mecha-black] .plugin-group,:root[data-theme-palette=mecha-black] .server-card{clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
:root[data-theme-palette=magical-girl] .catalog-card,:root[data-theme-palette=magical-girl] .confirm-panel,:root[data-theme-palette=magical-girl] .console-panel,:root[data-theme-palette=magical-girl] .drawer-panel,:root[data-theme-palette=magical-girl] .metric-card,:root[data-theme-palette=magical-girl] .operation-item,:root[data-theme-palette=magical-girl] .overview-card,:root[data-theme-palette=magical-girl] .plugin-group,:root[data-theme-palette=magical-girl] .provider-table-wrap,:root[data-theme-palette=magical-girl] .resource-table-wrap,:root[data-theme-palette=magical-girl] .server-card,:root[data-theme-palette=magical-girl] .server-detail-header,:root[data-theme-palette=magical-girl] .server-table-wrap{background:var(--panel-material);overflow:visible}
:root[data-theme-palette=magical-girl] .catalog-card,:root[data-theme-palette=magical-girl] .confirm-panel,:root[data-theme-palette=magical-girl] .console-panel,:root[data-theme-palette=magical-girl] .drawer-panel,:root[data-theme-palette=magical-girl] .metric-card,:root[data-theme-palette=magical-girl] .operation-item,:root[data-theme-palette=magical-girl] .overview-card,:root[data-theme-palette=magical-girl] .plugin-group,:root[data-theme-palette=magical-girl] .provider-table-wrap,:root[data-theme-palette=magical-girl] .resource-table-wrap,:root[data-theme-palette=magical-girl] .server-card,:root[data-theme-palette=magical-girl] .server-detail-header,:root[data-theme-palette=magical-girl] .server-table-wrap{background:var(--sugar-dust),linear-gradient(180deg,color-mix(in srgb,var(--surface) 16%,transparent),color-mix(in srgb,var(--surface-raised) 10%,transparent));overflow:visible}
:root[data-theme-palette=magical-girl] :where(
.metric-card,.overview-card,.console-panel,.catalog-card,.server-card,.server-detail-header,.resource-table-wrap,.provider-table-wrap,.server-table-wrap,.drawer-panel,.confirm-panel,.plugin-group,.operation-item,.server-toolbar,.state-view
){--frame-accessory-image:var(--frame-accessory-heart)}
@@ -240,8 +280,8 @@ to{transform:rotate(372deg)}
:root[data-theme-palette=magical-girl] .catalog-card::after,:root[data-theme-palette=magical-girl] .confirm-panel::after,:root[data-theme-palette=magical-girl] .console-panel::after,:root[data-theme-palette=magical-girl] .drawer-panel::after,:root[data-theme-palette=magical-girl] .metric-card::after,:root[data-theme-palette=magical-girl] .overview-card::after,:root[data-theme-palette=magical-girl] .server-card::after,:root[data-theme-palette=magical-girl] .server-detail-header::after{inset:-14px;background-image:var(--frame-accessory-image);background-size:var(--frame-accessory-size);background-repeat:no-repeat;background-position:right -4px top -6px;opacity:var(--frame-accessory-opacity);filter:drop-shadow(0 0 4px rgba(255, 119, 200, .58)) drop-shadow(0 0 2px rgba(255, 221, 117, .42))}
:root[data-theme-palette=mecha-black] .catalog-card::before,:root[data-theme-palette=mecha-black] .console-panel::before,:root[data-theme-palette=mecha-black] .metric-card::before,:root[data-theme-palette=mecha-black] .overview-card::before,:root[data-theme-palette=mecha-black] .server-card::before,:root[data-theme-palette=mecha-black] .server-detail-header::before{background:linear-gradient(135deg,rgba(72,230,255,.72),rgba(255,184,77,.42),rgba(72,230,255,.18));opacity:.76}
:root[data-custom-background=true] .app-sidebar{background:radial-gradient(circle at 92% 3%,rgba(255,255,255,.18) 0 2px,transparent 3px),linear-gradient(180deg,rgba(8,10,16,.42),rgba(8,10,16,.3))}
:root[data-custom-background=true]{--frame-accessory-opacity:0.04;--surface:rgba(5, 10, 16, 0.76);--surface-solid:rgba(5, 10, 16, 0.92);--surface-raised:rgba(7, 13, 20, 0.82);--glass-tint:transparent;--glass-wash:linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(5, 10, 16, 0.76) 44%, rgba(255, 255, 255, 0.03));--panel-material:linear-gradient(145deg, rgba(255, 255, 255, 0.075), rgba(5, 10, 16, 0.86) 48%, rgba(5, 10, 16, 0.76));--panel-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.13),inset 0 0 0 1px rgba(255, 255, 255, 0.045),0 18px 38px rgba(0, 0, 0, 0.32)}
:root[data-custom-background=true][data-theme-palette=magical-girl]{--frame-accessory-opacity:0.22;--surface:rgba(22, 22, 29, 0.64);--surface-solid:rgba(18, 19, 26, 0.88);--surface-raised:rgba(25, 24, 32, 0.72);--line:rgba(238, 215, 236, 0.34);--line-strong:rgba(250, 240, 249, 0.5);--glass-wash:linear-gradient(145deg, rgba(255, 246, 253, 0.08), rgba(22, 22, 29, 0.66) 48%, rgba(255, 221, 117, 0.025));--panel-material:linear-gradient(145deg, rgba(255, 246, 253, 0.08), rgba(22, 22, 29, 0.72) 44%, rgba(18, 19, 26, 0.64));--panel-shadow:inset 0 1px 0 rgba(255, 246, 253, 0.18),inset 0 0 0 1px rgba(255, 185, 226, 0.06),0 16px 34px rgba(12, 12, 18, 0.3)}
:root[data-custom-background=true]{--frame-accessory-opacity:0.04;--surface:rgba(5, 10, 16, 0.64);--surface-solid:rgba(5, 10, 16, 0.84);--surface-raised:rgba(7, 13, 20, 0.68);--glass-tint:transparent;--glass-wash:linear-gradient(145deg, rgba(255, 255, 255, 0.06), rgba(5, 10, 16, 0.58) 44%, rgba(255, 255, 255, 0.025));--panel-material:linear-gradient(145deg, rgba(255, 255, 255, 0.055), rgba(5, 10, 16, 0.68) 48%, rgba(5, 10, 16, 0.56));--panel-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.13),inset 0 0 0 1px rgba(255, 255, 255, 0.045),0 18px 38px rgba(0, 0, 0, 0.32)}
:root[data-custom-background=true][data-theme-palette=magical-girl]{--frame-accessory-opacity:0.22;--surface:rgba(22, 22, 29, 0.42);--surface-solid:rgba(18, 19, 26, 0.66);--surface-raised:rgba(25, 24, 32, 0.5);--line:rgba(238, 215, 236, 0.34);--line-strong:rgba(250, 240, 249, 0.5);--glass-wash:linear-gradient(145deg, rgba(255, 246, 253, 0.045), rgba(22, 22, 29, 0.36) 48%, rgba(255, 221, 117, 0.018));--panel-material:linear-gradient(145deg, rgba(255, 246, 253, 0.045), rgba(22, 22, 29, 0.4) 44%, rgba(18, 19, 26, 0.34));--panel-shadow:inset 0 1px 0 rgba(255, 246, 253, 0.18),inset 0 0 0 1px rgba(255, 185, 226, 0.06),0 16px 34px rgba(12, 12, 18, 0.3)}
:root[data-custom-background=true][data-theme-palette=magical-girl] .app-sidebar{border-right-color:rgba(242,224,240,.26);background:linear-gradient(180deg,rgba(34,31,40,.72),rgba(18,19,26,.68)),rgba(18,18,24,.5);-webkit-backdrop-filter:blur(14px) saturate(0.92);backdrop-filter:blur(14px) saturate(0.92);box-shadow:inset -1px 0 0 rgba(255,246,253,.12),10px 0 28px rgba(12,12,18,.26)}
:root[data-custom-background=true][data-theme-palette=magical-girl] .page-header>div:first-child{border-color:rgba(242,224,240,.18);background:linear-gradient(135deg,rgba(255,246,253,.075),transparent 36%),rgba(22,22,29,.58);-webkit-backdrop-filter:blur(8px) saturate(0.9);backdrop-filter:blur(8px) saturate(0.9)}
:root[data-custom-background=true] .app-sidebar{border-right-color:rgba(210,239,246,.24);background:linear-gradient(180deg,rgba(5,10,16,.76),rgba(5,9,14,.68)),rgba(4,8,12,.58);-webkit-backdrop-filter:blur(18px) saturate(0.9);backdrop-filter:blur(18px) saturate(0.9);box-shadow:inset -1px 0 0 rgba(255,255,255,.12),10px 0 28px rgba(0,0,0,.22)}
@@ -251,9 +291,9 @@ to{transform:rotate(372deg)}
:root[data-custom-background=true] .page-header>div:first-child{display:grid;justify-items:start;padding:7px 12px 9px;border:1px solid rgba(255,255,255,.08);border-radius:8px;background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 36%),rgba(5,10,16,.38);-webkit-backdrop-filter:blur(10px) saturate(0.8);backdrop-filter:blur(10px) saturate(0.8);box-shadow:0 10px 22px rgba(0,0,0,.18)}
:root[data-custom-background=true] .page-kicker{margin-bottom:4px;text-shadow:0 1px 2px rgba(0,0,0,.42)}
:root[data-custom-background=true] .app-nav-item-active{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 72%,transparent) 0 3px,transparent 3px),linear-gradient(135deg,rgba(7,16,23,.78),rgba(7,14,20,.56));border-color:color-mix(in srgb,var(--accent) 64%,rgba(255,255,255,.18));box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 8px 22px rgba(0,0,0,.22)}
:root[data-custom-background=true] .catalog-card,:root[data-custom-background=true] .confirm-panel,:root[data-custom-background=true] .console-panel,:root[data-custom-background=true] .drawer-panel,:root[data-custom-background=true] .metric-card,:root[data-custom-background=true] .operation-item,:root[data-custom-background=true] .overview-card,:root[data-custom-background=true] .plugin-group,:root[data-custom-background=true] .provider-table-wrap,:root[data-custom-background=true] .resource-table-wrap,:root[data-custom-background=true] .server-card,:root[data-custom-background=true] .server-detail-header,:root[data-custom-background=true] .server-table-wrap,:root[data-custom-background=true] .server-toolbar,:root[data-custom-background=true] .state-view{-webkit-backdrop-filter:blur(16px) saturate(0.78);backdrop-filter:blur(16px) saturate(0.78)}
:root[data-custom-background=true] .catalog-card,:root[data-custom-background=true] .confirm-panel,:root[data-custom-background=true] .console-panel,:root[data-custom-background=true] .drawer-panel,:root[data-custom-background=true] .metric-card,:root[data-custom-background=true] .operation-item,:root[data-custom-background=true] .overview-card,:root[data-custom-background=true] .plugin-group,:root[data-custom-background=true] .provider-table-wrap,:root[data-custom-background=true] .resource-table-wrap,:root[data-custom-background=true] .server-card,:root[data-custom-background=true] .server-detail-header,:root[data-custom-background=true] .server-table-wrap,:root[data-custom-background=true] .server-toolbar,:root[data-custom-background=true] .state-view{background:linear-gradient(135deg,rgba(255,255,255,.065),transparent 30%),linear-gradient(180deg,rgba(5,10,16,.86),rgba(5,10,16,.78));border-color:color-mix(in srgb,var(--line-strong) 44%,rgba(255,255,255,.16));-webkit-backdrop-filter:blur(16px) saturate(0.78);backdrop-filter:blur(16px) saturate(0.78);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.04),0 16px 34px rgba(0,0,0,.3)}
:root[data-custom-background=true][data-theme-palette=magical-girl] .catalog-card,:root[data-custom-background=true][data-theme-palette=magical-girl] .confirm-panel,:root[data-custom-background=true][data-theme-palette=magical-girl] .console-panel,:root[data-custom-background=true][data-theme-palette=magical-girl] .drawer-panel,:root[data-custom-background=true][data-theme-palette=magical-girl] .metric-card,:root[data-custom-background=true][data-theme-palette=magical-girl] .operation-item,:root[data-custom-background=true][data-theme-palette=magical-girl] .overview-card,:root[data-custom-background=true][data-theme-palette=magical-girl] .plugin-group,:root[data-custom-background=true][data-theme-palette=magical-girl] .provider-table-wrap,:root[data-custom-background=true][data-theme-palette=magical-girl] .resource-table-wrap,:root[data-custom-background=true][data-theme-palette=magical-girl] .server-card,:root[data-custom-background=true][data-theme-palette=magical-girl] .server-detail-header,:root[data-custom-background=true][data-theme-palette=magical-girl] .server-table-wrap,:root[data-custom-background=true][data-theme-palette=magical-girl] .server-toolbar,:root[data-custom-background=true][data-theme-palette=magical-girl] .state-view{background:radial-gradient(circle at 100% 0,rgba(255,221,242,.07),transparent 32%),linear-gradient(135deg,rgba(255,246,253,.065),transparent 34%),linear-gradient(180deg,rgba(24,24,31,.66),rgba(18,19,26,.58));border-color:color-mix(in srgb,var(--line-strong) 54%,rgba(255,255,255,.16));-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,246,253,.18),inset 0 0 0 1px rgba(255,185,226,.045),0 16px 32px rgba(12,12,18,.28)}
:root[data-custom-background=true] .catalog-card,:root[data-custom-background=true] .confirm-panel,:root[data-custom-background=true] .console-panel,:root[data-custom-background=true] .drawer-panel,:root[data-custom-background=true] .metric-card,:root[data-custom-background=true] .operation-item,:root[data-custom-background=true] .overview-card,:root[data-custom-background=true] .plugin-group,:root[data-custom-background=true] .provider-table-wrap,:root[data-custom-background=true] .resource-table-wrap,:root[data-custom-background=true] .server-card,:root[data-custom-background=true] .server-detail-header,:root[data-custom-background=true] .server-table-wrap,:root[data-custom-background=true] .server-toolbar,:root[data-custom-background=true] .state-view{-webkit-backdrop-filter:blur(10px) saturate(0.86);backdrop-filter:blur(10px) saturate(0.86)}
:root[data-custom-background=true] .catalog-card,:root[data-custom-background=true] .confirm-panel,:root[data-custom-background=true] .console-panel,:root[data-custom-background=true] .drawer-panel,:root[data-custom-background=true] .metric-card,:root[data-custom-background=true] .operation-item,:root[data-custom-background=true] .overview-card,:root[data-custom-background=true] .plugin-group,:root[data-custom-background=true] .provider-table-wrap,:root[data-custom-background=true] .resource-table-wrap,:root[data-custom-background=true] .server-card,:root[data-custom-background=true] .server-detail-header,:root[data-custom-background=true] .server-table-wrap,:root[data-custom-background=true] .server-toolbar,:root[data-custom-background=true] .state-view{background:linear-gradient(135deg,rgba(255,255,255,.026),transparent 30%),linear-gradient(180deg,rgba(5,10,16,.42),rgba(5,10,16,.34));border-color:color-mix(in srgb,var(--line-strong) 44%,rgba(255,255,255,.16));-webkit-backdrop-filter:blur(10px) saturate(0.86);backdrop-filter:blur(10px) saturate(0.86);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 0 0 1px rgba(255,255,255,.04),0 16px 34px rgba(0,0,0,.3)}
:root[data-custom-background=true][data-theme-palette=magical-girl] .catalog-card,:root[data-custom-background=true][data-theme-palette=magical-girl] .confirm-panel,:root[data-custom-background=true][data-theme-palette=magical-girl] .console-panel,:root[data-custom-background=true][data-theme-palette=magical-girl] .drawer-panel,:root[data-custom-background=true][data-theme-palette=magical-girl] .metric-card,:root[data-custom-background=true][data-theme-palette=magical-girl] .operation-item,:root[data-custom-background=true][data-theme-palette=magical-girl] .overview-card,:root[data-custom-background=true][data-theme-palette=magical-girl] .plugin-group,:root[data-custom-background=true][data-theme-palette=magical-girl] .provider-table-wrap,:root[data-custom-background=true][data-theme-palette=magical-girl] .resource-table-wrap,:root[data-custom-background=true][data-theme-palette=magical-girl] .server-card,:root[data-custom-background=true][data-theme-palette=magical-girl] .server-detail-header,:root[data-custom-background=true][data-theme-palette=magical-girl] .server-table-wrap,:root[data-custom-background=true][data-theme-palette=magical-girl] .server-toolbar,:root[data-custom-background=true][data-theme-palette=magical-girl] .state-view{background:radial-gradient(circle at 100% 0,rgba(255,221,242,.026),transparent 32%),linear-gradient(135deg,rgba(255,246,253,.022),transparent 34%),linear-gradient(180deg,rgba(24,24,31,.22),rgba(18,19,26,.18));border-color:color-mix(in srgb,var(--line-strong) 54%,rgba(255,255,255,.16));-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,246,253,.18),inset 0 0 0 1px rgba(255,185,226,.045),0 16px 32px rgba(12,12,18,.28)}
:root[data-custom-background=true][data-theme-palette=magical-girl] .server-toolbar,:root[data-custom-background=true][data-theme-palette=magical-girl] .state-view{position:relative;isolation:isolate;overflow:visible}
:root[data-custom-background=true][data-theme-palette=magical-girl] .server-toolbar::after,:root[data-custom-background=true][data-theme-palette=magical-girl] .state-view::after{content:"";position:absolute;inset:-14px;border-radius:inherit;background-image:var(--frame-accessory-image);background-size:var(--frame-accessory-size);background-repeat:no-repeat;background-position:right -4px top -6px;opacity:var(--frame-accessory-opacity);filter:drop-shadow(0 0 4px rgba(255, 119, 200, .62)) drop-shadow(0 0 2px rgba(255, 221, 117, .46));z-index:0;pointer-events:none}
:root[data-custom-background=true][data-theme-palette=magical-girl] .server-toolbar>*,:root[data-custom-background=true][data-theme-palette=magical-girl] .state-view>*{position:relative;z-index:1}
@@ -265,7 +305,8 @@ to{transform:rotate(372deg)}
:root[data-theme-palette=magical-girl] :where(
.metric-card,.overview-card,.console-panel,.catalog-card,.server-card,.server-detail-header,.plugin-group,.operation-item,.confirm-panel
){overflow:visible}
:root[data-custom-background=true] .global-particle-layer{opacity:.03}
:root[data-custom-background=true] .global-particle-layer{opacity:.42}
:root[data-custom-background=true][data-theme-palette=magical-girl] .global-particle-layer{opacity:.54}
:root[data-custom-background=true] .log-filter-bar input,:root[data-custom-background=true] .log-filter-bar select,:root[data-custom-background=true] .profile-form input,:root[data-custom-background=true] .profile-settings-form input,:root[data-custom-background=true] .profile-settings-form textarea,:root[data-custom-background=true] .provider-form input,:root[data-custom-background=true] .provider-form select,:root[data-custom-background=true] .provider-form textarea,:root[data-custom-background=true] .server-toolbar input[type=search],:root[data-custom-background=true] .server-toolbar select{background:rgba(5,10,16,.94);border-color:color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.18));color:rgba(247,253,255,.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 8px 18px rgba(0,0,0,.18)}
:root[data-custom-background=true] .action-strip button,:root[data-custom-background=true] .app-account-button,:root[data-custom-background=true] .app-session,:root[data-custom-background=true] .background-preset-option,:root[data-custom-background=true] .icon-command,:root[data-custom-background=true] .palette-option,:root[data-custom-background=true] .row-actions button,:root[data-custom-background=true] .segmented-button,:root[data-custom-background=true] .state-action,:root[data-custom-background=true] .theme-upload{background:linear-gradient(135deg,rgba(255,255,255,.055),transparent 34%),rgba(5,10,16,.84);border-color:color-mix(in srgb,var(--line-strong) 40%,rgba(255,255,255,.14));color:rgba(229,246,251,.9);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 7px 16px rgba(0,0,0,.16)}
:root[data-custom-background=true] .background-preset-option-active,:root[data-custom-background=true] .palette-option-active,:root[data-custom-background=true] .segmented-button-active{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 10%,transparent),rgba(5,10,16,.78));border-color:color-mix(in srgb,var(--accent) 58%,rgba(255,255,255,.18));color:rgba(247,253,255,.96);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 0 0 1px color-mix(in srgb,var(--accent) 18%,transparent),0 9px 20px rgba(0,0,0,.2)}
@@ -443,7 +484,7 @@ to{transform:rotate(372deg)}
.log-level-info{color:#7ce3d3}
.log-line span:last-child{overflow-wrap:anywhere}
.drawer-backdrop{position:fixed;inset:0;z-index:40;background:rgba(61,36,65,.34);backdrop-filter:blur(6px);display:flex;justify-content:flex-end;overflow-y:auto;overscroll-behavior:contain}
.drawer-panel{width:min(440px,100%);height:100%;max-height:100dvh;display:grid;align-content:start;gap:14px;padding:20px;background:var(--glass-wash),var(--glass-tint),var(--surface-raised);backdrop-filter:blur(24px) saturate(1.28);border-left:1px solid var(--line);box-shadow:inset 1px 0 0 var(--crystal-rim),-18px 0 42px var(--glass-shadow);position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.drawer-panel{width:min(440px,100%);height:100%;max-height:100dvh;display:grid;align-content:start;gap:14px;padding:20px;background:var(--glass-wash),var(--glass-tint),var(--surface-raised);backdrop-filter:blur(14px) saturate(0.28);border-left:1px solid var(--line);box-shadow:inset 1px 0 0 var(--crystal-rim),-18px 0 42px var(--glass-shadow);position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.plugin-detail-panel{width:100%;height:auto;overflow:visible;border:1px solid var(--line);border-left:1px solid var(--line);border-radius:8px;box-shadow:var(--panel-shadow)}
.management-dialog-panel{width:min(720px,calc(100vw - 32px));height:auto;max-height:min(760px,calc(100dvh - 32px));overflow-x:hidden;overflow-y:auto;border:1px solid var(--line);border-left:1px solid var(--line);border-radius:8px;box-shadow:var(--jelly-inset),inset 0 0 0 1px var(--diamond-line),0 18px 48px var(--glass-shadow),0 0 34px var(--moonbeam)}
.management-dialog-wide{width:min(920px,calc(100vw - 32px))}
@@ -539,7 +580,7 @@ to{transform:rotate(372deg)}
.signal-tone-error svg{color:var(--danger)}
.signal-tone-info svg{color:var(--teal)}
.confirm-backdrop{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(61,36,65,.38);backdrop-filter:blur(6px);overflow-y:auto;overscroll-behavior:contain}
.confirm-panel{width:min(460px,100%);max-height:calc(100dvh - 32px);display:grid;gap:14px;padding:20px;border:1px solid var(--line);border-radius:8px;background:var(--frosted-surface),var(--glass-tint),var(--surface-raised);backdrop-filter:blur(24px) saturate(1.28);box-shadow:var(--jelly-inset),inset 0 0 0 1px var(--diamond-line),0 18px 48px var(--glass-shadow),0 0 34px var(--moonbeam);position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.confirm-panel{width:min(460px,100%);max-height:calc(100dvh - 32px);display:grid;gap:14px;padding:20px;border:1px solid var(--line);border-radius:8px;background:var(--frosted-surface),var(--glass-tint),var(--surface-raised);backdrop-filter:blur(14px) saturate(0.28);box-shadow:var(--jelly-inset),inset 0 0 0 1px var(--diamond-line),0 18px 48px var(--glass-shadow),0 0 34px var(--moonbeam);position:relative;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain}
.confirm-panel h2{margin:0;font-size:18px;color:var(--ink)}
.confirm-panel p{margin:0;color:var(--ink-soft);font-size:14px}
.confirm-actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}