:root { --bgBase: #0b0a10; --bgSurface: #13111c; --textMain: #f3f4f6; --textMuted: #9ca3af; --accent: #ef4444; --border: none; --hover: #1c182d; --alertBannerDisplay: block; --customFont: 'Plus Jakarta Sans', sans-serif; --sat: env(safe-area-inset-top, 0px); --sar: env(safe-area-inset-right, 0px); --sab: env(safe-area-inset-bottom, 0px); --sal: env(safe-area-inset-left, 0px); --paneTopOffset: calc(56px + var(--sat)); --paneBottomOffset: calc(52px + var(--sab)); }
[data-theme="light"] { --bgBase: #f8fafc; --bgSurface: #ffffff; --textMain: #0f172a; --textMuted: #64748b; --accent: #ef4444; --border: none; --hover: #e2e8f0; --alertBannerDisplay: block; }
[data-theme="tinted"] { --bgBase: #140b0b; --bgSurface: #241212; --textMain: #f3f4f6; --textMuted: #fca5a5; --border: none; --hover: #381818; --alertBannerDisplay: block; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; box-sizing: border-box; height: 100%; width: 100%; }
*, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none; box-shadow: none !important; text-shadow: none !important; outline: none !important; }
body { background: var(--bgBase); color: var(--textMain); font-family: var(--customFont); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; position: relative; overflow-x: hidden; font-size: 13px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.appBackgroundVideoWrapper { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; background-image: url('/@image/anime.jpg'); background-size: cover; background-position: center center; background-repeat: no-repeat; width: 100vw; height: 100vh; height: 100dvh; filter: saturate(1.1) contrast(1.05); }
.appBgOverlay { position: absolute; inset: 0; background: linear-gradient(135deg, color-mix(in srgb, var(--bgBase) 90%, transparent) 0%, color-mix(in srgb, var(--bgBase) 80%, transparent) 100%); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 0.3s ease; z-index: 1; }
button, a, input, select, textarea { outline: none !important; -webkit-tap-highlight-color: transparent !important; appearance: none; -webkit-appearance: none; font-family: inherit; border: none; }
button:focus, a:focus, input:focus, select:focus, textarea:focus { outline: none !important; box-shadow: none !important; border-color: transparent !important; }
.customScroll::-webkit-scrollbar { width: 4px; height: 4px; }
.customScroll::-webkit-scrollbar-track { background: transparent; }
.customScroll::-webkit-scrollbar-thumb { background: var(--hover); border-radius: 2px; }
.announcementAlertBanner { display: var(--alertBannerDisplay); background: var(--bgSurface); position: sticky; top: 0; z-index: 105; width: 100%; padding: 9px 16px; font-size: 12px; border-bottom: 1px solid var(--hover); }
.announcementInner { width: 100%; max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--textMain); font-weight: 500; }
.announcementContent { display: flex; align-items: center; gap: 8px; flex: 1; overflow: hidden; }
.announcementContent i { color: var(--accent); font-size: 16px; flex-shrink: 0; }
.announcementCloseBtn { background: transparent; border: none; color: var(--textMuted); cursor: pointer; padding: 4px; display: flex; align-items: center; justify-content: center; border-radius: 4px; transition: background 0.15s ease, color 0.15s ease; flex-shrink: 0; }
.announcementCloseBtn:hover { color: var(--textMain); background: var(--hover); }
.announcementCloseBtn i { font-size: 14px; }
.mainHeader { background: var(--bgSurface); position: sticky; top: 0; z-index: 100; width: 100%; border-bottom: 1px solid var(--hover); padding-top: var(--sat); }
.headerInner { width: 100%; max-width: 1400px; margin: 0 auto; padding: 10px 16px; padding-left: max(16px, var(--sal)); padding-right: max(16px, var(--sar)); display: flex; align-items: center; justify-content: space-between; gap: 16px; position: relative; }
.headerLeftGroup { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }
.logoOnlyContainer { display: flex; align-items: center; text-decoration: none; color: inherit; flex-shrink: 0; }
.logoAvatar { height: 34px; display: flex; align-items: center; justify-content: center; overflow: visible; flex-shrink: 0; background: transparent; }
.headerActions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.iconBtn { background: var(--bgBase); color: var(--textMain); width: 34px; height: 34px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; outline: none; border: none; -webkit-user-select: none; user-select: none; position: relative; flex-shrink: 0; }
.iconBtn:hover { background: var(--hover); color: var(--accent); }
.iconBtn i { font-size: 17px; line-height: 1; }
.drawerOverlay { position: fixed; top: var(--paneTopOffset); bottom: var(--paneBottomOffset); left: 0; right: 0; background: rgba(0, 0, 0, 0.55); z-index: 95; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.drawerOverlay.show { opacity: 1; visibility: visible; }
.appDrawer { position: fixed; top: var(--paneTopOffset); bottom: var(--paneBottomOffset); left: -100%; width: 100%; max-width: 360px; height: auto; background: var(--bgSurface); z-index: 96; display: flex; flex-direction: column; transition: left 0.25s cubic-bezier(0.4, 0, 0.2, 1); border-right: 1px solid var(--hover); padding-left: var(--sal); overflow: hidden; }
.appDrawer.show { left: 0; }
.drawerArtRatioBox { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: hidden; }
.drawerArtImage { position: absolute; inset: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0.32; filter: saturate(1.15) contrast(1.05); }
.drawerArtScrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, var(--bgSurface) 88%, var(--bgSurface) 100%); }
.drawerHeader { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--hover); background: color-mix(in srgb, var(--bgSurface) 88%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); flex-shrink: 0; }
.drawerHeaderLeft { display: flex; align-items: center; gap: 8px; min-width: 0; }
.drawerTitle { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4px; }
.drawerContainerStack { position: relative; z-index: 2; flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.drawerSubViewPane { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px; gap: 6px; overflow-y: auto; -webkit-overflow-scrolling: touch; background: color-mix(in srgb, var(--bgSurface) 82%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transform: translateX(100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, visibility 0.2s ease; }
.drawerSubViewPane.active { transform: translateX(0); opacity: 1; visibility: visible; pointer-events: auto; z-index: 10; }
.drawerSubHeader { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--hover); flex-shrink: 0; }
.drawerSubTitle { font-size: 11px; font-weight: 800; color: var(--textMuted); text-transform: uppercase; letter-spacing: 0.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.subPaneBackBtn { background: var(--bgBase); color: var(--textMain); border: none; border-radius: 6px; padding: 6px 10px; font-size: 11px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; transition: background 0.15s ease, color 0.15s ease; flex-shrink: 0; }
.subPaneBackBtn i { font-size: 14px; color: var(--accent); }
.subPaneBackBtn:hover { background: var(--hover); color: var(--accent); }
.drawerCategory { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--textMuted); letter-spacing: 0.5px; margin: 8px 2px 4px 2px; display: flex; align-items: center; gap: 6px; }
.drawerCategory i { color: var(--accent); font-size: 13px; }
.drawerCategory:first-child { margin-top: 0; }
.drawerItem { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; font-size: 11px; color: var(--textMain); text-decoration: none; border-radius: 6px; transition: background 0.15s ease; outline: none; font-weight: 600; cursor: pointer; border: none; background: color-mix(in srgb, var(--bgBase) 65%, transparent); width: 100%; text-align: left; -webkit-user-select: none; user-select: none; position: relative; }
.drawerItemLabel { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.drawerItem:hover { background: var(--hover); }
.drawerItem i { font-size: 16px; color: var(--accent); flex-shrink: 0; }
.drawerChevron { margin-left: auto; color: var(--textMuted) !important; font-size: 14px !important; }
.drawerItem.active, .drawerItem.lastVisited { background: var(--bgBase); color: var(--textMain); font-weight: 700; }
.drawerInfoStrip { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; background: var(--bgBase); border: none; border-radius: 6px; margin-bottom: 4px; }
.drawerInfoStrip span { font-size: 9px; color: var(--textMuted); text-transform: uppercase; letter-spacing: 0.4px; }
.drawerInfoStrip strong { font-size: 11px; color: var(--textMain); }
.themeToggleItem { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.themeToggleContent { display: flex; align-items: center; gap: 10px; }
.themeStatusBadge { font-size: 9px; background: var(--hover); padding: 3px 6px; border-radius: 4px; color: var(--textMuted); font-family: monospace; margin-left: auto; }
.colorBoxesContainer { display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding: 6px 2px; width: 100%; flex-wrap: wrap; }
.colorBox { width: 24px; height: 24px; border-radius: 6px; cursor: pointer; transition: transform 0.15s ease; border: none; position: relative; }
.colorBox:hover { transform: scale(1.08); }
.colorBox.active { opacity: 0.8; }
.manualHexWrapper { display: flex; align-items: center; gap: 6px; padding: 4px 0; width: 100%; }
.manualHexInput { flex: 1; background: var(--bgBase); border: none; border-radius: 6px; color: var(--textMain); padding: 8px 10px; font-size: 11px; font-family: monospace; }
.manualHexBtn { background: var(--accent); color: #ffffff; border: none; border-radius: 6px; padding: 8px 12px; font-size: 11px; cursor: pointer; font-weight: 700; transition: opacity 0.2s ease; }
.manualHexBtn:hover { opacity: 0.88; }
.pageContent { flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 16px 16px calc(72px + var(--sab)) 16px; padding-left: max(16px, var(--sal)); padding-right: max(16px, var(--sar)); position: relative; z-index: 1; display: flex; flex-direction: column; gap: 20px; }
.appFooterPro { width: 100%; margin-top: auto; padding: 22px 16px 14px 16px; background: var(--bgSurface); border: none; display: flex; flex-direction: column; gap: 14px; box-sizing: border-box; position: relative; overflow: hidden; border-radius: 8px 8px 0 0; }
.appFooterInner { width: 100%; max-width: 1400px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; z-index: 2; min-height: 75px; }
.appFooterLeftContent { display: flex; flex-direction: column; gap: 4px; z-index: 3; }
.appFooterAnimatedTitle { font-size: 16px; font-weight: 800; color: var(--textMain); letter-spacing: -0.3px; display: inline-flex; align-items: center; gap: 6px; }
.appFooterAnimatedTitle span.highlightText { color: var(--accent); position: relative; display: inline-block; }
.appFooterArtWrapper { position: absolute; right: 0; bottom: 0; width: 220px; height: 85px; pointer-events: none; z-index: 1; opacity: 0.95; background-image: url('/@image/anime.jpg'); background-size: cover; background-position: right center; background-repeat: no-repeat; mask-image: linear-gradient(to right, transparent, black 45%); -webkit-mask-image: linear-gradient(to right, transparent, black 45%); }
.appFooterBottomBar { width: 100%; max-width: 1400px; margin: 0 auto; padding-top: 10px; border-top: 1px solid var(--hover); display: flex; align-items: center; justify-content: space-between; font-size: 9px; color: var(--textMuted); position: relative; z-index: 2; }
.ppobBottomNav { position: fixed; bottom: 0; left: 0; right: 0; height: calc(52px + var(--sab)); background: var(--bgSurface); display: flex; align-items: center; justify-content: space-around; padding: 0 8px var(--sab) 8px; z-index: 100; border: none; overflow: visible; }
.ppobNavItem { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex: 1; height: 52px; color: var(--textMuted); text-decoration: none; font-size: 9px; font-weight: 700; transition: color 0.15s ease; background: transparent; border: none; cursor: pointer; -webkit-user-select: none; user-select: none; }
.ppobNavItem i { font-size: 18px; line-height: 1; }
.ppobNavItem:hover, .ppobNavItem.active { color: var(--accent); }
.ppobCenterFloatingItem { position: relative; width: 44px; display: flex; align-items: center; justify-content: center; height: 52px; }
.ppobCenterBtn { position: relative; width: 36px; height: 36px; background: var(--accent); color: #ffffff; border-radius: 8px; display: flex; align-items: center; justify-content: center; border: none; transition: opacity 0.2s ease; cursor: pointer; -webkit-user-select: none; user-select: none; }
.ppobCenterBtn:hover { opacity: 0.88; }
.ppobCenterBtn i { font-size: 17px; color: #ffffff; line-height: 1; }
@media (max-width: 768px) { body { font-size: 12px; } .headerInner { padding: 8px 12px; } .appDrawer { max-width: 100%; } .appFooterArtWrapper { width: 150px; opacity: 0.6; } .appFooterAnimatedTitle { font-size: 13px; } }