:root { --bg-editor: #ffffff; --bg-input: #f8f8f8; --border-color: #e8e8e8; --bg-preview-pane: #e3e3e3; --color-primary: #007aff; --skeleton-base: #f0f0f0; --skeleton-shimmer: #e0e0e0; }
.dark-mode { --bg-editor: #1a1c22; --bg-input: #1a1c22; --border-color: #2d313a; --bg-preview-pane: #0f1115; --skeleton-base: #2a2c35; --skeleton-shimmer: #3a3d4a; }
.skeleton { background-image: ; background-position-x: ; background-position-y: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: 200% 100%; animation: 1.5s ease 0s infinite normal none running skeleton-loading; border-radius: 8px; display: block; }
@keyframes skeleton-loading { 
  0% { background-position: 200% 0px; }
  100% { background-position: -200% 0px; }
}
.skeleton-text { height: 16px; margin-bottom: 10px; width: 100%; }
.skeleton-title { height: 24px; margin-bottom: 15px; width: 60%; }
.skeleton-avatar { width: 90px; height: 90px; border-radius: 50%; margin: 0px auto 15px; }
.skeleton-card { background: rgb(255, 255, 255); padding: 20px; border-radius: 12px; margin-bottom: 20px; border: 1px solid var(--border-color); }
.dark-mode .skeleton-card { background: rgb(44, 48, 58); }
@media screen and (max-width: 768px) {
  .hide-on-mobile { display: none !important; }
}
.sticker-item[data-v-5546c015] { cursor: grab; user-select: none; box-sizing: border-box; position: absolute; }
.sticker-item.is-locked[data-v-5546c015] { cursor: default; pointer-events: none; }
.sticker-item[data-v-5546c015]:active { cursor: grabbing; }
.sticker-item.selected[data-v-5546c015] { outline: 2px dashed var(--color-primary); outline-offset: 2px; }
.sticker-content[data-v-5546c015] { justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; overflow: hidden; }
.sticker-content img[data-v-5546c015] { object-fit: contain; pointer-events: none; width: 100%; height: 100%; }
.sticker-idb-placeholder[data-v-5546c015] { background-position: 50% center; background-repeat: no-repeat; background-size: contain; width: 100%; height: 100%; }
.sticker-content svg[data-v-5546c015] { width: 100%; height: 100%; }
.tape-shape[data-v-5546c015], .circle-shape[data-v-5546c015], .rect-shape[data-v-5546c015] { box-sizing: border-box; width: 100%; height: 100%; }
.stroked[data-v-5546c015] { stroke: currentcolor; }
.handle-nw[data-v-5546c015] { cursor: nw-resize; top: -6px; left: -6px; }
.handle-ne[data-v-5546c015] { cursor: ne-resize; top: -6px; right: -6px; }
.handle-sw[data-v-5546c015] { cursor: sw-resize; bottom: -6px; left: -6px; }
.handle-se[data-v-5546c015] { cursor: se-resize; bottom: -6px; right: -6px; }
.handle-rot[data-v-5546c015] { cursor: crosshair; background: var(--color-primary); border: 2px solid rgb(255, 255, 255); border-radius: 50%; width: 12px; height: 12px; top: -25px; left: 50%; transform: translate(-50%); }
.handle-rot[data-v-5546c015]::after { content: ""; background: var(--color-primary); z-index: -1; width: 1px; height: 13px; position: absolute; top: 10px; left: 50%; transform: translate(-50%); }
.tiptap-editor-inline[data-v-30c86448] { z-index: 100; background: 0px 0px; position: relative; }
.tiptap-bubble-menu[data-v-30c86448] { pointer-events: none; opacity: 0; z-index: 10000; transition: opacity 0.2s, transform 0.2s; position: fixed; }
.tiptap-bubble-menu.active[data-v-30c86448] { pointer-events: auto; opacity: 1; }
.premium-toolbar[data-v-30c86448] { background: var(--rt-toolbar-bg,#ffffffd9); border: 1px solid var(--rt-toolbar-border,#ffffff4d); color: var(--rt-toolbar-text,#333); border-radius: 100px; align-items: center; gap: 4px; padding: 6px; display: flex; box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 32px, rgba(0, 0, 0, 0.05) 0px 2px 8px; }
:root.dark-mode .premium-toolbar[data-v-30c86448], .dark-mode .premium-toolbar[data-v-30c86448] { background: var(--rt-toolbar-bg,#2d313a); border: 1px solid var(--rt-toolbar-border,#4a5568); box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 32px; }
.toolbar-group[data-v-30c86448] { gap: 2px; display: flex; }
.premium-toolbar button[data-v-30c86448] { cursor: pointer; width: 30px; height: 30px; color: inherit; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; justify-content: center; align-items: center; transition: 0.2s; display: flex; }
.premium-toolbar button[data-v-30c86448]:hover { background: var(--rt-toolbar-btn-hover,#f0f0f0); }
.premium-toolbar button.danger-btn[data-v-30c86448]:hover { background: rgb(254, 226, 226); color: rgb(239, 68, 68) !important; }
.premium-toolbar button.is-active[data-v-30c86448] { background: var(--color-primary,#4a90e2); box-shadow: rgba(74, 144, 226, 0.3) 0px 4px 12px; color: rgb(255, 255, 255) !important; }
.premium-toolbar button .iconify[data-v-30c86448] { width: 1.25rem; height: 1.25rem; font-size: 1.25rem; }
.font-picker-wrapper[data-v-30c86448] { position: relative; }
.font-dropdown-panel[data-v-30c86448] { z-index: 10001; color: rgb(30, 41, 59); background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 14px; flex-direction: column; gap: 8px; width: 320px; max-height: 280px; padding: 12px; display: flex; position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%); box-shadow: rgba(0, 0, 0, 0.15) 0px 12px 36px, rgba(0, 0, 0, 0.05) 0px 4px 12px; }
:root.dark-mode .font-dropdown-panel[data-v-30c86448], .dark-mode .font-dropdown-panel[data-v-30c86448] { color: rgb(241, 245, 249); background: rgba(30, 41, 59, 0.92); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: rgba(0, 0, 0, 0.4) 0px 12px 36px, rgba(0, 0, 0, 0.2) 0px 4px 12px; }
.dropdown-header[data-v-30c86448] { border-bottom: 1px solid rgba(0, 0, 0, 0.06); justify-content: space-between; align-items: center; padding: 2px 4px 8px; font-size: 12px; font-weight: 700; display: flex; }
:root.dark-mode .dropdown-header[data-v-30c86448], .dark-mode .dropdown-header[data-v-30c86448] { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.clear-font-btn[data-v-30c86448] { color: rgb(239, 68, 68); cursor: pointer; white-space: nowrap; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.15); border-radius: 100px; align-items: center; gap: 4px; padding: 3px 10px; font-size: 11px; font-weight: 600; transition: 0.2s; display: flex; }
.clear-font-btn[data-v-30c86448]:hover { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.3); transform: scale(1.02); }
.dropdown-body[data-v-30c86448] { flex-direction: column; flex: 1 1 0%; gap: 12px; max-height: 210px; padding-right: 4px; display: flex; overflow-y: auto; }
.scrollbar-thin[data-v-30c86448]::-webkit-scrollbar { width: 4px; }
.scrollbar-thin[data-v-30c86448]::-webkit-scrollbar-track { background: 0px 0px; }
.scrollbar-thin[data-v-30c86448]::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 10px; }
:root.dark-mode .scrollbar-thin[data-v-30c86448]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); }
.dark-mode .scrollbar-thin[data-v-30c86448]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.15); }
.font-group-section[data-v-30c86448] { flex-direction: column; gap: 6px; display: flex; }
.font-group-label[data-v-30c86448] { color: rgb(100, 116, 139); text-transform: uppercase; letter-spacing: 0.05em; padding: 0px 4px; font-size: 10px; font-weight: 700; }
:root.dark-mode .font-group-label[data-v-30c86448], .dark-mode .font-group-label[data-v-30c86448] { color: rgb(148, 163, 184); }
.font-items-grid[data-v-30c86448] { grid-template-columns: 1fr 1fr; gap: 6px; display: grid; }
.font-item-card[data-v-30c86448] { cursor: pointer; background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(0, 0, 0, 0.04); border-radius: 10px; align-items: center; gap: 8px; padding: 8px; transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1); display: flex; overflow: hidden; }
:root.dark-mode .font-item-card[data-v-30c86448], .dark-mode .font-item-card[data-v-30c86448] { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.02); }
.font-item-card[data-v-30c86448]:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(74, 144, 226, 0.4); transform: translateY(-1px); }
:root.dark-mode .font-item-card[data-v-30c86448]:hover, .dark-mode .font-item-card[data-v-30c86448]:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(74, 144, 226, 0.4); }
.font-item-card.active[data-v-30c86448] { border-color: var(--color-primary,#4a90e2); box-shadow: rgba(74, 144, 226, 0.3) 0px 4px 12px; background: var(--color-primary,#4a90e2) !important; color: rgb(255, 255, 255) !important; }
.font-preview-char[data-v-30c86448] { background: rgba(0, 0, 0, 0.05); border-radius: 6px; flex-shrink: 0; justify-content: center; align-items: center; width: 26px; height: 26px; font-size: 14px; font-weight: 500; transition: background 0.2s; display: flex; }
:root.dark-mode .font-preview-char[data-v-30c86448], .dark-mode .font-preview-char[data-v-30c86448] { background: rgba(255, 255, 255, 0.08); }
.font-item-card.active .font-preview-char[data-v-30c86448] { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.2); }
.font-info[data-v-30c86448] { text-align: left; flex-direction: column; gap: 1px; min-width: 0px; display: flex; }
.font-name[data-v-30c86448] { white-space: nowrap; text-overflow: ellipsis; font-size: 11px; font-weight: 600; overflow: hidden; }
.font-family-name[data-v-30c86448] { opacity: 0.55; white-space: nowrap; text-overflow: ellipsis; font-size: 8px; overflow: hidden; }
.font-item-card.active .font-family-name[data-v-30c86448] { opacity: 0.8; }
.slide-fade-enter-active[data-v-30c86448] { transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.slide-fade-leave-active[data-v-30c86448] { transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.slide-fade-enter-from[data-v-30c86448], .slide-fade-leave-to[data-v-30c86448] { opacity: 0; transform: translate(-50%, 8px) scale(0.96); }
.toolbar-divider[data-v-30c86448] { background: var(--rt-toolbar-border,#0000001a); width: 1px; height: 18px; margin: 0px 4px; }
[data-v-30c86448] .tiptap-content-root .tiptap { line-height: var(--line-height,inherit); letter-spacing: inherit; white-space: pre-wrap !important; outline: none !important; min-height: 0px !important; margin: 0px !important; padding: 0px !important; }
[data-v-30c86448] .tiptap-content-root .tiptap table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 1em 0px; overflow: hidden; }
[data-v-30c86448] .tiptap-content-root .tiptap table td, [data-v-30c86448] .tiptap-content-root .tiptap table th { border: 2px solid var(--rt-toolbar-border,#ddd); vertical-align: top; box-sizing: border-box; min-width: 1em; line-height: inherit; padding: 6px 10px; position: relative; }
[data-v-30c86448] .tiptap-content-root .tiptap table th { text-align: left; background-color: rgba(128, 128, 128, 0.05); font-weight: 700; }
[data-v-30c86448] .tiptap-content-root .tiptap table .selectedCell::after { z-index: 2; content: ""; pointer-events: none; background: rgba(200, 200, 255, 0.4); position: absolute; inset: 0px; }
[data-v-30c86448] .tiptap-content-root .tiptap table .column-resize-handle { pointer-events: none; background-color: rgb(170, 221, 255); width: 4px; position: absolute; top: 0px; bottom: -2px; right: -2px; }
[data-v-30c86448] .tiptap-content-root .tiptap ul[data-type="taskList"] { list-style: none; padding: 0px !important; }
[data-v-30c86448] .tiptap-content-root .tiptap ul[data-type="taskList"] li { align-items: flex-start; gap: 8px; margin-bottom: 4px; display: flex; }
[data-v-30c86448] .tiptap-content-root .tiptap ul[data-type="taskList"] li > label { user-select: none; flex: 0 0 auto; margin-top: 4px; }
[data-v-30c86448] .tiptap-content-root .tiptap ul[data-type="taskList"] li > div { flex: 1 1 auto; }
[data-v-30c86448] .tiptap-content-root .tiptap ul[data-type="taskList"] input[type="checkbox"] { cursor: pointer; width: 1.2em; height: 1.2em; accent-color: var(--color-primary); }
[data-v-30c86448] .tiptap-content-root .tiptap .ProseMirror { min-height: 0px !important; margin: 0px !important; padding: 0px !important; }
[data-v-30c86448] .tiptap-content-root .tiptap p { margin: 0px 0px 0.4em; padding: 0px !important; }
[data-v-30c86448] .tiptap-content-root .tiptap h1, [data-v-30c86448] .tiptap-content-root .tiptap h2, [data-v-30c86448] .tiptap-content-root .tiptap h3 { margin: 0.5em 0px 0.3em !important; font-weight: 800 !important; line-height: 1.2 !important; }
[data-v-30c86448] .tiptap-content-root .tiptap h1 { font-size: 1.6em; }
[data-v-30c86448] .tiptap-content-root .tiptap h2 { font-size: 1.4em; }
[data-v-30c86448] .tiptap-content-root .tiptap h3 { font-size: 1.2em; }
[data-v-30c86448] .tiptap-content-root .tiptap blockquote { border-left: 4px solid var(--color-primary,#007aff); color: var(--text-secondary); background: rgba(128, 128, 128, 0.05); border-radius: 2px 8px 8px 2px; margin: 0.8em 0px !important; padding-left: 1em !important; }
[data-v-30c86448] .tiptap-content-root .tiptap pre { color: rgb(212, 212, 212); background: rgb(30, 30, 30); font-family: monospace; font-size: 0.9em; border-radius: 8px !important; margin: 0.8em 0px !important; padding: 12px !important; overflow-x: auto !important; }
[data-v-30c86448] .tiptap-content-root .tiptap code { background: rgba(128, 128, 128, 0.1); border-radius: 4px !important; padding: 2px 4px !important; }
[data-v-30c86448] .ProseMirror { outline: none !important; padding: 0px !important; }
[data-v-30c86448] .tiptap-content-root .tiptap ul, [data-v-30c86448] .tiptap-content-root .tiptap ol { margin: 0.5em 0px !important; padding-left: 1.5em !important; list-style-position: outside !important; }
[data-v-30c86448] .tiptap-content-root .tiptap ul { list-style-type: disc !important; }
[data-v-30c86448] .tiptap-content-root .tiptap ol { list-style-type: decimal !important; }
[data-v-30c86448] .tiptap-content-root .tiptap li p { margin: 0px !important; }
[data-v-30c86448] .tiptap-content-root .tiptap ul[data-type="taskList"] { padding-left: 0.5em !important; list-style: none !important; }
[data-v-30c86448] .tiptap-content-root .tiptap a { color: var(--color-primary); cursor: pointer; text-decoration: underline; }
[data-v-30c86448] .tiptap-content-root .tiptap hr { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 2px solid var(--rt-toolbar-border,#ddd); margin: 1rem 0px; }
.tiptap-bubble-menu.active[data-v-30c86448] { animation: 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running slide-up-30c86448; }
@keyframes slide-up-30c86448 { 
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.95); }
  100% { opacity: 1; transform: translate(-50%) scale(1); }
}
[data-v-30c86448] .rich-image-container { user-select: none; outline: rgba(0, 0, 0, 0) solid 2px; max-width: 100%; transition: outline 0.2s; display: inline-block; position: relative; }
[data-v-30c86448] .rich-image-container:hover, [data-v-30c86448] .rich-image-container.is-resizing { outline: 2px solid var(--color-primary,#3b82f6); }
[data-v-30c86448] .image-resize-handle { background: var(--color-primary,#3b82f6); cursor: nwse-resize; opacity: 0; z-index: 10; border-top-left-radius: 2px; width: 12px; height: 12px; transition: opacity 0.2s; position: absolute; bottom: 0px; right: 0px; }
[data-v-30c86448] .rich-image-container:hover .image-resize-handle, [data-v-30c86448] .rich-image-container.is-resizing .image-resize-handle { opacity: 1; }
[data-v-30c86448] .rich-image { max-width: 100%; height: auto; }
.profile-pro[data-v-7f88a7a8] { user-select: none; flex-direction: column; height: 100%; transition: 0.3s; display: flex; }
.pro-header[data-v-7f88a7a8] { flex-shrink: 0; align-items: center; gap: 16px; margin-bottom: 20px; display: flex; }
.pro-main-info[data-v-7f88a7a8] { flex: 1 1 0%; min-width: 0px; }
.pro-nickname[data-v-7f88a7a8] { letter-spacing: -0.02em; margin: 0px; font-weight: 600; }
.pro-subtitle[data-v-7f88a7a8] { opacity: 0.9; margin: 2px 0px 0px; font-weight: 510; }
.pro-status-badge[data-v-7f88a7a8] { overflow: visible; }
.pro-badge-symbol[data-v-7f88a7a8] { font-size: 14px; }
.pro-badge-icon[data-v-7f88a7a8] { font-size: 18px; }
.pro-badge-indicator[data-v-7f88a7a8] { border-radius: 50%; width: 12px; height: 12px; }
.pro-badge-indicator.online[data-v-7f88a7a8] { background: rgb(67, 181, 129); }
.pro-badge-indicator.busy[data-v-7f88a7a8], .pro-badge-indicator.dnd[data-v-7f88a7a8] { background: rgb(240, 71, 71); }
.pro-badge-indicator.idle[data-v-7f88a7a8] { background: rgb(250, 166, 26); }
.pro-badge-indicator.red-dot[data-v-7f88a7a8] { color: rgb(255, 255, 255); background: rgb(255, 51, 51); border-radius: 9px; width: auto; height: auto; padding: 1px 4px; font-size: 9px; }
.pro-badge-indicator.red-dot[data-v-7f88a7a8]::after { content: "99+"; }
.pro-divider[data-v-7f88a7a8] { background: rgba(255, 255, 255, 0.05); flex-shrink: 0; height: 1px; margin-bottom: 20px; }
.pro-body[data-v-7f88a7a8] { scrollbar-width: thin; flex-direction: column; flex: 1 1 0%; min-height: 0px; display: flex; overflow-y: auto; }
.pro-body[data-v-7f88a7a8]::-webkit-scrollbar { width: 4px; }
.pro-body[data-v-7f88a7a8]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
.pro-bio[data-v-7f88a7a8] { margin: 0px 0px 16px; line-height: 1.6; }
.pro-extras[data-v-7f88a7a8] { flex-direction: column; gap: 8px; margin-bottom: 20px; display: flex; }
.pro-extra-item[data-v-7f88a7a8] { align-items: center; gap: 8px; display: flex; }
.pro-tags[data-v-7f88a7a8] { flex-wrap: wrap; gap: 8px; display: flex; }
.pro-highlight[data-v-7f88a7a8] { pointer-events: none; background: linear-gradient(135deg, rgba(0, 0, 0, 0) 70%, rgba(255, 255, 255, 0.03) 100%); width: 100px; height: 100px; position: absolute; top: 0px; right: 0px; }
.profile-life[data-v-1801f600] { flex-direction: column; width: 100%; height: 100%; display: flex; }
.life-hero[data-v-1801f600] { width: 100%; position: relative; }
.life-hero-badge[data-v-1801f600] { color: rgb(255, 255, 255); }
.life-badge-icon[data-v-1801f600] { font-size: 24px; }
.life-badge-symbol[data-v-1801f600] { font-size: 20px; }
.life-content[data-v-1801f600] { scrollbar-width: thin; flex: 1 1 0%; min-height: 0px; padding: 20px; overflow-y: auto; }
.life-header[data-v-1801f600] { justify-content: space-between; align-items: flex-start; margin-bottom: 12px; display: flex; }
.life-nickname[data-v-1801f600] { letter-spacing: -0.02em; margin: 0px; font-weight: 700; }
.life-subtitle[data-v-1801f600] { opacity: 0.8; margin: 2px 0px 0px; font-weight: 500; }
.life-rating-badge[data-v-1801f600] { color: rgb(255, 255, 255); border-radius: 8px; padding: 4px 10px; font-size: 0.85rem; font-weight: 700; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px; }
.life-bio[data-v-1801f600] { margin: 0px 0px 16px; line-height: 1.6; }
.life-tags[data-v-1801f600] { flex-wrap: wrap; gap: 8px; display: flex; }
.profile-magazine[data-v-aa7fe5b2] { user-select: none; flex-direction: row; height: 100%; transition: 0.3s; display: flex; }
.mag-left-bar[data-v-aa7fe5b2] { z-index: 1; flex-shrink: 0; align-items: center; display: flex; }
.mag-cutout-box[data-v-aa7fe5b2] { writing-mode: vertical-rl; color: var(--v2dfa2c9c); -webkit-text-stroke: var(--v52f105c9); font-family: var(--v74f13e26); font-weight: 900; font-size: var(--v05409041); letter-spacing: 12px; text-transform: uppercase; padding: var(--v4b469ea0); white-space: nowrap; display: inline-block; }
.mag-content[data-v-aa7fe5b2] { z-index: 1; flex-direction: column; flex: 1 1 0%; min-width: 0px; padding: 30px; display: flex; position: relative; }
.mag-header[data-v-aa7fe5b2] { align-items: center; gap: 20px; margin-bottom: 24px; display: flex; }
.mag-title-block[data-v-aa7fe5b2] { flex-direction: column; display: flex; }
.mag-nickname[data-v-aa7fe5b2] { letter-spacing: -0.01em; margin: 0px; font-weight: 800; line-height: 1.1; }
.mag-subtitle[data-v-aa7fe5b2] { text-transform: uppercase; letter-spacing: 3px; opacity: 0.8; margin: 0px 0px 4px; font-weight: 600; }
.mag-avatar-placeholder[data-v-aa7fe5b2] { border-radius: inherit; background: rgb(238, 238, 238); width: 100%; height: 100%; }
.mag-status-badge[data-v-aa7fe5b2] { overflow: visible; }
.mag-badge-symbol[data-v-aa7fe5b2] { font-size: 16px; }
.mag-badge-icon[data-v-aa7fe5b2] { font-size: 20px; }
.mag-badge-indicator[data-v-aa7fe5b2] { border: 2px solid rgb(255, 255, 255); border-radius: 50%; width: 14px; height: 14px; }
.mag-badge-indicator.online[data-v-aa7fe5b2] { background: rgb(67, 181, 129); }
.mag-badge-indicator.busy[data-v-aa7fe5b2], .mag-badge-indicator.dnd[data-v-aa7fe5b2] { background: rgb(240, 71, 71); }
.mag-badge-indicator.idle[data-v-aa7fe5b2] { background: rgb(250, 166, 26); }
.mag-divider[data-v-aa7fe5b2] { width: 50px; height: 6px; margin-bottom: 24px; }
.mag-body[data-v-aa7fe5b2] { flex: 1 1 0%; line-height: 1.6; }
.mag-bio[data-v-aa7fe5b2] { white-space: pre-wrap; word-break: break-word; margin: 0px 0px 16px; }
.mag-extras[data-v-aa7fe5b2] { flex-direction: column; gap: 6px; display: flex; }
.mag-extra-item[data-v-aa7fe5b2] { white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.mag-tags[data-v-aa7fe5b2] { flex-wrap: wrap; gap: 8px; margin-top: 24px; display: flex; }
.profile-bg-image[data-v-ffd69c8a], .profile-bg-overlay[data-v-ffd69c8a] { pointer-events: none; }
.preview-header[data-v-ffd69c8a] > :not(.profile-bg-image):not(.profile-bg-overlay) { z-index: 1; position: relative; }
.preview-card-content[data-v-b993c52d] .tiptap, .preview-card-content[data-v-b993c52d] .ql-editor { max-width: 100%; width: var(--v50618c47) !important; white-space: pre-wrap !important; margin: 0px !important; padding: 0px !important; }
.preview-card-content[data-v-b993c52d] .tiptap p, .preview-card-content[data-v-b993c52d] .ql-editor p { margin: 0px 0px 0.4em; }
.preview-card-content[data-v-b993c52d] .tiptap p[style*="line-height"], .preview-card-content[data-v-b993c52d] .ql-editor p[style*="line-height"] { line-height: unset; }
.preview-card-content[data-v-b993c52d] .tiptap ul, .preview-card-content[data-v-b993c52d] .tiptap ol, .preview-card-content[data-v-b993c52d] .ql-editor ul, .preview-card-content[data-v-b993c52d] .ql-editor ol { margin: 0.5em 0px !important; padding-left: 1.5em !important; list-style-position: outside !important; }
.preview-card-content[data-v-b993c52d] .tiptap ul, .preview-card-content[data-v-b993c52d] .ql-editor ul { list-style-type: disc !important; }
.preview-card-content[data-v-b993c52d] .tiptap ol, .preview-card-content[data-v-b993c52d] .ql-editor ol { list-style-type: decimal !important; }
.preview-card-content[data-v-b993c52d] .tiptap li p, .preview-card-content[data-v-b993c52d] .ql-editor li p { margin: 0px !important; }
.preview-card-content[data-v-b993c52d] .tiptap ul[data-type="taskList"], .preview-card-content[data-v-b993c52d] .ql-editor ul[data-type="taskList"] { padding: 0px !important; list-style: none !important; }
.preview-card-content[data-v-b993c52d] .tiptap ul[data-type="taskList"] li, .preview-card-content[data-v-b993c52d] .ql-editor ul[data-type="taskList"] li { align-items: flex-start; gap: 8px; margin-bottom: 4px; display: flex; }
.preview-card-content[data-v-b993c52d] .tiptap ul[data-type="taskList"] li > label, .preview-card-content[data-v-b993c52d] .ql-editor ul[data-type="taskList"] li > label { user-select: none; flex: 0 0 auto; margin-top: 4px; }
.preview-card-content[data-v-b993c52d] .tiptap ul[data-type="taskList"] input[type="checkbox"], .preview-card-content[data-v-b993c52d] .ql-editor ul[data-type="taskList"] input[type="checkbox"] { cursor: pointer; width: 1.2em; height: 1.2em; accent-color: var(--color-primary); }
.preview-card-content[data-v-b993c52d] .tiptap table, .preview-card-content[data-v-b993c52d] .ql-editor table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 1em 0px; overflow: hidden; }
.preview-card-content[data-v-b993c52d] .tiptap table td, .preview-card-content[data-v-b993c52d] .tiptap table th, .preview-card-content[data-v-b993c52d] .ql-editor table td, .preview-card-content[data-v-b993c52d] .ql-editor table th { border: 2px solid var(--border-color,#ddd); vertical-align: top; box-sizing: border-box; min-width: 1em; line-height: inherit; padding: 6px 10px; }
.preview-card-content[data-v-b993c52d] .tiptap table th, .preview-card-content[data-v-b993c52d] .ql-editor table th { text-align: left; background-color: rgba(128, 128, 128, 0.05); font-weight: 700; }
.preview-card-content[data-v-b993c52d] .tiptap h1, .preview-card-content[data-v-b993c52d] .tiptap h2, .preview-card-content[data-v-b993c52d] .tiptap h3 { margin: 0.5em 0px 0.3em !important; font-weight: 800 !important; line-height: 1.2 !important; }
.preview-card-content[data-v-b993c52d] .tiptap h1 { font-size: 1.6em; }
.preview-card-content[data-v-b993c52d] .tiptap h2 { font-size: 1.4em; }
.preview-card-content[data-v-b993c52d] .tiptap h3 { font-size: 1.2em; }
.preview-card-content[data-v-b993c52d] .tiptap blockquote { border-left: 4px solid var(--color-primary,#007aff); color: var(--text-secondary); background: rgba(128, 128, 128, 0.05); border-radius: 2px 8px 8px 2px; margin: 0.8em 0px !important; padding-left: 1em !important; }
.preview-card-content[data-v-b993c52d] { overflow-wrap: break-word; word-break: break-all; width: 100%; display: flow-root; }
.preview-card-content[data-v-b993c52d] .tiptap hr { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 2px solid var(--border-color); margin: 1.2em 0px !important; }
.preview-card-content[data-v-b993c52d] .tiptap pre { color: rgb(212, 212, 212); background: rgb(30, 30, 30); font-family: "Fira Code", monospace; font-size: 0.9em; border-radius: 8px !important; margin: 0.8em 0px !important; padding: 12px !important; overflow-x: auto !important; }
.preview-card-content[data-v-b993c52d] .tiptap code { background: rgba(128, 128, 128, 0.1); font-family: monospace; border-radius: 4px !important; padding: 2px 4px !important; }
.preview-card-content[data-v-b993c52d] .tiptap img { vertical-align: middle; border-radius: 8px; max-width: 100%; height: auto; display: inline-block; margin: 5px 4px !important; }
h3.preview-card-title[data-v-b993c52d] { text-align: var(--v67bdcb0c) !important; box-sizing: border-box !important; width: 100% !important; margin: 0px 0px 16px !important; padding: 0px !important; line-height: 1.4 !important; display: block !important; }
h3.preview-card-title > .title-inner-wrapper[data-v-b993c52d] { flex-direction: row !important; align-items: center !important; gap: 8px !important; width: max-content !important; max-width: 100% !important; margin: 0px !important; padding: 0px !important; display: inline-flex !important; }
h3.preview-card-title > .title-inner-wrapper > .title-icon-fixed[data-v-b993c52d] { flex: 0 0 auto !important; justify-content: center !important; align-items: center !important; margin: 0px !important; display: inline-flex !important; }
h3.preview-card-title > .title-inner-wrapper > span.title-text-content[data-item-key][data-v-b993c52d] { white-space: nowrap !important; text-overflow: ellipsis !important; text-align: left !important; flex: 0 1 auto !important; width: auto !important; min-width: 0px !important; max-width: 100% !important; margin: 0px !important; overflow: hidden !important; }
.button-item-wrapper.is-bento[data-v-9d6aec57] { justify-content: center; align-items: center; height: 100%; display: flex; }
.button-item-wrapper.is-multi[data-v-9d6aec57] { flex-wrap: wrap; gap: 0px; width: 100%; display: flex; }
.button-item-wrapper.is-multi[data-v-9d6aec57]:not(.is-individual) { border-radius: var(--wrapper-radius,12px); overflow: hidden; }
.button-item-wrapper.is-multi.layout-row[data-v-9d6aec57] { flex-direction: row; }
.button-item-wrapper.is-multi.layout-column[data-v-9d6aec57] { flex-direction: column; }
.button-item-wrapper.is-multi.is-individual[data-v-9d6aec57] { gap: 0px; }
.button-item-wrapper.is-bento[data-v-9d6aec57] .preview-button { height: 100%; min-height: unset; flex: 1 1 0%; align-self: stretch; align-items: center !important; justify-content: var(--button-text-align,center) !important; display: flex !important; }
.button-item-wrapper.is-multi.layout-row[data-v-9d6aec57] .preview-button { width: auto !important; height: auto !important; }
.button-item-wrapper.is-multi.layout-column[data-v-9d6aec57] .preview-button { width: 100% !important; height: auto !important; }
.preview-button[data-v-9d6aec57] { cursor: pointer; word-break: break-all; background-color: var(--button-bg-color,var(--g-comp-bg-color)); color: var(--button-text-color,var(--g-comp-text-color)); border-radius: var(--button-border-radius,var(--g-comp-border-radius)); align-items: center; justify-content: var(--button-text-align,var(--g-comp-text-align)); width: 100%; height: 100%; padding: 12px 18px; font-weight: 600; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; display: flex; }
.preview-button[data-v-9d6aec57]:hover { transform: scale(1.03); box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px; }
.preview-button .icon-view-wrapper[data-v-9d6aec57], .preview-button .iconify[data-v-9d6aec57] { flex-shrink: 0; }
.preview-button.vertical-mode[data-v-9d6aec57] { gap: 4px; text-align: center !important; flex-direction: column !important; justify-content: center !important; padding: 8px 2px !important; }
.stat-block-preview[data-v-9d6aec57] { text-align: center; border-radius: var(--g-comp-border-radius); background-color: var(--card-bg-color,var(--button-bg-color,var(--g-comp-bg-color))); height: 100%; color: var(--card-text-color,var(--button-text-color,var(--g-comp-text-color))); flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 15px 5px; display: flex; overflow: hidden; }
.stat-block-icon .icon-view-wrapper[data-v-9d6aec57], .stat-block-icon .iconify[data-v-9d6aec57] { opacity: 0.8; margin-bottom: 6px; font-size: 1.8em !important; display: flex !important; }
.stat-block-value[data-v-9d6aec57] { color: var(--accent-color,var(--g-theme-accent)); font-size: 1.6em; font-weight: 700; line-height: 1.1; }
.stat-block-label[data-v-9d6aec57] { opacity: 0.6; white-space: nowrap; text-overflow: ellipsis; width: 100%; margin-top: 2px; font-size: 0.75em; overflow: hidden; }
.preview-button.vertical-mode .icon-view-wrapper[data-v-9d6aec57], .preview-button.vertical-mode .iconify[data-v-9d6aec57] { margin-bottom: 4px; margin-right: 0px !important; font-size: 1.6em !important; }
.preview-button.vertical-mode span[data-item-key="text"][data-v-9d6aec57] { opacity: 0.9; white-space: nowrap; text-overflow: ellipsis; width: 100%; font-size: 0.8em; line-height: 1.1; overflow: hidden; }
.preview-button .button-subtext[data-v-9d6aec57] { opacity: 0.7; margin-top: 2px; font-size: 0.8em; line-height: 1; display: block; }
.preview-button[data-v-9d6aec57]:not(.vertical-mode) { gap: 8px; }
.preview-button:not(.vertical-mode) .button-text-group[data-v-9d6aec57] { align-items: var(--button-text-align,center); flex-direction: column; gap: 2px; display: flex; }
.preview-button:not(.vertical-mode) .button-subtext[data-v-9d6aec57] { text-align: var(--button-text-align-simple,left); }
.button-item-wrapper.is-bento[data-v-ced4c537] { justify-content: center; align-items: center; height: 100%; display: flex; }
.button-item-wrapper.is-multi[data-v-ced4c537] { flex-wrap: wrap; gap: 0px; width: 100%; display: flex; }
.button-item-wrapper.is-multi[data-v-ced4c537]:not(.is-individual) { border-radius: var(--wrapper-radius,12px); overflow: hidden; }
.button-item-wrapper.is-multi.layout-row[data-v-ced4c537] { flex-direction: row; }
.button-item-wrapper.is-multi.layout-column[data-v-ced4c537] { flex-direction: column; }
.button-item-wrapper.is-multi.is-individual[data-v-ced4c537] { gap: 0px; }
.button-item-wrapper.is-bento[data-v-ced4c537] .preview-button { height: 100%; min-height: unset; flex: 1 1 0%; align-self: stretch; align-items: center !important; justify-content: var(--button-text-align,center) !important; display: flex !important; }
.button-item-wrapper.is-multi.layout-row[data-v-ced4c537] .preview-button { width: auto !important; height: auto !important; }
.button-item-wrapper.is-multi.layout-column[data-v-ced4c537] .preview-button { width: 100% !important; height: auto !important; }
.preview-button[data-v-ced4c537] { cursor: pointer; word-break: break-all; align-items: center; width: 100%; height: 100%; padding: 12px 18px; font-weight: 600; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; display: flex; }
.preview-button[data-v-ced4c537]:hover { transform: scale(1.03); box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px; }
.preview-button .icon-view-wrapper[data-v-ced4c537], .preview-button .iconify[data-v-ced4c537] { flex-shrink: 0; }
.preview-button[data-style="ios"][data-v-ced4c537] { border: 1px solid rgba(255, 255, 255, 0.3); position: relative; background-color: var(--button-bg-color,#ffffffbf) !important; border-radius: var(--button-border-radius,14px) !important; color: rgb(0, 0, 0) !important; align-items: flex-start !important; padding: 12px 15px !important; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px !important; }
.preview-button[data-style="ios"][style*="--button-bg-color"][data-v-ced4c537] { background-color: var(--button-bg-color) !important; }
.preview-button[data-style="ios"] .ios-icon[data-v-ced4c537] { background: var(--icon-background,var(--accent-color,#007aff)); border-radius: 6px; justify-content: center; align-items: center; padding: 4px; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 5px; color: rgb(255, 255, 255) !important; margin-right: 12px !important; font-size: 2em !important; display: flex !important; }
.preview-button[data-style="ios"] .button-text-group[data-v-ced4c537] { flex-direction: column; flex: 1 1 0%; justify-content: center; gap: 2px; display: flex; }
.preview-button[data-style="ios"] span[data-item-key="text"][data-v-ced4c537] { opacity: 0.9; text-align: left; font-size: 0.95em; font-weight: 600; }
.preview-button[data-style="ios"] .button-subtext[data-v-ced4c537] { opacity: 0.6; text-align: left; margin-top: 2px; font-size: 0.85em; font-weight: 400; line-height: 1.3; display: block; }
.preview-button[data-style="ios"][data-v-ced4c537]::after { content: "Now"; opacity: 0.4; font-size: 0.75em; font-weight: 400; position: absolute; top: 12px; right: 15px; }
.button-item-wrapper.is-bento[data-v-ced4c537] .preview-button[data-style="ios"] { align-items: center !important; padding-top: 15px !important; }
.button-item-wrapper.is-bento[data-v-8541c16e] { justify-content: center; align-items: center; height: 100%; display: flex; }
.button-item-wrapper.is-multi[data-v-8541c16e] { flex-wrap: wrap; gap: 0px; width: 100%; display: flex; }
.button-item-wrapper.is-multi[data-v-8541c16e]:not(.is-individual) { border-radius: var(--wrapper-radius,12px); overflow: hidden; }
.button-item-wrapper.is-multi.layout-row[data-v-8541c16e] { flex-direction: row; }
.button-item-wrapper.is-multi.layout-column[data-v-8541c16e] { flex-direction: column; }
.button-item-wrapper.is-multi.is-individual[data-v-8541c16e] { gap: 0px; }
.button-item-wrapper.is-bento[data-v-8541c16e] .preview-button { height: 100%; min-height: unset; flex: 1 1 0%; align-self: stretch; align-items: center !important; justify-content: var(--button-text-align,center) !important; display: flex !important; }
.button-item-wrapper.is-multi.layout-row[data-v-8541c16e] .preview-button { width: auto !important; height: auto !important; }
.button-item-wrapper.is-multi.layout-column[data-v-8541c16e] .preview-button { width: 100% !important; height: auto !important; }
.preview-button[data-v-8541c16e] { cursor: pointer; word-break: break-all; align-items: center; width: 100%; height: 100%; padding: 12px 18px; font-weight: 600; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; display: flex; }
.preview-button[data-v-8541c16e]:hover { transform: scale(1.03); box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px; }
.preview-button .icon-view-wrapper[data-v-8541c16e], .preview-button .iconify[data-v-8541c16e] { flex-shrink: 0; }
.preview-button[data-style="retro"][data-v-8541c16e] { display: flex; color: rgb(0, 0, 0) !important; background-color: silver !important; border-width: 2px !important; border-style: solid !important; border-image: initial !important; border-color: rgb(255, 255, 255) rgb(0, 0, 0) rgb(0, 0, 0) rgb(255, 255, 255) !important; border-radius: 0px !important; flex-direction: column !important; gap: 0px !important; padding: 4px !important; font-family: "Courier New", Courier, monospace !important; box-shadow: rgba(0, 0, 0, 0.2) 2px 2px !important; }
.preview-button[data-style="retro"][data-v-8541c16e]::before { content: attr(data-title-text); color: rgb(255, 255, 255); box-sizing: border-box; text-align: left; white-space: nowrap; text-overflow: ellipsis; background: navy; width: 100%; margin-bottom: 8px; padding: 2px 6px; font-size: 0.8em; font-weight: 700; display: block; overflow: hidden; }
.preview-button[data-style="retro"] .retro-inner[data-v-8541c16e] { align-items: center; gap: 15px; width: 100%; padding: 10px 15px 15px; display: flex; }
.preview-button[data-style="retro"][data-v-8541c16e] .iconify { color: rgb(0, 0, 0) !important; margin: 0px !important; font-size: 2em !important; }
.preview-button[data-style="retro"] .button-subtext[data-v-8541c16e] { text-align: left; width: 100%; font-size: 0.9em; }
.button-item-wrapper.is-bento[data-v-8541c16e] .preview-button[data-style="retro"] { gap: 0px !important; }
.button-item-wrapper.is-bento[data-v-8541c16e] .preview-button[data-style="retro"] .retro-inner { align-items: center; justify-content: var(--button-text-align,center); flex: 1 1 0%; display: flex; padding: 0px !important; }
.button-item-wrapper.is-bento[data-v-53d84e29] { justify-content: center; align-items: center; height: 100%; display: flex; }
.button-item-wrapper.is-multi[data-v-53d84e29] { flex-wrap: wrap; gap: 0px; width: 100%; display: flex; }
.button-item-wrapper.is-multi[data-v-53d84e29]:not(.is-individual) { border-radius: var(--wrapper-radius,12px); overflow: hidden; }
.button-item-wrapper.is-multi.layout-row[data-v-53d84e29] { flex-direction: row; }
.button-item-wrapper.is-multi.layout-column[data-v-53d84e29] { flex-direction: column; }
.button-item-wrapper.is-multi.is-individual[data-v-53d84e29] { gap: 0px; }
.button-item-wrapper.is-bento[data-v-53d84e29] .preview-button { height: 100%; min-height: unset; flex: 1 1 0%; align-self: stretch; justify-content: flex-start !important; align-items: center !important; display: flex !important; }
.button-item-wrapper.is-multi.layout-row[data-v-53d84e29] .preview-button { width: auto !important; height: auto !important; }
.button-item-wrapper.is-multi.layout-column[data-v-53d84e29] .preview-button { width: 100% !important; height: auto !important; }
.preview-button[data-v-53d84e29] { cursor: pointer; word-break: break-all; align-items: center; width: 100%; height: 100%; padding: 12px 18px; font-weight: 600; text-decoration: none; transition: transform 0.2s, box-shadow 0.2s; display: flex; }
.preview-button[data-v-53d84e29]:hover { transform: scale(1.02); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; }
.preview-button .icon-view-wrapper[data-v-53d84e29], .preview-button[data-v-53d84e29] .iconify { flex-shrink: 0; }
.preview-button[data-style="search"][data-v-53d84e29] { align-items: center; gap: 10px; display: flex; background-color: var(--button-bg-color,var(--bg-input,#ffffffe6)) !important; border: 1px solid var(--border-input,#80808033) !important; border-radius: var(--button-border-radius,24px) !important; color: var(--button-text-color,var(--text-secondary,#666)) !important; justify-content: flex-start !important; padding: 10px 16px !important; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 4px inset, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset, rgba(255, 255, 255, 0.8) 0px 1px !important; }
.preview-button[data-style="search"][data-v-53d84e29] .iconify { opacity: 0.5; color: currentcolor !important; font-size: 1.2em !important; }
.preview-button[data-style="search"] .button-text-group[data-v-53d84e29] { flex-direction: column; flex: 1 1 0%; justify-content: center; display: flex; }
.preview-button[data-style="search"] .placeholder-text[data-v-53d84e29] { opacity: 0.6; text-align: left; font-size: 0.95em; font-weight: 400; }
.timeline-preview[data-v-1b22b482] { position: relative; overflow: hidden; }
.timeline-bg-image[data-v-1b22b482], .timeline-bg-overlay[data-v-1b22b482] { pointer-events: none; }
.timeline-preview[data-v-1b22b482] > :not(.timeline-bg-image):not(.timeline-bg-overlay):not(.timeline-line) { z-index: 1; position: relative; }
.timeline-line[data-v-1b22b482] { z-index: 1; left: var(--tl-line-left) !important; }
.timeline-spacer-item[data-v-1b22b482] { pointer-events: none; z-index: 1; width: 100%; position: relative; }
.timeline-preview[data-layout="left"] .timeline-line[data-v-1b22b482] { left: auto !important; right: var(--tl-line-right) !important; }
.timeline-preview[data-layout="left"] .timeline-dot[data-v-1b22b482] { left: auto !important; right: var(--tl-dot-offset-right) !important; }
.timeline-preview[data-layout="double"] .timeline-line[data-v-1b22b482] { transform: translate(-50%); left: 50% !important; }
.timeline-preview[data-layout="double"] .timeline-event[data-v-1b22b482] { box-sizing: border-box; width: 50% !important; }
.timeline-preview[data-layout="double"] .timeline-event.is-left[data-v-1b22b482] { text-align: right; padding-left: 0px !important; padding-right: var(--tl-double-pad) !important; margin-left: 0px !important; margin-right: auto !important; }
.timeline-preview[data-layout="double"] .timeline-event.is-right[data-v-1b22b482] { text-align: left; padding-right: 0px !important; padding-left: var(--tl-double-pad) !important; margin-left: auto !important; margin-right: 0px !important; }
.timeline-preview[data-layout="double"] .timeline-event.is-left .timeline-dot[data-v-1b22b482] { left: auto !important; right: var(--tl-double-dot-offset) !important; }
.timeline-preview[data-layout="double"] .timeline-event.is-right .timeline-dot[data-v-1b22b482] { right: auto !important; left: var(--tl-double-dot-offset) !important; }
.timeline-dual-row[data-v-1b22b482] { width: 100%; display: flex; position: relative; }
.timeline-preview[data-layout="double"] .timeline-dual-row .timeline-dual-main[data-v-1b22b482], .timeline-preview[data-layout="double"] .timeline-dual-row .timeline-dual-sub[data-v-1b22b482] { box-sizing: border-box; flex: 0 0 50%; position: relative; width: 50% !important; }
.timeline-preview[data-layout="double"] .timeline-dual-row .timeline-dual-main[data-v-1b22b482] { text-align: right; order: 1; padding-left: 0px !important; padding-right: var(--tl-double-pad) !important; }
.timeline-preview[data-layout="double"] .timeline-dual-row .timeline-dual-sub[data-v-1b22b482] { text-align: left; order: 2; padding-right: 0px !important; padding-left: var(--tl-double-pad) !important; }
.timeline-preview[data-layout="double"] .timeline-dual-row.is-swapped .timeline-dual-main[data-v-1b22b482] { text-align: left; order: 2; padding-left: var(--tl-double-pad) !important; padding-right: 0px !important; }
.timeline-preview[data-layout="double"] .timeline-dual-row.is-swapped .timeline-dual-sub[data-v-1b22b482] { text-align: right; order: 1; padding-left: 0px !important; padding-right: var(--tl-double-pad) !important; }
.timeline-preview[data-layout="double"] .timeline-dual-row .timeline-dual-main .timeline-dot[data-v-1b22b482] { left: auto !important; right: var(--tl-double-dot-offset) !important; }
.timeline-preview[data-layout="double"] .timeline-dual-row .timeline-dual-sub .timeline-dot[data-v-1b22b482], .timeline-preview[data-layout="double"] .timeline-dual-row.is-swapped .timeline-dual-main .timeline-dot[data-v-1b22b482] { right: auto !important; left: var(--tl-double-dot-offset) !important; }
.timeline-preview[data-layout="double"] .timeline-dual-row.is-swapped .timeline-dual-sub .timeline-dot[data-v-1b22b482] { left: auto !important; right: var(--tl-double-dot-offset) !important; }
h3.preview-card-title[data-v-1b22b482] { text-align: inherit !important; box-sizing: border-box !important; width: 100% !important; margin: 0px 0px 16px !important; padding: 0px !important; line-height: 1.4 !important; display: block !important; }
h3.preview-card-title > span.title-text-content[data-item-key][data-v-1b22b482] { white-space: nowrap !important; text-overflow: ellipsis !important; width: auto !important; min-width: 0px !important; max-width: 100% !important; margin: 0px !important; display: inline-block !important; overflow: hidden !important; }
.showcase-vinyl[data-v-f0e91978] { box-sizing: border-box; color: rgb(255, 255, 255); width: 100%; height: 100%; transition: 0.3s; }
.vinyl-main-content[data-v-f0e91978] { z-index: 1; align-items: center; gap: 30px; display: flex; position: relative; }
@media (max-width: 480px) {
  .vinyl-main-content[data-v-f0e91978] { text-align: center; flex-direction: column; gap: 20px; }
}
.vinyl-visual-group[data-v-f0e91978] { flex-shrink: 0; width: 160px; height: 160px; position: relative; }
.vinyl-sleeve[data-v-f0e91978] { z-index: 2; background: rgb(34, 34, 34); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; width: 150px; height: 150px; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 30px; }
.vinyl-cover[data-v-f0e91978] { object-fit: cover; width: 100%; height: 100%; }
.sleeve-gloss[data-v-f0e91978] { pointer-events: none; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(0, 0, 0, 0) 50%); position: absolute; inset: 0px; }
.vinyl-disk-wrapper[data-v-f0e91978] { z-index: 1; width: 140px; height: 140px; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); position: absolute; top: 5px; left: 70px; transform: rotate(15deg); }
.showcase-vinyl:hover .vinyl-disk-wrapper[data-v-f0e91978] { transform: translate(10px) rotate(45deg); }
.vinyl-disk[data-v-f0e91978] { background: radial-gradient(circle, rgb(51, 51, 51) 0%, rgb(17, 17, 17) 100%); border-radius: 50%; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: relative; box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 15px; }
.vinyl-disk-lines[data-v-f0e91978] { background: repeating-radial-gradient(circle, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, rgba(255, 255, 255, 0.02) 3px); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 50%; position: absolute; inset: 5px; }
.vinyl-disk-label[data-v-f0e91978] { z-index: 2; background-color: rgb(68, 68, 68); border: 4px solid rgb(17, 17, 17); border-radius: 50%; width: 50px; height: 50px; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px inset; }
.vinyl-disk-label[data-v-f0e91978]::after { content: ""; background: rgb(17, 17, 17); border-radius: 50%; width: 6px; height: 6px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.vinyl-info-area[data-v-f0e91978] { text-align: center; flex-direction: column; flex: 1 1 0%; align-items: center; gap: 8px; min-width: 0px; display: flex; }
.vinyl-title[data-v-f0e91978] { letter-spacing: -0.02em; margin: 0px; font-size: 1.5rem; font-weight: 800; line-height: 1.2; }
.vinyl-subtitle[data-v-f0e91978] { margin-top: -4px; font-size: 0.9rem; font-weight: 500; }
.vinyl-rating[data-v-f0e91978] { color: rgb(255, 204, 0); justify-content: center; gap: 2px; margin: 4px 0px; font-size: 0.9rem; display: flex; }
.vinyl-comment[data-v-f0e91978] { opacity: 0.95; -webkit-line-clamp: 3; -webkit-box-orient: vertical; max-width: 90%; margin-top: 5px; font-size: 0.95rem; font-style: italic; line-height: 1.5; display: -webkit-box; overflow: hidden; }
.vinyl-tags[data-v-f0e91978] { flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; display: flex; }
.vinyl-tag[data-v-f0e91978] { align-items: center; display: inline-flex; }
.rpg-card-preview[data-v-c94e0283] { flex-direction: column; align-items: center; display: flex; }
.rpg-title[data-v-c94e0283] { text-align: center; margin-bottom: 8px; }
.rpg-radar-container[data-v-c94e0283] { aspect-ratio: 1 / 1; width: 100%; max-width: 280px; }
.rpg-radar-container svg[data-v-c94e0283] { width: 100%; height: 100%; }
.radar-area[data-v-c94e0283] { transition: 0.3s; }
.radar-area.pulse-enabled[data-v-c94e0283] { filter: drop-shadow(0 0 3px var(--rpg-stroke-color)); transform-origin: 50% center; animation: 4s ease-in-out 0s infinite normal none running radar-pulse-c94e0283; }
@keyframes radar-pulse-c94e0283 { 
  0%, 100% { filter: drop-shadow(0 0 2px var(--rpg-stroke-color)); opacity: 0.85; }
  50% { filter: drop-shadow(0 0 6px var(--rpg-stroke-color)); opacity: 1; }
}
.radar-label[data-v-c94e0283] { fill: var(--rpg-text-color); pointer-events: none; text-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px; font-size: 11px; font-weight: 700; }
.radar-grid[data-v-c94e0283] { transition: 0.5s; }
.social-card-preview[data-v-dc00e37f] { position: relative; overflow: hidden; }
.social-bg-image[data-v-dc00e37f], .social-bg-overlay[data-v-dc00e37f] { pointer-events: none; }
.social-card-preview[data-v-dc00e37f] > :not(.social-bg-image):not(.social-bg-overlay) { z-index: 1; position: relative; }
.grid-title-container[data-v-ac3bad26] { width: 100% !important; display: block !important; }
.grid-title-inner[data-v-ac3bad26] { align-items: center !important; max-width: 100% !important; display: inline-flex !important; }
.todo-preview-container[data-v-bc7e3e4c] { width: 100%; position: relative; overflow: hidden; }
.todo-bg-image-layer[data-v-bc7e3e4c], .todo-bg-overlay-layer[data-v-bc7e3e4c] { pointer-events: none; }
.todo-preview-container[data-v-bc7e3e4c] > :not(.todo-bg-image-layer):not(.todo-bg-overlay-layer) { z-index: 1; position: relative; }
.win95-style[data-v-bc7e3e4c] { font-family: "Courier New", Courier, monospace; padding: 0px !important; overflow: visible !important; }
.win95-style .win95-title-bar[data-v-bc7e3e4c] { margin: 0px; }
.sticky-style[data-v-bc7e3e4c] { font-family: "Segoe Print", "Comic Sans MS", cursive; }
.qa-preview[data-v-5c781f16] { position: relative; overflow: hidden; }
.qa-bg-image[data-v-5c781f16], .qa-bg-overlay[data-v-5c781f16] { pointer-events: none; }
.qa-preview[data-v-5c781f16] > :not(.qa-bg-image):not(.qa-bg-overlay) { z-index: 1; position: relative; }
.letter-preview[data-v-317df76c] { box-sizing: border-box; background-color: var(--letter-bg,#fff); width: 100%; color: var(--letter-text,#333); border-radius: var(--letter-radius,8px); padding: var(--g-comp-padding,20px); flex-direction: column; display: flex; position: relative; overflow: hidden; }
.letter-preview[data-style="email98"][data-v-317df76c] { border-width: 2px; border-style: solid; border-image: initial; border-color: rgb(223, 223, 223) gray gray rgb(223, 223, 223); box-shadow: rgb(0, 0, 0) 1px 1px; background-color: var(--letter-bg,silver) !important; border-radius: 0px !important; padding: 4px !important; }
.letter-preview[data-style="wax_seal"][data-v-317df76c] { background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E"); border: 1px solid rgba(0, 0, 0, 0.05); font-family: "Songti SC", "Noto Serif SC", serif; box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 15px; background-color: var(--letter-bg,#fdfbf7) !important; color: var(--letter-text,#4a3b2a) !important; padding: var(--g-comp-padding,30px 25px) !important; }
.letter-preview[data-style="wax_seal"] .letter-seal[data-v-317df76c] { color: rgb(189, 44, 44); opacity: 0.9; filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 2px 2px); justify-content: center; align-items: center; width: 50px; height: 50px; display: flex; position: absolute; top: 20px; right: 20px; }
.letter-preview[data-style="wax_seal"] .letter-header[data-v-317df76c] { text-align: center; border-bottom: 2px solid rgba(74, 59, 42, 0.2); margin-bottom: 15px; padding-bottom: 15px; }
.letter-preview[data-style="wax_seal"] .letter-title[data-v-317df76c] { letter-spacing: 2px; margin-bottom: 5px; font-size: 1.3rem; font-weight: 700; }
.letter-preview[data-style="wax_seal"] .letter-date[data-v-317df76c] { opacity: 0.6; font-size: 0.8rem; font-style: italic; }
.letter-preview[data-style="wax_seal"] .letter-footer[data-v-317df76c] { text-align: right; margin-top: 20px; font-style: italic; font-weight: 700; }
.letter-preview[data-style="airmail"][data-v-317df76c] { background-image: repeating-linear-gradient(135deg, rgb(211, 47, 47) 0px, rgb(211, 47, 47) 15px, rgba(0, 0, 0, 0) 15px, rgba(0, 0, 0, 0) 25px, rgb(25, 118, 210) 25px, rgb(25, 118, 210) 40px, rgba(0, 0, 0, 0) 40px, rgba(0, 0, 0, 0) 50px); background-position: center top, center bottom, 0px center, 100% center; background-repeat: no-repeat; background-size: 100% 10px, 100% 10px, 10px 100%, 10px 100%; border: 10px solid rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px; background-color: var(--letter-bg,#fff) !important; color: var(--letter-text,#333) !important; padding: var(--g-comp-padding,25px) !important; }
.letter-preview[data-style="airmail"] .letter-inner[data-v-317df76c] { background: rgb(255, 255, 255); flex-direction: column; width: 100%; height: 100%; display: flex; }
.letter-preview[data-style="airmail"] .letter-stamp-area[data-v-317df76c] { justify-content: flex-end; margin-bottom: 20px; display: flex; }
.letter-preview[data-style="airmail"] .letter-stamp[data-v-317df76c] { color: rgb(204, 204, 204); text-transform: uppercase; border: 2px dotted rgb(204, 204, 204); padding: 5px 10px; font-size: 0.7rem; font-weight: 700; }
.letter-preview[data-style="airmail"] .letter-address-row[data-v-317df76c] { border-bottom: 1px dashed rgb(238, 238, 238); margin-bottom: 15px; padding-bottom: 5px; font-family: "Courier New", monospace; font-size: 0.9rem; display: flex; }
.letter-preview[data-style="airmail"] .letter-label[data-v-317df76c] { color: rgb(153, 153, 153); width: 60px; font-weight: 700; }
.letter-preview[data-style="top_secret"][data-v-317df76c] { border: 1px solid rgb(220, 208, 184); font-family: "Courier New", Courier, monospace; color: rgb(44, 30, 26) !important; padding: var(--g-comp-padding,40px 30px) !important; background-color: rgb(244, 236, 216) !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E") !important; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 60px inset, rgba(0, 0, 0, 0.1) 1px 1px, rgba(0, 0, 0, 0.15) 0px 10px 20px !important; }
.letter-preview[data-style="top_secret"] .letter-stamp-secret[data-v-317df76c] { color: rgba(183, 28, 28, 0.7); pointer-events: none; text-transform: uppercase; mix-blend-mode: multiply; border: 4px double rgba(183, 28, 28, 0.6); border-radius: 4px; padding: 8px 15px; font-size: 2.2rem; font-weight: 900; position: absolute; bottom: 30px; right: 30px; mask-image: url("data:image/svg+xml,%3Csvg width='200' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.7'/%3E%3C/svg%3E"); }
.letter-preview[data-style="top_secret"] .letter-body[data-v-317df76c] { line-height: var(--g-comp-line-height); border-top: 2px solid rgba(0, 0, 0, 0.8); border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin: 15px 0px; padding: 25px 0px; font-weight: 600; }
.letter-body[data-v-317df76c] { line-height: var(--g-comp-line-height); white-space: pre-wrap; word-break: break-word; flex: 1 1 0%; }
.timer-preview[data-v-ad78ab49] { position: relative; overflow: hidden; }
.timer-bg-image[data-v-ad78ab49], .timer-bg-overlay[data-v-ad78ab49] { pointer-events: none; }
.timer-preview[data-v-ad78ab49] > :not(.timer-bg-image):not(.timer-bg-overlay) { z-index: 1; position: relative; }
.calendar-bg-image[data-v-e9ddb5b0], .calendar-bg-overlay[data-v-e9ddb5b0] { z-index: -2; position: absolute; inset: 0px; }
.calendar-preview[data-v-e9ddb5b0] > :not(.calendar-bg-image):not(.calendar-bg-overlay) { z-index: 1; position: relative; }
.cal-day-cell.cal-pulse[data-v-e9ddb5b0] { animation: 2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running cal-pulse-e9ddb5b0; }
@keyframes cal-pulse-e9ddb5b0 { 
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.96); }
}
.cal-day-cell[data-v-e9ddb5b0] { cursor: pointer; position: relative; }
.cal-modal-overlay[data-v-e9ddb5b0] { backdrop-filter: blur(8px); z-index: 99999; background: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; padding: 20px; animation: 0.3s ease 0s 1 normal none running fadeIn-e9ddb5b0; display: flex; position: fixed; inset: 0px; }
.cal-modal-content[data-v-e9ddb5b0] { background: var(--bg-primary,#fff); border: 1px solid var(--border-color,#0000001a); border-radius: 16px; flex-direction: column; width: 100%; max-width: 400px; animation: 0.3s ease 0s 1 normal none running slideUp-e9ddb5b0; display: flex; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 30px; }
.cal-modal-header[data-v-e9ddb5b0] { border-bottom: 1px solid var(--border-color,#0000000d); justify-content: space-between; align-items: center; padding: 16px 20px; display: flex; }
.cal-modal-date[data-v-e9ddb5b0] { color: var(--color-primary,#111); font-size: 1.1rem; font-weight: 700; }
.cal-modal-close[data-v-e9ddb5b0] { color: var(--text-secondary,#888); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px 5px; font-size: 1.5rem; }
.cal-modal-body[data-v-e9ddb5b0] { max-height: 50vh; padding: 20px; overflow-y: auto; }
.cal-modal-note-title[data-v-e9ddb5b0] { color: var(--text-primary,#000); border-left: 4px solid var(--color-primary,#6366f1); margin-bottom: 12px; padding-left: 10px; font-size: 1rem; font-weight: 600; }
.cal-modal-detail-text[data-v-e9ddb5b0] { color: var(--text-secondary,#444); white-space: pre-wrap; word-break: break-all; font-size: 0.9rem; line-height: 1.6; }
@keyframes fadeIn-e9ddb5b0 { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes slideUp-e9ddb5b0 { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.achievement-preview[data-v-a5f06864] { position: relative; overflow: hidden; }
.ach-bg-image[data-v-a5f06864], .ach-bg-overlay[data-v-a5f06864] { pointer-events: none; }
.achievement-preview[data-v-a5f06864] > :not(.ach-bg-image):not(.ach-bg-overlay) { z-index: 1; position: relative; }
.relationship-preview[data-v-0f8adf07] { overflow: visible !important; }
.rel-badge[data-v-0f8adf07] { transition: transform 0.2s; }
.rel-badge[data-v-0f8adf07]:hover { transform: scale(1.15); }
.rel-node.is-draggable[data-v-0f8adf07] { cursor: grab; }
.rel-node.is-draggable[data-v-0f8adf07]:active, .rel-node.is-dragging[data-v-0f8adf07] { cursor: grabbing; z-index: 100 !important; }
.rel-node.is-dragging .rel-avatar[data-v-0f8adf07] { transition: transform 0.15s, box-shadow 0.15s; transform: scale(1.08); box-shadow: rgba(0, 0, 0, 0.3) 0px 8px 24px !important; }
.checklist-preview-wrapper[data-v-5b970f92] { width: 100%; }
.checklist-preview[data-v-5b970f92] { position: relative; overflow: hidden; }
.chk-bg-image[data-v-5b970f92], .chk-bg-overlay[data-v-5b970f92] { pointer-events: none; }
.checklist-preview[data-v-5b970f92] > :not(.chk-bg-image):not(.chk-bg-overlay) { z-index: 1; position: relative; }
.checklist-item[data-v-5b970f92] { border-radius: var(--chk-item-radius,6px); user-select: none; box-sizing: border-box; justify-content: center; align-items: center; min-height: 40px; padding: 8px 12px; transition: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; position: relative; }
.checklist-item[data-v-5b970f92]:active { transform: scale(0.96); }
.checklist-icon[data-v-5b970f92] { flex-shrink: 0; justify-content: center; align-items: center; margin-right: 6px; font-size: 1.2em; line-height: 1; display: flex; }
.checklist-preview[data-style="default"] .checklist-item[data-v-5b970f92] { background-color: var(--chk-item-bg,#00000008); border: 1px solid rgba(0, 0, 0, 0); justify-content: flex-start; }
.checklist-preview[data-style="tag"] .checklist-item[data-v-5b970f92] { background-color: var(--chk-item-bg,var(--bg-input)); border: 1px solid var(--border-color); color: var(--text-secondary); }
.checklist-preview[data-style="tag"] .checklist-item[data-v-5b970f92]:not([data-state="none"]) { color: rgb(255, 255, 255); border-color: rgba(0, 0, 0, 0); font-weight: 700; }
.checklist-preview[data-style="tag"] .checklist-item[data-state="checked"][data-v-5b970f92] { background-color: var(--accent-color); }
.checklist-preview[data-style="tag"] .checklist-item[data-state="crossed"][data-v-5b970f92] { background-color: var(--crossed-color); }
.checklist-preview[data-style="tag"] .checklist-item[data-state="heart"][data-v-5b970f92] { background-color: var(--heart-color); }
.checklist-preview[data-style="tag"] .checklist-icon[data-v-5b970f92] { display: none; }
.checklist-preview[data-style="bingo"] .checklist-item[data-v-5b970f92] { aspect-ratio: 1 / 1; text-align: center; background-color: var(--chk-item-bg,var(--bg-card)); border: 2px solid var(--border-color); flex-direction: column; justify-content: center; padding: 4px; }
.checklist-preview[data-style="bingo"] .checklist-icon[data-v-5b970f92] { margin-bottom: 4px; margin-right: 0px; font-size: 1.5em; }
.checklist-preview[data-style="bingo"] .checklist-item[data-v-5b970f92]:not([data-state="none"]) { background-color: var(--chk-item-bg,var(--bg-input)); font-weight: 700; }
.checklist-preview[data-style="bingo"] .checklist-item[data-state="checked"][data-v-5b970f92] { border-color: var(--accent-color); color: var(--accent-color); }
.checklist-preview[data-style="bingo"] .checklist-item[data-state="crossed"][data-v-5b970f92] { border-color: var(--crossed-color); color: var(--crossed-color); }
.checklist-preview[data-style="bingo"] .checklist-item[data-state="heart"][data-v-5b970f92] { border-color: var(--heart-color); color: var(--heart-color); }
.ranking-preview[data-v-be6e31e8] { position: relative; overflow: hidden; }
.rank-bg-image[data-v-be6e31e8], .rank-bg-overlay[data-v-be6e31e8] { pointer-events: none; }
.ranking-preview[data-v-be6e31e8] > :not(.rank-bg-image):not(.rank-bg-overlay) { z-index: 1; position: relative; }
.rank-score[data-v-be6e31e8] { font-family: inherit !important; }
.separator-preview[data-v-1baa3f69] { align-items: center; display: flex; }
.spacer-preview[data-v-6606f16b] { background: rgba(0, 0, 0, 0.02); border: 2px dashed rgba(0, 0, 0, 0.05); border-radius: 8px; justify-content: center; align-items: center; width: 100%; transition: 0.3s; display: flex; }
.spacer-preview[data-v-6606f16b]:hover { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.2); }
.spacer-preview.is-exporting[data-v-6606f16b] { background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; transition: none !important; }
.spacer-label[data-v-6606f16b] { color: rgba(0, 0, 0, 0.3); user-select: none; pointer-events: none; font-size: 0.8rem; }
.spacer-preview.is-exporting .spacer-label[data-v-6606f16b] { display: none; }
.music-apple[data-v-7276aa1d] { user-select: none; transition: transform 0.3s; }
.apple-cover-container[data-v-7276aa1d] { aspect-ratio: 1 / 1; width: 100%; margin-bottom: 24px; position: relative; }
.apple-cover-img[data-v-7276aa1d] { object-fit: cover; z-index: 2; border-radius: 12px; width: 100%; height: 100%; position: relative; box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px; }
.apple-cover-shadow[data-v-7276aa1d] { background: inherit; filter: blur(25px) brightness(0.8); opacity: 0.6; z-index: 1; border-radius: 12px; width: 100%; height: 100%; position: absolute; top: 15px; left: 0px; }
.apple-info[data-v-7276aa1d] { text-align: center; width: 100%; margin-bottom: 24px; }
.apple-title[data-v-7276aa1d] { letter-spacing: -0.28px; white-space: nowrap; text-overflow: ellipsis; margin: 0px 0px 4px; font-size: 20px; font-weight: 600; overflow: hidden; }
.apple-artist[data-v-7276aa1d] { opacity: 0.55; letter-spacing: -0.374px; margin: 0px; font-size: 17px; font-weight: 400; }
.apple-controls[data-v-7276aa1d] { align-items: center; gap: 32px; margin-bottom: 24px; display: flex; }
.control-btn[data-v-7276aa1d] { color: inherit; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; justify-content: center; align-items: center; font-size: 28px; transition: opacity 0.2s, transform 0.1s; display: flex; }
.control-btn[data-v-7276aa1d]:hover { opacity: 0.7; }
.control-btn[data-v-7276aa1d]:active { transform: scale(0.92); }
.play-pause[data-v-7276aa1d] { font-size: 52px; }
.apple-progress-container[data-v-7276aa1d] { width: 100%; }
.apple-progress-bar[data-v-7276aa1d] { background: rgba(255, 255, 255, 0.15); border-radius: 2px; width: 100%; height: 4px; margin-bottom: 8px; overflow: hidden; }
.apple-progress-fill[data-v-7276aa1d] { background: rgb(255, 255, 255); border-radius: 2px; height: 100%; }
.apple-time[data-v-7276aa1d] { letter-spacing: -0.12px; justify-content: space-between; font-size: 12px; font-weight: 600; display: flex; }
.music-item-host[data-v-b6e9fbd8] { box-sizing: border-box; width: 100%; }
.music-bg-image[data-v-b6e9fbd8], .music-bg-overlay[data-v-b6e9fbd8] { pointer-events: none; }
.progress-bar-preview[data-v-6927481c] { position: relative; overflow: hidden; }
.prog-bg-image[data-v-6927481c], .prog-bg-overlay[data-v-6927481c] { pointer-events: none; }
.progress-bar-preview[data-v-6927481c] > :not(.prog-bg-image):not(.prog-bg-overlay) { z-index: 1; position: relative; }
.cut-line-preview[data-v-c04ba884] { width: 100%; padding: var(--g-comp-padding,10px 0); opacity: 0.8; justify-content: center; align-items: center; gap: 10px; display: flex; }
.cut-line-dashed[data-v-c04ba884] { border-top: 1px dashed; flex: 1 1 0%; height: 0px; }
.cut-line-icon[data-v-c04ba884] { justify-content: center; align-items: center; font-size: 1.2rem; display: flex; }
.dialogue-preview-container[data-v-a2a7b904] { flex-direction: column; gap: 20px; display: flex; position: relative; overflow: hidden; box-sizing: border-box !important; width: 100% !important; }
.dia-bg-image[data-v-a2a7b904], .dia-bg-overlay[data-v-a2a7b904] { pointer-events: none; }
.dialogue-preview-container[data-v-a2a7b904] > :not(.dia-bg-image):not(.dia-bg-overlay) { z-index: 1; position: relative; }
.dialogue-entry[data-v-a2a7b904] { align-items: flex-start; gap: 12px; width: auto !important; max-width: 85% !important; display: inline-flex !important; }
.dialogue-left[data-v-a2a7b904] { align-self: flex-start !important; }
.dialogue-right[data-v-a2a7b904] { flex-direction: row-reverse !important; align-self: flex-end !important; }
.dialogue-center[data-v-a2a7b904] { align-self: center; max-width: 100%; margin: 4px 0px; }
.dialogue-center .dialogue-content-wrapper[data-v-a2a7b904] { justify-content: center; width: 100%; display: flex; }
.dialogue-center .dialogue-bubble[data-v-a2a7b904] { box-shadow: none; backdrop-filter: blur(4px); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 20px; margin: 4px 0px; padding: 4px 16px; font-size: 0.85rem; color: var(--text-secondary) !important; background: rgba(128, 128, 128, 0.15) !important; }
.dialogue-center .dialogue-bubble[data-v-a2a7b904]::before { display: none; }
.dialogue-avatar[data-v-a2a7b904] { background-position: 50% center; background-size: cover; border-radius: 50%; flex-shrink: 0; width: 40px; height: 40px; margin-top: 0px; }
.dialogue-avatar.initial-avatar[data-v-a2a7b904] { color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; justify-content: center; align-items: center; font-size: 1.2rem; font-weight: 700; display: flex; }
.dialogue-content-wrapper[data-v-a2a7b904] { flex-direction: column !important; width: auto !important; max-width: 100% !important; display: inline-flex !important; }
.dialogue-left .dialogue-content-wrapper[data-v-a2a7b904] { align-items: flex-start; }
.dialogue-right .dialogue-content-wrapper[data-v-a2a7b904] { align-items: flex-end; }
.dialogue-speaker[data-v-a2a7b904] { margin-bottom: 4px; padding: 0px 8px; font-size: 0.8em; font-weight: 600; }
.dialogue-bubble[data-v-a2a7b904] { background-color: var(--bubble-bg-color); word-break: break-word; border-radius: 18px; padding: 10px 15px; position: relative; box-sizing: border-box !important; width: auto !important; max-width: 100% !important; display: inline-block !important; }
.dialogue-left .dialogue-bubble[data-v-a2a7b904], .dialogue-left .dialogue-header[data-v-a2a7b904] { align-self: flex-start !important; margin-right: auto !important; }
.dialogue-right .dialogue-bubble[data-v-a2a7b904], .dialogue-right .dialogue-header[data-v-a2a7b904] { align-self: flex-end !important; margin-left: auto !important; }
.dialogue-left .dialogue-bubble[data-v-a2a7b904] { border-top-left-radius: 0px; }
.dialogue-right .dialogue-bubble[data-v-a2a7b904] { border-top-right-radius: 0px; }
.dialogue-bubble[data-v-a2a7b904]::before { content: ""; border: 8px solid rgba(0, 0, 0, 0); width: 0px; height: 0px; position: absolute; bottom: 8px; }
.dialogue-left .dialogue-bubble[data-v-a2a7b904]::before { background-color: var(--bubble-bg-color); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; width: 5px; height: 6px; top: 0px; bottom: auto; left: -5px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3Cpath d='M5,6 L5,0 L2.9,0 Q0.5,0 1.7,1.6 L5,6 Z' fill='black'/%3E%3C/svg%3E") 50% center / 100% 100% no-repeat; }
.dialogue-right .dialogue-bubble[data-v-a2a7b904]::before { background-color: var(--bubble-bg-color); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; width: 5px; height: 6px; top: 0px; bottom: auto; right: -5px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3Cpath d='M0,6 L0,0 L2.1,0 Q4.5,0 3.3,1.6 L0,6 Z' fill='black'/%3E%3C/svg%3E") 50% center / 100% 100% no-repeat; }
.dialogue-image[data-v-a2a7b904] { border-radius: 8px; max-width: 100%; display: block; }
.dialogue-preview-container[data-style="wechat"][data-v-a2a7b904] { padding: 16px 12px; background-color: rgb(243, 243, 243) !important; border-radius: 4px !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-avatar[data-v-a2a7b904] { width: 40px !important; height: 40px !important; box-shadow: none !important; border-radius: 4px !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-right .dialogue-speaker[data-v-a2a7b904] { margin-bottom: 2px; margin-right: 0px; font-size: 0.75rem; color: rgb(173, 173, 173) !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-left .dialogue-speaker[data-v-a2a7b904] { margin-bottom: 2px; margin-left: 0px; font-size: 0.75rem; color: rgb(173, 173, 173) !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-left .dialogue-bubble[data-v-a2a7b904] { border: 1px solid rgb(237, 237, 237); padding: 9px 11px; color: rgb(11, 11, 11) !important; background-color: rgb(255, 255, 255) !important; border-radius: 6px !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-right .dialogue-bubble[data-v-a2a7b904] { border: 1px solid rgb(138, 217, 97); padding: 9px 11px; color: rgb(11, 11, 11) !important; background-color: rgb(149, 236, 105) !important; border-radius: 6px !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-bubble[data-v-a2a7b904]::before { border-width: 6px; top: 14px; background: 0px 0px !important; border-style: solid !important; width: 0px !important; height: 0px !important; mask: none !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-left .dialogue-bubble[data-v-a2a7b904]::before { left: -11px; border-color: rgba(0, 0, 0, 0) rgb(255, 255, 255) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-right .dialogue-bubble[data-v-a2a7b904]::before { right: -11px; border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgb(149, 236, 105) !important; }
.dialogue-preview-container[data-style="discord"][data-v-a2a7b904] { gap: 2px; color: rgb(219, 222, 225) !important; background-color: rgb(49, 51, 56) !important; border-radius: 4px !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-entry[data-v-a2a7b904] { align-items: flex-start; gap: 16px; max-width: 100%; padding: 2px 0px; flex-direction: row !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-entry[data-v-a2a7b904]:hover { background-color: rgba(0, 0, 0, 0.04); }
.dialogue-preview-container[data-style="discord"] .dialogue-avatar[data-v-a2a7b904] { cursor: pointer; width: 40px; height: 40px; margin-top: 2px; border-radius: 50% !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-content-wrapper[data-v-a2a7b904] { flex: 0 1 auto; align-items: flex-start !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-header[data-v-a2a7b904] { align-items: baseline; gap: 8px; margin-bottom: 2px; display: flex; }
.dialogue-preview-container[data-style="discord"] .dialogue-speaker[data-v-a2a7b904] { margin: 0px; padding: 0px; font-size: 1rem; font-weight: 500; color: rgb(242, 243, 245) !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-timestamp[data-v-a2a7b904] { color: rgb(148, 155, 164); font-size: 0.75rem; font-weight: 400; }
.dialogue-preview-container[data-style="discord"] .dialogue-bubble[data-v-a2a7b904] { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; padding: 0px; color: rgb(219, 222, 225) !important; background: 0px 0px !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-bubble[data-v-a2a7b904]::before { display: none; }
.dialogue-quote-default[data-v-a2a7b904] { box-sizing: border-box; text-align: left; background: rgba(0, 0, 0, 0.06); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; max-width: 100%; margin-bottom: 8px; padding: 8px 12px; font-size: 0.8rem; }
.dark-mode { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); }
.dialogue-quote-speaker[data-v-a2a7b904] { margin-bottom: 4px; font-size: 0.75rem; font-weight: 700; }
.dialogue-quote-text[data-v-a2a7b904] { opacity: 0.85; white-space: nowrap; text-overflow: ellipsis; font-size: 0.8rem; overflow: hidden; }
.dialogue-quote-wechat[data-v-a2a7b904] { box-sizing: border-box; text-align: left; max-width: 100%; margin-top: 6px; font-size: 0.75rem; }
.dialogue-quote-divider[data-v-a2a7b904] { background: rgba(0, 0, 0, 0.12); width: 100%; height: 1px; margin: 8px 0px; }
.dark-mode { background: rgba(255, 255, 255, 0.18); }
.dialogue-quote-content[data-v-a2a7b904] { color: rgb(87, 107, 149); background: rgba(0, 0, 0, 0.05); border-radius: 4px; align-items: center; padding: 6px 10px; font-size: 0.75rem; line-height: 1.4; display: flex; }
.dark-mode { color: rgb(163, 184, 204); background: rgba(255, 255, 255, 0.08); }
.dialogue-quote-speaker-wechat[data-v-a2a7b904] { color: rgb(87, 107, 149); flex-shrink: 0; font-weight: 600; }
.dialogue-quote-text-wechat[data-v-a2a7b904] { color: rgba(0, 0, 0, 0.65); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.dark-mode { color: rgba(255, 255, 255, 0.7); }
.dialogue-preview-container[data-style="discord"] .dialogue-entry.has-reply[data-v-a2a7b904] { flex-direction: column !important; align-items: flex-start !important; gap: 0px !important; }
.discord-reply-row[data-v-a2a7b904] { color: rgb(219, 222, 225); box-sizing: border-box; align-items: center; gap: 6px; width: calc(100% - 56px); height: 20px; margin-bottom: 4px; margin-left: 56px; font-size: 0.8rem; display: flex; position: relative; }
.discord-reply-spine[data-v-a2a7b904] { pointer-events: none; border-top: 2px solid rgb(128, 132, 142); border-left: 2px solid rgb(128, 132, 142); border-top-left-radius: 6px; width: 24px; height: 14px; position: absolute; top: 50%; left: -32px; }
.discord-reply-avatar[data-v-a2a7b904] { background-position: 50% center; background-size: cover; border-radius: 50%; flex-shrink: 0; width: 16px; height: 16px; }
.discord-reply-avatar.initial-avatar[data-v-a2a7b904] { color: rgb(255, 255, 255); justify-content: center; align-items: center; font-size: 0.5rem; font-weight: 700; display: flex; }
.discord-reply-speaker[data-v-a2a7b904] { color: rgb(242, 243, 245); opacity: 0.95; flex-shrink: 0; margin-right: 4px; font-weight: 600; }
.discord-reply-content[data-v-a2a7b904] { opacity: 0.8; white-space: nowrap; text-overflow: ellipsis; color: rgb(219, 222, 225); overflow: hidden; }
.wechat-header-bar[data-v-a2a7b904] { color: rgb(25, 25, 25); user-select: none; box-sizing: border-box; z-index: 10; border-top-left-radius: inherit; border-top-right-radius: inherit; background-color: rgb(237, 237, 237); border-bottom: 1px solid rgb(229, 229, 229); justify-content: space-between; align-items: center; height: 48px; padding: 0px 12px; font-size: 15px; font-weight: 500; display: flex; width: calc(100% + (2 * var(--g-comp-padding,15px))) !important; margin: calc(-1 * var(--g-comp-padding,15px)) calc(-1 * var(--g-comp-padding,15px)) 15px calc(-1 * var(--g-comp-padding,15px)) !important; }
.wechat-header-left[data-v-a2a7b904] { cursor: pointer; align-items: center; gap: 2px; font-size: 14px; display: flex; }
.wechat-header-left .iconify[data-v-a2a7b904] { font-size: 20px; }
.wechat-header-unread[data-v-a2a7b904] { color: rgb(25, 25, 25); background-color: rgba(0, 0, 0, 0.15); border-radius: 10px; margin-left: 2px; padding: 1px 5px; font-size: 11px; }
.wechat-header-center[data-v-a2a7b904] { align-items: center; gap: 4px; max-width: 60%; display: flex; }
.wechat-header-title[data-v-a2a7b904] { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.wechat-header-count[data-v-a2a7b904] { color: rgb(127, 127, 127); font-size: 15px; }
.wechat-header-mute-wrapper[data-v-a2a7b904] { align-items: center; display: inline-flex; }
.wechat-header-mute-icon[data-v-a2a7b904] { color: rgb(127, 127, 127); margin-left: 2px; font-size: 14px; }
.wechat-header-right[data-v-a2a7b904] { cursor: pointer; align-items: center; display: flex; }
.wechat-header-right .iconify[data-v-a2a7b904] { font-size: 22px; }
.wechat-footer-bar[data-v-a2a7b904] { box-sizing: border-box; z-index: 10; border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; background-color: rgb(247, 247, 247); border-top: 1px solid rgb(229, 229, 229); align-items: center; gap: 8px; height: 52px; padding: 0px 10px; display: flex; width: calc(100% + (2 * var(--g-comp-padding,15px))) !important; margin: 15px calc(-1 * var(--g-comp-padding,15px)) calc(-1 * var(--g-comp-padding,15px)) calc(-1 * var(--g-comp-padding,15px)) !important; }
.wechat-footer-icon-btn[data-v-a2a7b904] { color: rgb(25, 25, 25); cursor: pointer; justify-content: center; align-items: center; width: 28px; height: 28px; display: flex; }
.wechat-footer-icon-btn .iconify[data-v-a2a7b904] { font-size: 26px; }
.wechat-footer-input[data-v-a2a7b904] { color: rgb(178, 178, 178); user-select: none; background-color: rgb(255, 255, 255); border: 1px solid rgb(229, 229, 229); border-radius: 4px; flex: 1 1 0%; align-items: center; height: 36px; padding: 0px 10px; font-size: 14px; display: flex; }
.dialogue-bubble.is-redpacket[data-v-a2a7b904] { box-shadow: none !important; background-color: rgba(0, 0, 0, 0) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; padding: 0px !important; }
.dialogue-bubble.is-redpacket[data-v-a2a7b904]::before { display: none !important; }
.wechat-redpacket-bubble-content[data-v-a2a7b904] { cursor: pointer; border-radius: 8px; flex-direction: column; width: 230px; height: 90px; transition: transform 0.2s, opacity 0.2s; display: flex; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px; }
.wechat-redpacket-bubble-content[data-v-a2a7b904]:hover { transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 12px; }
.wechat-redpacket-bubble-content.unopened[data-v-a2a7b904] { background: linear-gradient(135deg, rgb(250, 157, 59), rgb(243, 123, 29)); }
.wechat-redpacket-bubble-content.opened[data-v-a2a7b904] { opacity: 0.85; background: linear-gradient(135deg, rgb(252, 219, 179), rgb(247, 201, 150)); }
.redpacket-top-sec[data-v-a2a7b904] { flex: 1 1 0%; align-items: center; gap: 12px; padding: 10px 12px; display: flex; }
.redpacket-icon[data-v-a2a7b904] { flex-shrink: 0; justify-content: center; align-items: center; display: flex; }
.rp-envelope-svg[data-v-a2a7b904] { filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 2px 4px); }
.wechat-redpacket-bubble-content.opened .rp-envelope-svg rect[data-v-a2a7b904] { fill: rgb(242, 154, 144) !important; }
.redpacket-text-sec[data-v-a2a7b904] { text-align: left; flex-direction: column; flex: 1 1 0%; justify-content: center; min-width: 0px; display: flex; }
.redpacket-greeting[data-v-a2a7b904] { color: rgb(255, 255, 255); text-overflow: ellipsis; white-space: nowrap; font-size: 13px; font-weight: 500; overflow: hidden; }
.wechat-redpacket-bubble-content.opened .redpacket-greeting[data-v-a2a7b904] { color: rgba(255, 255, 255, 0.85); }
.redpacket-action[data-v-a2a7b904] { color: rgb(255, 240, 209); margin-top: 3px; font-size: 11px; }
.wechat-redpacket-bubble-content.opened .redpacket-action[data-v-a2a7b904] { color: rgba(255, 255, 255, 0.65); }
.redpacket-bottom-sec[data-v-a2a7b904] { color: rgb(153, 153, 153); text-align: left; background-color: rgb(255, 255, 255); border-top: 1px solid rgba(0, 0, 0, 0.04); align-items: center; height: 24px; padding: 0px 12px; font-size: 10px; display: flex; }
.wechat-rp-modal-overlay { z-index: 99999; backdrop-filter: blur(2px); background-color: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; animation: 0.25s ease-out 0s 1 normal none running fadeIn-a2a7b904; display: flex; position: fixed; inset: 0px; }
@keyframes fadeIn-a2a7b904 { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.wechat-rp-modal-card { background-color: rgb(207, 62, 54); border-radius: 12px; flex-direction: column; width: 300px; height: 420px; animation: 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running scaleIn-a2a7b904; display: flex; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.35) 0px 15px 40px; }
@keyframes scaleIn-a2a7b904 { 
  0% { opacity: 0; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1); }
}
.rp-modal-unopened-view, .rp-modal-opened-view { box-sizing: border-box; flex-direction: column; align-items: center; width: 100%; height: 100%; display: flex; position: relative; }
.rp-modal-header-curve { z-index: 1; background-color: rgb(224, 79, 70); border-radius: 50%; width: 400px; height: 300px; position: absolute; top: -120px; left: -50px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px; }
.rp-modal-close-btn { color: rgba(255, 255, 255, 0.6); cursor: pointer; z-index: 10; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; padding: 4px; font-size: 20px; transition: background-color 0.2s, color 0.2s; display: flex; position: absolute; top: 15px; left: 15px; }
.rp-modal-close-btn:hover { color: rgb(255, 255, 255); background-color: rgba(255, 255, 255, 0.1); }
.rp-modal-close-btn.dark-text { color: rgba(0, 0, 0, 0.4); }
.rp-modal-close-btn.dark-text:hover { color: rgba(0, 0, 0, 0.8); background-color: rgba(0, 0, 0, 0.05); }
.rp-modal-sender-info { z-index: 2; flex-direction: column; align-items: center; margin-top: 50px; display: flex; }
.rp-modal-avatar { color: rgb(255, 255, 255); background-position: 50% center; background-size: cover; border: 1.5px solid rgb(248, 227, 198); border-radius: 50%; justify-content: center; align-items: center; width: 52px; height: 52px; margin-bottom: 8px; font-size: 1.5rem; font-weight: 700; display: flex; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 6px; }
.rp-modal-avatar.small { border-width: 1px; width: 32px; height: 32px; margin-bottom: 0px; font-size: 1rem; }
.rp-modal-sender-name { color: rgb(248, 227, 198); font-size: 16px; font-weight: 500; }
.rp-modal-sender-name-opened { color: rgb(25, 25, 25); font-size: 15px; font-weight: 500; }
.rp-modal-action-hint { color: rgb(248, 227, 198); opacity: 0.8; margin-top: 4px; font-size: 12px; }
.rp-modal-greeting { color: rgb(248, 227, 198); text-align: center; z-index: 2; text-overflow: ellipsis; max-height: 80px; margin-top: 24px; padding: 0px 20px; font-size: 18px; font-weight: 600; line-height: 1.4; overflow: hidden; }
.rp-modal-open-btn { color: rgb(53, 53, 53); cursor: pointer; z-index: 5; user-select: none; background-color: rgb(243, 208, 133); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; width: 84px; height: 84px; font-size: 30px; font-weight: 700; transition: transform 0.2s, background-color 0.2s; display: flex; position: absolute; bottom: 50px; box-shadow: rgba(0, 0, 0, 0.25) 0px 4px 12px; }
.rp-modal-open-btn:hover { background-color: rgb(246, 219, 155); transform: scale(1.05); }
.rp-modal-open-btn.is-spinning { pointer-events: none; animation: 1s linear 0s infinite normal none running spinY-a2a7b904; }
@keyframes spinY-a2a7b904 { 
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}
.wechat-rp-modal-card.is-opened { background-color: rgb(243, 243, 243); }
.rp-modal-opened-view { justify-content: flex-start; padding-top: 60px; }
.rp-modal-opened-content-box { flex-direction: column; align-items: center; width: 100%; display: flex; }
.rp-modal-opened-sender { align-items: center; gap: 8px; display: flex; }
.rp-modal-opened-greeting { color: rgb(136, 136, 136); text-align: center; margin-top: 10px; padding: 0px 30px; font-size: 13px; }
.rp-modal-amount-box { color: rgb(207, 62, 54); align-items: baseline; margin-top: 30px; display: flex; }
.rp-modal-amount-num { font-size: 52px; font-weight: 700; line-height: 1; }
.rp-modal-amount-unit { margin-left: 4px; font-size: 16px; font-weight: 500; }
.rp-modal-pocket-link { color: rgb(87, 107, 149); cursor: pointer; margin-top: 40px; font-size: 12px; font-weight: 500; }
.rp-modal-confetti-container { pointer-events: none; z-index: 2; position: absolute; inset: 0px; overflow: hidden; }
.confetti-particle { opacity: 0.8; background-color: rgb(243, 208, 133); border-radius: 50%; width: 8px; height: 8px; position: absolute; top: -10px; }
.confetti-particle.p-1 { background-color: rgb(243, 208, 133); animation: 1.8s ease-out 0s infinite normal none running fall-a2a7b904; left: 10%; }
.confetti-particle.p-2 { background-color: rgb(227, 82, 67); animation: 2.2s ease-out 0.2s infinite normal none running fall-a2a7b904; left: 20%; }
.confetti-particle.p-3 { background-color: rgb(229, 179, 88); animation: 1.5s ease-out 0.4s infinite normal none running fall-a2a7b904; left: 30%; }
.confetti-particle.p-4 { background-color: rgb(243, 208, 133); animation: 2s ease-out 0.1s infinite normal none running fall-a2a7b904; left: 45%; }
.confetti-particle.p-5 { background-color: rgb(246, 193, 92); animation: 1.7s ease-out 0.3s infinite normal none running fall-a2a7b904; left: 55%; }
.confetti-particle.p-6 { background-color: rgb(227, 82, 67); animation: 2.4s ease-out 0.5s infinite normal none running fall-a2a7b904; left: 70%; }
.confetti-particle.p-7 { background-color: rgb(243, 208, 133); animation: 1.9s ease-out 0.2s infinite normal none running fall-a2a7b904; left: 85%; }
.confetti-particle.p-8 { background-color: rgb(246, 193, 92); animation: 2.1s ease-out 0.6s infinite normal none running fall-a2a7b904; left: 15%; }
.confetti-particle.p-9 { background-color: rgb(227, 82, 67); animation: 1.6s ease-out 0.5s infinite normal none running fall-a2a7b904; left: 40%; }
.confetti-particle.p-10 { background-color: rgb(243, 208, 133); animation: 2.3s ease-out 0.7s infinite normal none running fall-a2a7b904; left: 65%; }
.confetti-particle.p-11 { background-color: rgb(229, 179, 88); animation: 1.4s ease-out 0.3s infinite normal none running fall-a2a7b904; left: 75%; }
.confetti-particle.p-12 { background-color: rgb(246, 193, 92); animation: 2s ease-out 0.4s infinite normal none running fall-a2a7b904; left: 90%; }
.confetti-particle.p-13 { background-color: rgb(227, 82, 67); animation: 1.8s ease-out 0.1s infinite normal none running fall-a2a7b904; left: 25%; }
.confetti-particle.p-14 { background-color: rgb(243, 208, 133); animation: 2.2s ease-out 0.2s infinite normal none running fall-a2a7b904; left: 35%; }
.confetti-particle.p-15 { background-color: rgb(229, 179, 88); animation: 1.5s ease-out 0.6s infinite normal none running fall-a2a7b904; left: 50%; }
.confetti-particle.p-16 { background-color: rgb(227, 82, 67); animation: 2.1s ease-out 0.3s infinite normal none running fall-a2a7b904; left: 60%; }
.confetti-particle.p-17 { background-color: rgb(243, 208, 133); animation: 1.7s ease-out 0.5s infinite normal none running fall-a2a7b904; left: 80%; }
.confetti-particle.p-18 { background-color: rgb(246, 193, 92); animation: 2.4s ease-out 0.2s infinite normal none running fall-a2a7b904; left: 95%; }
.confetti-particle.p-19 { background-color: rgb(227, 82, 67); animation: 1.9s ease-out 0.7s infinite normal none running fall-a2a7b904; left: 5%; }
.confetti-particle.p-20 { background-color: rgb(243, 208, 133); animation: 2.3s ease-out 0.4s infinite normal none running fall-a2a7b904; left: 48%; }
@keyframes fall-a2a7b904 { 
  0% { opacity: 1; transform: translateY(-20px) rotate(0deg); }
  100% { opacity: 0; transform: translateY(440px) rotate(360deg); }
}
.qr-code-module-container[data-v-9e2d870e] { min-height: 100px; }
.qr-code-item[data-v-9e2d870e] { width: 100%; padding: var(--g-comp-padding); flex: 1 1 0%; justify-content: center; align-items: center; display: flex; overflow: hidden; }
.qr-code-item[data-v-9e2d870e] canvas, .qr-code-item[data-v-9e2d870e] svg { object-fit: contain; display: block; aspect-ratio: 1 / 1 !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: 100% !important; }
.qr-title[data-v-9e2d870e] { margin-bottom: 4px; font-size: 1.1em; font-weight: 700; }
.qr-description[data-v-9e2d870e] { opacity: 0.8; font-size: 0.9em; }
.receipt-thermal[data-v-ada8d0a3] { font-family: var(--receipt-font-family,"Courier New", Courier, monospace); color: var(--receipt-text-color,#1a1a1a); justify-content: center; width: 100%; display: flex; }
.receipt-paper[data-v-ada8d0a3] { filter: contrast(1.1) drop-shadow(rgba(0, 0, 0, 0.1) 0px 2px 8px); flex-direction: column; width: 100%; max-width: 400px; display: flex; position: relative; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 15px; }
.tear-edge-top[data-v-ada8d0a3], .tear-edge-bottom[data-v-ada8d0a3] { background: var(--receipt-bg-color,#fdfdfc); width: 100%; height: 12px; position: relative; }
.tear-edge-top[data-v-ada8d0a3] { mask-image: radial-gradient(circle at 6px 12px, rgba(0, 0, 0, 0) 6px, rgb(0, 0, 0) 6.5px); mask-size: 12px 100%; mask-repeat: repeat-x; }
.tear-edge-bottom[data-v-ada8d0a3] { mask-image: radial-gradient(circle at 6px 0px, rgba(0, 0, 0, 0) 6px, rgb(0, 0, 0) 6.5px); mask-size: 12px 100%; mask-repeat: repeat-x; }
.receipt-content[data-v-ada8d0a3] { flex-direction: column; gap: 12px; padding: 20px; display: flex; }
.receipt-header[data-v-ada8d0a3] { text-align: center; }
.store-logo[data-v-ada8d0a3] { filter: grayscale() contrast(2); max-width: 60px; max-height: 60px; margin-bottom: 10px; }
.store-title[data-v-ada8d0a3] { letter-spacing: -0.5px; margin: 0px 0px 5px; font-size: 1.4rem; font-weight: 700; }
.store-subtitle[data-v-ada8d0a3] { margin: 0px; font-size: 0.85rem; }
.divider[data-v-ada8d0a3] { border-bottom: 1px dashed var(--receipt-text-color,#1a1a1a); opacity: 0.5; width: 100%; margin: 8px 0px; }
.divider-thick[data-v-ada8d0a3] { border-bottom: 2px dashed var(--receipt-text-color,#1a1a1a); width: 100%; margin: 12px 0px; }
.receipt-meta[data-v-ada8d0a3] { flex-direction: column; gap: 4px; font-size: 0.9rem; display: flex; }
.meta-row[data-v-ada8d0a3] { justify-content: space-between; display: flex; }
.receipt-items[data-v-ada8d0a3] { flex-direction: column; gap: 6px; font-size: 0.95rem; display: flex; }
.items-header[data-v-ada8d0a3] { justify-content: space-between; margin-bottom: 4px; font-weight: 700; display: flex; }
.item-row[data-v-ada8d0a3] { justify-content: space-between; align-items: flex-start; display: flex; }
.item-name-qty[data-v-ada8d0a3] { flex: 1 1 0%; padding-right: 15px; }
.receipt-totals[data-v-ada8d0a3] { flex-direction: column; gap: 4px; font-size: 0.95rem; display: flex; }
.total-row[data-v-ada8d0a3] { justify-content: space-between; display: flex; }
.grand-total[data-v-ada8d0a3] { margin-top: 5px; font-size: 1.2rem; font-weight: 700; }
.receipt-footer[data-v-ada8d0a3] { text-align: center; margin-top: 10px; font-size: 0.9rem; }
.receipt-footer p[data-v-ada8d0a3] { white-space: pre-wrap; margin: 2px 0px; }
.receipt-barcode-area[data-v-ada8d0a3] { text-align: center; flex-direction: column; align-items: center; margin-top: 20px; display: flex; }
.barcode-lines[data-v-ada8d0a3] { justify-content: center; align-items: stretch; width: 100%; height: 45px; display: flex; }
.barcode-text[data-v-ada8d0a3] { letter-spacing: 4px; margin-top: 5px; font-size: 0.75rem; }
.receipt-stripe[data-v-3563d494] { font-family: var(--receipt-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); justify-content: center; width: 100%; display: flex; }
.receipt-card[data-v-3563d494] { width: 100%; max-width: 480px; overflow: hidden; box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px, rgba(0, 0, 0, 0.024) 0px -6px 16px -6px; }
.receipt-card-inner[data-v-3563d494] { padding: 30px 40px; }
.receipt-header[data-v-3563d494] { justify-content: space-between; align-items: flex-start; margin-bottom: 25px; display: flex; }
.header-content[data-v-3563d494] { flex-direction: column; display: flex; }
.store-title[data-v-3563d494] { color: var(--receipt-text-color,#32325d); letter-spacing: -0.02em; margin: 0px; font-size: 1.25rem; font-weight: 600; }
.store-subtitle[data-v-3563d494] { color: var(--receipt-text-color,#8898aa); opacity: 0.7; margin: 4px 0px 0px; font-size: 0.85rem; }
.amount-accent[data-v-3563d494] { color: var(--receipt-accent-color,#6772e5); letter-spacing: -0.05em; font-size: 2.2rem; font-weight: 700; line-height: 1; }
.accent-line[data-v-3563d494] { background: rgb(230, 235, 241); width: 100%; height: 2px; margin: 20px 0px; }
.receipt-meta[data-v-3563d494] { flex-direction: column; gap: 12px; margin-bottom: 30px; display: flex; }
.meta-item[data-v-3563d494] { justify-content: space-between; font-size: 0.9rem; display: flex; }
.meta-label[data-v-3563d494] { color: var(--receipt-text-color,#8898aa); opacity: 0.7; font-weight: 500; }
.meta-value[data-v-3563d494] { color: var(--receipt-text-color,#525f7f); font-weight: 500; }
.receipt-items[data-v-3563d494] { margin-bottom: 30px; }
.item-row[data-v-3563d494] { border-bottom: 1px solid rgb(246, 249, 252); justify-content: space-between; align-items: flex-start; margin-bottom: 15px; padding-bottom: 15px; display: flex; }
.item-row[data-v-3563d494]:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; margin-bottom: 0px; padding-bottom: 0px; }
.item-info[data-v-3563d494] { color: inherit; flex-direction: column; font-weight: 500; display: flex; }
.item-name[data-v-3563d494] { font-size: 0.95rem; }
.item-qty[data-v-3563d494] { color: var(--receipt-text-color,#8898aa); opacity: 0.7; margin-top: 4px; font-size: 0.8rem; }
.item-price[data-v-3563d494] { color: inherit; font-weight: 500; }
.receipt-totals[data-v-3563d494] { flex-direction: column; gap: 12px; display: flex; }
.total-row[data-v-3563d494] { color: inherit; justify-content: space-between; font-size: 0.9rem; font-weight: 500; display: flex; }
.total-divider[data-v-3563d494] { background: rgb(230, 235, 241); width: 100%; height: 1px; margin: 5px 0px; }
.grand-total[data-v-3563d494] { color: inherit; font-size: 1.1rem; font-weight: 600; }
.receipt-footer[data-v-3563d494] { text-align: center; background: rgba(0, 0, 0, 0.03); border-top: 1px solid rgba(0, 0, 0, 0.05); padding: 20px 40px; }
.footer-barcode[data-v-3563d494] { letter-spacing: 2px; color: var(--receipt-text-color,#8898aa); opacity: 0.6; flex-direction: column; align-items: center; margin-bottom: 10px; font-family: "Courier New", Courier, monospace; font-size: 0.8rem; display: flex; }
.barcode-lines[data-v-3563d494] { justify-content: center; align-items: stretch; margin-bottom: 5px; display: flex; }
.receipt-footer p[data-v-3563d494] { color: var(--receipt-text-color,#8898aa); opacity: 0.8; white-space: pre-wrap; margin: 0px; font-size: 0.85rem; }
.receipt-linear[data-v-fce78236] { font-family: var(--receipt-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace); justify-content: center; width: 100%; display: flex; }
.linear-card[data-v-fce78236] { border: 1px solid rgba(255, 255, 255, 0.1); width: 100%; max-width: 500px; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.5) 0px 20px 40px; }
.glow-border[data-v-fce78236] { pointer-events: none; position: absolute; }
.glow-border.top[data-v-fce78236] { background: linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0)); height: 1px; top: 0px; left: 0px; right: 0px; }
.linear-content[data-v-fce78236] { z-index: 1; background: radial-gradient(circle at 50% 0px, rgba(255, 255, 255, 0.05) 0%, rgba(0, 0, 0, 0) 60%); padding: 30px; position: relative; }
.linear-header[data-v-fce78236] { justify-content: space-between; align-items: flex-start; margin-bottom: 25px; display: flex; }
.brand[data-v-fce78236] { align-items: center; gap: 15px; display: flex; }
.brand-text h1[data-v-fce78236] { letter-spacing: 0.05em; color: var(--receipt-text-color,#fff); margin: 0px; font-size: 1.1rem; font-weight: 600; }
.brand-text p[data-v-fce78236] { color: var(--receipt-text-color,#888); opacity: 0.6; margin: 4px 0px 0px; font-size: 0.75rem; }
.status-badge[data-v-fce78236] { color: rgb(63, 185, 80); letter-spacing: 0.1em; background: rgba(46, 160, 67, 0.15); border: 1px solid rgba(46, 160, 67, 0.4); border-radius: 20px; padding: 4px 10px; font-size: 0.7rem; font-weight: 700; }
.divider[data-v-fce78236] { background: rgba(255, 255, 255, 0.1); width: 100%; height: 1px; margin: 20px 0px; }
.meta-grid[data-v-fce78236] { grid-template-columns: 1fr 1fr; gap: 15px; display: grid; }
.meta-cell[data-v-fce78236] { flex-direction: column; gap: 5px; display: flex; }
.meta-cell .label[data-v-fce78236] { color: var(--receipt-text-color,#888); opacity: 0.6; letter-spacing: 0.05em; font-size: 0.65rem; }
.meta-cell .value[data-v-fce78236] { color: inherit; opacity: 0.9; font-size: 0.85rem; }
.items-table[data-v-fce78236] { margin-top: 30px; }
.table-header[data-v-fce78236] { color: var(--receipt-text-color,#888); opacity: 0.6; letter-spacing: 0.05em; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 10px; padding-bottom: 10px; font-size: 0.65rem; display: flex; }
.col[data-v-fce78236] { align-items: center; display: flex; }
.col.desc[data-v-fce78236] { flex: 1 1 0%; }
.col.qty[data-v-fce78236] { justify-content: center; width: 50px; }
.col.amt[data-v-fce78236] { justify-content: flex-end; width: 80px; }
.item-row[data-v-fce78236] { color: var(--receipt-text-color,#ccc); opacity: 0.8; padding: 8px 0px; font-size: 0.85rem; display: flex; }
.item-row .col.desc[data-v-fce78236] { color: var(--receipt-text-color,#fff); opacity: 1; }
.totals-section[data-v-fce78236] { flex-direction: column; gap: 10px; display: flex; }
.total-line[data-v-fce78236] { color: var(--receipt-text-color,#888); opacity: 0.7; justify-content: space-between; font-size: 0.85rem; display: flex; }
.highlight-discount[data-v-fce78236] { color: rgb(63, 185, 80); }
.grand-total-box[data-v-fce78236] { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; justify-content: space-between; align-items: center; margin-top: 15px; padding: 15px 20px; display: flex; }
.grand-total-box .label[data-v-fce78236] { color: var(--receipt-text-color,#888); opacity: 0.7; letter-spacing: 0.05em; font-size: 0.75rem; }
.grand-total-box .value[data-v-fce78236] { color: var(--receipt-accent-color,#fff); font-size: 1.4rem; font-weight: 700; }
.footer-barcode[data-v-fce78236] { opacity: 0.5; margin-top: 30px; }
.barcode-text[data-v-fce78236] { text-align: center; letter-spacing: 0.3em; color: var(--receipt-text-color,#888); opacity: 0.6; margin-top: 8px; font-size: 0.65rem; }
.linear-footer-text[data-v-fce78236] { text-align: center; margin-top: 25px; }
.linear-footer-text p[data-v-fce78236] { color: var(--receipt-text-color,#888); opacity: 0.7; letter-spacing: 0.1em; white-space: pre-wrap; margin: 2px 0px; font-size: 0.75rem; }
.receipt-item-wrapper[data-v-25c9ab13] { width: 100%; }
.crossword-preview[data-v-556df3ef] { flex-direction: column; gap: 12px; display: flex; position: relative; overflow: hidden; }
.crossword-bg-image[data-v-556df3ef], .crossword-bg-overlay[data-v-556df3ef] { pointer-events: none; }
.crossword-preview[data-v-556df3ef] > :not(.crossword-bg-image):not(.crossword-bg-overlay) { z-index: 1; position: relative; }
.crossword-title[data-v-556df3ef] { margin-bottom: 8px; font-weight: 700; }
.crossword-container[data-v-556df3ef] { flex-direction: column; align-items: center; display: flex; }
.empty-hint[data-v-556df3ef] { opacity: 0.5; text-align: center; padding: 20px; }
.crossword-board[data-v-556df3ef] { background: 0px 0px; flex-direction: column; display: flex; }
.cw-row[data-v-556df3ef] { width: 100%; display: flex; }
.cw-cell[data-v-556df3ef] { aspect-ratio: 1 / 1; box-sizing: border-box; border-style: solid; border-width: 1px; flex: 1 1 0%; justify-content: center; align-items: center; min-width: 0px; display: flex; position: relative; }
.cw-empty[data-v-556df3ef] { visibility: hidden; }
.cw-cell.style-solid[data-v-556df3ef] { border-radius: 4px; margin: 1px; }
.cw-cell.style-classic[data-v-556df3ef] { border-width: 0.5px; border-radius: 0px; margin: 0px; }
.cw-num[data-v-556df3ef] { font-size: 0.6rem; line-height: 1; position: absolute; top: 4%; left: 4%; }
.cw-char[data-v-556df3ef] { text-transform: uppercase; font-size: clamp(12px, 4vw, 20px); font-weight: 700; }
.cw-clues[data-v-556df3ef] { flex-direction: column; gap: 12px; width: 100%; margin-top: 16px; display: flex; }
.cw-clues-section[data-v-556df3ef] { flex-direction: column; gap: 6px; display: flex; }
.cw-clues-title[data-v-556df3ef] { opacity: 0.8; border-bottom: 1px dashed; margin-bottom: 4px; padding-bottom: 4px; font-size: 0.9rem; font-weight: 700; }
.cw-clue-item[data-v-556df3ef] { align-items: flex-start; gap: 8px; font-size: 0.9rem; line-height: 1.4; display: flex; }
.cw-clue-num[data-v-556df3ef] { border-radius: 9px; flex-shrink: 0; justify-content: center; align-items: center; min-width: 18px; height: 18px; margin-top: 2px; font-size: 0.75rem; font-weight: 700; display: inline-flex; }
.cw-clue-text[data-v-556df3ef] { word-break: break-all; }
.color-input-container[data-v-1cc5be84] { background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 6px; align-items: stretch; height: 36px; transition: 0.2s; display: inline-flex; overflow: hidden; }
.color-input-container[data-v-1cc5be84]:not(.no-text) { width: 100%; display: flex; }
.color-input-container[data-v-1cc5be84]:focus-within { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb,0, 122, 255), .1); }
.color-preview-wrapper[data-v-1cc5be84] { cursor: pointer; border-right: 1px solid var(--border-color); flex-shrink: 0; width: 36px; height: 36px; position: relative; }
.checkerboard[data-v-1cc5be84] { background-image: linear-gradient(45deg, rgb(238, 238, 238) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(238, 238, 238) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(238, 238, 238) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(238, 238, 238) 75%); background-position: 0px 0px, 0px 4px, 4px 4px, 4px 0px; background-size: 8px 8px; position: absolute; inset: 0px; }
.color-block[data-v-1cc5be84] { position: absolute; inset: 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px inset; }
.color-hex-input[data-v-1cc5be84] { color: var(--text-primary); flex: 1 1 0%; min-width: 0px; height: 100%; padding: 0px 10px; font-family: monospace; font-size: 0.9rem; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; }
.color-hex-input[data-v-1cc5be84]:focus { outline: none; }
.reset-btn[data-v-1cc5be84] { border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-top-style: none; border-right-style: none; border-bottom-style: none; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-image: initial; border-left: 1px solid var(--border-color); width: 30px; color: var(--text-secondary); cursor: pointer; opacity: 0.5; background: 0px 0px; justify-content: center; align-items: center; transition: 0.2s; display: flex; }
.reset-btn[data-v-1cc5be84]:hover:not(:disabled) { opacity: 1; color: var(--color-primary); background: rgba(0, 0, 0, 0.03); }
.reset-btn[data-v-1cc5be84]:disabled { cursor: not-allowed; opacity: 0.2; }
.no-text .color-hex-input[data-v-1cc5be84] { display: none; }
.no-text[data-v-1cc5be84] { flex: 0 0 auto; width: auto; }
.no-text .reset-btn svg[data-v-1cc5be84] { width: 13px; height: 13px; }
.font-selector-container { width: 100%; display: inline-block; position: relative; }
.font-selector-trigger { background: var(--bg-input,#fffc); border: 1px solid var(--border-color,#0000001a); width: 100%; height: 38px; color: var(--color-text,#1e293b); cursor: pointer; box-sizing: border-box; border-radius: 8px; outline: none; justify-content: space-between; align-items: center; padding: 0px 12px; font-family: inherit; font-size: 13px; transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1); display: flex; }
.dark-mode .font-selector-trigger { background: var(--bg-input,#1e293b99); border-color: var(--border-color,#ffffff14); color: var(--color-text,#f1f5f9); }
.font-selector-trigger:hover { border-color: var(--color-primary,#4a90e2); background: var(--bg-input-hover,#fffffff2); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 8px; }
.dark-mode .font-selector-trigger:hover { background: var(--bg-input-hover,#1e293bcc); box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 8px; }
.font-selector-container.is-open .font-selector-trigger { border-color: var(--color-primary,#4a90e2); box-shadow: rgba(74, 144, 226, 0.15) 0px 0px 0px 2px; }
.trigger-content { flex: 1 1 0%; align-items: center; gap: 8px; min-width: 0px; display: flex; }
.font-icon { opacity: 0.65; flex-shrink: 0; font-size: 15px; }
.selected-font-name { white-space: nowrap; text-overflow: ellipsis; text-align: left; font-weight: 500; overflow: hidden; }
.trigger-actions { flex-shrink: 0; align-items: center; gap: 6px; display: flex; }
.clear-action { opacity: 0.4; padding: 2px; font-size: 13px; transition: opacity 0.2s, transform 0.2s; }
.clear-action:hover { opacity: 0.85; color: rgb(239, 68, 68); transform: scale(1.15); }
.arrow-icon { opacity: 0.5; font-size: 15px; transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.font-selector-container.is-open .arrow-icon { transform: rotate(180deg); }
.font-dropdown-panel { z-index: 10001; color: rgb(30, 41, 59); box-sizing: border-box; background: rgba(255, 255, 255, 0.88); border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 12px; flex-direction: column; gap: 10px; max-width: calc(-24px + 100vw); max-height: 380px; padding: 12px; display: flex; position: fixed; box-shadow: rgba(0, 0, 0, 0.12) 0px 10px 30px, rgba(0, 0, 0, 0.04) 0px 1px 3px; }
.dark-mode .font-dropdown-panel { color: rgb(241, 245, 249); background: rgba(20, 24, 33, 0.96); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: rgba(0, 0, 0, 0.55) 0px 12px 36px, rgba(0, 0, 0, 0.3) 0px 2px 8px; }
.dropdown-header { text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid rgba(0, 0, 0, 0.05); justify-content: space-between; align-items: center; padding: 2px 4px 6px; font-size: 11px; font-weight: 700; display: flex; }
.dark-mode .dropdown-header { border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.clear-font-btn { color: rgb(239, 68, 68); cursor: pointer; background: rgba(239, 68, 68, 0.06); border: 1px solid rgba(239, 68, 68, 0.12); border-radius: 100px; align-items: center; gap: 4px; padding: 3px 8px; font-size: 10px; font-weight: 600; transition: 0.2s; display: flex; }
.clear-font-btn:hover { background: rgba(239, 68, 68, 0.12); border-color: rgba(239, 68, 68, 0.25); transform: scale(1.02); }
.dropdown-actions-toolbar { gap: 6px; padding: 0px 2px; display: flex; }
.action-btn { color: rgb(71, 85, 105); cursor: pointer; background: rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 8px; outline: none; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; height: 32px; font-size: 11px; font-weight: 500; transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1); display: flex; }
.action-btn:hover { color: var(--color-primary,#4a90e2); background: rgba(74, 144, 226, 0.08); border-color: rgba(74, 144, 226, 0.3); transform: translateY(-0.5px); }
.dark-mode .action-btn { color: rgb(148, 163, 184); background: rgba(255, 255, 255, 0.035); border-color: rgba(255, 255, 255, 0.06); }
.dark-mode .action-btn:hover { color: rgb(96, 165, 250); background: rgba(74, 144, 226, 0.12); border-color: rgba(74, 144, 226, 0.4); box-shadow: rgba(74, 144, 226, 0.15) 0px 0px 8px; }
.dropdown-preview-input-wrapper { box-sizing: border-box; background: rgba(0, 0, 0, 0.03); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 8px; align-items: center; height: 32px; padding: 0px 10px; display: flex; position: relative; }
.dark-mode .dropdown-preview-input-wrapper { background: rgba(0, 0, 0, 0.3); border-color: rgba(255, 255, 255, 0.06); }
.preview-input-icon { opacity: 0.5; flex-shrink: 0; justify-content: center; align-items: center; margin-right: 8px; font-size: 17px; display: inline-flex; }
.preview-input { color: inherit; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; flex: 1 1 0%; width: 100%; height: 100%; padding: 0px; font-size: 12px; }
.preview-input::placeholder { color: rgba(0, 0, 0, 0.35); }
.dark-mode .preview-input::placeholder { color: rgba(255, 255, 255, 0.3); }
.preview-input-clear { opacity: 0.4; cursor: pointer; flex-shrink: 0; justify-content: center; align-items: center; padding: 2px; font-size: 15px; transition: 0.2s; display: inline-flex; }
.preview-input-clear:hover { opacity: 0.85; color: rgb(239, 68, 68); }
.dropdown-body { flex-direction: column; flex: 1 1 0%; gap: 12px; max-height: 220px; padding-right: 4px; display: flex; overflow-y: auto; }
.scrollbar-thin::-webkit-scrollbar { width: 4px; }
.scrollbar-thin::-webkit-scrollbar-track { background: 0px 0px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.08); border-radius: 10px; }
.dark-mode .scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); }
.font-group-section { flex-direction: column; gap: 6px; display: flex; }
.font-group-label { color: rgb(100, 116, 139); text-transform: uppercase; letter-spacing: 0.06em; padding: 0px 4px; font-size: 9px; font-weight: 700; }
.dark-mode .font-group-label { color: rgb(148, 163, 184); }
.font-items-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; display: grid; }
.font-item-card { cursor: pointer; box-sizing: border-box; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(0, 0, 0, 0.03); border-radius: 8px; align-items: center; gap: 8px; padding: 6px 8px; transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1); display: flex; overflow: hidden; }
.dark-mode .font-item-card { color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.05); }
.font-item-card:hover { background: rgba(255, 255, 255, 0.85); border-color: rgba(74, 144, 226, 0.35); transform: translateY(-1px); }
.dark-mode .font-item-card:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.07); border-color: rgba(96, 165, 250, 0.35); }
.font-item-card.active { box-shadow: rgba(74, 144, 226, 0.25) 0px 4px 10px; background: var(--color-primary,#4a90e2) !important; color: rgb(255, 255, 255) !important; border-color: var(--color-primary,#4a90e2) !important; }
.dark-mode .font-item-card.active { color: rgb(96, 165, 250) !important; background: rgba(59, 130, 246, 0.12) !important; border-color: rgba(96, 165, 250, 0.55) !important; box-shadow: rgba(59, 130, 246, 0.25) 0px 0px 12px !important; }
.font-preview-char { white-space: nowrap; background: rgba(0, 0, 0, 0.04); border-radius: 5px; flex-shrink: 0; justify-content: center; align-items: center; width: 24px; height: 24px; font-size: 13px; font-weight: 500; transition: 0.2s; display: flex; }
.dark-mode .font-preview-char { color: rgba(255, 255, 255, 0.95); background: rgba(255, 255, 255, 0.06); }
.font-item-card.active .font-preview-char { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.18); }
.dark-mode .font-item-card.active .font-preview-char { color: rgb(96, 165, 250) !important; background: rgba(59, 130, 246, 0.25) !important; }
.font-preview-char.has-custom-text { white-space: normal; word-break: break-all; text-align: center; text-overflow: clip; width: auto; min-width: 24px; max-width: 90px; height: auto; min-height: 24px; padding: 4px 6px; font-size: 11px; line-height: 1.25; overflow: visible; }
.font-info { text-align: left; flex-direction: column; gap: 0px; min-width: 0px; display: flex; }
.font-name { white-space: nowrap; text-overflow: ellipsis; font-size: 10px; font-weight: 600; overflow: hidden; }
.font-family-name { opacity: 0.5; white-space: nowrap; text-overflow: ellipsis; font-size: 7.5px; overflow: hidden; }
.font-item-card.active .font-family-name { opacity: 0.75; }
.slide-fade-enter-active { transition: 0.22s cubic-bezier(0.16, 1, 0.3, 1); }
.slide-fade-leave-active { transition: 0.18s cubic-bezier(0.16, 1, 0.3, 1); }
.slide-fade-enter-from, .slide-fade-leave-to { opacity: 0; transform: translateY(6px) scale(0.97); }
@media (max-width: 576px) {
  .font-dropdown-panel.is-mobile-panel { z-index: 100000; padding-bottom: env(safe-area-inset-bottom,24px); position: fixed; inset: auto 0px 0px; box-shadow: rgba(0, 0, 0, 0.15) 0px -8px 24px; border-bottom-width: medium !important; border-bottom-style: none !important; border-bottom-color: currentcolor !important; border-radius: 18px 18px 0px 0px !important; width: 100% !important; max-width: 100% !important; max-height: 60vh !important; transform: none !important; }
  .font-selector-overlay-mask { z-index: 99999; background: rgba(0, 0, 0, 0.35); animation: 0.2s ease-out 0s 1 normal none running fadeIn; position: fixed; inset: 0px; }
  .dropdown-body { max-height: 38vh !important; }
  .slide-fade-enter-active, .slide-fade-leave-active { transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important; }
  .slide-fade-enter-from, .slide-fade-leave-to { opacity: 1 !important; transform: translateY(100%) !important; }
}
@keyframes fadeIn { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.image-uploader-wrapper[data-v-a70e4cea] { width: 100%; }
.image-uploader-wrapper.headless[data-v-a70e4cea] { width: auto; display: inline-block; }
.uploader-trigger[data-v-a70e4cea] { cursor: pointer; display: flex; position: relative; overflow: hidden; }
.uploader-trigger.is-processing[data-v-a70e4cea] { cursor: wait; pointer-events: none; }
.progress-overlay[data-v-a70e4cea] { backdrop-filter: blur(4px); z-index: 10; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; display: flex; position: absolute; inset: 0px; }
.progress-content[data-v-a70e4cea] { color: rgb(255, 255, 255); flex-direction: column; align-items: center; gap: 8px; display: flex; }
.progress-ring__circle[data-v-a70e4cea] { transform-origin: 50% center; transition: stroke-dashoffset 0.35s; transform: rotate(-90deg); }
.status-label[data-v-a70e4cea] { text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px; font-size: 0.75rem; font-weight: 700; }
.percent-label[data-v-a70e4cea] { opacity: 0.8; font-size: 0.65rem; }
.fade-enter-active[data-v-a70e4cea], .fade-leave-active[data-v-a70e4cea] { transition: opacity 0.3s; }
.fade-enter-from[data-v-a70e4cea], .fade-leave-to[data-v-a70e4cea] { opacity: 0; }
.hidden-pond[data-v-a70e4cea] { clip: rect(0px, 0px, 0px, 0px); border: 0px; width: 1px; height: 1px; margin: -1px; padding: 0px; position: absolute; overflow: hidden; }
.uploader-loading[data-v-a70e4cea] { background: var(--bg-input); border: 1px dashed var(--border-color); color: var(--text-secondary); border-radius: 8px; justify-content: center; align-items: center; gap: 10px; padding: 20px; font-size: 0.85rem; display: flex; }
.spin[data-v-a70e4cea] { animation: 1s linear 0s infinite normal none running spin-a70e4cea; }
@keyframes spin-a70e4cea { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
[data-v-a70e4cea] .filepond--root { margin-bottom: 0px; font-family: inherit; }
[data-v-a70e4cea] .filepond--panel-root { background-color: var(--bg-input); border: 1px dashed var(--border-color); }
[data-v-a70e4cea] .filepond--drop-label { color: var(--text-primary); cursor: pointer; }
.error-state[data-v-a70e4cea] { flex-direction: column; align-items: center; gap: 12px; display: flex; }
.error-message[data-v-a70e4cea] { color: rgb(255, 77, 79); font-weight: 500; }
.retry-button[data-v-a70e4cea] { background: var(--accent-color,#1890ff); color: rgb(255, 255, 255); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; padding: 6px 16px; font-size: 0.8rem; transition: opacity 0.2s; }
.retry-button[data-v-a70e4cea]:hover { opacity: 0.9; }
a:not(.btn) { color: var(--color-primary); border-bottom: 1px dashed rgba(0, 0, 0, 0); text-decoration: none; transition: color 0.2s, background-color 0.2s, border-bottom-color 0.2s; }
a:not(.btn):hover { color: var(--color-primary-hover,#006ae6); border-bottom-color: var(--color-primary-hover,#006ae6); background: var(--color-primary-bg); border-radius: 2px; }
a:not(.btn):active { opacity: 0.8; }
.preview-items-container:has(.is-editing-wrapper) { overflow: visible !important; }
div.preview-item-wrapper.has-title-floating h3.preview-card-title, div.preview-item-wrapper.has-title-floating .preview-card-title, div.preview-item-wrapper.has-title-floating .collage-title-container, div.preview-item-wrapper.has-title-floating .grid-title-container, div.preview-item-wrapper.has-title-floating .todo-title, div.preview-item-wrapper.has-title-floating .rpg-title, div.preview-item-wrapper.has-title-floating .qr-title, div.preview-item-wrapper.has-title-floating .crossword-title, div.preview-item-wrapper.has-title-floating .ticket-title, div.preview-item-wrapper.has-title-floating .showcase-info h3, div.preview-item-wrapper.has-title-floating [data-item-key="title"] { display: none !important; }
#driver-highlight-element { z-index: 2147483645 !important; }
.driver-popover, #driver-highlight-element { z-index: 2147483647 !important; }
.driver-popover { background-color: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px; }
.driver-popover-title { color: var(--color-primary); font-weight: 800; }
.driver-popover-description { color: var(--text-secondary); line-height: 1.5; }
.driver-popover-btn { background: var(--bg-input); border: 1px solid var(--border-input); color: var(--text-primary); text-shadow: none; border-radius: 6px; }
.driver-popover-next-btn { background: var(--color-primary); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }
.driver-popover-next-btn:hover { background: var(--color-primary-hover); }
.html-mode-only { display: none !important; }
.spoiler-blur { filter: blur(10px); user-select: none; cursor: pointer; transition: filter 0.3s; position: relative; }
.spoiler-blur:hover { filter: blur(5px); }
.spoiler-blur.revealed, .spoiler-blur.is-editing-rich-text { user-select: text; cursor: text; filter: none !important; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: 0px 0px; }
::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, 0.3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, 0.6); }
* { scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, 0.3) transparent; }
:root { --g-font-align: center; --g-font-offset-y: 0px; --bg-editor: #f5f7fa; --bg-preview-pane: #eef2f7; --bg-preview-page: #fff; --bg-card: #fff; --bg-primary: var(--bg-card); --bg-input: #fff; --bg-section: #fdfdfd; --bg-inset: #f0f2f5; --bg-hover: #f1f5f9; --bg-subtle: #f8fafc; --bg-active: #e0e7ff; --bg-secondary: var(--bg-section); --border-color: #e1e8f0; --border-light: #e2e8f0; --border-input: #d1d5db; --border-dashed: #cbd5e0; --shadow-light: #0000000d; --shadow-medium: #0000001a; --text-primary: #1a1c23; --text-secondary: #64748b; --text-label: #475569; --text-tertiary: #94a3b8; --text-placeholder: #94a3b8; --text-muted: var(--text-secondary); --text-on-primary: #fff; --text-action: #007aff; --color-primary: #007aff; --color-primary-hover: #006ae6; --color-primary-text: var(--color-primary); --color-primary-bg: #007aff0d; --color-danger: #ff4757; --color-danger-hover: #e03c48; --color-secondary: #007aff; --color-secondary-hover: #636366; --header-height: 55px; --transition-speed: .3s; --transition-short: .2s; --layer-panel-width: 280px; --inspector-panel-width: 380px; --inspector-ui-opacity: 1; --preview-gap: 20px; --g-theme-primary: var(--color-primary); --g-theme-accent: var(--text-action); --g-theme-background: var(--bg-preview-page); --g-theme-text: var(--text-primary); --g-comp-bg-color: var(--bg-card); --g-comp-text-color: var(--text-primary); --g-comp-opacity: 1; --g-comp-border-radius: 12px; --g-comp-text-align: left; --g-comp-line-height: 1.5; --g-comp-letter-spacing: 0px; --g-comp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --g-comp-title-font-family: var(--g-comp-font-family); --g-comp-title-font-weight: 700; --g-comp-title-font-style: normal; --g-comp-title-font-size: 1.1em; --g-comp-content-font-size: .95em; --g-comp-text-stroke: 0px transparent; --g-comp-padding: 15px; --g-border-width: 1px; --g-border-color: transparent; --g-border-shadow-offset: 4px; --g-border-shadow-color: #000; --bg-modal-overlay: #0006; --bg-image-thumb: #f1f5f9; --bg-image-upload-hover: #eef5ff; --rt-toolbar-bg: #fff; --rt-toolbar-text: #333; --rt-toolbar-border: #e0e0e0; --rt-toolbar-btn-hover: #f0f0f0; --rt-toolbar-btn-active: #e6f7ff; }
html.dark-mode { --bg-editor: #1a1c22; --bg-preview-pane: #0f1115; --bg-preview-page: #1a1c22; --bg-card: #23272f; --bg-primary: var(--bg-card); --bg-input: #1a1c22; --bg-section: #1a1c22; --bg-inset: #0f1115; --bg-hover: #2d313a; --bg-subtle: #1a1c22; --bg-active: #1e293b; --border-color: #2d313a; --border-light: #2d313a; --border-input: #3a3f4b; --border-dashed: #4a5568; --shadow-light: #0000004d; --shadow-medium: #00000080; --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-label: #cbd5e0; --text-tertiary: #64748b; --text-placeholder: #64748b; --text-on-primary: #fff; --text-action: #3498db; --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-primary-text: var(--color-primary); --bg-modal-overlay: #000000b3; --bg-image-thumb: #2d313a; --bg-image-upload-hover: #1e293b; --rt-toolbar-bg: #2d313a; --rt-toolbar-text: #f8fafc; --rt-toolbar-border: #4a5568; --rt-toolbar-btn-hover: #3d4452; --rt-toolbar-btn-active: #1e293b; --g-theme-accent: var(--text-action); --g-theme-background: var(--bg-preview-page); --g-theme-text: var(--text-primary); --g-comp-bg-color: var(--bg-card); --g-comp-text-color: var(--text-primary); }
* { box-sizing: border-box; }
img { content-visibility: auto; contain-intrinsic-size: 1px; }
#storage-warning-banner, #page-limit-warning-banner { z-index: auto; box-shadow: none; display: block; position: static; top: auto; }
.app-logo { width: auto; height: 62px; display: block; }
.theme-switch-wrapper { align-items: center; gap: 10px; display: flex; }
body.driverjs-active { position: static !important; overflow: hidden !important; }
.layer-list { flex-grow: 1; padding: 0px 15px 10px; overflow-y: auto; }
.module-library-container { background-color: var(--bg-section); border-top: 1px solid var(--border-color); padding-top: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 10; flex-shrink: 0; }
.library-tabs { grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 5px; margin-bottom: 10px; padding-bottom: 5px; display: grid; }
.selected-sub-tabs { border-bottom: 1px solid var(--border-color); gap: 5px; margin-bottom: 15px; padding-bottom: 2px; display: flex; }
.selected-sub-tab-btn { color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-width: medium medium 2px; border-style: none none solid; border-color: currentcolor currentcolor rgba(0, 0, 0, 0); border-image: initial; border-radius: 6px 6px 0px 0px; flex: 1 1 0%; padding: 8px; font-size: 0.9rem; font-weight: 600; transition: color 0.2s, background-color 0.2s, border-bottom-color 0.2s; }
.selected-sub-tab-btn:hover { background-color: var(--bg-input); color: var(--text-primary); }
.selected-sub-tab-btn.active { color: var(--color-primary-text); border-bottom-color: var(--color-primary); background-color: var(--bg-editor); }
.inspector-sub-content { animation: 0.2s ease 0s 1 normal none running fadeIn; }
@media (max-width: 360px) {
  .library-tabs { gap: 3px; }
  .lib-tab { padding: 4px 2px; font-size: 0.75rem; }
}
.library-tabs::-webkit-scrollbar { display: none; }
.lib-tab { color: var(--text-secondary); cursor: pointer; white-space: nowrap; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; padding: 4px 8px; font-size: 0.8rem; font-weight: 600; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.lib-tab:hover { background-color: var(--bg-input); }
.lib-tab.active { background-color: var(--bg-image-upload-hover); color: var(--color-primary-text); }
.social-images-grid { display: grid; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; }
.library-grid { grid-template-columns: repeat(3, 1fr); align-content: start; gap: 8px; min-height: 128px; animation: 0.2s ease 0s 1 normal none running fadeIn; display: none; }
.library-grid.active { display: grid; }
.lib-btn { background-color: var(--bg-editor); border: 1px solid var(--border-input); cursor: pointer; color: var(--text-primary); border-radius: 8px; flex-direction: column; justify-content: center; align-items: center; gap: 4px; height: 60px; padding: 8px 4px; transition: color 0.2s, background-color 0.2s, transform 0.2s; display: flex; }
.lib-btn:hover { border-color: var(--color-primary); background-color: var(--bg-input); transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 5px; }
.lib-btn .iconify { color: var(--text-secondary); font-size: 1.4rem; }
.lib-btn:hover .iconify { color: var(--color-primary-text); }
.lib-btn span:last-child { font-size: 0.75rem; }
.inspector-scroll-container { will-change: scroll-position; overscroll-behavior: contain; flex-direction: column; flex-grow: 1; width: 100%; max-width: 100%; padding: 0px; display: flex; overflow-y: auto; overflow-x: hidden !important; }
.editor-section, .editor-item, .history-item, .theme-preset-grid { backface-visibility: hidden; perspective: 1000px; transform: translate(0px, 0px); }
.inspector-tab-content { box-sizing: border-box; width: 100%; max-width: 100%; padding: 20px 20px 80px; display: none; overflow-x: hidden; }
.history-item, .export-option p { word-break: break-word; overflow-wrap: break-word; white-space: normal; min-width: 0px; }
.inspector-footer { padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: var(--bg-section); border-top: 1px solid var(--border-color); z-index: 50; flex-shrink: 0; justify-content: space-between; align-items: center; transition: padding 0.2s; display: flex; box-shadow: rgba(0, 0, 0, 0.03) 0px -2px 10px; }
.inspector-footer span { align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; display: flex; }
.global-sub-tabs { background: var(--bg-editor); z-index: 20; gap: 10px; padding: 10px 15px 0px; display: flex; position: static; top: 0px; }
.sub-tab-btn { text-align: center; border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; background: var(--bg-input); cursor: pointer; color: var(--text-secondary); border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-radius: 8px 8px 0px 0px; flex: 1 1 0%; padding: 8px; font-size: 0.85rem; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.sub-tab-btn.active { background: var(--bg-editor); color: var(--color-primary-text); border-top: 2px solid var(--color-primary); z-index: 21; margin-bottom: -1px; font-weight: 700; box-shadow: rgba(0, 0, 0, 0.02) 0px -2px 5px; }
.global-sub-content { border-top: 1px solid var(--border-input); padding-top: 20px; display: none; }
.global-sub-content.active { animation: 0.2s ease 0s 1 normal none running fadeIn; display: block; }
.inspector-tabs { border-bottom: 1px solid var(--border-color); flex-shrink: 0; display: flex; }
.inspector-tab-btn { cursor: pointer; color: var(--text-secondary); transition: color var(--transition-short), background-color var(--transition-short), border-bottom-color var(--transition-short); background: 0px 0px; border-width: medium medium 2px; border-style: none none solid; border-color: currentcolor currentcolor rgba(0, 0, 0, 0); border-image: initial; flex: 1 1 0%; padding: 12px 10px; font-weight: 600; }
.inspector-tab-btn:hover { background-color: var(--bg-input); }
.inspector-tab-btn.active { color: var(--color-primary-text); border-bottom-color: var(--color-primary); }
.inspector-tab-content { flex-grow: 1; padding: 25px; display: none; overflow-y: auto; }
.inspector-tab-content.active { display: block; }
.workspace-tabs-container { background: var(--bg-editor); border-bottom: 1px solid var(--border-color); z-index: 150; scrollbar-width: none; flex-shrink: 0; align-items: flex-end; gap: 4px; width: 100%; height: 42px; padding: 0px 15px; display: flex; position: sticky; top: 0px; overflow-x: auto; }
.workspace-tabs-container::-webkit-scrollbar { display: none; }
.workspace-tab { background: var(--bg-input); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; color: var(--text-secondary); cursor: pointer; user-select: none; white-space: nowrap; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-radius: 8px 8px 0px 0px; flex: 0 0 auto; align-items: center; gap: 8px; min-width: 120px; max-width: 200px; height: 34px; padding: 4px 12px; font-size: 0.85rem; transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s; display: flex; position: relative; }
.workspace-tab.active { background: var(--bg-preview-pane); color: var(--color-primary); border-bottom: 1px solid var(--bg-preview-pane); z-index: 5; margin-bottom: -1px; font-weight: 700; box-shadow: rgba(0, 0, 0, 0.02) 0px -2px 5px; }
.tab-rename-input { border: 1px solid var(--color-primary); background: var(--bg-input); color: var(--color-primary); border-radius: 4px; outline: none; width: 100px; padding: 2px 6px; font-size: 0.85rem; font-weight: 600; box-shadow: rgba(0, 122, 255, 0.1) 0px 0px 0px 2px; }
.workspace-tab .tab-title { white-space: nowrap; text-overflow: ellipsis; flex-grow: 1; overflow: hidden; }
.workspace-tab .tab-close { opacity: 0.6; border-radius: 50%; justify-content: center; align-items: center; width: 18px; height: 18px; font-size: 12px; display: flex; }
.workspace-tab .tab-close:hover { color: var(--color-danger); opacity: 1; background: rgba(255, 59, 48, 0.1); }
.workspace-add-btn { cursor: pointer; width: 32px; height: 32px; color: var(--text-secondary); border-radius: 6px; flex: 0 0 auto; justify-content: center; align-items: center; margin-bottom: 2px; display: flex; }
.workspace-add-btn:hover { background: var(--bg-input); color: var(--color-primary); }
.res-page-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 10px; flex-direction: column; justify-content: space-between; min-height: 120px; padding: 15px; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; display: flex; position: relative; }
.res-page-card:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.res-page-info { flex-grow: 1; }
.res-page-name { color: var(--text-primary); margin-bottom: 5px; font-size: 0.95rem; font-weight: 700; }
.res-page-meta { color: var(--text-secondary); font-size: 0.75rem; }
.res-page-actions { border-top: 1px solid var(--border-color); gap: 8px; margin-top: 10px; padding-top: 10px; display: flex; }
.preview-wrapper { transform-origin: center top; width: 100%; font-size: calc(16px * var(--g-comp-scale,1)); flex-shrink: 0; transition: width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), font-size 0.3s; position: relative; }
.layer-item-container { margin-bottom: 5px; }
.layer-list .layer-item { cursor: pointer; transition: background-color var(--transition-short), border-color var(--transition-short); background-color: var(--bg-section); border: 1px solid var(--border-color); border-radius: 6px; align-items: center; gap: 4px; margin-bottom: 4px; padding: 8px 10px; display: flex; }
.layer-list .layer-item:hover { background-color: var(--bg-input); border-color: var(--text-secondary); }
.layer-list .layer-item.selected { background-color: var(--bg-image-upload-hover); border-color: var(--color-primary); border-left-width: 4px; padding-left: 7px; font-weight: 600; }
html.dark-mode .preview-item-wrapper.selected, html.dark-mode .preview-header.selected { outline: rgb(93, 173, 226) solid 2px; box-shadow: rgba(93, 173, 226, 0.3) 0px 0px 15px; }
.layer-list .layer-item .layer-icon { color: var(--text-secondary); font-size: 1.1em; }
.layer-list .layer-item .layer-name { white-space: nowrap; text-overflow: ellipsis; flex-grow: 1; padding-left: 4px; overflow: hidden; }
.layer-actions { align-items: center; gap: 4px; display: flex; }
.layer-actions .btn-icon { width: 26px; height: 26px; color: var(--text-secondary); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; font-size: 1.1rem; }
.layer-actions .btn-icon:hover { background: var(--border-color); }
.layer-item.is-hidden .layer-name, .layer-item.is-hidden .layer-icon { opacity: 0.5; }
.layer-item.is-hidden .layer-name { text-decoration: line-through; }
.inspector-state { display: none; }
.inspector-state.active { animation: 0.3s ease 0s 1 normal none running fadeIn; display: block; }
.inspector-placeholder { text-align: center; color: var(--text-placeholder); padding: 40px 10px; font-style: italic; }
.inspector-placeholder .iconify { margin-bottom: 10px; font-size: 2rem; }
.preview-item-wrapper.selected, .preview-header.selected { outline: 2px solid var(--color-primary); z-index: 999; pointer-events: none; }
.preview-item-wrapper.is-hidden { display: none; }
.preview-wrapper { width: 100%; min-height: fit-content; box-shadow: 0 4px 16px var(--shadow-medium); font-family: var(--active-card-font-family); border-radius: 20px; flex-shrink: 0; padding: 20px 20px 40px; transition: width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), max-width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); position: relative; overflow: visible; }
.preview-wrapper.is-drag-over { outline: 4px dashed var(--color-primary); outline-offset: 5px; background-color: rgba(0, 122, 255, 0.05); transform: scale(1.02); }
.preview-overlay { display: none; }
.preview-header, .preview-items-container { z-index: 2; overflow-wrap: break-word; box-sizing: border-box; width: 100%; position: relative; }
[data-state-key], [data-item-key], [data-separator-text-key], .tag-pill span[data-tag-id] { position: relative; }
[data-state-key]:hover, [data-item-key]:hover, [data-separator-text-key]:hover, .tag-pill span[data-tag-id]:hover { outline: 1px dashed var(--color-primary); cursor: text; }
[contenteditable="true"] { outline: 2px solid var(--color-primary); background-color: rgba(0, 122, 255, 0.1); border-radius: 4px; box-shadow: rgba(0, 122, 255, 0.5) 0px 0px 8px; }
.btn { cursor: pointer; transition: background-color var(--transition-short) ease, transform var(--transition-short) ease, box-shadow var(--transition-short) ease; text-align: center; width: 100%; color: var(--text-on-primary); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; padding: 10px 16px; font-size: 14px; font-weight: 600; display: inline-block; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; }
.btn-primary { background: var(--color-primary); }
.btn-success { color: rgb(255, 255, 255); background: rgb(52, 199, 89); }
.btn-success:hover:not(:disabled) { background: rgb(40, 167, 69); box-shadow: rgba(52, 199, 89, 0.3) 0px 4px 8px; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); box-shadow: rgba(0, 122, 255, 0.3) 0px 4px 8px; }
.btn-secondary { background: var(--color-secondary); }
.btn-secondary:hover:not(:disabled) { background: var(--color-secondary-hover); box-shadow: rgba(142, 142, 147, 0.3) 0px 4px 8px; }
.btn-danger { background: var(--color-danger); }
.btn-danger:hover:not(:disabled) { background: var(--color-danger-hover); box-shadow: rgba(255, 71, 87, 0.3) 0px 4px 8px; }
.btn-default { background-color: var(--bg-input); border: 1px solid var(--border-input); color: var(--text-secondary); }
.btn-default:hover:not(:disabled) { background-color: var(--border-color); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px; }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { cursor: not-allowed; opacity: 0.6; background: rgb(153, 153, 153); }
.btn-small { padding: 6px 10px; font-size: 0.9rem; }
.btn-icon { justify-content: center; align-items: center; width: auto; padding: 6px 10px; font-size: 0.9rem; display: flex; }
.editor-section { background: var(--bg-editor); border: 1px solid rgba(128, 128, 128, 0.1); border-radius: 14px; width: 100%; margin: 0px 0px 14px; padding: 0px; transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px; }
.editor-section:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 16px; }
fieldset.editor-section { min-width: 0px; margin-inline: 0px; padding-block: 0px; padding-inline: 0px; }
.editor-section legend { width: 100%; color: var(--text-primary); cursor: pointer; box-sizing: border-box; float: none; border-bottom: 1px solid rgba(128, 128, 128, 0.08); border-left: 4px solid var(--color-primary); background: rgba(128, 128, 128, 0.03); justify-content: space-between; align-items: center; padding: 10px 14px; font-size: 0.9rem; font-weight: 700; transition: background-color 0.2s, border-left-color 0.2s; display: flex; }
.editor-section legend:hover { color: var(--color-primary); background: var(--bg-input); }
.editor-section legend::after { content: "▼"; color: var(--text-secondary); font-size: 0.7rem; transition: transform 0.2s; transform: rotate(0deg); }
.editor-section.collapsed legend::after { transform: rotate(-90deg); }
.editor-section.collapsed legend { border-bottom-color: rgba(0, 0, 0, 0); }
.editor-section.collapsed .section-content { display: none; }
.editor-section .section-content { background: var(--bg-card); padding: 16px; }
.advanced-toggle-label { color: var(--text-action); font-size: 0.85rem; font-weight: 400; }
.advanced-setting { animation: 0.3s ease 0s 1 normal none running fadeIn; display: block; }
.tab-btn.advanced-setting { display: inline-flex; }
.section-header { justify-content: space-between; align-items: center; margin-bottom: 15px; display: flex; }
.section-header h4 { margin: 0px; }
.form-group { margin-bottom: 15px; }
.form-group label { color: var(--text-label); margin-bottom: 6px; font-size: 0.9rem; font-weight: 600; display: block; }
.form-group input[type="text"], .form-group input[type="number"], .form-group input[type="file"], .form-group select, .form-group textarea { background-color: var(--bg-input); border: 1px solid var(--border-input); width: 100%; color: var(--text-primary); overflow-wrap: break-word; border-radius: 8px; max-width: 100%; padding: 10px 12px; font-size: 14px; transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 3px inset; }
.form-group input[type="text"]:hover, .form-group textarea:hover, .form-group select:hover { background-color: var(--bg-input); border-color: rgba(128, 128, 128, 0.3); }
.form-group input[type="text"]:focus, .form-group input[type="number"]:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--color-primary); outline: none; box-shadow: rgba(0, 122, 255, 0.2) 0px 0px 0px 3px; }
.form-group textarea { resize: vertical; min-height: 80px; }
.input-group { background-color: var(--bg-input); border: 1px solid var(--border-input); border-radius: 8px; align-items: stretch; gap: 0px; height: 40px; transition: border-color 0.2s, box-shadow 0.2s; display: flex; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 3px inset; }
.input-group:hover { border-color: rgba(128, 128, 128, 0.3); }
.input-group:focus-within { background-color: var(--bg-editor); border-color: var(--color-primary); box-shadow: rgba(0, 122, 255, 0.15) 0px 0px 0px 3px; }
.input-group .btn-small { color: var(--text-secondary); width: 36px !important; height: 100% !important; box-shadow: none !important; background-color: rgba(0, 0, 0, 0) !important; border-width: medium medium medium 1px !important; border-style: none none none solid !important; border-color: currentcolor currentcolor currentcolor rgba(128, 128, 128, 0.2) !important; border-image: initial !important; border-radius: 0px !important; margin: 0px !important; }
.input-group .btn-small:hover { color: var(--color-primary); background-color: rgba(0, 0, 0, 0.05) !important; }
.input-group.simple:focus-within { box-shadow: none; }
.input-group input[type="range"] { cursor: pointer; appearance: none; background: var(--border-dashed); border-radius: 3px; outline: none; flex-grow: 1; min-width: 100px; height: 6px; margin: 0px 12px; }
.input-group input[type="range"]::-webkit-slider-thumb { appearance: none; background: var(--color-primary); cursor: pointer; border-radius: 50%; width: 16px; height: 16px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px; }
.stepper-group { align-items: center; gap: 5px; display: flex; }
.stepper-group input[type="range"] { flex-grow: 1; }
.btn-stepper { background-color: var(--bg-editor); border: 1px solid var(--border-input); width: 28px; height: 28px; color: var(--text-primary); cursor: pointer; border-radius: 50%; flex-shrink: 0; justify-content: center; align-items: center; padding: 0px; font-size: 1rem; transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s; display: flex; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px; }
.btn-stepper:hover { border-color: var(--color-primary); background-color: var(--color-primary) !important; color: rgb(255, 255, 255) !important; }
.btn-stepper:active { background: var(--bg-image-upload-hover); transform: scale(0.9); }
@media (max-width: 1024px) {
  .btn-stepper { display: flex !important; }
  .input-group.simple input[type="range"] { margin: 0px 8px; }
}
.radio-group { background: var(--bg-input); border: 1px solid var(--border-input); box-sizing: border-box; border-radius: 8px; gap: 2px; width: 100%; padding: 3px; display: flex; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px inset; }
.radio-group label { text-align: center; cursor: pointer; color: var(--text-secondary); white-space: normal; word-break: break-word; border: 1px solid rgba(0, 0, 0, 0); border-radius: 6px; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; margin: 0px; padding: 7px 4px; font-size: 0.85rem; font-weight: 500; transition: color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; }
.radio-group input[type="radio"] { display: none; }
.radio-group label:has(input:checked) { background: var(--bg-card); color: var(--color-primary-text); border-color: rgba(0, 0, 0, 0.05); font-weight: 600; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 5px; }
.radio-group label:not(:has(input:checked)):hover { color: var(--text-primary); background: rgba(0, 0, 0, 0.03); }
.radio-group.wrap { flex-wrap: wrap; }
.color-control-row { flex-wrap: wrap; align-items: flex-start; gap: 15px; min-width: 0px; display: flex; }
.color-control-group { flex: 1 1 0%; min-width: 0px; }
.color-control-row { flex-direction: column !important; gap: 12px !important; }
.color-control-group { flex: 0 0 auto !important; width: 100% !important; }
.input-group.simple { box-sizing: border-box; width: 100%; }
.checkbox-group { cursor: pointer; align-items: center; gap: 8px; font-weight: 400; display: flex; }
.border-apply-to-list .checkbox-group { padding-left: 20px; }
.border-apply-to-list .checkbox-group.is-parent { padding-left: 0px; }
.checkbox-group label { cursor: pointer; align-items: center; gap: 8px; margin: 0px; font-weight: 400; display: flex; }
.apply-tag-cloud { flex-wrap: wrap; gap: 6px; margin-top: 5px; display: flex; }
.apply-tag-item { cursor: pointer; background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border-input); user-select: none; text-align: center; border-radius: 6px; flex-grow: 1; justify-content: center; align-items: center; min-width: 60px; padding: 4px 10px; font-size: 0.8rem; transition: color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; }
.apply-tag-item:hover { background: var(--bg-image-thumb); }
.apply-tag-item input[type="checkbox"] { display: none; }
.apply-tag-item:has(input:checked) { background: var(--bg-image-upload-hover); color: var(--color-primary-text); border-color: var(--color-primary); font-weight: 600; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px; }
hr.separator { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 20px 0px; }
.tabs { border-bottom: 1px solid var(--border-color); white-space: nowrap; overscroll-behavior: contain; scrollbar-width: none; flex-wrap: nowrap; margin-bottom: 15px; display: flex; overflow-x: auto; }
.tabs::-webkit-scrollbar { display: none; }
.tab-btn { cursor: pointer; color: var(--text-secondary); white-space: nowrap; background: 0px 0px; border-width: medium medium 2px; border-style: none none solid; border-color: currentcolor currentcolor rgba(0, 0, 0, 0); border-image: initial; flex: 0 0 auto; padding: 8px 12px; font-weight: 600; }
.tab-btn.active { color: var(--text-primary); border-bottom-color: var(--color-primary); }
.tab-content { display: none; }
.tab-content.active { display: block; }
.gradient-controls { grid-template-columns: 1fr; gap: 15px; display: grid; }
.gradient-angle-control { grid-column: 1 / -1; }
.preview-header { text-align: center; transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease; overflow-wrap: break-word; border-radius: 16px; padding: 30px 15px; position: relative; overflow: visible; }
.preview-header.layout-card { text-align: left; gap: 20px; display: flex; }
.preview-header.layout-card .info-left-col { flex-direction: column; flex: 0 0 100px; align-items: center; display: flex; position: relative; }
.preview-header.layout-card .info-right-col { flex: 1 1 0%; }
.preview-header.layout-card #preview-nickname { text-align: center; margin-top: 8px; }
.preview-header.layout-card #preview-subtitle { border-bottom: 1px solid var(--border-color); padding-bottom: 8px; }
.preview-header.layout-card .tags-container { justify-content: flex-start; margin-top: 12px; }
#preview-avatar-wrapper { position: relative; }
#preview-avatar { border: 4px solid var(--bg-preview-page); width: 90px; height: 90px; box-shadow: 0 4px 12px var(--shadow-light); object-fit: cover; transition: box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease; cursor: pointer; z-index: 5; background-color: rgb(255, 255, 255); position: relative; }
#preview-avatar-wrapper { transition: box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease; z-index: 20; line-height: 0; display: inline-block; position: relative; }
#avatar-status-badge { width: 24px; height: 24px; box-shadow: none; z-index: 10; text-shadow: rgba(0, 0, 0, 0.4) 0px 1px 3px; background-color: rgba(0, 0, 0, 0); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; font-size: 18px; display: flex; position: absolute; bottom: 5%; right: 5%; }
#avatar-status-badge.badge-red-dot { color: rgb(255, 255, 255); width: auto; min-width: 20px; height: 20px; text-shadow: none; background-color: rgb(255, 59, 48); border: 2px solid rgb(255, 255, 255); border-radius: 10px; padding: 0px 4px; font-size: 10px; font-weight: 700; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 6px; }
.layout-options-grid { grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)) !important; gap: 4px !important; width: 100% !important; display: grid !important; }
.layout-options-grid label { white-space: normal !important; word-break: break-word !important; justify-content: center !important; align-items: center !important; min-height: 40px !important; display: flex !important; }
.layout-floating-mode .layout-options-grid { grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)) !important; }
div[data-v-2f3fd83c].radio-group.wrap.layout-options-grid { grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)) !important; gap: 4px !important; width: 100% !important; min-width: 0px !important; max-width: 100% !important; display: grid !important; }
div[data-v-2f3fd83c].radio-group.wrap.layout-options-grid > label { white-space: normal !important; word-break: break-word !important; flex: 0 0 auto !important; justify-content: center !important; align-items: center !important; min-width: 55px !important; max-width: none !important; min-height: 40px !important; display: flex !important; }
.timeline-event-editor { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; align-items: flex-start; margin-bottom: 10px; display: flex; overflow: hidden; }
.timeline-event-editor .card-drag-handle { cursor: grab; background: var(--bg-section); border-right: 1px solid var(--border-color); width: 30px; color: var(--text-placeholder); flex-shrink: 0; justify-content: center; align-self: stretch; align-items: center; display: flex; }
.timeline-event-editor .editor-card-content { flex-grow: 1; min-width: 0px; padding: 10px; }
.timeline-event-editor .card-delete-btn { flex-shrink: 0; width: 32px; height: 32px; margin: 5px; padding: 0px; }
.unified-thumb { background: var(--bg-image-thumb); border: 1px solid var(--border-input); cursor: pointer; border-radius: 6px; flex-shrink: 0; justify-content: center; align-items: center; width: 44px; min-width: 44px; height: 44px; display: flex; position: relative; overflow: hidden; }
.unified-thumb img { object-fit: cover; width: 100%; height: 100%; }
.unified-thumb .iconify { color: rgb(204, 204, 204); font-size: 20px; }
.unified-content input[type="text"], .unified-content textarea, .unified-content select { background: 0px 0px; border: 1px solid rgba(0, 0, 0, 0); border-radius: 4px; width: 100%; padding: 6px; font-size: 0.9em; transition: border-color 0.2s, box-shadow 0.2s; }
.unified-content input[type="text"]:hover, .unified-content textarea:hover { background: var(--bg-editor); border-color: var(--border-input); }
.unified-content input[type="text"]:focus, .unified-content textarea:focus { background: var(--bg-editor); border-color: var(--color-primary); outline: none; box-shadow: rgba(0, 122, 255, 0.1) 0px 0px 0px 2px; }
#preview-nickname { color: var(--text-primary); transition: color var(--transition-speed) ease; margin: 12px 0px 5px; font-size: 1.6rem; font-weight: 700; }
#preview-subtitle { color: var(--text-primary); opacity: 0.7; transition: color var(--transition-speed) ease, margin var(--transition-speed) ease; margin: 0px 0px 8px; font-size: 1rem; font-weight: 400; }
#preview-bio { color: var(--text-primary); opacity: 0.8; transition: color var(--transition-speed) ease; white-space: pre-wrap; margin: 0px; font-size: 0.9rem; line-height: 1.4; }
#preview-subtitle:empty, #preview-bio:empty { display: none; }
.tags-container { flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 15px; display: flex; }
.tag-pill { white-space: nowrap; height: auto; min-height: 28px; transition: background-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease; cursor: grab; border-radius: 16px; flex-shrink: 0; justify-content: center; align-items: center; gap: 6px; padding: 4px 12px; font-size: 0.8rem; font-weight: 600; line-height: normal; display: inline-flex; position: relative; overflow: visible; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; }
.tag-pill > span:not(.icon-view-wrapper) { display: inline-block; }
.editor-item { background: var(--bg-editor); border: 1px solid var(--border-color); box-shadow: 0 2px 4px var(--shadow-light); transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease; border-radius: 8px; margin-bottom: 15px; }
.sortable-ghost { border-radius: 12px; transition: opacity 0.2s, transform 0.2s, border-color 0.2s; transform: scale(0.95); opacity: 0.2 !important; background: var(--bg-input) !important; border: 2px dashed var(--color-primary) !important; box-shadow: none !important; }
.preview-item-wrapper.sortable-drag { background: var(--bg-card); cursor: grabbing; opacity: 1 !important; z-index: 10000 !important; transition: none !important; transform: scale(1.05) !important; box-shadow: rgba(0, 0, 0, 0.25) 0px 15px 30px !important; }
.preview-item-wrapper { user-select: none; }
.preview-item-wrapper, .item-inner-container, .preview-header { -webkit-text-stroke: var(--g-comp-text-stroke); paint-order: stroke; }
.preview-header { font-family: var(--g-comp-font-family) !important; }
.preview-header #preview-nickname { font-family: var(--g-comp-title-font-family,var(--g-comp-font-family)) !important; font-weight: var(--g-comp-title-font-weight,700) !important; font-style: var(--g-comp-title-font-style,normal) !important; }
.editor-item.sortable-chosen { box-shadow: 0 4px 12px var(--shadow-medium); transform: scale(1.02); }
.image-card-editor-content { align-items: flex-start; gap: 15px; display: flex; }
.image-card-editor-thumb { flex-shrink: 0; width: 80px; }
.image-card-editor-fields { flex-grow: 1; }
.thumbnail-wrapper { background: var(--bg-image-thumb); width: 100%; transition: border-color var(--transition-short) ease, box-shadow var(--transition-short) ease; border-radius: 6px; min-height: 80px; padding-top: 100%; position: relative; overflow: hidden; }
.thumbnail-wrapper img { object-fit: cover; width: 100%; height: 100%; transition: transform var(--transition-short) ease; position: absolute; top: 0px; left: 0px; }
.thumbnail-wrapper:hover, .thumbnail-wrapper:hover img { transform: scale(1.05); }
.thumbnail-actions { opacity: 0; transition: opacity var(--transition-short) ease; gap: 4px; display: flex; position: absolute; top: 3px; right: 3px; }
.thumbnail-wrapper:hover .thumbnail-actions { opacity: 1; }
.thumbnail-actions .btn { color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.6); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; width: 24px; height: 24px; padding: 0px; font-size: 0.8rem; line-height: 24px; }
.thumbnail-actions .btn:hover { background: rgba(0, 0, 0, 0.8); }
.editor-item-header { background: var(--bg-section); border-bottom: 1px solid var(--border-color); z-index: 20; border-radius: 8px 8px 0px 0px; align-items: center; padding: 0px 10px; display: flex; position: sticky; top: 0px; box-shadow: rgba(0, 0, 0, 0.02) 0px 2px 5px; }
.editor-item-title-input { color: var(--text-primary); overflow-wrap: break-word; background: 0px 0px; border: 1px solid rgba(0, 0, 0, 0); border-radius: 4px; flex-grow: 1; min-width: 0px; margin: 0px; padding: 10px; font-size: 1em; font-weight: 600; }
.editor-item-title-input:not(span):hover { border-color: var(--border-input); }
.editor-item-title-input:not(span):focus { outline: 1px solid var(--color-primary); background: var(--bg-input); border-color: var(--color-primary); }
.item-actions { flex-shrink: 0; align-items: center; gap: 5px; margin-left: auto; display: flex; }
.item-delete-btn { flex-shrink: 0; width: auto; padding: 6px 10px; font-size: 0.9rem; }
.editor-item-content { padding: 15px; }
.preview-items-container { margin-top: var(--preview-gap); gap: var(--preview-gap); contain: layout style; flex-wrap: wrap; align-items: flex-start; width: 100%; display: flex; }
.preview-items-container.compact-mode { column-gap: var(--preview-gap); grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1px; align-items: start; row-gap: 0px; display: grid; }
.preview-items-container.compact-mode .preview-item-wrapper { align-self: start; height: auto; width: auto !important; }
.preview-items-container.locked-mode * { cursor: default !important; pointer-events: none !important; }
#preview-items-container .empty-placeholder { text-align: center; color: var(--text-placeholder); width: 100%; padding: 50px 0px; }
.preview-item-wrapper { cursor: pointer; z-index: 1; contain: layout style; backface-visibility: hidden; perspective: 1000px; will-change: transform, margin; position: relative; transform: translate(0px, 0px); transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), margin 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s, border-radius 0.3s, box-shadow 0.3s !important; overflow: visible !important; }
::view-transition-group(*) { animation-duration: 0.4s; animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1); }
.preview-item-wrapper.sortable-drag { opacity: 1 !important; }
.preview-item-wrapper.adding, .preview-item-wrapper.removing { transition: opacity 0.4s, transform 0.4s; }
.preview-item-wrapper.adding { animation: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s 1 normal none running fadeInScale; }
.preview-item-wrapper.removing { animation: 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) 0s 1 normal none running fadeOutScale; }
.preview-card { box-sizing: border-box; width: 100%; height: 100%; view-transition-name: var(--card-transition-name); position: relative; }
.preview-card-inner { box-sizing: border-box; width: 100%; height: 100%; color: var(--card-text-color,var(--g-comp-text-color)); border-radius: var(--g-comp-border-radius); box-shadow: none; border: var(--active-card-border,none); font-weight: var(--card-font-weight,normal); text-shadow: var(--active-card-text-shadow,none); padding: var(--g-comp-padding); overflow-wrap: break-word; transition: background-color var(--transition-short) ease, border-color var(--transition-short) ease; line-height: var(--g-comp-line-height); letter-spacing: var(--g-comp-letter-spacing,0px); position: relative; overflow: hidden; }
.preview-card-inner::before { content: ""; z-index: -2; border-radius: inherit; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: cover; background-position: center var(--card-bg-pos-y,50%); opacity: var(--card-bg-opacity,1); filter: var(--g-comp-bg-blur,none); transform: var(--g-comp-bg-transform,none); background-repeat: no-repeat; transition: filter 0.3s, opacity 0.3s; position: absolute; inset: 0px; }
.preview-card-inner[data-card-style]:not([data-card-style="default"]):not([data-card-style="quote"]):not([data-card-style="terminal"])::before { display: none !important; }
.preview-card-inner::before { display: block; }
.preview-card-inner::after { content: none; }
.preview-card-sticker { z-index: 10; pointer-events: none; width: 80px; height: 25px; position: absolute; top: -10px; left: 50%; transform: translate(-50%) rotate(-3deg); }
.preview-card-sticker.tape { opacity: 1; backdrop-filter: blur(1px); background-color: rgba(255, 255, 245, 0.85); border-left: 2px dashed rgba(0, 0, 0, 0.1); border-right: 2px dashed rgba(0, 0, 0, 0.1); width: 90px; height: 26px; top: -12px; transform: translate(-50%) rotate(-2deg); box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 6px; }
.preview-card-sticker.pushpin { background-color: rgb(231, 76, 60); border: 2px solid rgb(192, 57, 43); border-radius: 50%; width: 20px; height: 20px; top: -8px; transform: translate(-50%) rotate(10deg); box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px; }
.preview-card-sticker.pushpin::before { content: ""; background: rgb(189, 195, 199); width: 6px; height: 6px; position: absolute; bottom: -8px; left: 50%; transform: translate(-50%) rotate(45deg); }
.preview-card-sticker.pink-tape { opacity: 1; backdrop-filter: blur(1px); background-color: rgba(255, 182, 193, 0.85); border-left: 2px dashed rgba(0, 0, 0, 0.1); border-right: 2px dashed rgba(0, 0, 0, 0.1); width: 90px; height: 26px; top: -12px; transform: translate(-50%) rotate(2deg); box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 6px; }
.preview-card-sticker.black-tape { opacity: 1; backdrop-filter: blur(1px); background-color: rgba(40, 40, 40, 0.85); border-left: 2px dashed rgba(255, 255, 255, 0.2); border-right: 2px dashed rgba(255, 255, 255, 0.2); width: 90px; height: 26px; top: -12px; transform: translate(-50%) rotate(-1.5deg); box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; }
.preview-card-sticker.staple { background: linear-gradient(rgb(212, 212, 212), rgb(255, 255, 255), rgb(153, 153, 153)); border-radius: 2px; width: 24px; height: 5px; top: 8px; left: 50%; transform: translate(-50%) rotate(-4deg); box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 3px; }
.preview-card .preview-card-inner, .music-card-preview, .showcase-card, .timeline-preview, .progress-bar-preview, .rpg-card-preview, .social-card-preview, .grid-preview-wrapper, .preview-header, .preview-items-container figure, .todo-preview-container, .calendar-preview, .qa-preview, .achievement-preview, .letter-preview, .ranking-preview, .checklist-preview, .relationship-preview, .timer-preview, .dialogue-preview-container, .marquee-container { will-change: transform, box-shadow; transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important; }
.music-card-preview, .showcase-card, .rpg-card-preview, .timeline-preview, .progress-bar-preview { }
.preview-card:hover .preview-card-inner, .music-card-preview:hover, .showcase-card:hover, .timeline-preview:hover, .progress-bar-preview:hover, .rpg-card-preview:hover, .social-card-preview:hover, .grid-preview-wrapper:hover, .preview-header:hover, .preview-items-container figure:hover, .todo-preview-container:hover, .calendar-preview:hover, .qa-preview:hover, .achievement-preview:hover, .letter-preview:hover, .ranking-preview:hover, .relationship-preview:hover, .checklist-preview:hover, .timer-preview:hover, .dialogue-preview-container:hover, .marquee-container:hover { z-index: 100; transform: translateY(-5px) scale(1.01); box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 35px !important; }
.preview-card-title, .preview-card-content { z-index: 2; overflow-wrap: break-word; color: inherit; margin: 0px; position: relative; }
.preview-card-title { font-size: var(--g-comp-title-font-size); font-weight: inherit; align-items: var(--g-font-align,center); gap: 8px; margin-bottom: 8px; display: flex; line-height: 1.2 !important; }
.preview-card-title .iconify, .tag-pill .iconify { flex-shrink: 0; font-size: 1.25em; }
.preview-card-content { font-size: var(--g-comp-content-font-size); font-family: var(--g-comp-font-family); line-height: var(--g-comp-line-height,1.5); letter-spacing: var(--g-comp-letter-spacing,0px); white-space: pre-wrap; font-variant-ligatures: none; overflow-wrap: break-word; word-break: break-word; hyphens: none; box-sizing: border-box; padding-right: 0.5px; width: 100% !important; }
.preview-card-content .tiptap, .preview-card-content .ql-editor, .letter-body .tiptap, .dialogue-text, .qa-content, .tiptap-content-root .tiptap, .preview-card-content .tiptap ul, .preview-card-content .ql-editor ul, .preview-card-content .tiptap ol, .preview-card-content .ql-editor ol, .preview-card-content .tiptap li, .preview-card-content .ql-editor li, .letter-body li, .dialogue-text li, .qa-content li { line-height: inherit; letter-spacing: inherit; white-space: pre-wrap !important; margin: 0px !important; padding: 0px !important; }
.preview-card-content .tiptap p, .preview-card-content .ql-editor p, .letter-body p, .dialogue-text p, .qa-content p { white-space: pre-wrap !important; margin-left: 0px !important; margin-right: 0px !important; padding: 0px !important; }
.preview-card-content p, .preview-card-content .tiptap p, .ql-empty-p { min-height: calc(var(--g-comp-line-height,1.5) * 1em); white-space: pre-wrap !important; margin: 0px !important; padding: 0px !important; }
.preview-card-content strong, .preview-card-content b { font-weight: 700; }
.preview-card-content em, .preview-card-content i { font-style: italic; }
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
.ql-indent-1 { padding-left: 2em; }
.ql-indent-2 { padding-left: 4em; }
.ql-indent-3 { padding-left: 6em; }
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ul, .preview-card-inner:not(.is-editing-rich-text) .preview-card-content ol { margin: 0.8em 0px !important; padding-left: 1.6em !important; display: block !important; }
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ul { list-style-type: disc !important; }
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ol { list-style-type: decimal !important; }
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content li { margin-bottom: 4px !important; list-style-position: outside !important; display: list-item !important; }
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ul ul { margin: 4px 0px !important; list-style-type: circle !important; }
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ul ul ul { list-style-type: square !important; }
.ql-editor ul, .ql-editor ol, .tiptap ul, .tiptap ol { margin: 0.8em 0px !important; padding-left: 1.6em !important; list-style-position: outside !important; display: block !important; }
.ql-editor ul, .tiptap ul { list-style-type: disc !important; }
.ql-editor ol, .tiptap ol { list-style-type: decimal !important; }
.ql-editor li, .tiptap li { list-style-position: outside !important; list-style-type: inherit !important; margin-bottom: 4px !important; display: list-item !important; }
.preview-card-content ul li, .preview-card-content ol li, .letter-body ul li, .letter-body ol li { list-style: inherit !important; display: list-item !important; }
.tiptap ul ul { margin: 4px 0px !important; list-style-type: circle !important; }
.tiptap ul ul ul { list-style-type: square !important; }
@media (max-width: 1024px) {
  .tag-pill span[data-tag-text-id], .tag-pill span[data-profile-tag-idx] { display: inline-block; position: relative; top: 1.5px; }
  .tag-pill .iconify, .tag-pill .custom-svg-icon { transform: translateY(0.5px); }
}
.tag-pill > span:not(.icon-view-wrapper) { margin: 0px !important; padding: 2px 0px !important; line-height: 1.4 !important; display: inline-block !important; transform: none !important; }
.preview-card-title .iconify, .preview-card-title .custom-svg-icon, .tag-pill .iconify, .tag-pill .custom-svg-icon { flex-shrink: 0; margin: 0px !important; padding: 0px !important; display: block !important; }
.tag-pill .iconify, .tag-pill .custom-svg-icon { font-size: 1.1em; margin: 0px !important; display: block !important; }
.preview-items-container figure { vertical-align: top; background-color: rgba(0, 0, 0, 0); border-radius: 8px; flex-direction: column; width: 100%; height: auto; margin: 0px; transition: transform 0.3s; display: flex; position: relative; overflow: hidden; }
.img-wrapper { flex-shrink: 0; line-height: 0; overflow: hidden; }
.preview-items-container figure.circle-style .img-wrapper, .preview-items-container figure.circle-style .img-wrapper img { border-radius: 50% !important; }
.preview-items-container figure.circle-style figcaption { text-align: center; margin-top: 10px; }
.preview-items-container figure img { border-radius: 8px 8px 0px 0px; width: 100%; max-width: 100%; height: 100%; transition: transform 0.3s; display: block; }
.preview-items-container figure:not(:has(figcaption)) img { border-radius: 8px; }
.preview-items-container figure:hover .img-wrapper img { transform: scale(1.05); }
.preview-items-container figure figcaption { text-align: center; overflow-wrap: break-word; color: var(--g-comp-text-color); z-index: 2; width: 100%; margin: 0px; padding: 5px; position: relative; }
.preview-items-container figure figcaption > * { text-align: center; display: block; }
.preview-items-container figure.polaroid-style figcaption { text-align: center; opacity: 0.9; width: 100%; margin-top: 8px; padding: 0px; font-family: "LXGW WenKai", "Comic Sans MS", cursive, sans-serif; font-size: 1rem; position: static; color: rgb(51, 51, 51) !important; background: 0px 0px !important; }
.separator-preview { justify-content: center; align-items: center; width: 100%; display: flex; }
.separator-preview-line { flex-grow: 1; height: 1px; transition: none; }
.spacer-preview { border: 1px dashed var(--border-dashed,#ccc); box-sizing: border-box; width: 100%; min-height: 20px; }
.apply-global-border::before, .apply-global-border::after { content: ""; border-radius: inherit; pointer-events: none; transition: opacity 0.3s, border-color 0.3s; display: none; position: absolute; inset: 0px; }
.apply-global-border { z-index: 1; border-radius: var(--g-comp-border-radius); position: relative; border: 0px solid rgba(0, 0, 0, 0) !important; }
.apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"])::after { content: ""; z-index: 10; pointer-events: none; box-sizing: border-box; border-radius: inherit; display: block; position: absolute; inset: 0px; border: var(--g-border-width) var(--g-border-style,solid) var(--g-border-color) !important; background-clip: border-box !important; }
.apply-global-border > * { box-sizing: border-box; width: 100%; height: 100%; }
.preview-header.apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) { border: 0px solid rgba(0, 0, 0, 0) !important; }
.preview-header.apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"])::after { display: block; border: var(--g-border-width) var(--g-border-style,solid) var(--g-border-color) !important; }
.preview-header.apply-global-border { transform-style: flat; }
.apply-global-border[data-border-style="pixel"] { box-shadow: var(--g-border-width) 0 0 0 var(--g-border-color), calc(-1 * var(--g-border-width)) 0 0 0 var(--g-border-color), 0 var(--g-border-width) 0 0 var(--g-border-color), 0 calc(-1 * var(--g-border-width)) 0 0 var(--g-border-color); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }
.apply-global-border.apply-global-shadow[data-border-style="pixel"] { box-shadow: var(--g-border-width) 0 0 0 var(--g-border-color), calc(-1 * var(--g-border-width)) 0 0 0 var(--g-border-color), 0 var(--g-border-width) 0 0 var(--g-border-color), 0 calc(-1 * var(--g-border-width)) 0 0 var(--g-border-color), var(--g-shadow-value) !important; }
.apply-global-border[data-border-style="neo-brutalism"] { border: var(--g-border-width) solid var(--g-border-color); box-shadow: var(--g-border-shadow-offset) var(--g-border-shadow-offset) 0 0 var(--g-border-shadow-color); background-clip: border-box !important; }
.apply-global-border.apply-global-shadow[data-border-style="neo-brutalism"] { box-shadow: var(--g-border-shadow-offset) var(--g-border-shadow-offset) 0 0 var(--g-border-shadow-color), var(--g-shadow-value) !important; }
.apply-global-border[data-border-style="neo-brutalism"]::after { display: none !important; }
.apply-global-border[data-border-style="double-offset"] { z-index: 1; position: relative; border: var(--g-border-width) solid var(--g-border-color) !important; background-clip: border-box !important; }
.apply-global-border[data-border-style="double-offset"] > * { z-index: 2; position: relative; }
.apply-global-border[data-border-style="double-offset"]::before { content: ""; border: var(--g-border-width) solid var(--g-border-color); border-radius: inherit; transform: translate(var(--g-border-shadow-offset), var(--g-border-shadow-offset)); opacity: 0.6; pointer-events: none; display: block; position: absolute; inset: 0px; z-index: -1 !important; }
.apply-global-border[data-border-style="double-offset"]::after { display: none !important; }
.apply-global-border .apply-global-border::before, .apply-global-border .apply-global-border::after { content: none !important; display: none !important; }
.apply-global-border .apply-global-border { box-shadow: none !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; }
.apply-global-border[data-border-style="double-offset"] .info-left-col, .apply-global-border[data-border-style="double-offset"] #preview-avatar-wrapper { z-index: auto; position: relative; }
.apply-global-shadow { position: relative; }
.apply-global-shadow::before { content: ""; border-radius: inherit; z-index: 0; pointer-events: none; will-change: transform; backface-visibility: hidden; transition: box-shadow 0.3s; display: block; position: absolute; inset: 0px; transform: translateZ(0px); box-shadow: var(--g-shadow-value) !important; }
.preview-item-wrapper.apply-global-shadow:hover { z-index: 10; }
#quick-add-menu { z-index: 10001; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; min-width: 180px; padding: 5px 0px; animation: 0.1s ease 0s 1 normal none running fadeIn; display: none; position: fixed; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 20px; }
#quick-add-menu .menu-header { color: var(--text-secondary); background: var(--bg-input); border-bottom: 1px solid var(--border-color); margin-bottom: 4px; padding: 8px 12px; font-size: 0.75rem; font-weight: 600; }
#quick-add-menu li { cursor: pointer; color: var(--text-primary); align-items: center; gap: 8px; padding: 8px 15px; font-size: 0.9rem; transition: background 0.1s; display: flex; }
#quick-add-menu li:hover { background-color: var(--bg-image-upload-hover); color: var(--color-primary); }
#quick-add-menu li.separator { background: var(--border-color); cursor: default; height: 1px; margin: 4px 0px; padding: 0px; }
#quick-add-menu li.smart-suggestion { background: linear-gradient(90deg, var(--bg-card), var(--bg-image-upload-hover)); border-left: 3px solid var(--color-primary); font-weight: 700; }
.flyout-panel { background: var(--bg-editor); border: 1px solid var(--border-color); z-index: 1000; border-radius: 12px; width: 200px; max-height: 400px; padding: 10px; display: none; position: absolute; bottom: 0px; left: 105%; overflow-y: auto; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 20px; }
.flyout-panel.visible { animation: 0.2s ease 0s 1 normal none running fadeIn; display: block; }
.flyout-grid { grid-template-columns: 1fr; gap: 5px; display: grid; }
.music-card-preview { background-color: var(--music-bg-color); border-radius: var(--music-radius); color: var(--music-text-color); box-sizing: border-box; align-items: center; gap: 15px; width: 100%; height: 100%; min-height: 140px; padding: 20px; display: flex; position: relative; overflow: hidden; }
.music-cover { object-fit: cover; border-radius: 8px; flex-shrink: 0; align-self: center; width: 100px; height: 100px; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 10px; }
.music-card-preview { text-align: center; align-items: center; display: flex; }
.music-card-preview[data-style="cd_player"] .music-info, .music-card-preview[data-style="lockscreen"] .music-info, .music-card-preview[data-style="streaming"] .music-info { text-align: center; align-items: center; }
.music-info { flex-direction: column; flex-grow: 1; justify-content: center; gap: 12px; min-width: 0px; height: 100%; padding: 5px 0px; display: flex; }
.music-header { flex-direction: column; flex-shrink: 0; margin-top: 8px; display: flex; }
.music-title { white-space: nowrap; text-overflow: ellipsis; font-size: 1.2em; font-weight: 700; line-height: 1.2; overflow: hidden; }
.music-artist { opacity: 0.7; margin-top: 4px; font-size: 0.85em; }
.music-lyrics-container { text-align: center; flex-direction: column; flex: 0 1 auto; justify-content: center; align-items: center; min-height: 45px; margin: 5px 0px; display: flex; overflow: hidden; mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 20%, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%); }
.lyrics-line { opacity: 0.5; white-space: pre-wrap; word-break: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 100%; margin: 4px 0px; font-size: 0.85em; line-height: 1.4; transition: color 0.3s, opacity 0.3s; display: -webkit-box; overflow: hidden; }
.music-lyrics-container { text-align: center; flex-direction: column; flex: 1 1 0%; justify-content: center; align-items: center; min-height: 80px; display: flex; mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 15%, rgb(0, 0, 0) 85%, rgba(0, 0, 0, 0) 100%); }
.lyrics-line.active { opacity: 1; color: var(--music-accent-color); margin: 2px 0px; font-size: 0.95em; font-weight: 700; transform: scale(1.05); }
.music-bottom-area { flex-direction: column; flex-shrink: 0; gap: 8px; display: flex; }
.music-progress-area { flex-direction: column; gap: 4px; display: flex; }
.music-progress-bar { background-color: rgba(128, 128, 128, 0.2); border-radius: 2px; width: 100%; height: 4px; overflow: hidden; }
.music-progress-fill { background-color: var(--music-accent-color); border-radius: 2px; height: 100%; }
.music-time-labels { opacity: 0.7; font-variant-numeric: tabular-nums; justify-content: space-between; font-size: 0.75em; display: flex; }
.music-controls { opacity: 0.9; justify-content: center; align-items: center; gap: 25px; margin-top: 2px; font-size: 1.8em; display: flex; }
.vinyl-record, .spool, .cd-disc { transition: transform 0.5s; animation-duration: 8s; animation-timing-function: linear; animation-delay: 0s; animation-iteration-count: infinite; animation-direction: normal; animation-fill-mode: none; animation-name: spin; animation-timeline: auto; animation-range: normal; animation-play-state: paused !important; }
.is-playing .vinyl-record, .is-playing .spool, .is-playing .cd-disc { animation-play-state: running !important; }
.play-icon { transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), opacity 0.2s; }
.music-controls:active .play-icon { transform: scale(0.9); }
.tag-pill { transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; }
.tag-pill:hover { filter: brightness(1.1); transform: translateY(-1px) scale(1.05); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px; }
.vinyl-tonearm { transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); transform: rotate(-35deg); }
.is-playing .vinyl-tonearm { transform: rotate(-5deg); }
.lyrics-line { opacity: 0.4; white-space: pre-wrap; word-break: break-word; text-align: center; max-width: 100%; margin: 4px 0px; font-size: 0.85em; line-height: 1.4; transition: color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
.lyrics-line.active { color: var(--music-accent-color); transform: scale(1.08); opacity: 1 !important; font-weight: 700 !important; }
.music-lyrics-container { flex-direction: column; flex: 1 1 0%; justify-content: center; align-items: center; min-height: 90px; display: flex; mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0) 20%, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%); }
.music-card-cassette { color: rgb(34, 34, 34); background: linear-gradient(rgb(42, 42, 42), rgb(26, 26, 26)); border-radius: 8px; flex-direction: column; padding: 12px; display: flex; position: relative; overflow: visible; box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 10px; font-family: 栗壳坚坚体, LikeJianJianTi, "LikeJianJianTi Regular", cursive !important; }
.music-card-cassette * { font-family: inherit !important; }
.music-card-cassette::before { content: ""; z-index: 2; background: rgb(17, 17, 17); border-radius: 50%; width: 6px; height: 6px; position: absolute; top: 8px; left: 8px; box-shadow: rgba(255, 255, 255, 0.1) 1px 1px 1px inset, rgb(51, 51, 51) 0px 0px 0px 2px; }
.music-card-cassette::after { content: ""; z-index: 2; background: rgb(17, 17, 17); border-radius: 50%; width: 6px; height: 6px; position: absolute; top: 8px; right: 8px; box-shadow: rgba(255, 255, 255, 0.1) 1px 1px 1px inset, rgb(51, 51, 51) 0px 0px 0px 2px; }
.cassette-body { background-color: rgb(227, 224, 209); background-image: linear-gradient(rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 10%); border-width: 1px 1px 12px; border-style: solid; border-color: rgb(153, 153, 153) rgb(153, 153, 153) rgb(176, 173, 158); border-image: initial; border-radius: 4px; padding: 15px 10px; position: relative; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px inset, rgba(255, 255, 255, 0.5) 2px 2px inset; }
.cassette-body::after, .cassette-body::before { content: ""; z-index: 5; background: rgb(34, 34, 34); border-radius: 50%; width: 8px; height: 8px; position: absolute; bottom: -8px; }
.cassette-body::before { left: 20px; }
.cassette-body::after { right: 20px; }
.cassette-header { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0.03) 3px) rgb(255, 253, 245); border: 1px solid rgb(212, 212, 212); border-radius: 2px; justify-content: space-between; align-items: center; margin-bottom: 12px; padding: 6px 10px; display: flex; transform: rotate(-0.5deg); box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px; }
.cassette-header [data-item-key="songTitle"] { width: auto !important; min-width: 0px !important; }
.cassette-spools { background: rgb(34, 34, 34); border: 2px solid rgb(85, 85, 85); border-radius: 30px; justify-content: center; align-items: center; gap: 25px; margin-bottom: 5px; padding: 8px; display: flex; position: relative; box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px inset; }
.cassette-spools::before { content: ""; pointer-events: none; background: rgba(255, 255, 255, 0.1); position: absolute; inset: 0px 15%; }
.spool { background: radial-gradient(circle, rgb(238, 238, 238) 3px, rgba(0, 0, 0, 0) 4px), conic-gradient(rgb(255, 255, 255) 0deg, rgb(255, 255, 255) 45deg, rgb(51, 51, 51) 45deg, rgb(51, 51, 51) 90deg, rgb(255, 255, 255) 90deg, rgb(255, 255, 255) 135deg, rgb(51, 51, 51) 135deg, rgb(51, 51, 51) 180deg, rgb(255, 255, 255) 180deg, rgb(255, 255, 255) 225deg, rgb(51, 51, 51) 225deg, rgb(51, 51, 51) 270deg, rgb(255, 255, 255) 270deg, rgb(255, 255, 255) 315deg, rgb(51, 51, 51) 315deg, rgb(51, 51, 51) 360deg); border: 4px solid rgb(92, 64, 51); border-radius: 50%; width: 36px; height: 36px; animation: 4s linear 0s infinite normal none running spin; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px; }
.cassette-tape-window { opacity: 0.8; background: rgb(62, 39, 35); flex-grow: 1; height: 4px; margin: 0px 5px; }
.music-card-MP3 { box-sizing: border-box; color: rgb(43, 56, 54); text-shadow: rgba(255, 255, 255, 0.15) 0px 1px; background: linear-gradient(145deg, rgb(240, 240, 240), rgb(220, 220, 220)); border-radius: 18px; flex-direction: column; align-items: center; font-family: "Fusion Pixel 12px Mono latin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; display: flex; overflow: hidden; box-shadow: rgba(255, 255, 255, 0.9) 2px 2px 5px inset, rgba(0, 0, 0, 0.1) -2px -2px 5px inset, rgba(0, 0, 0, 0.1) 5px 5px 15px; }
.MP3-screen { background-color: rgb(198, 216, 211); background-image: linear-gradient(rgba(0, 0, 0, 0.06) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, rgba(0, 0, 0, 0) 1px); background-size: 3px 3px; border: 2px solid rgb(95, 122, 118); border-radius: 4px; gap: 10px; width: 100%; margin-bottom: 15px; padding: 10px; display: flex; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.25) 3px 3px 6px inset, rgba(255, 255, 255, 0.3) -1px -1px 2px inset; }
.MP3-cover { object-fit: cover; background: rgb(204, 204, 204); border: 1px solid rgb(51, 51, 51); flex-shrink: 0; width: 50px; height: 50px; }
.MP3-info { flex-direction: column; flex: 1 1 0%; justify-content: center; gap: 2px; min-width: 0px; display: flex; }
.MP3-info > div { white-space: nowrap; text-overflow: ellipsis; width: 100%; overflow: hidden; }
.MP3-click-wheel { background: rgb(230, 230, 230); border: 1px solid rgb(187, 187, 187); border-radius: 50%; justify-content: center; align-items: center; width: 100px; height: 100px; display: flex; position: relative; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px; }
.MP3-center-btn { background: rgb(204, 204, 204); border-radius: 50%; width: 45px; height: 45px; box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px inset; }
.MP3-ctrl { color: rgb(153, 153, 153); font-size: 12px; font-weight: 700; position: absolute; }
.MP3-ctrl.top { top: 10px; }
.MP3-ctrl.bottom { bottom: 10px; }
.MP3-ctrl.left { left: 10px; }
.MP3-ctrl.right { right: 10px; }
.progress-bar-preview { flex-direction: column; gap: 8px; width: 100%; display: flex; }
.progress-bar-header { color: var(--g-comp-text-color); justify-content: space-between; font-size: 0.9em; display: flex; }
.progress-bar-label { font-weight: 600; }
.progress-bar-value { opacity: 0.8; }
.progress-bar-track { border-radius: 4px; width: 100%; overflow: hidden; }
.progress-bar-fill { border-radius: 4px; height: 100%; transition: width 0.5s, background-color 0.3s; }
.progress-bar-preview.circular .progress-bar-label { opacity: 0.9; font-size: 0.95em; }
.rpg-card-preview { width: 100%; height: 100%; padding: var(--g-comp-padding); box-sizing: border-box; background-color: var(--rpg-bg-color); color: var(--rpg-text-color); border-radius: var(--rpg-radius); flex-direction: column; justify-content: center; align-items: center; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; display: flex; position: relative; overflow: hidden; }
.rpg-title { z-index: 2; text-align: center; margin-bottom: 15px; font-size: 1.2em; font-weight: 700; }
.rpg-radar-container { aspect-ratio: 1 / 1; z-index: 2; width: 100%; max-width: 240px; position: relative; }
.rpg-radar-container svg { width: 100%; height: 100%; overflow: visible; }
.rpg-card-preview[data-style="default"] .radar-grid { stroke: rgba(128, 128, 128, 0.3); stroke-width: 1px; fill: none; }
.rpg-card-preview[data-style="default"] .radar-axis { stroke: rgba(128, 128, 128, 0.3); stroke-width: 1px; }
.rpg-card-preview[data-style="default"] .radar-area { fill: var(--rpg-fill-color); stroke: var(--rpg-stroke-color); stroke-width: 2px; }
.rpg-card-preview[data-style="default"] .radar-label { fill: var(--rpg-text-color); font-size: 12px; font-weight: 600; }
.rpg-card-preview[data-style="red"] { border: 2px solid rgb(255, 255, 255); overflow: visible; transform: rotate(-1deg); color: rgb(255, 255, 255) !important; background-color: rgb(0, 0, 0) !important; }
.rpg-card-preview[data-style="red"]::before { content: ""; z-index: 0; opacity: 0.6; pointer-events: none; background: repeating-linear-gradient(45deg, rgb(26, 26, 26), rgb(26, 26, 26) 10px, rgb(34, 34, 34) 10px, rgb(34, 34, 34) 20px); position: absolute; inset: 0px; }
.rpg-card-preview[data-style="red"] .rpg-title { color: rgb(0, 0, 0); background: rgb(255, 255, 255); margin-bottom: 25px; padding: 4px 15px; font-family: pingfangzhangyalinheifang, sans-serif; font-size: 1.8em; transform: skew(-15deg) rotate(-2deg); box-shadow: rgb(211, 13, 25) 3px 3px; }
.rpg-card-preview[data-style="red"] .radar-grid { stroke: rgb(102, 102, 102); stroke-width: 1px; fill: none; stroke-dasharray: 4, 2; }
.rpg-card-preview[data-style="red"] .radar-axis { display: none; }
.rpg-card-preview[data-style="red"] .radar-area { fill: rgba(211, 13, 25, 0.85); stroke: rgb(255, 255, 255); stroke-width: 3px; stroke-linejoin: round; }
.rpg-card-preview[data-style="red"] .radar-label { fill: rgb(255, 255, 255); text-shadow: rgb(0, 0, 0) 2px 2px; font-family: pingfangzhangyalinheifang, sans-serif; font-size: 16px; }
.rpg-card-preview[data-style="blue"] { color: rgb(0, 43, 77); background: linear-gradient(160deg, rgb(238, 251, 252) 0%, rgb(196, 233, 250) 100%); border: 1px solid rgba(255, 255, 255, 0.8); box-shadow: rgba(0, 183, 246, 0.25) 0px 8px 32px; }
.rpg-card-preview[data-style="blue"]::after { content: ""; pointer-events: none; border: 1px solid rgba(0, 183, 246, 0.15); border-radius: 50%; width: 280px; height: 280px; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); }
.rpg-card-preview[data-style="blue"] .rpg-title { letter-spacing: 2px; color: rgb(0, 86, 179); border-bottom: 2px solid rgb(0, 183, 246); padding-bottom: 5px; font-family: sans-serif; font-weight: 300; }
.rpg-card-preview[data-style="blue"] .radar-grid { stroke: rgba(0, 183, 246, 0.3); stroke-width: 1px; fill: none; }
.rpg-card-preview[data-style="blue"] .radar-area { fill: url("#blue-gradient"); stroke: rgb(0, 183, 246); stroke-width: 2px; filter: drop-shadow(rgba(0, 183, 246, 0.5) 0px 0px 5px); }
.rpg-card-preview[data-style="blue"] .radar-label { fill: rgb(0, 64, 128); font-size: 12px; font-weight: 700; }
.timeline-preview { width: 100%; position: relative; overflow: hidden; }
.timeline-line { background-color: var(--border-color); width: 2px; position: absolute; top: 0px; bottom: 0px; left: 8px; }
.timeline-event { margin-bottom: 20px; position: relative; }
.timeline-event:last-child { margin-bottom: 0px; }
.timeline-dot { border: 2px solid var(--g-theme-accent,var(--text-action)); background-color: var(--bg-preview-page); border-radius: 50%; width: 10px; height: 10px; position: absolute; top: 4px; left: -26px; }
.timeline-time { color: inherit; opacity: 0.7; margin-bottom: 4px; font-size: 0.8em; font-weight: 600; }
.timeline-content { color: var(--g-comp-text-color); font-size: 0.95em; }
.timeline-spacer-item { pointer-events: none; z-index: 1; width: 100%; position: relative; }
.timeline-preview[data-layout="left"] .timeline-line { left: auto !important; right: var(--tl-line-right) !important; }
.timeline-preview[data-layout="left"] .timeline-dot { left: auto !important; right: var(--tl-dot-offset-right) !important; }
.timeline-preview[data-layout="double"] .timeline-line { transform: translate(-50%); left: 50% !important; }
.timeline-preview[data-layout="double"] .timeline-event { box-sizing: border-box; width: 50% !important; }
.timeline-preview[data-layout="double"] .timeline-event.is-left { text-align: right; padding-left: 0px !important; padding-right: var(--tl-double-pad) !important; margin-left: 0px !important; margin-right: auto !important; }
.timeline-preview[data-layout="double"] .timeline-event.is-right { text-align: left; padding-right: 0px !important; padding-left: var(--tl-double-pad) !important; margin-left: auto !important; margin-right: 0px !important; }
.timeline-preview[data-layout="double"] .timeline-event.is-left .timeline-dot { left: auto !important; right: var(--tl-double-dot-offset) !important; }
.timeline-preview[data-layout="double"] .timeline-event.is-right .timeline-dot { right: auto !important; left: var(--tl-double-dot-offset) !important; }
.font-controls { flex-direction: column; align-items: stretch; gap: 8px; margin-top: 8px; display: flex; }
.font-controls select { width: 100%; }
.font-controls .buttons { gap: 10px; display: flex; }
.font-controls .buttons .btn { flex-grow: 1; width: auto; padding: 8px 12px; font-size: 13px; }
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s !important; }
.fade-enter-from, .fade-leave-to { opacity: 0 !important; }
.cropper-main-content { gap: 15px; margin-bottom: 0px; display: flex; }
.cropper-img-container { background: var(--bg-input); border-radius: 8px; flex: 3 1 0%; height: 320px; overflow: hidden; }
#cropper-preview-canvas { max-height: 180px !important; }
.cropper-img-container img { max-width: 100%; }
.cropper-sidebar { flex-direction: column; flex: 1 1 0%; min-width: 180px; display: flex; }
#filter-controls { border-top: 1px solid var(--border-color); padding-top: 15px; }
#filter-sliders-grid { grid-template-columns: repeat(2, 1fr); gap: 15px 20px; display: grid; }
#filter-sliders-grid .form-group { margin-bottom: 0px; }
#filter-controls .form-group label { justify-content: space-between; margin-bottom: 2px; font-size: 0.85rem; display: flex; }
#filter-controls .form-group input[type="range"] { width: 100%; }
.modal-actions { justify-content: flex-end; gap: 15px; margin-top: 15px; display: flex; }
.modal-actions .btn { width: auto; min-width: 100px; }
#download-modal-content { text-align: center; }
#download-modal-content img { border: 1px solid var(--border-color); border-radius: 8px; max-width: 100%; max-height: 50vh; margin-bottom: 15px; }
#download-modal-content a { background: var(--color-primary); color: rgb(255, 255, 255); transition: background-color var(--transition-short) ease; border-radius: 8px; margin-bottom: 20px; padding: 12px 20px; font-size: 1rem; font-weight: 600; text-decoration: none; display: block; }
#download-modal-content a:hover { background-color: var(--color-primary-hover); }
.crop-ratios { margin-bottom: 15px; }
.crop-ratios label { cursor: pointer; margin-right: 10px; font-size: 0.9rem; }
.error-modal { background: var(--bg-editor); color: var(--text-primary); z-index: 2000; border: 1px solid var(--border-color); border-radius: 12px; width: 450px; max-width: 90%; padding: 25px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 20px; }
.error-modal h3 { color: var(--color-danger); margin-top: 0px; }
.error-modal p { margin: 10px 0px; font-size: 0.95rem; }
.error-modal .btn { float: right; margin-top: 15px; }
#loading-overlay { z-index: 1000000; color: rgb(255, 255, 255); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; pointer-events: none; background: rgba(0, 0, 0, 0.6); flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 1.2rem; transition: opacity 0.3s, visibility 0.3s; display: flex; position: fixed; top: 0px; left: 0px; }
#loading-overlay.visible { opacity: 1; visibility: visible; pointer-events: auto; transition-delay: 0s; }
.spinner { border-right: 4px solid rgb(243, 243, 243); border-bottom: 4px solid rgb(243, 243, 243); border-left: 4px solid rgb(243, 243, 243); border-image: initial; border-top: 4px solid var(--color-primary); border-radius: 50%; width: 40px; height: 40px; margin-bottom: 15px; animation: 1s linear 0s infinite normal none running spin; }
#icon-grid, #texture-grid, #pixabay-grid { border: 1px solid var(--border-input); background: var(--bg-input); border-radius: 8px; grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)); gap: 10px; max-height: 50vh; padding: 10px; display: grid; overflow-y: auto; }
#pixabay-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pixabay-grid-item { cursor: pointer; border-radius: 6px; position: relative; overflow: hidden; }
.pixabay-grid-item img { object-fit: cover; width: 100%; height: 100%; transition: transform 0.2s; display: block; }
.pixabay-grid-item:hover img { transform: scale(1.1); }
.pixabay-grid-item .photographer-info { color: rgb(255, 255, 255); text-align: center; white-space: nowrap; text-overflow: ellipsis; background: rgba(0, 0, 0, 0.6); width: 100%; padding: 4px 6px; font-size: 0.7rem; position: absolute; bottom: 0px; left: 0px; overflow: hidden; }
#texture-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.icon-grid-item { height: 50px; color: var(--text-primary); cursor: pointer; transition: background-color var(--transition-short); border-radius: 6px; justify-content: center; align-items: center; font-size: 1.5rem; display: flex; position: relative; }
.icon-grid-item:hover, .texture-grid-item:hover { background-color: var(--border-color); }
.icon-grid-item .delete-custom-icon-btn { border-radius: 50%; width: 18px; height: 18px; padding: 0px; font-size: 0.7rem; line-height: 18px; display: none; position: absolute; top: 2px; right: 2px; }
.icon-grid-item:hover .delete-custom-icon-btn { display: flex; }
.texture-grid-item { cursor: pointer; transition: background-color var(--transition-short); border-radius: 6px; flex-direction: column; justify-content: center; align-items: center; padding: 5px; display: flex; }
.texture-preview { border: 1px solid var(--border-color); background-size: 20px; border-radius: 4px; width: 100%; height: 80px; }
.texture-name { color: var(--text-secondary); text-align: center; margin-top: 5px; font-size: 0.75rem; }
#tag-manager-list { background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex-direction: column; gap: 0px; max-height: 300px; margin-bottom: 15px; padding: 2px; display: flex; overflow-y: auto; }
#font-manager-list, #history-list { border: 1px solid var(--border-input); background-color: var(--bg-input); border-radius: 6px; flex-direction: column; gap: 10px; max-height: 250px; margin-bottom: 15px; padding: 10px; display: flex; overflow-y: auto; }
#history-list { max-height: 300px; }
.tag-manager-item, .font-manager-item, .history-item { background-color: var(--bg-section); border: 1px solid var(--border-color); border-radius: 4px; align-items: center; gap: 8px; padding: 8px; display: flex; }
.history-item { cursor: pointer; font-size: 0.9rem; }
.history-item:hover { background-color: var(--bg-image-upload-hover); }
.history-item.active { border-color: var(--color-primary); font-weight: 700; }
.tag-manager-item .tag-drag-handle { cursor: grab; color: var(--text-placeholder); padding: 0px 8px; font-size: 1.5rem; }
.tag-manager-item .tag-icon-btn { cursor: pointer; flex-shrink: 0; width: 32px; height: 32px; padding: 0px; font-size: 1.2rem; }
.tag-manager-item .tag-text-input { cursor: text; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex-grow: 1; padding: 4px 6px; }
.tag-manager-item .tag-delete-btn, .font-manager-item .font-delete-btn { cursor: pointer; flex-shrink: 0; width: 32px; height: 32px; padding: 0px; }
.font-manager-item-name { flex-grow: 1; }
.empty-tag-list, .empty-font-list, .empty-history-list { text-align: center; color: var(--text-placeholder); padding: 20px 0px; }
.inset-controls { border: 1px solid var(--border-input); background: var(--bg-input); border-radius: 6px; margin-top: 10px; padding: 15px; }
#help-modal .tab-content { max-height: 65vh; padding: 15px; overflow-y: auto; }
.modal-sidebar { background: var(--bg-section); border-right: 1px solid var(--border-color); flex-direction: column; flex-shrink: 0; width: 180px; padding: 10px 0px; display: flex; overflow-y: auto; }
.modal-sidebar .tab-btn { text-align: left; white-space: nowrap; border-left: 4px solid rgba(0, 0, 0, 0); border-radius: 0px; gap: 10px; width: 100%; padding: 12px 20px; font-size: 0.9rem; border-bottom-width: medium !important; border-bottom-style: none !important; border-bottom-color: currentcolor !important; align-items: center !important; display: flex !important; }
#help-modal .btn { justify-content: center; gap: 6px; align-items: center !important; display: inline-flex !important; }
.modal-sidebar .tab-btn.active { background: var(--bg-image-upload-hover); border-left-color: var(--color-primary); color: var(--color-primary); }
.modal-main-content { background: var(--bg-editor); flex-direction: column; flex: 1 1 0%; min-width: 0px; display: flex; overflow: hidden; }
.modal-tab-container { box-sizing: border-box; flex: 0 1 auto; width: 100%; min-width: 0px; padding: 25px 30px; overflow-y: auto; }
#help-thanks .thanks-item { border-bottom: 1px solid var(--border-color); margin-bottom: 20px; padding-bottom: 15px; }
#help-thanks .thanks-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
#help-thanks h4 { margin-top: 0px; margin-bottom: 8px; }
#help-thanks p { margin: 4px 0px; }
#help-thanks details { margin-top: 10px; }
#help-thanks summary { cursor: pointer; color: var(--text-action); font-weight: 600; }
#help-thanks pre { white-space: pre-wrap; overflow-wrap: break-word; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; max-height: 200px; padding: 10px; font-size: 0.8rem; overflow-y: auto; }
.palette-container { grid-template-columns: repeat(auto-fit, minmax(40px, 1fr)); gap: 10px; margin-top: 10px; display: grid; }
.palette-color { cursor: pointer; border: 2px solid var(--border-color); width: 100%; transition: transform var(--transition-short); border-radius: 8px; padding-top: 100%; position: relative; }
.palette-color:hover { transform: scale(1.1); }
.color-tooltip { background: var(--bg-card); color: var(--text-primary); white-space: nowrap; box-shadow: var(--shadow-medium); opacity: 0; visibility: hidden; transition: opacity var(--transition-short); border-radius: 4px; padding: 4px 8px; font-size: 0.8rem; position: absolute; bottom: 110%; left: 50%; transform: translate(-50%); }
.palette-color:hover .color-tooltip { opacity: 1; visibility: visible; }
#color-context-menu { z-index: 10000; background: var(--bg-editor); border: 1px solid var(--border-color); box-shadow: var(--shadow-medium); border-radius: 8px; min-width: 180px; padding: 5px; display: none; position: fixed; }
#color-context-menu ul { margin: 0px; padding: 0px; list-style: none; }
#color-context-menu li { cursor: pointer; text-shadow: none; border-radius: 4px; padding: 8px 12px; font-size: 0.9rem; }
#color-context-menu li:hover { background: var(--bg-input); }
#color-context-menu hr { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 4px 0px; }
#preview-context-menu { z-index: 10000; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; min-width: 160px; padding: 5px; animation: 0.1s ease 0s 1 normal none running fadeIn; display: none; position: fixed; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px; overflow: visible !important; }
#preview-context-menu ul { margin: 0px; padding: 0px; list-style: none; }
#preview-context-menu li { cursor: pointer; color: var(--text-primary); text-shadow: none; border-radius: 4px; align-items: center; gap: 8px; padding: 8px 12px; font-size: 0.9rem; display: flex; }
#preview-context-menu li:hover { background-color: var(--bg-input); }
#preview-context-menu li { position: relative; }
#preview-context-menu .submenu { background: var(--bg-card); border: 1px solid var(--border-color); z-index: 10001; border-radius: 8px; min-width: 140px; padding: 5px; display: none; position: absolute; top: -5px; left: 100%; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px; }
#preview-context-menu li:hover > .submenu { animation: 0.1s ease 0s 1 normal none running fadeIn; display: block; }
#preview-context-menu li.has-submenu { justify-content: space-between; align-items: center; display: flex; }
#preview-context-menu li.has-submenu::after { content: "?"; color: var(--text-secondary); margin-left: 8px; font-size: 0.8em; }
#preview-context-menu .submenu.flip-left { left: auto; right: 98%; }
#preview-context-menu .submenu.flip-up { top: auto; bottom: -5px; }
.vertical-rl .preview-card-inner { writing-mode: vertical-rl; text-orientation: mixed; align-items: flex-start; width: 100%; height: 320px; overflow: hidden; padding: 20px 15px !important; }
.vertical-rl .preview-card-title { max-width: none; max-height: 100%; margin-bottom: 0px; margin-left: 12px; }
.vertical-rl .preview-card-content { text-align: justify; max-width: none; max-height: 100%; }
#qrcode-container { text-align: center; background: rgb(255, 255, 255); border-radius: 8px; margin: 10px 0px; padding: 30px; display: inline-block; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px; }
#qrcode-container canvas, #qrcode-container img { background-color: rgb(255, 255, 255); max-width: 100%; height: auto; margin: 0px auto; padding: 10px; display: block; }
#floating-tooltip { background-color: var(--bg-card); color: var(--text-primary); border: 1px solid var(--border-color); white-space: normal; z-index: 10001; pointer-events: none; opacity: 0; border-radius: 6px; max-width: 250px; padding: 8px 12px; font-size: 0.85rem; font-weight: 400; transition: opacity 0.2s; position: fixed; transform: translate(-50%, -100%); }
.rich-text-editor-trigger { border: 1px solid var(--border-input); background-color: var(--bg-input); min-height: 80px; transition: border-color var(--transition-short), box-shadow var(--transition-short); border-radius: 6px; padding: 10px; position: relative; }
.rich-text-editor-trigger:hover { border-color: var(--color-primary); }
.rich-text-preview { color: var(--text-secondary); word-break: break-all; max-height: 120px; font-size: 0.9em; overflow: hidden; }
.rich-text-preview > * { margin: 0px !important; padding: 0px !important; }
.edit-content-btn { padding: 4px 10px; font-size: 0.85rem; }
#rich-text-editor-container { background-color: var(--bg-preview-page); flex-grow: 1; order: 2; height: 35vh; margin-bottom: 15px; }
#rich-text-editor-modal .modal-actions { order: 3; }
#rich-text-editor-container { flex-direction: column; display: flex; }
#rich-text-editor-container .ql-toolbar { border-color: var(--border-color); }
#rich-text-editor-container .ql-container { flex-direction: column; flex-grow: 1; display: flex; }
#rich-text-editor-container .ql-editor { color: var(--text-primary); flex-grow: 1; }
#rich-text-editor-container .ql-toolbar .ql-picker-label, #rich-text-editor-container .ql-toolbar .ql-stroke { color: var(--text-secondary) !important; stroke: var(--text-secondary) !important; }
html.dark-mode #rich-text-editor-container .ql-picker-options { background-color: var(--bg-card); border-color: var(--border-color); }
.export-option { border: 1px solid var(--border-color); cursor: pointer; transition: background-color var(--transition-short), border-color var(--transition-short); border-radius: 8px; padding: 15px; }
.export-option:hover { background-color: var(--bg-input); border-color: var(--color-primary); }
.export-option h4 { margin: 0px 0px 5px; }
.export-option p { color: var(--text-secondary); margin: 0px; font-size: 0.9rem; }
#confirm-modal { z-index: 10000; }
#image-source-modal .modal-actions { flex-direction: column; gap: 15px; margin-top: 25px; }
#image-source-modal .btn { width: 100%; padding: 12px; font-size: 1rem; }
@keyframes toast-in { 
  100% { opacity: 1; transform: translate(0px); }
}
@keyframes toast-out { 
  100% { opacity: 0; transform: translate(100%); }
}
@keyframes spin { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes fadeInScale { 
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes fadeOutScale { 
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.9); }
}
.preview-header { animation: 0.4s ease 0s 1 normal forwards running fadeIn; }
#mobile-layer-toggle, #mobile-inspector-toggle { display: none; }
.music-card-vinyl { flex-direction: column; align-items: center; gap: 15px; padding: 25px; }
.music-card-vinyl .music-info { text-align: center; gap: 5px; }
.vinyl-player { aspect-ratio: 1 / 1; flex-shrink: 0; width: 120px; max-width: 100%; position: relative; }
.vinyl-record { background-color: rgb(17, 17, 17); background-image: repeating-radial-gradient(circle, rgb(51, 51, 51), rgb(51, 51, 51) 1px, rgb(17, 17, 17) 1px, rgb(17, 17, 17) 3px); border-radius: 50%; justify-content: center; align-items: center; width: 100%; height: 100%; animation: 8s linear 0s infinite normal none running spin; display: flex; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px, rgba(255, 255, 255, 0.1) 0px 0px 5px inset; }
.vinyl-label { object-fit: cover; background-color: rgb(255, 255, 255); border: 1px solid rgb(85, 85, 85); border-radius: 50%; width: 45%; height: 45%; }
.vinyl-tonearm { transform-origin: 90% center; z-index: 20; pointer-events: none; background-color: rgb(209, 213, 219); border-radius: 3px; width: 75px; height: 6px; position: absolute; top: -10px; right: -10px; transform: rotate(-35deg); box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 4px; }
.vinyl-tonearm::before { content: ""; background-color: rgb(55, 65, 81); border-radius: 2px; width: 14px; height: 12px; position: absolute; top: -3px; left: -2px; transform: rotate(25deg); box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 2px; }
.vinyl-tonearm::after { content: ""; background: radial-gradient(circle, rgb(243, 244, 246) 40%, rgb(156, 163, 175) 100%); border: 2px solid rgb(255, 255, 255); border-radius: 50%; width: 18px; height: 18px; position: absolute; top: -6px; right: -6px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px; }
@keyframes highlight { 
  0% { background-color: rgba(0, 122, 255, 0.2); }
  100% { background-color: rgba(0, 0, 0, 0); }
}
.highlight-animation { animation: 1.5s ease-out 0s 1 normal none running highlight; }
.showcase-card { background-color: var(--card-bg-color,var(--g-comp-bg-color)); width: 100%; height: 100%; color: var(--card-text-color,var(--g-comp-text-color)); border-radius: var(--g-comp-border-radius); padding: var(--g-comp-padding); z-index: 1; text-align: left; flex-direction: column; transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s; display: flex; position: relative; overflow: hidden; }
.showcase-cover { object-fit: cover; z-index: 2; flex-shrink: 0; transition: transform 0.3s; position: relative; }
.showcase-info { z-index: 2; flex-direction: column; flex-grow: 1; min-width: 0px; display: flex; position: relative; }
.showcase-meta { opacity: 0.7; margin-bottom: 5px; font-size: 0.85em; }
.showcase-rating { color: rgb(255, 180, 0); letter-spacing: 1px; margin: 5px 0px; font-size: 0.9em; }
.showcase-comment { white-space: pre-wrap; margin: 10px 0px; font-size: 0.95em; line-height: 1.6; }
.showcase-tags { flex-wrap: wrap; gap: 6px; width: 100%; margin-top: auto; display: flex; }
.showcase-tag { white-space: nowrap; background-color: rgba(127, 127, 127, 0.1); border: 1px solid rgba(127, 127, 127, 0.1); border-radius: 4px; flex-shrink: 0; padding: 3px 8px; font-size: 0.75em; display: inline-block; }
.showcase-card[data-style="magazine"] { z-index: 2; margin-bottom: 0px; position: relative; overflow: visible; }
.showcase-card[data-style="magazine"][data-layout="horizontal"] { flex-direction: row; align-items: flex-start; gap: 20px; }
.showcase-card[data-style="magazine"] .showcase-cover { background-color: var(--card-bg-color,#fff); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 20px; }
.showcase-card[data-style="magazine"][data-layout="vertical"] .showcase-cover { width: calc(100% - 30px); height: 200px; margin-top: calc(-1 * var(--g-comp-padding) - 20px); border-radius: 8px; margin-bottom: 15px; margin-left: auto; margin-right: auto; }
.preview-item-wrapper { isolation: isolate; overflow: visible !important; }
.showcase-card[data-style="magazine"][data-layout="horizontal"] .showcase-cover { width: 100px; height: 140px; margin-top: calc(-1 * var(--g-comp-padding) - 15px); border-radius: 6px; }
.showcase-card[data-style="magazine"] .showcase-comment { border-left: 3px solid var(--g-theme-accent,#007aff); background: linear-gradient(90deg, rgba(127, 127, 127, 0.05) 0%, rgba(127, 127, 127, 0) 100%); border-radius: 0px 8px 8px 0px; padding: 10px 12px; font-family: "Songti SC", "Noto Serif SC", serif; font-style: italic; }
.showcase-card[data-style="poster"] { border-radius: var(--g-comp-border-radius); isolation: isolate; background: var(--poster-bg,#222); text-align: center; justify-content: center; align-items: center; padding: 25px; position: relative; overflow: hidden; color: rgb(255, 255, 255) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; }
.showcase-card[data-style="poster"]::before { display: none; }
.showcase-card[data-style="poster"]::after { content: ""; z-index: -1; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 100%); position: absolute; inset: 0px; }
.showcase-card[data-style="poster"] .showcase-cover { border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; align-self: center; width: 120px; height: 120px; margin-bottom: 20px; box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 30px; }
.showcase-card[data-style="poster"] .showcase-info { text-align: center; align-items: center; width: 100%; }
.showcase-card[data-style="poster"] .showcase-info > * { text-align: center; width: 100%; }
.showcase-card[data-style="poster"] .showcase-meta { opacity: 0.85; color: rgb(240, 240, 240); }
.showcase-card[data-style="poster"] .showcase-tags { justify-content: center; }
.showcase-card[data-style="poster"] .showcase-tag { color: rgb(255, 255, 255); backdrop-filter: blur(4px); background-color: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); }
.showcase-card[data-style="book"] { background-color: rgb(255, 253, 249); position: relative; overflow: hidden; flex-direction: row !important; align-items: flex-start !important; padding: 20px !important; font-family: "Songti SC", "Noto Serif SC", SimSun, serif !important; }
.showcase-card[data-style="book"]::after { content: ""; background-color: var(--accent-color,#c0392b); clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 50% 80%, 0px 100%); z-index: 10; width: 30px; height: 55px; position: absolute; top: 0px; right: 25px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px; }
.showcase-card[data-style="book"] .showcase-cover { object-fit: cover; z-index: 2; border-left: 4px solid rgba(60, 60, 60, 0.15); border-radius: 3px 6px 6px 3px; flex-shrink: 0; margin-right: 20px; box-shadow: rgba(0, 0, 0, 0.1) 3px 0px 6px inset, rgba(0, 0, 0, 0.15) 4px 5px 15px; width: 100px !important; height: 145px !important; }
.showcase-card[data-style="book"] .showcase-info { z-index: 2; flex: 1 1 0%; padding-top: 5px; }
.showcase-card[data-style="book"] .preview-card-title { letter-spacing: 1px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin-bottom: 8px; padding-bottom: 8px; font-weight: 700; }
.showcase-card[data-style="book"] .showcase-meta { opacity: 0.8; font-size: 0.85em; font-style: italic; }
.showcase-card[data-style="book"] .showcase-rating { display: none; }
.showcase-card.ticket-style { color: var(--card-text-color,#333); --stub-width: 90px; mask-image: radial-gradient(circle at calc(100% - var(--stub-width)) 0, transparent 8px, black 8.5px), radial-gradient(circle at calc(100% - var(--stub-width)) 100%, transparent 8px, black 8.5px); border-radius: 8px; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px; mask-composite: intersect; background-color: var(--card-bg-color,#fff) !important; flex-direction: row !important; padding: 0px !important; }
.ticket-left { flex: 1 1 0%; gap: 12px; min-width: 0px; padding: 15px 10px 15px 15px; display: flex; }
.ticket-poster-area img { object-fit: cover; filter: sepia(0.2) contrast(1.1); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 2px; width: 70px; height: 100px; }
.ticket-info-area { flex-direction: column; flex: 1 1 0%; justify-content: center; min-width: 0px; font-family: "Courier New", Courier, monospace; display: flex; }
.ticket-header { letter-spacing: 2px; opacity: 0.5; text-transform: uppercase; margin-bottom: 2px; font-size: 0.6rem; font-weight: 700; }
.ticket-title { white-space: nowrap; text-overflow: ellipsis; margin: 0px; font-size: 1.1rem; font-weight: 900; line-height: 1.2; overflow: hidden; }
.ticket-meta { opacity: 0.7; white-space: nowrap; text-overflow: ellipsis; margin: 2px 0px 6px; font-size: 0.75rem; overflow: hidden; }
.ticket-comment { opacity: 0.85; -webkit-line-clamp: 2; border-top: 1px dashed rgba(0, 0, 0, 0.15); -webkit-box-orient: vertical; margin-top: auto; padding-top: 6px; font-size: 0.75rem; font-style: italic; line-height: 1.3; display: -webkit-box; overflow: hidden; }
.showcase-card.ticket-style .ticket-right { position: relative; overflow: hidden; }
.showcase-card.ticket-style svg.real-barcode { transform-origin: 50% center; transform: rotate(90deg); width: 80px !important; height: 100% !important; display: block !important; }
.preview-header[data-style="id-card-v"] svg.real-barcode { opacity: 0.8; mix-blend-mode: multiply; margin-top: auto; }
.ticket-barcode-wrapper { justify-content: center; align-items: center; width: 30px; height: 100%; display: flex; position: relative; overflow: hidden; }
.showcase-card.ticket-style svg.real-barcode { opacity: 0.8; mix-blend-mode: multiply; display: block; position: absolute; top: 50%; left: 50%; width: 140px !important; height: 30px !important; transform: translate(-50%, -50%) rotate(90deg) !important; }
.ticket-barcode { display: none !important; }
.ticket-right { width: var(--stub-width); background-color: rgba(0, 0, 0, 0.03); border-left: 2px dashed rgba(0, 0, 0, 0.15); flex-direction: row; flex-shrink: 0; justify-content: center; align-items: center; gap: 8px; padding: 10px 6px; display: flex; position: relative; }
.ticket-barcode { opacity: 0.75; filter: contrast(1.2); background: repeating-linear-gradient(currentcolor 0px, currentcolor 1px, rgba(0, 0, 0, 0) 1px, rgba(0, 0, 0, 0) 3px, currentcolor 3px, currentcolor 5px, rgba(0, 0, 0, 0) 5px, rgba(0, 0, 0, 0) 6px); width: 24px; height: 90%; }
.ticket-right-text-group { flex-direction: row; justify-content: center; align-items: center; gap: 4px; height: 100%; display: flex; }
.ticket-stub-title { writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 3px; opacity: 0.3; white-space: nowrap; font-size: 0.6rem; font-weight: 900; position: static; transform: rotate(180deg); }
.ticket-stub-no { writing-mode: vertical-rl; text-orientation: mixed; opacity: 0.6; white-space: nowrap; letter-spacing: 1px; font-family: "Courier New", Consolas, monospace; font-size: 0.65rem; font-weight: 700; transform: rotate(180deg); }
.preview-card-inner[data-card-style="grid"] { color: rgb(51, 51, 51) !important; background-color: rgb(255, 255, 255) !important; background-image: linear-gradient(rgb(224, 224, 224) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgb(224, 224, 224) 1px, rgba(0, 0, 0, 0) 1px) !important; background-position: -1px -1px !important; background-size: 24px 24px !important; border-top: 2px solid rgb(229, 57, 53) !important; padding-top: 12px !important; line-height: 24px !important; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 8px !important; }
.preview-card-inner[data-card-style="grid"] .preview-card-title { background: rgb(255, 255, 255); border-radius: 4px; margin-bottom: 12px; padding: 0px 8px; font-weight: 700; display: inline-block; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px; color: rgb(26, 35, 126) !important; }
.preview-card-inner[data-card-style="paper"] { color: rgb(58, 36, 9) !important; text-shadow: rgba(255, 255, 255, 0.2) 0px 1px 1px !important; background-blend-mode: multiply, overlay, normal !important; background-color: tan !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperFiber'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperFiber)' opacity='0.55'/%3E%3C/svg%3E"), radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.4) 0%, rgba(184, 134, 11, 0.1) 40%, rgba(139, 69, 19, 0.3) 100%), radial-gradient(circle at 10% 90%, rgba(255, 255, 210, 0.3) 0%, rgba(184, 134, 11, 0.1) 50%, rgba(139, 69, 19, 0.2) 100%) !important; background-size: 150px 150px, cover, cover !important; border: 1px solid rgba(80, 42, 4, 0.1) !important; box-shadow: rgba(80, 42, 4, 0.2) 0px 0px 50px inset, rgba(80, 42, 4, 0.3) 0px 0px 0px 1px inset !important; }
.preview-card-inner[data-card-style="paper"] .preview-card-title { border-bottom: 1px solid rgba(74, 42, 12, 0.3); padding-bottom: 8px; font-weight: 700; color: rgb(74, 42, 12) !important; }
.preview-card-inner[data-card-style="terminal"] { letter-spacing: 1px; text-shadow: 0px 0px 2px; background-color: rgba(26, 27, 38, var(--card-bg-opacity,1)) !important; color: var(--card-text-color,#4af626) !important; border: 1px solid rgb(51, 51, 51) !important; border-radius: 6px !important; padding-top: 38px !important; font-family: "Fusion Pixel 12px Mono latin", Consolas, Monaco, monospace !important; font-size: 0.95em !important; box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 30px !important; }
.preview-card-inner[data-card-style="browser"] { background-color: rgba(255, 255, 255, var(--card-bg-opacity,1)) !important; border: 1px solid rgba(0, 0, 0, 0.1) !important; border-radius: 8px !important; flex-direction: column !important; padding: 0px !important; display: flex !important; overflow: hidden !important; box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 30px !important; }
.preview-card-inner[data-card-style="browser"] .preview-card-content { flex: 1 1 0%; padding: var(--g-comp-padding) !important; }
.preview-card-inner[data-card-style="win95"] { flex-direction: column; display: flex; overflow: hidden; background-color: rgba(192, 192, 192, var(--card-bg-opacity,1)) !important; color: var(--card-text-color,#000) !important; border: 2px solid rgb(223, 223, 223) !important; border-radius: 0px !important; padding: 2px !important; box-shadow: rgb(255, 255, 255) 1px 1px inset, rgb(0, 0, 0) -1px -1px inset, gray -2px -2px inset, rgba(0, 0, 0, 0.3) 2px 2px 5px !important; }
.preview-card-inner[data-card-style="win95"] .win95-header { color: rgb(255, 255, 255); white-space: nowrap; background: navy; justify-content: space-between; align-items: center; margin-bottom: 4px; padding: 2px 4px; font-family: "Fusion Pixel 12px Mono latin", Consolas, sans-serif; font-size: 14px; font-weight: 700; display: flex; }
.preview-card-inner[data-card-style="win95"] .win95-controls { gap: 2px; display: flex; }
.preview-card-inner[data-card-style="win95"] .win95-btn { color: rgb(0, 0, 0); text-align: center; cursor: default; background: silver; border-width: 1px; border-style: solid; border-image: initial; border-color: rgb(255, 255, 255) rgb(0, 0, 0) rgb(0, 0, 0) rgb(255, 255, 255); width: 16px; height: 14px; font-family: sans-serif; font-size: 10px; line-height: 12px; box-shadow: gray -1px -1px inset; }
.preview-card-inner[data-card-style="win95"] .preview-card-content { flex: 1 1 0%; padding: 10px; font-family: "Fusion Pixel 12px Mono latin", 宋体, SimSun, serif; line-height: 1.4; }
.preview-card-inner[data-card-style="terminal"]::before { content: "● ● ●  Terminal"; color: rgb(86, 95, 137); white-space: pre; z-index: 10; pointer-events: none; letter-spacing: 2px; text-align: left; background: rgb(36, 40, 59); border-bottom: 1px solid rgb(17, 17, 17); border-radius: 5px 5px 0px 0px; height: 28px; padding-left: 10px; font-family: sans-serif; font-size: 10px; line-height: 28px; position: absolute; top: 0px; left: 0px; right: 0px; }
.preview-card-inner[data-card-style="terminal"] .preview-card-title { border-bottom: 1px dashed rgba(255, 255, 255, 0.2); margin-bottom: 10px; padding-bottom: 8px; font-weight: 700; }
.preview-card-inner[data-card-style="terminal"] .preview-card-title::before { content: "> "; opacity: 0.6; }
.preview-card-inner[data-card-style="terminal"] .preview-card-content::after { content: "▋"; opacity: 0.8; margin-left: 2px; animation: 1s step-end 0s infinite normal none running terminal-blink; }
@keyframes terminal-blink { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
.showcase-card[data-style="steam"] { border: 1px solid rgba(0, 0, 0, 0.5); min-height: 180px; overflow: hidden; color: rgb(198, 212, 223) !important; background: linear-gradient(rgb(27, 40, 56) 0%, rgb(27, 40, 56) 100%) !important; flex-direction: row !important; align-items: stretch !important; height: auto !important; padding: 0px !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px !important; }
.showcase-card[data-style="steam"] .showcase-cover { object-fit: cover; background-color: rgb(0, 0, 0); border-right: 1px solid rgb(0, 0, 0); border-radius: 0px !important; width: 160px !important; min-width: 160px !important; height: 100% !important; margin: 0px !important; }
.showcase-card[data-style="steam"] .showcase-info { background: linear-gradient(135deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100%); flex-direction: column; flex-grow: 1; justify-content: flex-start; padding: 12px 15px; display: flex; }
.showcase-card[data-style="steam"] h3 { border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding-bottom: 8px; margin-bottom: 4px !important; }
.showcase-card[data-style="steam"] h3 span { text-shadow: rgba(0, 0, 0, 0.5) 1px 1px; font-size: 1.3em; font-weight: 400; color: rgb(255, 255, 255) !important; }
.showcase-card[data-style="steam"] .showcase-comment { background-color: rgb(22, 32, 45); border: 1px solid rgb(69, 85, 108); border-radius: 2px; flex-direction: column; flex-grow: 1; margin: 10px 0px; padding: 0px; font-size: 0.9em; line-height: 1.5; display: flex; color: rgb(172, 178, 184) !important; font-style: normal !important; }
.showcase-card[data-style="steam"][data-is-bad="true"] .showcase-comment { border-color: rgb(88, 51, 51); }
.steam-review-header { color: rgb(102, 192, 244); background-color: rgba(0, 0, 0, 0.2); border-bottom: 1px solid rgb(69, 85, 108); align-items: center; gap: 6px; padding: 8px 10px; font-size: 1em; font-weight: 400; display: flex; }
.steam-review-header.is-bad { color: rgb(163, 76, 38); background-color: rgba(40, 10, 10, 0.2); border-bottom-color: rgb(88, 51, 51); }
.steam-review-header .iconify { font-size: 1.2em; }
.steam-review-content { white-space: pre-wrap; padding: 10px; }
.showcase-card[data-style="steam"] .showcase-cover { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; border-radius: 0px !important; }
.showcase-card[data-style="steam"] h3 span { text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px; font-size: 1.2em; color: rgb(255, 255, 255) !important; }
.showcase-card[data-style="steam"] .showcase-meta { font-size: 0.85em; color: rgb(143, 152, 160) !important; }
.showcase-card[data-style="steam"] .showcase-rating { display: none; }
.showcase-card[data-style="steam"] .showcase-tag { color: rgb(103, 193, 245); background-color: rgba(103, 193, 245, 0.2); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 2px; }
.preview-items-container figure.polaroid-style { background: rgb(255, 255, 255); border-radius: 0px; padding: 8px 8px 12px; transition: transform 0.3s, box-shadow 0.3s; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px; color: rgb(51, 51, 51) !important; height: auto !important; }
.preview-items-container figure.polaroid-style:hover { z-index: 10; transform: scale(1.02) rotate(0deg); box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 25px; }
.preview-items-container figure.polaroid-style .img-wrapper { aspect-ratio: 1 / 1; background: rgb(238, 238, 238); border: 1px solid rgba(0, 0, 0, 0.05); width: 100%; }
.preview-items-container figure.polaroid-style img { object-fit: cover; border-radius: 0px; height: 100% !important; }
.preview-items-container figure.polaroid-style figcaption { text-align: center; opacity: 0.9; width: 100%; margin-top: 8px; font-family: "LXGW WenKai", "Comic Sans MS", cursive, sans-serif; font-size: 1rem; position: static; color: rgb(51, 51, 51) !important; }
.preview-item-wrapper { z-index: 1; background-color: rgba(0, 0, 0, 0) !important; transition: transform 0.3s cubic-bezier(0.2, 0, 0.2, 1), border-radius 0.3s, box-shadow 0.3s !important; overflow: visible !important; }
.preview-card-inner, .music-card-preview, .showcase-card, .progress-bar-preview, .timeline-preview, .rpg-card-preview { z-index: 2; position: relative; }
.social-card-preview { background-color: var(--card-bg-color,var(--g-comp-bg-color)); width: 100%; color: var(--card-text-color,var(--g-comp-text-color)); border-radius: var(--g-comp-border-radius); padding: var(--g-comp-padding); font-size: var(--g-comp-content-font-size); flex-direction: column; gap: 10px; display: flex; text-align: left !important; }
.social-card-preview[data-style="moments"] { flex-direction: row; align-items: flex-start; gap: 12px; }
.social-card-preview[data-style="moments"] .social-avatar { background-color: rgb(238, 238, 238); background-position: 50% center; background-size: cover; border-radius: 6px; flex-shrink: 0; width: 42px; height: 42px; }
.social-card-preview[data-style="moments"] .social-right-col { flex-grow: 1; min-width: 0px; }
.social-card-preview[data-style="moments"] .social-name { color: var(--accent-color,#576b95); margin-bottom: 4px; font-size: 1.05em; font-weight: 700; line-height: 1.2; }
.social-card-preview[data-style="moments"] .social-content { white-space: pre-wrap; margin-bottom: 8px; line-height: 1.5; }
.social-card-preview[data-style="moments"] .social-images-grid { gap: 4px; width: 100%; max-width: 300px; margin-bottom: 10px; display: grid; }
.social-card-preview[data-style="moments"] .social-images-grid[data-count="1"] { grid-template-columns: 1fr; max-width: 200px; }
.social-card-preview[data-style="moments"] .social-images-grid[data-count="1"] .social-img { object-fit: cover; max-height: 250px; }
.social-card-preview[data-style="moments"] .social-images-grid[data-count="2"], .social-card-preview[data-style="moments"] .social-images-grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.social-card-preview[data-style="moments"] .social-images-grid[data-count="3"], .social-card-preview[data-style="moments"] .social-images-grid[data-count="5"], .social-card-preview[data-style="moments"] .social-images-grid[data-count="6"], .social-card-preview[data-style="moments"] .social-images-grid[data-count="7"], .social-card-preview[data-style="moments"] .social-images-grid[data-count="8"], .social-card-preview[data-style="moments"] .social-images-grid[data-count="9"] { grid-template-columns: repeat(3, 1fr); }
.social-img { aspect-ratio: 1 / 1; object-fit: cover; cursor: pointer; background-color: rgb(240, 240, 240); background-position: 50% center; background-repeat: no-repeat; background-size: cover; width: 100%; }
.social-meta-row { color: inherit; opacity: 0.6; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: 0.8em; display: flex; }
.social-comments-area { border-radius: 4px; margin-top: 5px; padding: 6px 10px; font-size: 0.9em; position: relative; background-color: rgba(0, 0, 0, 0.05) !important; }
.social-card-preview[data-style="moments"] .social-comments-area::before { content: ""; border-left: 6px solid rgba(0, 0, 0, 0); border-right: 6px solid rgba(0, 0, 0, 0); width: 0px; height: 0px; position: absolute; top: -6px; left: 12px; border-bottom: 6px solid rgba(0, 0, 0, 0.05) !important; }
.social-likes { color: var(--accent-color,#576b95); border-bottom: 1px solid rgba(0, 0, 0, 0.05); align-items: flex-start; gap: 5px; margin-bottom: 6px; padding-bottom: 4px; display: flex; }
.social-likes .iconify { transform: translateY(2px); }
.social-card-preview[data-style="feed"] { gap: 8px; }
.social-card-preview[data-style="feed"] .social-header { align-items: center; gap: 10px; display: flex; }
.social-card-preview[data-style="feed"] .social-avatar { background-color: rgb(238, 238, 238); background-position: 50% center; background-size: cover; border-radius: 50%; width: 48px; height: 48px; }
.social-card-preview[data-style="feed"] .social-name-col { flex-direction: column; display: flex; }
.social-card-preview[data-style="feed"] .social-name { font-size: 1.1em; font-weight: 700; }
.social-card-preview[data-style="feed"] .social-handle { opacity: 0.6; font-size: 0.9em; font-weight: 400; }
.social-card-preview[data-style="feed"] .social-images-grid { aspect-ratio: auto; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 12px; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 2px; margin-top: 8px; display: grid; overflow: hidden; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; }
.social-card-preview[data-style="feed"] .social-images-grid[data-count="1"] { grid-template-columns: 1fr; }
.social-card-preview[data-style="feed"] .social-images-grid[data-count="2"] { aspect-ratio: 2 / 1; grid-template-columns: minmax(0px, 1fr) minmax(0px, 1fr); }
.social-card-preview[data-style="feed"] .social-images-grid[data-count="3"] { aspect-ratio: 16 / 9; grid-template-rows: minmax(0px, 1fr) minmax(0px, 1fr); grid-template-columns: 1.2fr minmax(0px, 1fr); }
.social-card-preview[data-style="feed"] .social-images-grid[data-count="3"] .social-img:first-child { grid-area: 1 / 1 / 3; height: 100%; }
.social-card-preview[data-style="feed"] .social-images-grid[data-count="3"] .social-img:nth-child(2) { grid-area: 1 / 2; }
.social-card-preview[data-style="feed"] .social-images-grid[data-count="3"] .social-img:nth-child(3) { grid-area: 2 / 2; }
.social-card-preview[data-style="feed"] .social-images-grid[data-count="4"] { aspect-ratio: 1 / 1; grid-template-columns: 1fr 1fr; }
.social-card-preview[data-style="feed"] .social-images-grid[data-count="5"], .social-card-preview[data-style="feed"] .social-images-grid[data-count="6"], .social-card-preview[data-style="feed"] .social-images-grid[data-count="7"], .social-card-preview[data-style="feed"] .social-images-grid[data-count="8"], .social-card-preview[data-style="feed"] .social-images-grid[data-count="9"] { aspect-ratio: auto; grid-template-columns: repeat(3, 1fr); }
.social-card-preview[data-style="feed"] .social-footer-stats { color: inherit; opacity: 0.65; border-top: 1px solid rgba(0, 0, 0, 0.05); justify-content: space-between; margin-top: 10px; padding-top: 10px; font-size: 0.9em; display: flex; }
.social-card-preview[data-style="feed"] .stat-item { align-items: center; gap: 5px; display: flex; }
.social-card-preview[data-style="instagram"] { border: 1px solid rgb(219, 219, 219); background: rgb(255, 255, 255) !important; gap: 0px !important; padding: 0px !important; }
.social-card-preview[data-style="instagram"] .social-header { justify-content: space-between; align-items: center; padding: 10px 12px; display: flex; }
.social-card-preview[data-style="instagram"] .social-avatar { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; width: 32px; height: 32px; }
.social-card-preview[data-style="instagram"] .social-name { margin-left: 10px; font-weight: 600; color: rgb(38, 38, 38) !important; font-size: 0.9rem !important; }
.social-card-preview[data-style="instagram"] .social-images-grid { aspect-ratio: auto; background: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; gap: 1px; margin: 0px; width: 100% !important; }
.social-ins-actions { color: rgb(38, 38, 38); justify-content: space-between; padding: 10px 12px 0px; font-size: 1.5rem; display: flex; }
.social-ins-likes { color: rgb(38, 38, 38); margin-top: 8px; padding: 0px 12px; font-size: 0.9rem; font-weight: 600; }
.social-ins-content { padding: 6px 12px 12px; font-size: 0.9rem; line-height: 1.4; }
.inspector-social-img-list { grid-template-columns: repeat(3, 1fr); gap: 5px; margin-top: 5px; display: grid; }
.inspector-social-img-item { aspect-ratio: 1 / 1; border: 1px solid var(--border-color); cursor: grab; background: rgb(238, 238, 238); border-radius: 4px; position: relative; overflow: hidden; }
.inspector-social-img-item img { object-fit: cover; width: 100%; height: 100%; }
.inspector-social-img-item .delete-btn { color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.6); border-radius: 50%; justify-content: center; align-items: center; width: 20px; height: 20px; padding: 0px; font-size: 12px; display: flex; position: absolute; top: 2px; right: 2px; }
.inspector-social-img-item:hover .delete-btn { display: flex; }
.inspector-social-comment-item { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 4px; margin-bottom: 5px; padding: 8px; }
#mobile-theme-fab { background: var(--bg-card); border: 1px solid var(--border-color); z-index: 900; width: 40px; height: 40px; color: var(--text-primary); cursor: pointer; border-radius: 50%; justify-content: center; align-items: center; font-size: 1.2rem; transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; display: none; position: fixed; top: 85px; right: 15px; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; }
.resource-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; padding: 10px 0px; display: grid; }
.res-img-card { aspect-ratio: 1 / 1; border: 1px solid var(--border-color); background: var(--bg-image-thumb); border-radius: 8px; transition: transform 0.2s; position: relative; overflow: hidden; }
.res-img-card:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
.res-img-card img { object-fit: cover; width: 100%; height: 100%; }
.res-img-actions { gap: 4px; display: flex; position: absolute; top: 4px; right: 4px; }
.res-btn { cursor: pointer; color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; width: 24px; height: 24px; font-size: 0.8rem; display: flex; }
.res-btn.delete { background: rgba(255, 59, 48, 0.9); }
.res-btn.delete:hover { background: rgb(211, 47, 47); }
.res-badge-used { color: rgb(255, 255, 255); text-align: center; backdrop-filter: blur(2px); background: rgba(0, 122, 255, 0.8); width: 100%; padding: 2px 0px; font-size: 0.7rem; position: absolute; bottom: 0px; left: 0px; }
.empty-state { text-align: center; color: var(--text-placeholder); grid-column: 1 / -1; padding: 40px 0px; font-style: italic; }
.p2p-ripple-container { justify-content: center; align-items: center; width: 80px; height: 80px; margin: 0px auto 20px; display: flex; position: relative; }
.p2p-icon { color: var(--color-primary); z-index: 2; font-size: 40px; position: relative; }
.p2p-ripple { border: 2px solid var(--color-primary); opacity: 0; border-radius: 50%; width: 100%; height: 100%; animation: 2s ease 0s infinite normal none running ripple; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.p2p-ripple:nth-child(2) { animation-delay: 0.5s; }
.p2p-ripple:nth-child(3) { animation-delay: 1s; }
@keyframes ripple { 
  0% { opacity: 0.8; border-width: 4px; width: 40px; height: 40px; }
  100% { opacity: 0; border-width: 0px; width: 120px; height: 120px; }
}
.p2p-status-badge { background: var(--bg-input); color: var(--text-secondary); border-radius: 20px; max-width: 100%; margin: 0px auto 15px; padding: 6px 16px; font-size: 0.85rem; transition: background-color 0.3s, color 0.3s; display: table; }
.p2p-status-badge.connected { color: rgb(46, 125, 50); background: rgb(232, 245, 233); font-weight: 600; }
#p2p-qrcode-box { background: rgb(255, 255, 255); border-radius: 12px; width: fit-content; margin: 0px auto 10px; padding: 10px; transition: opacity 0.3s; display: block; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 15px; }
#p2p-qrcode-box img { max-width: 100%; display: block; }
#receiver-overlay { background: var(--bg-editor); z-index: 20000; text-align: center; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; padding: 20px; display: flex; position: fixed; top: 0px; left: 0px; }
.receiver-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; width: 100%; max-width: 400px; padding: 30px; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 40px; }
.receiver-progress { background: var(--bg-input); border-radius: 3px; width: 100%; height: 6px; margin: 20px 0px; overflow: hidden; }
.receiver-progress-bar { background: var(--color-primary); width: 0%; height: 100%; transition: width 0.2s linear; }
#mobile-theme-fab { top: calc(60px + var(--system-broadcast-height,0px) + var(--global-banners-height,0px)); background: var(--bg-card); border: 1px solid var(--border-color); z-index: 900; width: 40px; height: 40px; color: var(--text-primary); cursor: pointer; border-radius: 50%; justify-content: center; align-items: center; font-size: 1.2rem; transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; display: none; position: fixed; right: 15px; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; }
html.dark-mode #mobile-theme-fab { color: gold; background: rgb(51, 51, 51); border-color: rgb(85, 85, 85); }
.save-status-badge { color: var(--text-secondary); opacity: 0; pointer-events: none; background: var(--bg-input); border: 1px solid var(--border-color); z-index: 2000; white-space: nowrap; border-radius: 12px; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; transition: opacity 0.3s; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
@media (max-width: 1024px) {
  .save-status-badge { background: var(--bg-card); border-color: var(--color-primary); color: var(--color-primary); left: 15px; top: max(15px, env(safe-area-inset-top) + 10px); position: fixed; transform: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
}
#rich-text-editor-container { border: 1px solid var(--border-color); border-radius: 4px; flex-direction: column; display: flex; height: 300px !important; max-height: 40vh !important; }
#rich-text-editor-container .ql-container { flex: 1 1 0%; height: auto !important; overflow-y: auto !important; }
.preview-card-content .ql-container { font-family: inherit; font-size: inherit; text-align: inherit; width: 100% !important; height: auto !important; overflow: visible !important; }
.preview-card-content .ql-editor { line-height: inherit; min-height: 1em; user-select: text !important; touch-action: auto !important; white-space: pre-wrap !important; word-break: break-word !important; outline: none !important; padding: 0px !important; overflow: visible !important; }
.preview-card-content .ql-container { outline: none !important; }
.preview-card-content .ql-editor p { min-height: 1em; line-height: inherit; margin: 0px !important; padding: 0px !important; }
.preview-card-content p:empty { min-height: 1em !important; display: block !important; }
.preview-card-content p:has(br) { min-height: 1em !important; display: block !important; }
.ql-tooltip { white-space: nowrap; z-index: 20000 !important; writing-mode: horizontal-tb !important; pointer-events: auto !important; width: max-content !important; max-width: 100vw !important; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px !important; }
@media (min-width: 769px) {
  .ql-bubble .ql-tooltip { transform: translate(0px, 0px); position: absolute !important; }
}
@media (max-width: 768px) {
  .ql-bubble .ql-tooltip.global-fixed-tooltip { top: calc(20px + env(safe-area-inset-top)) !important; opacity: 1 !important; z-index: 2147483647 !important; background-color: rgb(51, 51, 51) !important; border-radius: 12px !important; flex-wrap: wrap !important; justify-content: center !important; width: auto !important; min-width: 280px !important; max-width: 95vw !important; margin-top: 0px !important; padding: 8px 12px !important; display: flex !important; position: fixed !important; left: 50% !important; transform: translate(-50%) !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 20px !important; }
  .ql-bubble .ql-tooltip-arrow { display: none !important; }
  .ql-bubble .ql-tooltip-editor input { color: rgb(255, 255, 255) !important; background: rgba(255, 255, 255, 0.1) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; width: 150px !important; height: 35px !important; }
  .ql-bubble .ql-tooltip button { width: 26px !important; height: 26px !important; }
}
.preview-card-inner.is-editing-rich-text { min-height: 100%; height: auto !important; overflow: visible !important; }
.preview-card-content.is-editing-rich-text { max-height: none !important; }
.preview-item-wrapper.is-editing-wrapper { z-index: 5000 !important; contain: none !important; position: relative !important; }
.progress-bar-preview[data-style="battery"] { align-items: center; gap: 10px; flex-direction: row !important; }
.progress-bar-preview[data-style="battery"] .progress-bar-header { display: none !important; }
.progress-bar-preview[data-style="battery"] .progress-bar-track { border: 2px solid var(--g-comp-text-color); padding: 2px; position: relative; background: 0px 0px !important; border-radius: 4px !important; height: 24px !important; overflow: visible !important; }
.progress-bar-preview[data-style="battery"] .progress-bar-track::after { content: ""; background: var(--g-comp-text-color); border-radius: 0px 2px 2px 0px; width: 3px; position: absolute; top: 4px; bottom: 4px; right: -5px; }
.progress-bar-preview[data-style="battery"] .progress-bar-fill { background: linear-gradient(rgb(168, 224, 99), rgb(86, 171, 47)); box-shadow: rgba(255, 255, 255, 0.4) 0px 1px inset; border-radius: 1px !important; height: 100% !important; }
.progress-bar-preview[data-style="battery"][data-value-low="true"] .progress-bar-fill { background: linear-gradient(rgb(255, 94, 98), rgb(255, 153, 102)); }
.progress-bar-preview[data-style="retro"] .progress-bar-track { border-width: 2px; border-style: solid; border-image: initial; border-color: gray rgb(255, 255, 255) rgb(255, 255, 255) gray; padding: 2px; background: silver !important; border-radius: 0px !important; height: 24px !important; }
.progress-bar-preview[data-style="retro"] .progress-bar-fill { background-size: 100% 100%; background-color: navy !important; background-image: repeating-linear-gradient(90deg, navy, navy 10px, rgba(0, 0, 0, 0) 10px, rgba(0, 0, 0, 0) 12px) !important; border-radius: 0px !important; }
.timeline-preview[data-style="receipt"] { background-color: rgb(255, 253, 245); border-width: 2px 1px; border-style: dashed solid; border-color: rgb(204, 204, 204) rgb(221, 221, 221); border-image: initial; padding-left: 25px; font-family: "Fusion Pixel 12px Mono latin", Consolas, monospace; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 6px; color: rgb(51, 51, 51) !important; }
.timeline-preview[data-style="receipt"] .timeline-line { border-left: 1px dashed rgb(153, 153, 153); width: 0px; left: 6px; background: 0px 0px !important; }
.timeline-preview[data-style="receipt"] .timeline-dot { background: rgb(51, 51, 51); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; width: 6px; height: 6px; top: 5px; left: -24px; }
.timeline-preview[data-style="receipt"] .timeline-time { border-bottom: 1px dotted rgb(204, 204, 204); width: 100%; margin-bottom: 2px; font-weight: 400; }
.timeline-preview[data-style="metro"] { background-color: rgb(245, 245, 247); padding-left: 50px; }
.timeline-preview[data-style="metro"] .timeline-line { border-radius: 3px; width: 6px; left: 22px; background-color: var(--tl-accent-color) !important; }
.timeline-preview[data-style="metro"] .timeline-dot { border: 4px solid var(--tl-accent-color); background: rgb(255, 255, 255); width: 16px; height: 16px; top: 2px; left: -33px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; }
.timeline-preview[data-style="metro"] .timeline-time { background: var(--tl-accent-color); color: rgb(255, 255, 255); border-radius: 4px; padding: 2px 8px; font-size: 0.75em; font-weight: 700; display: inline-block; }
.timeline-preview[data-style="metro"] .timeline-content { font-size: 1.05em; font-weight: 700; }
.grid-preview-container { gap: 10px; width: 100%; display: grid; }
.grid-preview-container.is-masonry { align-items: flex-start; gap: 10px; display: flex !important; }
.grid-masonry-column { flex-direction: column; flex: 1 1 0%; gap: 10px; min-width: 0px; display: flex; }
.grid-item { flex-direction: column; transition: transform 0.2s; display: flex; position: relative; overflow: hidden; }
.grid-img-wrapper { border-radius: var(--grid-radius,8px); background: rgba(0, 0, 0, 0.05); width: 100%; position: relative; overflow: hidden; }
.grid-preview-container[data-style="circle"] .grid-img-wrapper { width: 100%; overflow: hidden; mask-image: -webkit-radial-gradient(center, rgb(255, 255, 255), rgb(0, 0, 0)); aspect-ratio: 1 / 1 !important; border-radius: 50% !important; }
.grid-preview-container[data-style="circle"] .grid-img-wrapper img { object-fit: cover !important; border-radius: 0px !important; width: 100% !important; height: 100% !important; }
.grid-preview-container[data-style="circle"] .grid-item { box-shadow: none !important; background-color: rgba(0, 0, 0, 0) !important; border-radius: 0px !important; overflow: visible !important; }
.grid-preview-container[data-style="circle"] .grid-label { margin-top: 10px; }
.grid-img-wrapper img { object-fit: cover; width: 100%; height: 100%; transition: transform 0.3s; position: absolute; top: 0px; left: 0px; }
.grid-preview-container.is-masonry .grid-img-wrapper img { object-fit: contain; height: auto; position: static; }
.grid-item:hover .grid-img-wrapper img { transform: scale(1.05); }
.grid-label { text-align: center; opacity: 0.95; overflow-wrap: break-word; margin-top: 6px; font-size: 0.9em; font-weight: 600; line-height: 1.3; }
.grid-subtitle { text-align: center; opacity: 0.7; overflow-wrap: break-word; white-space: pre-line; margin-top: 2px; font-size: 0.75em; line-height: 1.2; }
.grid-preview-container[data-style="polaroid"] { gap: 15px; }
.grid-preview-container[data-style="polaroid"] .grid-item { transform: rotate(var(--grid-rot,0deg)); background: rgb(255, 255, 255); padding: 8px 8px 12px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px; color: rgb(51, 51, 51) !important; }
.grid-preview-container[data-style="polaroid"] .grid-img-wrapper { border: 1px solid rgba(0, 0, 0, 0.05); border-radius: 0px; }
.grid-preview-container[data-style="polaroid"] .grid-label { justify-content: center; width: 100%; margin-top: 8px; font-family: "LXGW WenKai", "Comic Sans MS", cursive, sans-serif; }
.grid-preview-container[data-style="inventory"] { background: rgba(0, 0, 0, 0.3); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 6px; gap: 4px; padding: 4px; }
.grid-preview-container[data-style="inventory"] .grid-item { aspect-ratio: 1 / 1; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 4px; padding: 4px; }
.grid-preview-container[data-style="inventory"] .grid-img-wrapper { border-radius: 2px; width: 100%; height: 100%; }
.grid-preview-container[data-style="inventory"] .grid-label { color: rgb(255, 255, 255); white-space: nowrap; text-overflow: ellipsis; pointer-events: none; background: rgba(0, 0, 0, 0.6); margin: 0px; padding: 2px; font-size: 0.7em; position: absolute; bottom: 0px; left: 0px; right: 0px; overflow: hidden; }
.unified-editor-item { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; align-items: stretch; margin-bottom: 8px; transition: border-color 0.2s, box-shadow 0.2s; display: flex; position: relative; overflow: hidden; }
.unified-editor-item:hover { border-color: var(--color-primary); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 8px; }
.unified-drag-handle { background: var(--bg-section); border-right: 1px solid var(--border-color); cursor: grab; width: 28px; color: var(--text-placeholder); flex-shrink: 0; justify-content: center; align-items: center; font-size: 1.2rem; display: flex; }
.unified-drag-handle:hover { color: var(--text-primary); background: var(--border-color); }
.unified-thumb { background: var(--bg-image-thumb); border: 1px solid var(--border-input); cursor: pointer; border-radius: 6px; flex-shrink: 0; width: 48px; min-width: 48px; height: 48px; position: relative; overflow: hidden; }
.unified-thumb img { object-fit: cover; width: 100%; height: 100%; display: block; }
.unified-thumb .placeholder-icon { color: rgb(204, 204, 204); font-size: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.unified-delete-btn { width: 36px; color: var(--text-secondary); border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-top-style: none; border-right-style: none; border-bottom-style: none; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-image: initial; border-left: 1px solid var(--border-color); cursor: pointer; background: rgba(0, 0, 0, 0.02); border-radius: 0px; flex-shrink: 0; justify-content: center; align-self: stretch; align-items: center; padding: 0px; font-size: 1.1rem; transition: color 0.2s, background-color 0.2s; display: flex; height: auto !important; position: static !important; }
.unified-delete-btn:hover { background: var(--color-danger); color: rgb(255, 255, 255) !important; }
.unified-delete-btn .iconify { font-size: 14px; }
.unified-content input[type="text"], .unified-content textarea { border-radius: 4px; font-size: 0.9em; background: var(--bg-editor) !important; border: 1px solid var(--border-input) !important; padding: 6px 8px !important; }
.unified-content input[type="text"]:focus, .unified-content textarea:focus { background: var(--bg-editor) !important; border-color: var(--color-primary) !important; }
#universal-color-picker-overlay { z-index: 20000; opacity: 0; visibility: hidden; pointer-events: auto; background: rgba(0, 0, 0, 0.35); width: 100%; height: 100%; transition: opacity 0.2s; position: fixed; top: 0px; left: 0px; }
#universal-color-picker { background: var(--bg-card); border: 1px solid var(--border-color); z-index: 20001; box-sizing: border-box; opacity: 0; visibility: hidden; flex-direction: column; gap: 12px; padding: 12px; transition: opacity 0.2s, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; position: fixed; box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 30px; }
#universal-color-picker-overlay.visible { opacity: 1; visibility: visible; }
#universal-color-picker.visible { opacity: 1; visibility: visible; transform: scale(1) translateY(0px); }
@media (min-width: 769px) {
  #universal-color-picker-overlay { display: none; }
  #universal-color-picker { border-radius: 10px; width: 260px; top: 50%; left: 50%; }
}
@media (max-width: 768px) {
  #universal-color-picker { padding-bottom: calc(15px + env(safe-area-inset-bottom)); border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; border-radius: 16px 16px 0px 0px; transform: translateY(100%); width: 100% !important; top: auto !important; bottom: 0px !important; left: 0px !important; }
  #universal-color-picker.visible { transform: translateY(0px); }
  #ucp-eyedropper-btn { display: none !important; }
}
.ucp-sv-box { cursor: crosshair; touch-action: none; background: red; border-radius: 6px; width: 100%; height: 150px; position: relative; overflow: hidden; }
.ucp-sv-white { background: linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0)); position: absolute; inset: 0px; }
.ucp-sv-black { background: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0)); position: absolute; inset: 0px; }
.ucp-sv-cursor { pointer-events: none; border: 2px solid rgb(255, 255, 255); border-radius: 50%; width: 12px; height: 12px; position: absolute; transform: translate(-6px, -6px); box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px; }
.ucp-controls-row { align-items: center; gap: 10px; margin-top: 4px; display: flex; }
.ucp-tool-btn { cursor: pointer; width: 28px; height: 28px; color: var(--text-secondary); background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 4px; flex-shrink: 0; justify-content: center; align-items: center; display: flex; }
.ucp-tool-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }
.ucp-tool-btn.small { width: 24px; height: 24px; font-size: 0.9em; }
.ucp-sliders-col { flex-direction: column; flex-grow: 1; justify-content: center; display: flex; }
.ucp-slider-track { cursor: pointer; touch-action: none; border-radius: 6px; width: 100%; height: 12px; position: relative; }
.ucp-slider-track.hue { background: linear-gradient(90deg, red 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, red 100%); }
.ucp-slider-cursor { pointer-events: none; background: rgb(255, 255, 255); border-radius: 50%; width: 14px; height: 14px; position: absolute; top: 50%; transform: translate(-7px, -50%); box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px; }
.ucp-preview-circle { background: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 50%; flex-shrink: 0; width: 34px; height: 34px; transition: background-color 0.1s; box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 2px 5px; }
.ucp-inputs-row { align-items: center; gap: 8px; display: flex; }
.ucp-input-group { flex-grow: 1; align-items: center; gap: 5px; display: none; position: relative; }
.ucp-input-group.active { display: flex; }
.ucp-text-input, .ucp-num-input { border: 1px solid var(--border-input); background-color: var(--bg-input); width: 100%; color: var(--text-primary); text-align: center; border-radius: 6px; padding: 6px; font-family: monospace; font-size: 0.85rem; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px inset; }
.ucp-text-input:focus, .ucp-num-input:focus { border-color: var(--color-primary); background: var(--bg-editor); outline: none; }
.ucp-input-label { text-align: center; width: 100%; color: var(--text-secondary); pointer-events: none; font-size: 0.65rem; position: absolute; bottom: -14px; right: 0px; }
.ucp-rec-section { border-top: 1px solid var(--border-color); flex-direction: column; gap: 8px; padding-top: 8px; display: flex; }
.ucp-rec-row { flex-wrap: wrap; gap: 6px; display: flex; }
.ucp-swatch { cursor: pointer; border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; width: 20px; height: 20px; position: relative; }
.ucp-swatch:hover { z-index: 1; transform: scale(1.1); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px; }
.ucp-rec-label { color: var(--text-secondary); margin-top: 2px; font-size: 0.7rem; }
#preview-stickers-layer { pointer-events: none; z-index: 10; border-radius: inherit; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: hidden; }
.sticker-item { cursor: grab; pointer-events: auto; user-select: none; transform-origin: 50% center; justify-content: center; align-items: center; min-width: 20px; min-height: 20px; display: flex; position: absolute; }
.sticker-item:active { cursor: grabbing; }
.sticker-item.selected { outline: 2px solid var(--color-primary); background-color: rgba(0, 122, 255, 0.05); z-index: 1000 !important; }
.handle-nw { cursor: nwse-resize; top: -6px; left: -6px; }
.handle-ne { cursor: nesw-resize; top: -6px; right: -6px; }
.handle-sw { cursor: nesw-resize; bottom: -6px; left: -6px; }
.handle-se { cursor: nwse-resize; bottom: -6px; right: -6px; }
.handle-rot { cursor: grab; background: var(--color-primary); top: -25px; left: 50%; transform: translate(-50%); }
.handle-rot::after { content: ""; background: var(--color-primary); z-index: -1; width: 1px; height: 15px; position: absolute; top: 10px; left: 50%; transform: translate(-50%); }
.sticker-content { pointer-events: none; width: 100%; height: 100%; font-size: inherit; white-space: nowrap; justify-content: center; align-items: center; line-height: 1; display: flex; }
.sticker-content img { object-fit: contain; width: 100%; height: 100%; }
.sticker-content .iconify, .sticker-content svg { fill: currentcolor; stroke: currentcolor; width: 100%; height: 100%; font-size: inherit; display: block; }
.sticker-content svg.stroked { fill: none; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.custom-svg-icon { vertical-align: middle; justify-content: center; align-items: center; width: 1em; height: 1em; display: inline-flex !important; }
.custom-svg-icon svg { display: block; fill: currentcolor !important; width: 100% !important; height: 100% !important; }
.icon-grid-item .custom-svg-icon { width: 24px !important; height: 24px !important; }
.tag-pill .custom-svg-icon { vertical-align: -0.15em; margin-right: 4px; font-size: 1.1em; }
.select-icon-btn .custom-svg-icon { vertical-align: middle; margin-right: 5px; font-size: 1.2em; }
.preview-items-container figure.film-style, .grid-preview-container[data-style="film"] { border-radius: 2px; position: relative; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 15px; color: rgb(255, 255, 255) !important; background-color: rgb(26, 26, 26) !important; padding: 28px 12px !important; overflow: visible !important; }
.preview-items-container figure.film-style::before, .preview-items-container figure.film-style::after, .grid-preview-container[data-style="film"]::before, .grid-preview-container[data-style="film"]::after { content: ""; opacity: 0.8; pointer-events: none; background-image: repeating-linear-gradient(90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 12px, rgb(255, 255, 255) 12px, rgb(255, 255, 255) 20px); height: 12px; position: absolute; left: 5px; right: 5px; }
.preview-items-container figure.film-style::before, .grid-preview-container[data-style="film"]::before { top: 8px; }
.preview-items-container figure.film-style::after, .grid-preview-container[data-style="film"]::after { bottom: 8px; }
.preview-items-container figure.film-style img { box-sizing: border-box; border: 2px solid rgb(255, 255, 255); border-radius: 0px !important; }
.preview-items-container figure.film-style figcaption { text-transform: uppercase; letter-spacing: 1px; margin-top: 8px; font-family: "Courier New", monospace; font-size: 0.8rem; color: rgb(170, 170, 170) !important; }
.grid-preview-container[data-style="film"] { gap: 15px; }
.grid-preview-container[data-style="film-strip"] { background-color: rgb(26, 26, 26); border-radius: 2px; flex-direction: column; gap: 0px; width: fit-content; min-width: 100%; margin: 0px auto; padding: 0px 12px; display: flex; position: relative; box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px; }
.grid-preview-container[data-style="film-strip"]::before, .grid-preview-container[data-style="film-strip"]::after { content: ""; opacity: 0.8; pointer-events: none; background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 12px, rgb(255, 255, 255) 12px, rgb(255, 255, 255) 20px); width: 10px; position: absolute; top: 0px; bottom: 0px; }
.grid-preview-container[data-style="film-strip"]::before { left: 4px; }
.grid-preview-container[data-style="film-strip"]::after { right: 4px; }
.grid-preview-container[data-style="film-strip"] .grid-item { box-shadow: none; background: 0px 0px; padding: 10px 0px; color: rgb(255, 255, 255) !important; }
.grid-preview-container[data-style="film-strip"] .grid-img-wrapper { border: 2px solid rgb(255, 255, 255); border-radius: 0px; width: 100%; }
.grid-preview-container[data-style="film-strip"] .grid-label { opacity: 0.7; margin-top: 4px; font-family: "Courier New", monospace; font-size: 0.7em; }
.grid-preview-container[data-style="film"] .grid-item { box-shadow: none; background: 0px 0px; color: rgb(255, 255, 255) !important; }
.grid-preview-container[data-style="film"] .grid-img-wrapper { border: 2px solid rgb(255, 255, 255); border-radius: 0px; }
.calendar-preview { background: var(--cal-bg); width: 100%; height: 100%; color: var(--cal-text); border-radius: var(--cal-radius); padding: var(--g-comp-padding); box-sizing: border-box; flex-direction: column; display: flex; }
.calendar-header { border-bottom: 2px solid rgba(0, 0, 0, 0); justify-content: space-between; align-items: center; margin-bottom: 15px; font-size: 1.1em; font-weight: 700; display: flex; }
.calendar-grid { text-align: center; grid-template-columns: repeat(7, 1fr); gap: 4px; display: grid; }
.cal-day-name { opacity: 0.6; margin-bottom: 5px; font-size: 0.75em; }
.cal-day-cell { aspect-ratio: 1 / 1; cursor: pointer; background: rgba(0, 0, 0, 0.02); border-radius: 4px; flex-direction: column; justify-content: center; align-items: center; font-size: 0.9em; display: flex; position: relative; }
.cal-day-cell.active { background: var(--cal-accent); color: var(--cal-accent-text,#fff); font-weight: 700; }
.calendar-preview.hide-cell-borders .cal-day-cell { background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }
.calendar-preview.hide-cell-borders .cal-day-cell.active { background: var(--cal-accent); }
.cal-day-note { opacity: 0.9; white-space: normal; word-break: break-all; text-overflow: ellipsis; max-width: 100%; max-height: 2.4em; margin-top: 2px; font-size: 0.6em; line-height: 1.2; display: none; overflow: hidden; }
.cal-day-cell.has-note { justify-content: flex-start; padding-top: 4px; }
.cal-day-cell.has-note .cal-day-note { display: block; }
.cal-day-cell.has-note .cal-day-note.multi-line { white-space: pre-wrap; text-align: left; padding: 0px 2px; }
.calendar-week-list { flex-direction: column; gap: 8px; display: flex; }
.cal-week-item { background: rgba(0, 0, 0, 0.03); border-radius: 6px; align-items: center; gap: 10px; padding: 8px; display: flex; }
.cal-week-label { width: 40px; color: var(--cal-accent); flex-shrink: 0; font-weight: 700; }
.cal-week-content { white-space: pre-wrap; flex: 1 1 0%; font-size: 0.9em; }
.calendar-preview[data-style="cute"] { background-image: linear-gradient(rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, rgba(0, 0, 0, 0) 1px); background-position: 50% 20px; background-size: 20px 20px; border: 2px solid rgba(0, 0, 0, 0.1); font-family: "LXGW WenKai", "Comic Sans MS", cursive, sans-serif; position: relative; overflow: visible; box-shadow: rgba(0, 0, 0, 0.05) 2px 3px 10px; color: rgb(74, 74, 74) !important; background-color: rgb(255, 253, 245) !important; }
.calendar-preview[data-style="cute"]::before { content: ""; background-color: var(--cal-accent); opacity: 0.4; z-index: 0; width: 120px; height: 35px; position: absolute; top: -12px; left: 50%; transform: translate(-50%) rotate(-1deg); box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px; mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 2%, rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, rgba(0, 0, 0, 0) 98%); }
.calendar-preview[data-style="cute"] .calendar-header { z-index: 1; text-align: center; letter-spacing: 2px; color: var(--cal-accent); text-shadow: rgb(255, 255, 255) 1px 1px; border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; margin-bottom: 15px; font-size: 1.4em; position: relative; }
.calendar-preview[data-style="cute"] .cal-day-name { color: rgb(136, 136, 136); font-size: 0.8em; font-weight: 700; }
.calendar-preview[data-style="cute"] .cal-day-cell { z-index: 1; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; min-height: 45px; padding-top: 6px; padding-bottom: 4px; position: relative; aspect-ratio: auto !important; justify-content: flex-start !important; height: auto !important; }
.calendar-preview[data-style="cute"] .cal-num { z-index: 2; font-size: 1.1em; font-weight: 700; line-height: 1; position: relative; }
.calendar-preview[data-style="cute"] .cal-day-cell.active .cal-num { color: var(--cal-accent-text,#fff); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 1px; }
.calendar-preview[data-style="cute"] .cal-day-cell.active::after { content: ""; background-color: var(--cal-accent); opacity: 0.9; z-index: 0; border-radius: 40% 60% 70% 30% / 40% 50% 60%; width: 28px; height: 28px; position: absolute; top: 18px; left: 50%; transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.15) 1px 2px 4px; }
.calendar-preview[data-style="cute"] .cal-day-note { color: rgb(85, 85, 85); white-space: normal; text-overflow: clip; z-index: 2; width: 100%; margin-top: 4px; font-size: 0.65rem; font-weight: 400; line-height: 1.2; overflow: visible; transform: rotate(-2deg); display: block !important; }
.calendar-preview[data-style="cute"] .cal-day-cell.has-note::before { display: none; }
.calendar-preview[data-style="pixel"] { border: 2px solid var(--cal-text); box-shadow: 4px 4px 0 var(--cal-accent); border-radius: 0px; font-family: "Fusion Pixel 12px Mono latin", monospace; }
.calendar-preview[data-style="pixel"] .cal-day-cell.active { background: var(--cal-text); color: var(--cal-accent-text,var(--cal-bg)); border-radius: 0px; }
.qa-preview { background: 0px 0px; flex-direction: column; gap: 0px; width: 100%; height: 100%; display: flex; }
.qa-box-q, .qa-box-a { overflow-wrap: break-word; padding: 20px; position: relative; }
.qa-label { opacity: 0.6; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; font-size: 0.75em; font-weight: 700; }
.qa-content { font-size: 1.1em; font-weight: 600; line-height: 1.4; }
.qa-answer-img { object-fit: cover; border-radius: 8px; max-width: 100%; margin-top: 10px; display: block; }
.qa-preview[data-style="default"] { background: var(--qa-container-bg); border-radius: var(--qa-radius); border: 1px solid rgba(0, 0, 0, 0.05); overflow: hidden; }
.qa-preview[data-style="default"] .qa-box-q { background: var(--qa-q-bg,#00000008); color: var(--qa-q-text); border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.qa-preview[data-style="default"] .qa-box-a { background: var(--qa-a-bg,transparent); color: var(--qa-a-text); }
.qa-preview[data-style="marshmallow"] { gap: 15px; }
.qa-preview[data-style="marshmallow"] .qa-box-q { background: var(--qa-q-bg); color: var(--qa-q-text); text-align: center; border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px; }
.qa-preview[data-style="marshmallow"] .qa-box-q .qa-label { opacity: 0.8; color: currentcolor; }
.qa-preview[data-style="marshmallow"] .qa-box-a { background: var(--qa-a-bg); color: var(--qa-a-text); text-align: center; border-radius: 16px; font-size: 0.95em; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 10px; }
.qa-preview[data-style="retro"] { border: 2px solid var(--qa-text-main); background: var(--qa-container-bg); gap: 0px; box-shadow: rgba(0, 0, 0, 0.1) 6px 6px; }
.qa-preview[data-style="retro"] .qa-box-q { background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0) 19px, rgba(0, 0, 0, 0.1) 20px); background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: var(--qa-q-bg,transparent); color: var(--qa-q-text); border-bottom: 2px dashed var(--qa-text-main); }
.qa-preview[data-style="retro"] .qa-box-a { background-color: var(--qa-a-bg,transparent); color: var(--qa-a-text); font-family: "Courier New", monospace; }
.letter-preview { box-sizing: border-box; background-color: var(--letter-bg,#fff); width: 100%; color: var(--letter-text,#333); border-radius: var(--letter-radius,8px); padding: var(--g-comp-padding); flex-direction: column; display: flex; position: relative; overflow: hidden; }
.letter-preview[data-style="email98"] { border-width: 2px; border-style: solid; border-image: initial; border-color: rgb(223, 223, 223) gray gray rgb(223, 223, 223); font-family: "Pixel Arial", Consolas, "Courier New", monospace; box-shadow: rgb(0, 0, 0) 1px 1px; background-color: var(--letter-bg,silver) !important; border-radius: 0px !important; padding: 4px !important; }
.letter-preview[data-style="email98"] .letter-header { color: rgb(255, 255, 255); background: linear-gradient(90deg, navy, rgb(16, 132, 208)); justify-content: space-between; align-items: center; margin-bottom: 4px; padding: 4px 6px; font-size: 0.85rem; font-weight: 700; display: flex; }
.letter-preview[data-style="email98"] .letter-meta-row { align-items: baseline; margin-bottom: 2px; font-size: 0.8rem; display: flex; }
.letter-preview[data-style="email98"] .letter-meta-label { width: 60px; color: var(--letter-text,#444); opacity: 0.8; text-align: right; padding-right: 8px; }
.letter-preview[data-style="email98"] .letter-meta-content { color: var(--letter-text,black); background: rgba(255, 255, 255, 0.9); border-width: 1px; border-style: solid; border-image: initial; border-color: gray rgb(223, 223, 223) rgb(223, 223, 223) gray; flex: 1 1 0%; padding: 2px 4px; }
.letter-preview[data-style="email98"] .letter-body { min-height: 80px; color: var(--letter-text,black); overflow-wrap: break-word; background: rgba(255, 255, 255, 0.9); border-width: 1px; border-style: solid; border-image: initial; border-color: gray rgb(223, 223, 223) rgb(223, 223, 223) gray; margin-top: 4px; padding: 10px; }
.letter-preview[data-style="wax_seal"] { background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E"); border: 1px solid rgba(0, 0, 0, 0.05); font-family: "Songti SC", "Noto Serif SC", serif; box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 15px; background-color: var(--letter-bg,#fdfbf7) !important; color: var(--letter-text,#4a3b2a) !important; padding: 30px 25px !important; }
.letter-preview[data-style="wax_seal"] .letter-seal { color: rgb(189, 44, 44); opacity: 0.9; filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 2px 2px); justify-content: center; align-items: center; width: 50px; height: 50px; display: flex; position: absolute; top: 20px; right: 20px; transform: rotate(15deg); }
.letter-preview[data-style="wax_seal"] .letter-header { text-align: center; border-bottom: 2px solid rgba(74, 59, 42, 0.2); margin-bottom: 15px; padding-bottom: 15px; background: 0px 0px !important; }
.letter-preview[data-style="wax_seal"] .letter-title { letter-spacing: 2px; margin-bottom: 5px; font-size: 1.3rem; font-weight: 700; }
.letter-preview[data-style="wax_seal"] .letter-date { opacity: 0.6; font-size: 0.8rem; font-style: italic; }
.letter-preview[data-style="wax_seal"] .letter-body { text-align: justify; font-size: 1rem; line-height: 1.8; }
.letter-preview[data-style="wax_seal"] .letter-footer { text-align: right; margin-top: 20px; font-style: italic; font-weight: 700; }
.letter-preview[data-style="airmail"] { background-image: repeating-linear-gradient(135deg, rgb(211, 47, 47) 0px, rgb(211, 47, 47) 15px, rgba(0, 0, 0, 0) 15px, rgba(0, 0, 0, 0) 25px, rgb(25, 118, 210) 25px, rgb(25, 118, 210) 40px, rgba(0, 0, 0, 0) 40px, rgba(0, 0, 0, 0) 50px); background-position: center top, center bottom, 0px center, 100% center; background-repeat: no-repeat; background-size: 100% 10px, 100% 10px, 10px 100%, 10px 100%; border: 10px solid rgba(0, 0, 0, 0); box-shadow: rgba(0, 0, 0, 0.1) 0px 5px 15px; background-color: var(--letter-bg,#fff) !important; color: var(--letter-text,#333) !important; padding: 25px !important; }
.letter-preview[data-style="airmail"] .letter-inner { background: rgb(255, 255, 255); flex-direction: column; width: 100%; height: 100%; display: flex; }
.letter-preview[data-style="airmail"] .letter-stamp-area { justify-content: flex-end; margin-bottom: 20px; display: flex; }
.letter-preview[data-style="airmail"] .letter-stamp { color: rgb(204, 204, 204); text-transform: uppercase; border: 2px dotted rgb(204, 204, 204); padding: 5px 10px; font-size: 0.7rem; font-weight: 700; transform: rotate(-5deg); }
.letter-preview[data-style="airmail"] .letter-address-row { border-bottom: 1px dashed rgb(238, 238, 238); margin-bottom: 15px; padding-bottom: 5px; font-family: "Courier New", monospace; font-size: 0.9rem; display: flex; }
.letter-preview[data-style="airmail"] .letter-label { color: rgb(153, 153, 153); width: 60px; font-weight: 700; }
.letter-preview[data-style="airmail"] .letter-body { font-family: inherit; line-height: 1.6; }
.achievement-preview { box-sizing: border-box; background: var(--ach-bg); width: 100%; color: var(--ach-text); border-radius: var(--ach-radius); border: 1px solid rgba(0, 0, 0, 0); align-items: center; gap: 15px; padding: 10px; display: flex; position: relative; overflow: hidden; text-align: left !important; }
.ach-icon-wrapper { background: rgba(255, 255, 255, 0.1); border-radius: 4px; flex-shrink: 0; justify-content: center; align-items: center; width: 56px; height: 56px; display: flex; overflow: hidden; }
.ach-icon-wrapper img { object-fit: contain; display: block; width: var(--ach-icon-inner-size,100%) !important; height: var(--ach-icon-inner-size,100%) !important; }
.ach-icon-wrapper .iconify { width: var(--ach-icon-inner-size,100%) !important; height: var(--ach-icon-inner-size,100%) !important; display: block !important; }
.ach-icon-wrapper .icon-view-wrapper { width: var(--ach-icon-inner-size,100%) !important; height: var(--ach-icon-inner-size,100%) !important; }
.ach-content { flex-direction: column; flex-grow: 1; justify-content: center; min-width: 0px; display: flex; }
.ach-top-text { opacity: 0.8; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; font-size: 0.75rem; }
.ach-title { margin-bottom: 2px; font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.ach-desc { opacity: 0.7; white-space: nowrap; text-overflow: ellipsis; font-size: 0.85rem; overflow: hidden; }
.ach-score { align-items: center; gap: 4px; font-size: 0.9rem; font-weight: 700; display: flex; }
.achievement-preview[data-style="steam"] { background: linear-gradient(90deg, rgb(27, 40, 56) 0%, rgb(42, 71, 94) 100%); border: 1px solid rgb(60, 93, 126); border-radius: 2px; font-family: Arial, sans-serif; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; }
.achievement-preview[data-style="steam"] .ach-icon-wrapper { border: 1px solid rgb(0, 0, 0); border-radius: 0px; }
.achievement-preview[data-style="steam"] .ach-top-text { color: rgb(102, 192, 244); font-size: 0.7rem; }
.achievement-preview[data-style="steam"] .ach-title { color: rgb(220, 222, 223); text-shadow: rgb(0, 0, 0) 0px 1px 2px; }
.achievement-preview[data-style="steam"] .ach-desc { color: rgb(143, 152, 160); }
.achievement-preview[data-style="xbox"] { color: rgb(255, 255, 255); background: rgb(23, 23, 23); border: 1px solid rgb(51, 51, 51); border-radius: 40px; padding: 8px 20px 8px 8px; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 15px; }
.achievement-preview[data-style="xbox"] .ach-icon-wrapper { color: rgb(255, 255, 255); background: rgb(16, 124, 16); border-radius: 50%; width: 48px; height: 48px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px; }
.achievement-preview[data-style="xbox"] .ach-title { font-size: 1rem; }
.achievement-preview[data-style="xbox"] .ach-top-text { display: none; }
.achievement-preview[data-style="xbox"] .ach-score { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 2px 8px; font-size: 0.8rem; }
.achievement-preview[data-style="minecraft"] { outline-offset: -4px; color: rgb(255, 255, 255); image-rendering: pixelated; background: rgb(33, 33, 33); border: 2px solid rgb(85, 85, 85); border-radius: 0px; outline: rgb(0, 0, 0) solid 2px; padding: 12px; font-family: "Fusion Pixel 12px Mono latin", Consolas, monospace; }
.achievement-preview[data-style="minecraft"] .ach-icon-wrapper { background: rgb(51, 51, 51); border: 2px solid rgb(85, 85, 85); border-radius: 0px; width: 48px; height: 48px; }
.achievement-preview[data-style="minecraft"] .ach-top-text { color: rgb(255, 255, 85); text-shadow: rgb(0, 0, 0) 2px 2px; letter-spacing: 0px; font-weight: 700; }
.achievement-preview[data-style="minecraft"] .ach-title { text-shadow: rgb(0, 0, 0) 2px 2px; }
.achievement-preview[data-style="minecraft"] .ach-desc { opacity: 1; color: rgb(170, 170, 170); text-shadow: rgb(0, 0, 0) 2px 2px; }
.preview-header[data-style="id-card"] { isolation: isolate; flex-direction: row; display: flex; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 15px, rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset; align-items: stretch !important; padding: 0px !important; overflow: hidden !important; }
.preview-header[data-style="social-card"]::before { content: ""; width: 100%; height: var(--social-banner-height,120px); background-image: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: cover; background-position: center var(--social-banner-y,50%); z-index: -2; position: absolute; top: 0px; left: 0px; }
.preview-header[data-style="social-card"][data-banner-shadow="true"]::before { box-shadow: rgba(0, 0, 0, 0.3) 0px -60px 50px -20px inset; }
.preview-header[data-style="social-card"][data-banner-shadow="true"]::after { content: ""; height: var(--social-banner-height,120px); z-index: 0; pointer-events: none; background: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.05) 60%, rgba(0, 0, 0, 0.4) 100%); border-radius: 20px 20px 0px 0px; position: absolute; top: 0px; left: 0px; right: 0px; }
.id-card-holo-layer { z-index: 10; pointer-events: none; border-radius: inherit; opacity: 0.6; mix-blend-mode: overlay; filter: contrast(1.2); background: linear-gradient(115deg, rgba(0, 0, 0, 0) 25%, rgba(255, 0, 0, 0.4) 30%, rgba(255, 255, 0, 0.4) 35%, rgba(0, 255, 0, 0.4) 40%, rgba(0, 255, 255, 0.5) 45%, rgba(0, 0, 255, 0.4) 50%, rgba(255, 0, 255, 0.4) 55%, rgba(0, 0, 0, 0) 60%) 0px 0px / 250% 250%; animation: 4s linear 0s infinite normal none running holo-sheen; position: absolute; inset: 0px; overflow: hidden; }
@keyframes holo-sheen { 
  0% { background-position: 200% 0px; }
  100% { background-position: -200% 0px; }
}
.id-card-hole { z-index: 11; background: rgba(0, 0, 0, 0.1); border-radius: 4px; width: 40px; height: 6px; position: absolute; top: 10px; left: 50%; transform: translate(-50%); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px inset; }
.id-card-left { border-top-left-radius: inherit; border-bottom-left-radius: inherit; background: rgba(0, 0, 0, 0.03); border-right: 1px dashed rgba(0, 0, 0, 0.1); flex-shrink: 0; justify-content: center; align-items: center; width: 35%; padding: 20px; display: flex; }
.id-card-right { text-align: left; flex-direction: column; flex: 1 1 0%; justify-content: center; padding: 20px; display: flex; }
.preview-header[data-style="id-card"] #preview-avatar { border-radius: var(--avatar-radius,8px); aspect-ratio: 3 / 4; object-fit: cover; background-color: var(--bg-image-thumb); background-position: 50% center !important; background-repeat: no-repeat !important; background-size: cover !important; width: 100% !important; height: 100% !important; }
.preview-header[data-style="id-card"] #preview-avatar-wrapper { width: 100%; margin: 0px !important; transform: none !important; }
.preview-header[data-style="id-card-v"] { max-width: 320px; min-height: 380px; margin: 0px auto; box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 30px, rgba(0, 0, 0, 0.08) 0px 2px 8px, rgba(255, 255, 255, 0.15) 0px 0px 0px 1px inset; text-align: center !important; aspect-ratio: unset !important; flex-direction: column !important; justify-content: flex-start !important; align-items: center !important; height: auto !important; padding: 0px !important; overflow: hidden !important; }
.preview-header[data-style="id-card-v"] .id-card-left { background: linear-gradient(rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.01) 100%); border-bottom: 1px solid rgba(0, 0, 0, 0.06); justify-content: center; align-items: center; display: flex; border-right-width: medium !important; border-right-style: none !important; border-right-color: currentcolor !important; flex: 0 0 auto !important; width: 100% !important; height: auto !important; padding: 35px 20px 25px !important; }
.preview-header[data-style="id-card-v"] .id-card-right { flex-direction: column; flex: 1 1 auto; gap: 4px; display: flex; text-align: center !important; justify-content: flex-start !important; width: 100% !important; padding: 20px 24px 50px !important; }
.preview-header[data-style="id-card-v"] #preview-avatar { box-shadow: 0 4px 12px #0000001f, 0 0 0 4px rgba(var(--g-theme-primary-rgb,0, 122, 255), .1); border: 3px solid rgba(255, 255, 255, 0.9) !important; width: 100px !important; height: 100px !important; }
.preview-header[data-style="id-card-v"] #preview-nickname { letter-spacing: 0.5px; margin: 8px 0px 4px !important; font-size: 1.4rem !important; }
.preview-header[data-style="id-card-v"] #preview-subtitle { text-transform: uppercase; letter-spacing: 2px; opacity: 0.7; font-size: 0.75rem !important; }
.preview-header[data-style="id-card-v"] #preview-bio { -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.5; display: -webkit-box; overflow: hidden; margin: 10px 0px !important; font-size: 0.85rem !important; }
.preview-header[data-style="id-card-v"] .tags-container { flex-wrap: wrap; margin-top: auto !important; padding-top: 12px !important; }
.preview-header[data-style="id-card-v"] #preview-custom-id { opacity: 0.6; margin-top: 6px !important; font-size: 0.7rem !important; }
.preview-header[data-style="id-card-v"]::after { display: none; }
.preview-header[data-style="social-card"] { text-align: center; isolation: isolate; flex-direction: column; align-items: center; display: flex; position: relative; border-radius: 20px !important; padding: 0px !important; overflow: visible !important; }
.preview-header[data-style="social-card"]::before { content: ""; height: var(--social-banner-height,120px); background-image: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: cover; background-position: center var(--social-banner-y,center); border-top-left-radius: inherit; border-top-right-radius: inherit; z-index: 0; transition: border-radius 0.3s, -webkit-mask 0.3s; position: absolute; top: 0px; left: 0px; right: 0px; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; }
.preview-header[data-style="social-card"] { background-color: var(--card-bg-color,#fff); border-radius: var(--g-comp-border-radius) !important; }
.preview-header[data-style="social-card"][data-bottom-shape="convex"]::before { border-radius: 0px 0px 50% 50% / 0px 0px 80px 80px !important; }
.preview-header[data-style="social-card"][data-bottom-shape="convex"][data-banner-shadow="true"]::after { border-radius: 20px 20px 50% 50% / 20px 20px 80px 80px !important; }
.preview-header[data-style="social-card"][data-bottom-shape="concave"]::before { border-radius: 20px 20px 0px 0px; mask: radial-gradient(120% 100% at 50% 120%, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 50.5%); }
.preview-header[data-style="social-card"][data-bottom-shape="concave"][data-banner-shadow="true"]::after { mask: radial-gradient(120% 100% at 50% 120%, rgba(0, 0, 0, 0) 50%, rgb(0, 0, 0) 50.5%); }
.preview-header[data-style="social-card"] .id-card-left { z-index: 2; flex-direction: column; align-items: center; display: flex; position: relative; width: 100% !important; padding-top: calc(var(--social-banner-height,120px) - 45px) !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; padding-bottom: 15px !important; overflow: visible !important; }
.preview-header[data-style="social-card"][data-bottom-shape="concave"] .id-card-left { padding-top: calc(var(--social-banner-height,120px) - 75px) !important; }
.preview-header[data-style="social-card"][data-bottom-shape="convex"] .id-card-left { padding-top: calc(var(--social-banner-height,120px) - 15px) !important; }
.preview-header[data-style="social-card"] #preview-avatar { background-color: rgb(255, 255, 255); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 20px; border: 4px solid var(--card-bg-final,#fff) !important; }
.preview-header[data-style="social-card"] #preview-avatar-wrapper { z-index: 5; position: relative; }
.preview-header[data-style="social-card"] .id-card-right { flex-direction: column; gap: 6px; display: flex; width: 100% !important; padding: 5px 24px 24px !important; }
.preview-header[data-style="social-card"] #preview-nickname { margin: 0px !important; font-size: 1.35rem !important; font-weight: 700 !important; }
.preview-header[data-style="social-card"] #preview-subtitle { opacity: 0.65; margin: 0px !important; font-size: 0.85rem !important; }
.preview-header[data-style="social-card"] #preview-bio { word-break: break-word; white-space: pre-wrap; max-width: 100%; line-height: 1.55; margin: 8px 0px 12px !important; font-size: 0.9rem !important; }
.preview-header[data-style="social-card"] .tags-container { flex-wrap: wrap; gap: 8px; width: 100%; }
.preview-header[data-style="social-card"] .tag-pill { font-weight: 500; border-radius: 20px !important; padding: 6px 14px !important; font-size: 0.8rem !important; }
.preview-header[data-style="social-card"] .id-card-hole, .preview-header[data-style="social-card"] .id-card-holo-layer, .preview-header[data-style="social-card"] #preview-custom-id { display: none !important; }
.preview-header[data-style="ticket"] { color: rgb(30, 41, 59); background: linear-gradient(135deg, rgb(248, 250, 252) 0%, rgb(226, 232, 240) 100%); flex-direction: row; min-height: 180px; font-family: "Courier New", Consolas, monospace; display: flex; position: relative; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px; padding: 0px !important; }
.ticket-main { flex-direction: column; flex: 1 1 0%; gap: 12px; padding: 16px 20px; display: flex; position: relative; }
.ticket-main::after { content: ""; background-image: radial-gradient(circle, rgb(226, 232, 240) 5px, rgba(0, 0, 0, 0) 5px); background-position: center top; background-repeat: repeat-y; background-size: 12px 16px; width: 12px; position: absolute; top: 0px; bottom: 0px; right: -6px; }
.ticket-header { border-bottom: 1px solid rgb(226, 232, 240); justify-content: space-between; align-items: center; padding-bottom: 8px; display: flex; }
.ticket-airline { color: rgb(30, 64, 175); letter-spacing: 2px; font-size: 1.1rem; font-weight: 700; }
.ticket-flight-no { color: rgb(100, 116, 139); font-size: 0.9rem; font-weight: 700; }
.ticket-body { flex-direction: column; flex: 1 1 0%; gap: 12px; display: flex; }
.ticket-passenger { align-items: flex-start; gap: 15px; margin-top: 5px; display: flex; }
.ticket-passenger-label { color: rgb(148, 163, 184); letter-spacing: 1px; text-transform: uppercase; text-align: left; margin-bottom: 2px; font-size: 0.65rem; }
.preview-header[data-style="ticket"] #preview-avatar { border: 2px solid rgb(30, 64, 175) !important; border-radius: 6px !important; width: 56px !important; height: 56px !important; margin: 0px !important; }
.ticket-passenger-info { flex-direction: column; flex: 1 1 0%; align-items: flex-start; gap: 2px; display: flex; text-align: left !important; }
.preview-header[data-style="ticket"] #preview-nickname { text-align: left !important; margin: 0px !important; font-size: 1.1rem !important; line-height: 1.2 !important; }
.preview-header[data-style="ticket"] .ticket-subtitle { opacity: 0.7; text-align: left !important; margin: 0px !important; }
.preview-header[data-style="ticket"] #preview-avatar-wrapper { margin: 0px !important; transform: none !important; }
.ticket-passenger-info { flex-direction: column; flex: 1 1 0%; gap: 2px; display: flex; }
.ticket-subtitle { color: rgb(100, 116, 139); font-size: 0.8rem; font-style: italic; }
.ticket-bio { color: rgb(148, 163, 184); margin-top: 2px; font-size: 0.75rem; line-height: 1.3; }
.ticket-label { color: rgb(148, 163, 184); letter-spacing: 1px; text-transform: uppercase; font-size: 0.65rem; }
.ticket-name { color: rgb(15, 23, 42); text-transform: uppercase; letter-spacing: 1px; font-size: 1.1rem; font-weight: 700; }
.ticket-route { align-items: center; gap: 15px; padding: 8px 0px; display: flex; }
.ticket-city { flex-direction: column; gap: 2px; display: flex; }
.ticket-code { color: rgb(30, 64, 175); letter-spacing: 2px; font-size: 1.4rem; font-weight: 700; }
.ticket-arrow { color: rgb(59, 130, 246); font-size: 1.5rem; animation: 2s ease-in-out 0s infinite normal none running ticket-fly; }
@keyframes ticket-fly { 
  0%, 100% { transform: translate(0px); }
  50% { transform: translate(5px); }
}
.ticket-details { gap: 20px; margin-top: 4px; display: flex; }
.ticket-detail-item { flex-direction: column; gap: 2px; display: flex; }
.ticket-tags-container { flex-wrap: wrap; gap: 6px; margin-top: 6px; display: flex; }
.ticket-tags-container .tag-item { color: rgb(30, 64, 175); background: rgba(30, 64, 175, 0.1); border: 1px solid rgba(30, 64, 175, 0.2); border-radius: 4px; padding: 2px 8px; font-size: 0.7rem; }
.ticket-value { color: rgb(51, 65, 85); font-size: 0.95rem; font-weight: 700; }
.ticket-seat { color: rgb(220, 38, 38); font-size: 1.1rem; }
.ticket-stub { background: var(--ticket-stub-bg,linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%)); width: 100px; color: var(--ticket-stub-text,#fff); flex-direction: row; justify-content: center; align-items: center; gap: 10px; padding: 12px 10px; display: flex; position: relative; }
.ticket-stub::before { content: ""; background-image: radial-gradient(circle, rgb(248, 250, 252) 5px, rgba(0, 0, 0, 0) 5px); background-position: center top; background-repeat: repeat-y; background-size: 12px 16px; width: 12px; position: absolute; top: 0px; bottom: 0px; left: -6px; }
.ticket-barcode-wrapper { justify-content: center; align-items: center; width: 50px; height: 100%; min-height: 140px; display: flex; position: relative; overflow: hidden; }
.preview-header[data-style="ticket"] svg.real-barcode { opacity: 0.95; display: block; position: absolute; top: 50%; left: 50%; width: 180px !important; height: 45px !important; transform: translate(-50%, -50%) rotate(90deg) !important; }
.ticket-stub-info { text-align: center; writing-mode: vertical-rl; text-orientation: mixed; letter-spacing: 2px; flex-direction: column; gap: 6px; display: flex; }
.ticket-stub-seat { letter-spacing: 1px; font-size: 1.2rem; font-weight: 700; }
.ticket-stub-flight { opacity: 0.8; letter-spacing: 1px; font-size: 0.7rem; }
.music-card-preview[data-style="lockscreen"] { text-align: center; text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px; flex-direction: column; justify-content: center; align-items: center; padding: 30px 20px; overflow: hidden; }
.lockscreen-bg { filter: blur(20px) brightness(0.7); z-index: 0; background-position: 50% center; background-size: cover; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; transform: scale(1.2); }
.music-card-preview[data-style="lockscreen"] > * { z-index: 2; position: relative; }
.music-card-preview[data-style="lockscreen"] .music-cover { border-radius: 12px; align-self: center; width: 140px; height: 140px; margin-bottom: 20px; box-shadow: rgba(0, 0, 0, 0.4) 0px 15px 35px; }
.music-card-preview[data-style="lockscreen"] .music-info { width: 100%; padding: 0px; }
.music-card-preview[data-style="lockscreen"] .music-progress-bar { background: rgba(255, 255, 255, 0.3); }
.music-card-preview[data-style="lockscreen"] .music-progress-fill { background: rgb(255, 255, 255); box-shadow: rgba(255, 255, 255, 0.5) 0px 0px 10px; }
.music-card-preview[data-style="win95"] { color: rgb(0, 0, 0); background: silver; border-width: 2px; border-style: solid; border-image: initial; border-color: rgb(223, 223, 223) rgb(0, 0, 0) rgb(0, 0, 0) rgb(223, 223, 223); border-radius: 0px; flex-direction: column; min-height: 180px; padding: 2px; font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, sans-serif; box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 5px; }
.wmp-title-bar { color: rgb(255, 255, 255); background: linear-gradient(90deg, navy, rgb(16, 132, 208)); justify-content: space-between; align-items: center; margin-bottom: 2px; padding: 3px 6px; font-size: 12px; font-weight: 700; display: flex; }
.wmp-screen { background: rgb(0, 0, 0); border-width: 2px; border-style: solid; border-image: initial; border-color: gray rgb(255, 255, 255) rgb(255, 255, 255) gray; justify-content: center; align-items: center; height: 100px; margin: 5px; display: flex; position: relative; overflow: hidden; }
.wmp-visualizer { opacity: 0.3; pointer-events: none; align-items: flex-end; gap: 2px; height: 100%; display: flex; }
.wmp-bar { background: repeating-linear-gradient(0deg, rgb(0, 255, 0), rgb(0, 255, 0) 2px, rgb(0, 0, 0) 3px); width: 10px; height: 20%; transition: height 0.1s; }
.is-playing .wmp-bar { animation: 0.6s ease 0s infinite alternate none running wmp-eq; }
.is-playing .wmp-bar:nth-child(2) { animation-delay: 0.1s; }
.is-playing .wmp-bar:nth-child(3) { animation-delay: 0.3s; }
.is-playing .wmp-bar:nth-child(4) { animation-delay: 0.2s; }
.is-playing .wmp-bar:nth-child(5) { animation-delay: 0.4s; }
@keyframes wmp-eq { 
  0% { height: 10%; }
  100% { height: 90%; }
}
.wmp-controls { flex-direction: column; gap: 5px; padding: 5px; display: flex; }
.wmp-btn-group { justify-content: center; gap: 2px; display: flex; }
.wmp-btn { cursor: pointer; background: silver; border-width: 1px; border-style: solid; border-image: initial; border-color: rgb(255, 255, 255) rgb(0, 0, 0) rgb(0, 0, 0) rgb(255, 255, 255); justify-content: center; align-items: center; width: 24px; height: 22px; font-size: 10px; display: flex; }
.wmp-btn:active { border-width: 1px; border-style: solid; border-image: initial; border-color: rgb(0, 0, 0) rgb(255, 255, 255) rgb(255, 255, 255) rgb(0, 0, 0); transform: translate(1px, 1px); }
.wmp-status { color: rgb(0, 255, 0); font-family: monospace; font-size: 10px; position: absolute; bottom: 4px; left: 6px; }
.preview-items-container figure.browser-style { background: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 8px; flex-direction: column; display: flex; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 30px; padding: 0px !important; }
.browser-header { background: rgb(240, 240, 240); border-bottom: 1px solid rgb(221, 221, 221); align-items: center; gap: 10px; padding: 8px 12px; display: flex; }
.browser-dots { gap: 6px; display: flex; }
.browser-dot { border-radius: 50%; width: 10px; height: 10px; }
.browser-dot.red { background: rgb(255, 95, 86); border: 1px solid rgb(224, 68, 62); }
.browser-dot.yellow { background: rgb(255, 189, 46); border: 1px solid rgb(222, 161, 35); }
.browser-dot.green { background: rgb(39, 201, 63); border: 1px solid rgb(26, 171, 41); }
.browser-address { color: rgb(85, 85, 85); white-space: nowrap; text-overflow: ellipsis; text-align: center; background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); border-radius: 4px; flex: 1 1 0%; padding: 2px 8px; font-size: 0.75rem; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px inset; }
.preview-items-container figure.browser-style .img-wrapper { border-radius: 0px; }
.preview-items-container figure.browser-style figcaption { text-align: var(--g-comp-text-align,center); border-top: 1px solid rgb(238, 238, 238); padding: 10px 15px; background: rgb(249, 249, 249) !important; }
@keyframes toast-in-left { 
  0% { opacity: 0; transform: translate(-100%); }
  100% { opacity: 1; transform: translate(0px); }
}
@keyframes toast-out-left { 
  0% { opacity: 1; transform: translate(0px); }
  100% { opacity: 0; transform: translate(-100%); }
}
.letter-preview[data-style="top_secret"] { border: 1px solid rgb(220, 208, 184); font-family: "Courier New", Courier, monospace; position: relative; overflow: hidden; color: rgb(44, 30, 26) !important; background-color: rgb(244, 236, 216) !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E") !important; padding: 50px 40px !important; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 60px inset, rgba(0, 0, 0, 0.1) 1px 1px, rgba(0, 0, 0, 0.15) 0px 10px 20px !important; }
.letter-preview[data-style="top_secret"]::before { content: "CONFIDENTIAL"; text-align: center; color: rgb(255, 255, 255); letter-spacing: 1px; z-index: 10; pointer-events: none; background: rgb(183, 28, 28); width: 150px; padding: 4px 0px; font-size: 0.75rem; font-weight: 900; position: absolute; top: 25px; left: -32px; transform: rotate(-45deg); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; display: none !important; }
.letter-preview[data-style="top_secret"] .letter-stamp-secret { color: rgba(183, 28, 28, 0.7); pointer-events: none; text-transform: uppercase; mix-blend-mode: multiply; border: 4px double rgba(183, 28, 28, 0.6); border-radius: 4px; padding: 8px 15px; font-size: 2.2rem; font-weight: 900; position: absolute; bottom: 30px; right: 30px; transform: rotate(-12deg); mask-image: url("data:image/svg+xml,%3Csvg width='200' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.7'/%3E%3C/svg%3E"); }
.letter-preview[data-style="top_secret"] .letter-body { border-top: 2px solid rgba(0, 0, 0, 0.8); border-bottom: 1px solid rgba(0, 0, 0, 0.1); margin: 15px 0px; padding: 25px 0px; font-weight: 600; line-height: 1.6; }
.marquee-container { width: 100%; display: flex; overflow: hidden; transform: translateZ(0px); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0), rgb(0, 0, 0) 5%, rgb(0, 0, 0) 95%, rgba(0, 0, 0, 0)); }
.marquee-content { white-space: nowrap; text-transform: uppercase; will-change: transform; -webkit-font-smoothing: antialiased; backface-visibility: hidden; width: max-content; font-weight: 700; animation: auto linear 0s infinite normal none running marquee-scroll; display: flex; transform: translate(0px, 0px); }
.marquee-text-block { flex-shrink: 0; padding-right: 50px; display: inline-block; }
.marquee-container[data-style="led"] { border: 4px solid rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 10px inset; background-color: rgb(0, 0, 0) !important; }
.marquee-container[data-style="led"] .marquee-content { text-shadow: 0px 0px 4px; letter-spacing: 2px; font-family: "Fusion Pixel 12px Mono latin", monospace; }
.marquee-container[data-style="breaking"] { border-top: 2px solid rgb(255, 51, 51); border-bottom: 2px solid rgb(153, 0, 0); font-style: italic; color: rgb(255, 255, 255) !important; background-color: rgb(204, 0, 0) !important; }
@keyframes marquee-scroll { 
  0% { transform: translate(0px, 0px); }
  100% { transform: translate(-50%); }
}
.music-card-preview[data-style="cd_player"] { color: rgb(51, 51, 51); background: linear-gradient(145deg, rgb(230, 230, 230), rgb(255, 255, 255)); border: 1px solid rgb(204, 204, 204); flex-direction: column; justify-content: flex-start; align-items: center; padding: 25px 20px; position: relative; overflow: hidden; box-shadow: rgb(255, 255, 255) 1px 1px inset, rgba(0, 0, 0, 0.1) 5px 5px 15px; }
.cd-player-lid { z-index: 2; background: rgba(255, 255, 255, 0.2); border-radius: 50%; justify-content: center; align-items: center; width: 180px; height: 180px; margin-bottom: 20px; display: flex; position: relative; box-shadow: rgba(255, 255, 255, 0.8) 2px 2px 5px inset, rgba(0, 0, 0, 0.1) -2px -2px 5px inset, rgba(0, 0, 0, 0.03) 0px 0px 0px 8px; }
.cd-disc { background: conic-gradient(rgba(0, 0, 0, 0) 0%, rgba(255, 255, 255, 0.4) 15%, rgba(0, 0, 0, 0) 30%, rgba(255, 255, 255, 0.4) 45%, rgba(0, 0, 0, 0) 60%, rgba(255, 255, 255, 0.4) 75%, rgba(0, 0, 0, 0) 90%); border-radius: 50%; width: 92%; height: 92%; animation: 4s linear 0s infinite normal none running spin; position: relative; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px; }
.cd-disc img { object-fit: cover; mix-blend-mode: multiply; border-radius: 50%; width: 100%; height: 100%; }
.cd-disc::after { content: ""; z-index: 5; background: rgb(230, 230, 230); border: 2px solid rgb(204, 204, 204); border-radius: 50%; width: 25px; height: 25px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px inset; }
.cd-controls-area { background: rgb(212, 212, 212); border: 1px solid rgb(187, 187, 187); border-radius: 8px; align-items: center; gap: 10px; width: 100%; padding: 10px; display: flex; box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px inset; }
.cd-lcd { color: rgb(26, 46, 18); background: rgb(143, 163, 130); border-radius: 4px; flex: 1 1 0%; justify-content: space-between; padding: 4px 8px; font-family: "Fusion Pixel 12px Mono latin", monospace; font-size: 0.75rem; display: flex; box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px inset; }
.apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .marquee-container { border-radius: inherit; width: 100%; border: var(--g-border-width) var(--g-border-style,solid) var(--g-border-color) !important; background-clip: border-box !important; }
.chart-preview-container { box-sizing: border-box; flex-direction: column; gap: 15px; width: 100%; display: flex; }
.chart-main-area { justify-content: center; align-items: center; display: flex; position: relative; }
.chart-circle { aspect-ratio: 1 / 1; background-image: var(--chart-gradient); border-radius: 50%; flex-shrink: 0; width: 100%; max-width: 180px; transition: background-color 0.3s, box-shadow 0.3s; position: relative; }
.chart-preview-container[data-style="ring"] .chart-circle { mask-image: radial-gradient(rgba(0, 0, 0, 0) 58%, rgb(0, 0, 0) 60%); }
.chart-legend { flex-wrap: wrap; justify-content: center; gap: 8px 15px; display: flex; }
.chart-legend-item { opacity: 0.9; align-items: center; gap: 6px; font-size: 0.85em; display: flex; }
.chart-legend-dot { border-radius: 50%; flex-shrink: 0; width: 10px; height: 10px; }
.chart-bar-container { flex-direction: column; gap: 10px; width: 100%; display: flex; }
.chart-bar-item { flex-direction: column; gap: 4px; display: flex; }
.chart-bar-header { justify-content: space-between; font-size: 0.85em; font-weight: 600; display: flex; }
.chart-bar-track { background: rgba(128, 128, 128, 0.1); border-radius: 4px; width: 100%; height: 8px; overflow: hidden; }
.chart-bar-fill { border-radius: 4px; height: 100%; }
.ranking-preview { flex-direction: column; gap: 10px; width: 100%; transition: background-color 0.3s, border-color 0.3s; display: flex; }
.rank-item { background: rgba(0, 0, 0, 0.03); border-radius: 8px; align-items: center; gap: 12px; padding: 10px; transition: background-color 0.2s, box-shadow 0.2s; display: flex; position: relative; overflow: hidden; }
.rank-badge { color: rgb(85, 85, 85); z-index: 2; background: rgb(238, 238, 238); border-radius: 50%; flex-shrink: 0; justify-content: center; align-items: center; width: 28px; height: 28px; font-size: 0.9em; font-weight: 900; display: flex; }
.rank-img-wrapper { background: rgba(0, 0, 0, 0.05); border-radius: 6px; flex-shrink: 0; width: 44px; height: 44px; display: none; overflow: hidden; }
.rank-img-wrapper img { object-fit: cover; width: 100%; height: 100%; }
.rank-item.has-image .rank-img-wrapper { display: block; }
.rank-content { z-index: 2; flex-direction: column; flex: 1 1 0%; justify-content: center; min-width: 0px; display: flex; }
.rank-name { margin-bottom: 2px; font-size: 1.05em; font-weight: 700; line-height: 1.2; }
.rank-desc { opacity: 0.7; white-space: nowrap; text-overflow: ellipsis; font-size: 0.85em; overflow: hidden; }
.rank-score { opacity: 0.9; z-index: 2; font-size: 1.1em; font-weight: 700; }
.ranking-preview[data-style="card"] .rank-item { background: var(--card-bg-color,#fff); border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 5px; }
.ranking-preview[data-style="simple"] .rank-item { background: 0px 0px; border-bottom: 1px dashed rgba(128, 128, 128, 0.2); border-radius: 0px; padding: 8px 0px; }
.ranking-preview[data-style="simple"] .rank-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.ranking-preview[data-style="poster"] { gap: 15px; }
.ranking-preview[data-style="poster"] .rank-item { background: linear-gradient(90deg, rgba(128, 128, 128, 0.05) 0%, rgba(0, 0, 0, 0) 100%); border-radius: 8px; height: 60px; padding: 0px; overflow: hidden; }
.ranking-preview[data-style="poster"] .rank-img-wrapper { border-radius: 0px; width: 80px; height: 100%; mask-image: linear-gradient(90deg, rgb(0, 0, 0) 80%, rgba(0, 0, 0, 0) 100%); }
.ranking-preview[data-style="poster"] .rank-content { padding-left: 10px; }
.ranking-preview[data-style="poster"] .rank-badge { width: 20px; height: 20px; font-size: 0.7em; position: absolute; top: 5px; left: 5px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; }
.ranking-preview[data-style="poster"] .rank-score { padding-right: 15px; }
.preview-item-wrapper.multi-selected { outline-offset: 2px; z-index: 100; }
#drag-selection-box { pointer-events: none; z-index: 9999; background: rgba(0, 122, 255, 0.1); border: 1px solid rgba(0, 122, 255, 0.5); display: none; position: absolute; }
html.native-screenshot-mode { width: auto !important; height: auto !important; position: static !important; overflow: visible !important; }
body.native-screenshot-mode { background-color: var(--bg-preview-pane) !important; touch-action: auto !important; overscroll-behavior: contain !important; pointer-events: auto !important; width: 100% !important; height: auto !important; min-height: 100% !important; position: static !important; overflow: visible !important; }
body.native-screenshot-mode .preview-item-wrapper, body.native-screenshot-mode .preview-header, body.native-screenshot-mode .sticker-item { pointer-events: none !important; user-select: none !important; outline: none !important; }
body.native-screenshot-mode .preview-card-inner, body.native-screenshot-mode .preview-card-content, body.native-screenshot-mode #preview-nickname, body.native-screenshot-mode #preview-subtitle, body.native-screenshot-mode #preview-bio { -webkit-font-smoothing: antialiased !important; text-rendering: optimizelegibility !important; }
body.native-screenshot-mode .music-lyrics-container { filter: none !important; height: auto !important; mask-image: none !important; }
body.native-screenshot-mode .lyrics-line { color: var(--music-text-color) !important; opacity: 0.6 !important; }
body.native-screenshot-mode .lyrics-line.active { opacity: 1 !important; font-weight: 700 !important; }
body.native-screenshot-mode strong, body.native-screenshot-mode b { font-weight: 600 !important; }
.export-hero-card { background: linear-gradient(135deg, var(--bg-input) 0%, var(--bg-section) 100%); border: 2px solid var(--color-primary); cursor: pointer; border-radius: 12px; align-items: center; gap: 15px; margin-bottom: 20px; padding: 15px; transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s; display: flex; position: relative; overflow: hidden; }
.export-hero-card:hover { background: var(--bg-image-upload-hover); transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; }
.export-hero-card .hero-icon { color: var(--color-primary); font-size: 2.2rem; }
.export-hero-card h4 { color: var(--color-primary); margin: 0px 0px 4px; font-size: 1.05rem; }
.export-hero-card p { color: var(--text-secondary); opacity: 0.9; margin: 0px; font-size: 0.8rem; }
.export-hero-card .badge { background: var(--color-primary); color: rgb(255, 255, 255); border-radius: 0px 0px 0px 8px; padding: 2px 8px; font-size: 0.65rem; font-weight: 700; position: absolute; top: 0px; right: 0px; }
.theme-preset-grid { border-bottom: 1px dashed var(--border-color); grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 12px; margin-bottom: 20px; padding-bottom: 15px; padding-left: 10px; padding-right: 10px; display: grid; }
.layout-floating-mode .theme-preset-grid { grid-template-columns: repeat(auto-fill, minmax(35px, 1fr)) !important; gap: 8px !important; }
.theme-swatch { cursor: pointer; border: 2px solid var(--border-color); border-radius: 50%; width: 40px; height: 40px; margin: 0px auto; transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 5px; }
.theme-swatch:hover { transform: scale(1.1); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 10px; }
.theme-swatch::before { content: ""; background: var(--swatch-bg); width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
.theme-swatch::after { content: ""; background: var(--swatch-accent); width: 50%; height: 100%; position: absolute; bottom: 0px; right: 0px; transform: skew(-15deg) translate(10px); }
.theme-swatch.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--bg-editor), 0 0 0 4px var(--color-primary); }
.theme-label { color: var(--text-secondary); grid-column: 1 / -1; align-items: center; gap: 5px; margin-bottom: 5px; font-size: 0.85rem; font-weight: 700; display: flex; }
.export-menu-list { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; }
.export-menu-item { cursor: pointer; border-bottom: 1px solid var(--border-color); color: var(--text-primary); align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; transition: background 0.2s; display: flex; }
.export-menu-item:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.export-menu-item:hover { background: var(--bg-editor); }
.export-menu-item .menu-icon { color: var(--text-secondary); flex-shrink: 0; align-items: center; font-size: 1.4rem; display: flex; }
.export-menu-item .text-col { flex-direction: column; flex: 1 1 0%; gap: 2px; min-width: 0px; display: flex; }
.export-menu-item h5 { color: var(--text-primary); margin: 0px; font-size: 0.95rem; font-weight: 600; }
.export-menu-item p { color: var(--text-secondary); opacity: 0.8; margin: 0px; font-size: 0.75rem; line-height: 1.3; }
.export-menu-item .arrow { color: var(--text-placeholder); flex-shrink: 0; font-size: 1.2rem; }
.export-menu-item .iconify { color: var(--text-secondary); font-size: 1.2rem; }
.export-menu-item .arrow { color: var(--text-placeholder); font-size: 1.2rem; }
.file-icon-placeholder { background: var(--bg-input); border: 1px solid var(--border-color); width: 80px; height: 80px; color: var(--text-secondary); border-radius: 12px; justify-content: center; align-items: center; margin: 0px auto 15px; font-size: 3rem; display: flex; }
.checklist-preview { flex-direction: column; gap: 10px; width: 100%; display: flex; }
.checklist-grid { gap: 8px; width: 100%; display: grid; }
.checklist-item { cursor: pointer; border-radius: var(--chk-item-radius,6px); user-select: none; box-sizing: border-box; justify-content: center; align-items: center; min-height: 40px; padding: 8px 12px; transition: background-color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; position: relative; }
.checklist-item:active { transform: scale(0.96); }
.checklist-icon { flex-shrink: 0; margin-right: 6px; font-size: 1.2em; line-height: 1; }
.checklist-text { word-break: break-word; line-height: 1.3; }
.checklist-preview[data-style="default"] .checklist-item { background-color: var(--chk-item-bg,#00000008); border: 1px solid rgba(0, 0, 0, 0); justify-content: flex-start; }
.checklist-preview[data-style="default"] .checklist-item:hover { background-color: rgba(0, 0, 0, 0.05); }
.checklist-preview[data-style="tag"] .checklist-item { background-color: var(--chk-item-bg,var(--bg-input)); border: 1px solid var(--border-color); color: var(--text-secondary); }
.checklist-preview[data-style="tag"] .checklist-item:not([data-state="none"]) { color: rgb(255, 255, 255); border-color: rgba(0, 0, 0, 0); font-weight: 700; }
.checklist-preview[data-style="tag"] .checklist-item[data-state="checked"] { background-color: var(--accent-color); }
.checklist-preview[data-style="tag"] .checklist-item[data-state="crossed"] { background-color: var(--crossed-color); }
.checklist-preview[data-style="tag"] .checklist-item[data-state="heart"] { background-color: var(--heart-color); }
.checklist-preview[data-style="tag"] .checklist-icon { display: none; }
.checklist-preview[data-style="bingo"] .checklist-grid { gap: 4px; }
.checklist-preview[data-style="bingo"] .checklist-item { aspect-ratio: 1 / 1; text-align: center; background-color: var(--chk-item-bg,var(--bg-card)); border: 2px solid var(--border-color); flex-direction: column; justify-content: center; padding: 4px; }
.checklist-preview[data-style="bingo"] .checklist-icon { margin-bottom: 4px; margin-right: 0px; font-size: 1.5em; }
.checklist-preview[data-style="bingo"] .checklist-item:not([data-state="none"]) { background-color: var(--chk-item-bg,var(--bg-input)); font-weight: 700; }
.checklist-preview[data-style="bingo"] .checklist-item[data-state="checked"] { border-color: var(--accent-color); color: var(--accent-color); }
.checklist-preview[data-style="bingo"] .checklist-item[data-state="crossed"] { border-color: var(--color-danger); color: var(--color-danger); }
.checklist-preview[data-style="bingo"] .checklist-item[data-state="heart"] { color: rgb(233, 30, 99); border-color: rgb(233, 30, 99); }
.container-shape-win95 { background-color: silver; position: relative; border: 2px solid rgb(223, 223, 223) !important; border-radius: 0px !important; padding-top: 38px !important; box-shadow: rgb(255, 255, 255) 2px 2px inset, gray -2px -2px inset, rgba(0, 0, 0, 0.3) 2px 2px 5px !important; }
.container-shape-win95::before { content: attr(data-win-title); color: rgb(255, 255, 255); text-shadow: rgb(0, 0, 0) 1px 1px; z-index: 100; pointer-events: none; background: linear-gradient(90deg, navy, rgb(16, 132, 208)); align-items: center; height: 26px; padding-left: 8px; font-family: "Fusion Pixel 12px Mono latin", Consolas, sans-serif; font-size: 14px; font-weight: 700; display: flex; position: absolute; top: 4px; left: 4px; right: 4px; }
.container-shape-win95::after { content: "×"; color: rgb(0, 0, 0); z-index: 101; pointer-events: none; background: silver; border: 1px outset rgb(255, 255, 255); justify-content: center; align-items: center; width: 20px; height: 20px; font-size: 16px; font-weight: 700; line-height: 16px; display: flex; position: absolute; top: 7px; right: 7px; box-shadow: rgb(0, 0, 0) 1px 1px; }
.container-shape-torn { --mask-torn: radial-gradient(circle at 10px 0, transparent 8px, black 9px) 0 0 / 20px 20px repeat-x, linear-gradient(black 0 0) 0 10px / 100% 100% no-repeat; mask: var(--mask-torn); filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 2px 8px); border-radius: 0px 0px 2px 2px !important; padding-top: 20px !important; }
.container-shape-macos { background-clip: padding-box; position: relative; overflow: hidden; border-radius: 12px !important; padding-top: 50px !important; box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 50px !important; }
.container-shape-macos::before { content: attr(data-win-title); color: rgb(102, 102, 102); z-index: 10; background: rgb(238, 241, 245); border-bottom: 1px solid rgba(0, 0, 0, 0.05); justify-content: center; align-items: center; height: 36px; font-size: 12px; font-weight: 600; display: flex; position: absolute; top: 0px; left: 0px; right: 0px; }
html.dark-mode .container-shape-macos::before { color: rgb(153, 153, 153); background: rgb(45, 48, 54); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.container-shape-macos::after { content: ""; z-index: 11; background: rgb(255, 95, 86); border-radius: 50%; width: 12px; height: 12px; position: absolute; top: 12px; left: 15px; box-shadow: rgb(255, 189, 46) 20px 0px, rgb(39, 201, 63) 40px 0px; }
.container-shape-loose-leaf-left { --hole-color: black; --mask-holes: radial-gradient(circle at 8px center, transparent 6px, var(--hole-color) 6.5px) 0 0 / 100% 30px repeat-y; mask: var(--mask-holes); filter: drop-shadow(rgba(0, 0, 0, 0.1) 2px 2px 5px); border-left: 1px solid rgba(0, 0, 0, 0.1); box-shadow: none !important; padding-left: 25px !important; }
.container-shape-loose-leaf-top { --hole-color: black; --mask-holes-top: radial-gradient(circle at center 8px, transparent 6px, var(--hole-color) 6.5px) 0 0 / 30px 100% repeat-x; mask: var(--mask-holes-top); filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 2px 5px); border-top: 1px solid rgba(0, 0, 0, 0.1); box-shadow: none !important; padding-top: 25px !important; }
.container-shape-loose-leaf-middle { --hole-color: black; --gap-half: 13px; --hole-offset: 25px; --mask-left-image: radial-gradient(circle at calc(100% - (var(--hole-offset) - var(--gap-half))) center, transparent 6px, black 6.5px); --mask-right-image: radial-gradient(circle at calc(var(--hole-offset) - var(--gap-half)) center, transparent 6px, black 6.5px); mask-image: var(--mask-left-image), var(--mask-right-image); mask-size: calc(50% - var(--gap-half)) 30px, calc(50% - var(--gap-half)) 30px; position: relative; mask-position: 0px 0px, 100% 0px; mask-repeat: repeat-y, repeat-y; mask-composite: add; box-shadow: none !important; }
.container-shape-loose-leaf-middle::after { content: ""; pointer-events: none; z-index: 10; background: rgba(0, 0, 0, 0.03); width: 2px; position: absolute; top: 0px; bottom: 0px; left: 50%; transform: translate(-50%); }
.container-shape-loose-leaf-middle::before { content: ""; top: 0px; bottom: 0px; left: calc(50% - var(--gap-width) / 2 - 10px); right: calc(50% - var(--gap-width) / 2 - 10px); pointer-events: none; z-index: 5; position: absolute; box-shadow: rgba(0, 0, 0, 0.08) -8px 0px 10px -5px inset, rgba(0, 0, 0, 0.08) 8px 0px 10px -5px inset; }
.container-shape-stack { z-index: 1; transition: transform 0.3s; position: relative; transform: rotate(-1deg); border-radius: 4px !important; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.05) 4px 4px, rgba(255, 255, 255, 0.5) 4px 4px 0px 1px, rgba(0, 0, 0, 0.05) 8px 8px, rgba(255, 255, 255, 0.3) 8px 8px 0px 1px !important; }
.container-shape-stack:hover { transform: rotate(0deg) scale(1.01); }
.badge-beta { color: rgb(0, 0, 0); vertical-align: middle; background-color: rgb(241, 196, 15); border-radius: 4px; margin-left: 5px; padding: 2px 5px; font-size: 0.65rem; font-weight: 900; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px; }
.code-preview-box { color: rgb(122, 162, 247); white-space: pre-wrap; word-break: break-all; background: rgb(26, 27, 38); border: 1px solid rgb(51, 51, 51); border-radius: 8px; max-height: 120px; margin: 10px 0px; padding: 12px; font-family: Consolas, Monaco, monospace; font-size: 0.75rem; overflow-y: auto; }
.steam-list-item { border-bottom: 1px solid var(--border-color); cursor: pointer; align-items: center; padding: 8px; transition: background 0.2s; display: flex; }
.steam-list-item:hover { background: var(--bg-image-upload-hover); }
.steam-list-item img { object-fit: cover; border-radius: 4px; width: 48px; height: 48px; margin-right: 12px; }
.steam-game-info { flex: 1 1 0%; min-width: 0px; }
.steam-game-name { white-space: nowrap; text-overflow: ellipsis; color: var(--text-primary); font-size: 0.95rem; font-weight: 700; overflow: hidden; }
.steam-game-time { color: var(--text-secondary); font-size: 0.8rem; }
.steam-ach-item { border-bottom: 1px solid var(--border-color); cursor: pointer; opacity: 0.6; align-items: center; padding: 8px; display: flex; }
.steam-ach-item.unlocked { opacity: 1; background: rgba(0, 122, 255, 0.05); }
.steam-ach-item:hover { background: var(--bg-image-upload-hover); }
.steam-ach-icon { border-radius: 4px; width: 48px; height: 48px; margin-right: 12px; }
.preview-header[data-style="steam"] { align-items: flex-start; gap: 20px; min-height: 180px; font-family: "Motiva Sans", Arial, sans-serif; display: flex; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; color: rgb(196, 196, 196) !important; background: radial-gradient(circle at 0px 0px, rgb(42, 71, 94) 0%, rgb(27, 40, 56) 60%) !important; padding: 20px !important; }
.preview-header[data-style="steam"]::before { content: ""; opacity: 0.8; pointer-events: none; z-index: -2; background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, rgba(0, 0, 0, 0) 1px) 0px 0px / 11px 11px, radial-gradient(circle, rgba(255, 255, 255, 0.12) 1px, rgba(0, 0, 0, 0) 1px) 5.5px 5.5px / 11px 11px; width: 200%; height: 200%; animation: 60s linear 0s infinite normal none running moveDots; position: absolute; top: -50%; left: -50%; }
.preview-header[data-style="steam"] .id-card-left { z-index: 2; flex-shrink: 0; position: relative; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; width: 120px !important; padding: 0px !important; }
.preview-header[data-style="steam"] #preview-avatar { background-color: rgb(87, 203, 222); background-clip: content-box; padding: 2px; box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 15px; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; border-radius: 4px !important; width: 110px !important; height: 110px !important; }
.preview-header[data-style="steam"] .id-card-right { z-index: 2; text-align: left; flex: 1 1 0%; align-items: flex-start; padding: 10px 0px 0px !important; }
.preview-header[data-style="steam"] #preview-nickname { text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 2px; line-height: 1.1; color: rgb(255, 255, 255) !important; margin-bottom: 5px !important; font-size: 2.2rem !important; font-weight: 500 !important; }
.preview-header[data-style="steam"] #preview-subtitle { letter-spacing: 0.5px; color: rgb(87, 203, 222) !important; margin-bottom: 15px !important; font-size: 1.1rem !important; font-weight: 400 !important; }
.preview-header[data-style="steam"].in-game #preview-avatar { background-color: rgb(144, 186, 60); }
.preview-header[data-style="steam"].in-game #preview-subtitle { color: rgb(144, 186, 60) !important; }
.preview-header[data-style="steam"] #preview-bio { color: rgb(172, 178, 184) !important; font-size: 0.9rem !important; }
.steam-level-badge { color: rgb(87, 203, 222); vertical-align: text-bottom; border: 2px solid rgb(87, 203, 222); border-radius: 50%; flex-shrink: 0; justify-content: center; align-items: center; width: 32px; min-width: 32px; height: 32px; min-height: 32px; margin-left: 10px; font-size: 16px; font-weight: 700; display: inline-flex; box-shadow: rgba(87, 203, 222, 0.4) 0px 0px 5px; }
.preview-header[data-style="steam"] .tags-container { justify-content: flex-start; gap: 8px; margin-top: 15px !important; }
.preview-header[data-style="steam"] .tag-pill { color: rgb(102, 192, 244) !important; box-shadow: none !important; background: rgb(34, 43, 53) !important; border: 1px solid rgb(60, 65, 70) !important; border-radius: 2px !important; padding: 4px 8px !important; font-size: 0.75rem !important; }
.sortable-ghost { opacity: 0.3 !important; transition: none !important; }
.preview-header[data-style="win95"] { display: flex; background-color: silver !important; border-width: 2px !important; border-style: solid !important; border-image: initial !important; border-color: rgb(255, 255, 255) gray gray rgb(255, 255, 255) !important; flex-direction: column !important; align-items: stretch !important; gap: 0px !important; padding: 3px !important; font-family: "Fusion Pixel 12px Mono latin", "Microsoft Sans Serif", Tahoma, sans-serif !important; box-shadow: rgb(0, 0, 0) 1px 1px !important; }
.win95-profile-titlebar { color: rgb(255, 255, 255); letter-spacing: 0.5px; background: linear-gradient(90deg, navy, rgb(16, 132, 208)); justify-content: space-between; align-items: center; margin-bottom: 2px; padding: 3px 4px 3px 6px; font-size: 13px; font-weight: 700; display: flex; }
.win95-profile-controls { gap: 2px; display: flex; }
.win95-profile-content { color: rgb(0, 0, 0); background: rgb(255, 255, 255); flex: 1 1 0%; align-items: flex-start; gap: 20px; padding: 15px; display: flex; border-width: 2px !important; border-style: solid !important; border-image: initial !important; border-color: gray rgb(255, 255, 255) rgb(255, 255, 255) gray !important; }
.win95-profile-statusbar { color: rgb(0, 0, 0); justify-content: space-between; margin-top: 2px; padding: 2px 4px; font-size: 11px; display: flex; border-width: 1px !important; border-style: solid !important; border-image: initial !important; border-color: gray rgb(255, 255, 255) rgb(255, 255, 255) gray !important; }
.preview-header[data-style="win95"] #preview-avatar { border-width: 2px !important; border-style: solid !important; border-image: initial !important; border-color: gray rgb(255, 255, 255) rgb(255, 255, 255) gray !important; border-radius: 0px !important; }
.preview-header[data-style="win95"] .tag-pill { color: rgb(0, 0, 0) !important; box-shadow: none !important; background: silver !important; border-width: 1px !important; border-style: solid !important; border-image: initial !important; border-color: rgb(255, 255, 255) gray gray rgb(255, 255, 255) !important; border-radius: 0px !important; font-size: 11px !important; }
.standard-rules-table { border-collapse: collapse; background: var(--bg-card); width: 100%; color: var(--text-primary); border: 1px solid var(--border-color); margin-top: 10px; font-size: 0.85rem; line-height: 1.4; }
.standard-rules-table th, .standard-rules-table td { border: 1px solid var(--border-color); text-align: left; vertical-align: middle; padding: 10px 8px; }
.standard-rules-table th { background: var(--bg-section); text-align: center; white-space: nowrap; font-weight: 700; }
.standard-rules-table tbody tr:nth-child(2n) { background: rgba(128, 128, 128, 0.03); }
@media (max-width: 768px) {
  .standard-rules-table { font-size: 0.75rem; }
  .standard-rules-table th, .standard-rules-table td { padding: 6px 4px; }
}
@keyframes sys-pingpong { 
  0%, 15% { transform: translate(0px); }
  85%, 100% { transform: translateX(var(--scroll-dist,-50%)); }
}
.carousel-inner { flex-direction: column; transition: transform 0.5s ease-in-out; display: flex; }
.carousel-item { white-space: nowrap; text-overflow: ellipsis; align-items: center; height: 36px; padding: 0px 45px 0px 15px; font-size: 0.85rem; font-weight: 500; display: flex; position: relative; overflow: hidden; }
@keyframes sys-marquee { 
  0% { transform: translate(100vw); }
  100% { transform: translate(-100%); }
}
#inspector-tab-content-selected { padding-top: 0px !important; }
.editor-item-header { z-index: 40; background: var(--bg-section); border-bottom: 1px solid var(--border-color); align-items: center; height: 44px; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; position: sticky; top: 0px; padding: 2px 10px !important; }
.selected-sub-tabs { z-index: 30; background: var(--bg-editor); border-bottom: 1px solid var(--border-color); gap: 5px; transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; position: sticky; top: 44px; margin-bottom: 0px !important; padding: 4px 10px !important; }
.inspector-scroll-container.is-scrolled .editor-item-header { background: var(--bg-editor); height: 32px; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; }
.inspector-scroll-container.is-scrolled .editor-item-title-input { font-size: 0.85rem !important; }
.inspector-scroll-container.is-scrolled .item-delete-btn { transform: scale(0.85); padding: 2px 8px !important; }
.inspector-scroll-container.is-scrolled .selected-sub-tabs { background: var(--bg-section); top: 32px; padding: 2px 10px !important; }
.inspector-scroll-container.is-scrolled .selected-sub-tab-btn { padding: 4px 8px !important; font-size: 0.75rem !important; }
.inspector-sub-content { padding: 15px; }
#update-modal-overlay { z-index: 20010; visibility: hidden; opacity: 0; backdrop-filter: blur(5px); background: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; width: 100%; height: 100%; transition: opacity 0.3s; display: none; position: fixed; top: 0px; left: 0px; }
#update-modal-overlay.active { display: flex; }
#update-modal-overlay.visible { opacity: 1; visibility: visible; }
.export-quality-tabs { background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 8px; gap: 4px; margin-bottom: 8px; padding: 4px; display: flex; }
.quality-tab { text-align: center; cursor: pointer; color: var(--text-secondary); border: 1px solid rgba(0, 0, 0, 0); border-radius: 6px; flex: 1 1 0%; padding: 8px 4px; font-size: 0.85rem; font-weight: 500; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.quality-tab:hover { color: var(--text-primary); background: rgba(128, 128, 128, 0.05); }
.quality-tab:has(input:checked) { background: var(--bg-card); color: var(--color-primary-text); border-color: rgba(0, 0, 0, 0.05); font-weight: 700; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; }
.quality-tab input { display: none; }
.quality-hint { color: var(--text-secondary); background: rgba(128, 128, 128, 0.05); border-radius: 6px; margin: 0px 0px 15px; padding: 8px; font-size: 0.75rem; line-height: 1.4; }
.export-toggles-grid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; display: grid; }
.toggle-card { border: 1px solid var(--border-input); background: var(--bg-input); cursor: pointer; border-radius: 8px; justify-content: space-between; align-items: center; padding: 10px; font-size: 0.85rem; transition: border-color 0.2s, background-color 0.2s; display: flex; }
.toggle-card:hover { border-color: var(--color-primary); background: var(--bg-card); }
.toggle-card.active { background: var(--bg-image-upload-hover); border-color: var(--color-primary); color: var(--color-primary-text); font-weight: 600; }
.toggle-card input[type="checkbox"] { accent-color: var(--color-primary); transform: scale(1.1); }
.toggle-card .radius-input { border: 1px solid var(--border-input); text-align: center; border-radius: 4px; width: 40px; margin-left: 5px; padding: 2px 4px; font-size: 0.8rem; }
.export-filename-group { background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 8px; align-items: center; margin-bottom: 10px; padding: 0px 10px; display: flex; }
.export-filename-group input { box-shadow: none; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 10px 5px; }
.update-card { background: var(--bg-card); text-align: center; border: 1px solid var(--border-color); border-radius: 16px; width: 90%; max-width: 360px; padding: 30px 20px; transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); transform: scale(0.95); box-shadow: rgba(0, 0, 0, 0.4) 0px 20px 50px; }
#update-modal-overlay.visible .update-card { transform: scale(1); }
.lyrics-line .trans-text { opacity: 0.7; margin-top: 2px; font-size: 0.75em; font-weight: 400; line-height: 1.3; display: block; }
.lyrics-line:not(.active) .trans-text { opacity: 0.5; }
.release-notes-content h4, #help-changelog h4 { border-bottom: 1px dashed var(--border-color); margin: 15px 0px 8px; padding-bottom: 4px; font-size: 0.95rem; font-weight: 700; color: rgb(59, 130, 246) !important; }
.release-notes-content h4:first-child, #help-changelog h4:first-child { margin-top: 0px; }
.release-notes-content ul, #help-changelog ul { margin: 0px; padding-left: 20px; list-style-type: disc; }
.release-notes-content li, #help-changelog li { margin-bottom: 6px; line-height: 1.5; }
.release-notes-content strong, #help-changelog strong { color: var(--text-primary); font-weight: 800; }
.release-notes-content::-webkit-scrollbar { width: 6px; }
.release-notes-content::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
@keyframes slideDown { 
  0% { transform: translateY(-100%); }
  100% { transform: translateY(0px); }
}
@keyframes bounce { 
  0%, 20%, 50%, 80%, 100% { transform: translateY(0px); }
  40% { transform: translateY(-10px); }
  60% { transform: translateY(-5px); }
}
.flower-particle { pointer-events: none; z-index: 1000001; user-select: none; will-change: transform, opacity; font-size: 24px; animation: 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards running flower-fly; position: fixed; bottom: -50px; }
.tag-pill, .preview-button, .social-name, .todo-text, .cal-num { align-items: var(--g-font-align,center) !important; display: inline-flex !important; }
.preview-card-title, .music-title, .grid-label, .grid-subtitle, .rank-name, .todo-title, .scale-label, .preview-item-wrapper:not([data-item-type="social"]):not([data-item-type="achievement"]) [data-item-key="title"], .preview-item-wrapper:not([data-item-type="social"]):not([data-item-type="achievement"]) [data-item-key="songTitle"], .preview-item-wrapper:not([data-item-type="social"]):not([data-item-type="achievement"]) [data-item-key="label"], .preview-item-wrapper:not([data-item-type="social"]):not([data-item-type="achievement"]) [data-item-key="leftLabel"], .preview-item-wrapper:not([data-item-type="social"]):not([data-item-type="achievement"]) [data-item-key="rightLabel"] { box-sizing: border-box; align-items: var(--g-font-align,center) !important; justify-content: var(--local-justify,var(--g-comp-justify,center)) !important; width: 100% !important; min-width: 100% !important; font-family: var(--g-comp-title-font-family,var(--g-comp-font-family)) !important; font-weight: var(--g-comp-title-font-weight,700) !important; font-style: var(--g-comp-title-font-style,normal) !important; flex-shrink: 0 !important; display: flex !important; }
.music-card-preview:not([data-style]):not(.music-card-vinyl), .music-card-cassette, .showcase-card[data-style="magazine"], .showcase-card.ticket-style, .showcase-card[data-style="book"] { --local-justify: flex-start !important; }
.grid-label, .grid-subtitle { justify-content: center !important; }
.preview-card-title .title-text-content, .grid-label, .grid-subtitle, .music-title, .preview-button span, .social-name span { top: var(--g-font-offset-y,0px); position: relative; white-space: pre-wrap !important; word-break: break-word !important; }
.tag-pill > span:not(.icon-view-wrapper) { top: var(--g-font-offset-y,0px); position: relative; white-space: nowrap !important; word-break: keep-all !important; text-overflow: ellipsis !important; overflow: hidden !important; }
.preview-card-title .iconify, .preview-card-title .custom-svg-icon { flex-shrink: 0 !important; }
@keyframes flower-fly { 
  0% { opacity: 1; transform: translateY(0px) rotate(0deg) scale(0.5); }
  50% { opacity: 1; }
  100% { transform: translateY(-85vh) translateX(var(--drift)) rotate(var(--rotation)) scale(1.2); opacity: 0; }
}
.dialogue-entry { align-items: flex-start; gap: 12px; display: flex; width: fit-content !important; max-width: 85% !important; }
.dialogue-left { align-self: flex-start; }
.dialogue-right { flex-direction: row-reverse; align-self: flex-end; }
.dialogue-avatar { background-position: 50% center; background-size: cover; border-radius: 50%; flex-shrink: 0; width: 40px; height: 40px; margin-top: 0px; }
.dialogue-avatar.initial-avatar { color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; justify-content: center; align-items: center; font-size: 1.2rem; font-weight: 700; display: flex; }
.dialogue-content-wrapper { flex-direction: column; display: flex; width: fit-content !important; max-width: 100% !important; }
.dialogue-left .dialogue-content-wrapper { align-items: flex-start; }
.dialogue-right .dialogue-content-wrapper { align-items: flex-end; }
.dialogue-speaker { margin-bottom: 4px; padding: 0px 8px; font-size: 0.8em; font-weight: 600; }
.dialogue-bubble { background-color: var(--bubble-bg-color); border-radius: 18px; padding: 10px 15px; position: relative; width: fit-content !important; max-width: 100% !important; }
.dialogue-left .dialogue-bubble { border-top-left-radius: 0px; }
.dialogue-right .dialogue-bubble { border-top-right-radius: 0px; }
.dialogue-bubble::before { content: ""; border: 8px solid rgba(0, 0, 0, 0); width: 0px; height: 0px; position: absolute; bottom: 8px; }
.dialogue-left .dialogue-bubble::before { background-color: var(--bubble-bg-color); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; width: 5px; height: 6px; top: 0px; bottom: auto; left: -5px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3Cpath d='M5,6 L5,0 L2.9,0 Q0.5,0 1.7,1.6 L5,6 Z' fill='black'/%3E%3C/svg%3E") 50% center / 100% 100% no-repeat; }
.dialogue-right .dialogue-bubble::before { background-color: var(--bubble-bg-color); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; width: 5px; height: 6px; top: 0px; bottom: auto; right: -5px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3Cpath d='M0,6 L0,0 L2.1,0 Q4.5,0 3.3,1.6 L0,6 Z' fill='black'/%3E%3C/svg%3E") 50% center / 100% 100% no-repeat; }
.dialogue-entry.dialogue-center { justify-content: center; width: 100%; max-width: 100%; margin: 10px 0px; }
.dialogue-entry.dialogue-center .dialogue-content-wrapper { width: 100%; align-items: center !important; }
.dialogue-entry.dialogue-center .dialogue-bubble { padding: 4px 12px; color: rgb(255, 255, 255) !important; box-shadow: none !important; background: rgba(0, 0, 0, 0.15) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; border-radius: 4px !important; font-size: 0.75rem !important; }
.dialogue-entry.dialogue-center .dialogue-bubble::before, .dialogue-entry.dialogue-center .dialogue-avatar, .dialogue-entry.dialogue-center .dialogue-header { display: none !important; }
.dialogue-bubble.is-image { overflow: hidden; box-shadow: none !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; padding: 0px !important; }
.dialogue-bubble.is-image::before { display: none !important; }
.dialogue-image { cursor: pointer; border-radius: 8px; max-width: 100%; max-height: 300px; display: block; }
.dialogue-preview-container[data-style="discord"] .dialogue-entry { align-items: flex-start; gap: 16px; max-width: 100%; padding: 2px 0px; flex-direction: row !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-entry:hover { background-color: rgba(0, 0, 0, 0.04); }
.dialogue-preview-container[data-style="discord"] .dialogue-avatar { cursor: pointer; width: 40px; height: 40px; margin-top: 2px; border-radius: 50% !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-content-wrapper { flex: 0 1 auto; align-items: flex-start !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-header { align-items: baseline; gap: 8px; margin-bottom: 2px; display: flex; }
.dialogue-preview-container[data-style="discord"] .dialogue-speaker { margin: 0px; padding: 0px; font-size: 1rem; font-weight: 500; color: rgb(242, 243, 245) !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-timestamp { color: rgb(148, 155, 164); font-size: 0.75rem; font-weight: 400; }
.dialogue-preview-container[data-style="discord"] .dialogue-bubble { border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; padding: 0px; color: rgb(219, 222, 225) !important; background: 0px 0px !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-bubble::before { display: none; }
.dialogue-avatar-thumb-wrapper { background-color: var(--bg-image-thumb); cursor: pointer; border: 2px dashed var(--border-input); border-radius: 50%; justify-content: center; align-items: center; width: 48px; height: 48px; display: flex; overflow: hidden; }
.dialogue-avatar-thumb-wrapper:hover { border-color: var(--color-primary); }
.dialogue-entry-editor { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; align-items: flex-start; gap: 8px; margin-bottom: 10px; padding: 10px; display: flex; position: relative; }
.dialogue-entry-editor .card-drag-handle { cursor: grab; color: var(--text-placeholder); padding: 8px 4px; font-size: 1.5rem; }
.dialogue-entry-editor .card-delete-btn { flex-shrink: 0; width: 32px; height: 32px; padding: 0px; }
.save-status-badge { color: var(--text-secondary); opacity: 0; pointer-events: none; background: var(--bg-input); border: 1px solid var(--border-color); z-index: 2000; white-space: nowrap; border-radius: 12px; align-items: center; gap: 5px; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; transition: opacity 0.3s; display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
@media (max-width: 1024px) {
  .save-status-badge { background: var(--bg-card); border-color: var(--color-primary); color: var(--color-primary); left: 15px; top: max(15px, env(safe-area-inset-top) + 10px); z-index: 500; position: fixed; transform: none; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
}
.unified-editor-item { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; align-items: stretch; margin-bottom: 8px; transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s; display: flex; overflow: hidden; }
.unified-editor-item:hover, .unified-editor-item:focus-within { border-color: var(--border-input); background: var(--bg-editor); box-shadow: rgba(0, 0, 0, 0.04) 0px 2px 8px; }
.unified-drag-handle { border-right: 1px solid var(--border-color); cursor: grab; width: 32px; color: var(--text-placeholder); background: rgba(0, 0, 0, 0.02); flex-shrink: 0; justify-content: center; align-items: center; font-size: 1.2rem; transition: color 0.2s; display: flex; }
.unified-editor-item:hover .unified-drag-handle { color: var(--text-secondary); background: rgba(0, 0, 0, 0.05); }
.unified-drag-handle:active { cursor: grabbing; }
.unified-content { flex-grow: 1; align-items: center; gap: 10px; min-width: 0px; padding: 10px; display: flex; }
.unified-content.column { flex-direction: column; align-items: stretch; gap: 8px; }
.unified-delete-btn { width: 36px; color: var(--text-placeholder); cursor: pointer; background: 0px 0px; border-width: medium medium medium 1px; border-style: none none none solid; border-color: currentcolor currentcolor currentcolor rgba(0, 0, 0, 0); border-image: initial; flex-shrink: 0; justify-content: center; align-items: center; font-size: 1.1rem; transition: color 0.2s, opacity 0.2s; display: flex; }
.unified-editor-item:hover .unified-delete-btn { color: var(--text-secondary); border-left-color: var(--border-color); }
.unified-delete-btn:hover { background-color: rgba(255, 59, 48, 0.1); color: var(--color-danger) !important; }
.mobile-pencil-wrapper.reactive { overflow: visible; box-shadow: none !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; border-radius: 0px !important; }
.mobile-pencil-wrapper.reactive .pencil-icon { background: var(--color-primary,#007aff); color: rgb(255, 255, 255); cursor: pointer; pointer-events: auto; border: 1.5px solid rgb(255, 255, 255); border-radius: 50%; justify-content: center; align-items: center; width: 22px; height: 22px; display: flex; position: absolute; top: 0px; right: 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 8px; }
span.iconify:not(svg):empty { background-color: var(--text-placeholder,#ccc); opacity: 0.25; vertical-align: middle; width: 1em; height: 1em; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m-1 11h2v2h-2m0-8h2v6h-2'/%3E%3C/svg%3E") 50% center / contain no-repeat; display: inline-flex !important; }
.tiptap img, .ql-editor img { vertical-align: middle; border-radius: 8px; max-width: 100%; height: auto; margin: 5px 4px; display: inline-block; }
[style*="writing-mode: vertical-rl"] .tiptap img, [style*="writing-mode: vertical-rl"] .ql-editor img { width: auto; max-height: 100%; margin: 0px 10px; display: inline-block; }
html.native-screenshot-mode, body.native-screenshot-mode { background-color: var(--bg-preview-pane) !important; height: auto !important; min-height: 100dvh !important; position: static !important; overflow: auto !important; }
html body.native-screenshot-mode.native-screenshot-mode .preview-overlay, html body.native-screenshot-mode.native-screenshot-mode .preview-texture-layer, html body.native-screenshot-mode.native-screenshot-mode .preview-glass-layer { height: 100% !important; min-height: 100dvh !important; }
html body.native-screenshot-mode.native-screenshot-mode::after { content: none !important; display: none !important; }
html.is-mobile #mobile-layer-toggle, html.is-mobile #mobile-inspector-toggle { display: flex !important; }
.preview-items-container.has-mobile-spotlight { contain: layout style; }
.preview-items-container.has-mobile-spotlight::before { content: ""; z-index: 999; pointer-events: none; background: rgba(0, 0, 0, 0.5); position: absolute; inset: -100px; }
.preview-items-container.has-mobile-spotlight .preview-item-wrapper:not(.selected) { will-change: opacity; opacity: 0.28 !important; pointer-events: none !important; }
.preview-items-container.has-mobile-spotlight .preview-item-wrapper.selected { z-index: 1000 !important; position: relative !important; transform: translateY(-2px) !important; }
.mobile-quick-arc-bar { z-index: 1010; justify-content: center; align-items: center; display: flex; position: absolute; bottom: 0px; left: 50%; transform: translate(-50%, 100%); }
.quick-arc-handle { background: var(--bg-editor,#1e222af2); border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; color: var(--color-primary,#007aff); cursor: pointer; white-space: nowrap; border-top-width: medium; border-top-style: none; border-top-color: currentcolor; border-radius: 0px 0px 14px 14px; align-items: center; gap: 5px; padding: 6px 14px; font-size: 0.72rem; font-weight: 700; transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), background-color 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), box-shadow 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28); display: flex; box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 16px; }
.quick-arc-handle:active { transform: scale(0.94); }
.quick-arc-handle .chevron { color: var(--text-secondary); font-size: 0.85rem; }
.mobile-quick-adjust-popover { z-index: 1020; background: var(--bg-editor,#1e222af2); border: 1px solid var(--border-color,#ffffff1a); border-radius: 16px; flex-direction: column; gap: 12px; width: 320px; padding: 16px; animation: 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.1) 0s 1 normal none running popover-fade-in; display: flex; position: absolute; bottom: -40px; left: 50%; transform: translate(-50%, 100%); box-shadow: rgba(0, 0, 0, 0.3) 0px 15px 35px; }
.mobile-quick-adjust-popover.popover-upwards { margin-bottom: 15px; animation: 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.1) 0s 1 normal none running popover-fade-in-upwards; bottom: 100%; transform: translate(-50%); }
@keyframes popover-fade-in { 
  0% { opacity: 0; transform: translate(-50%, 90%) scale(0.95); }
  100% { opacity: 1; transform: translate(-50%, 100%) scale(1); }
}
@keyframes popover-fade-in-upwards { 
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.95); }
  100% { opacity: 1; transform: translate(-50%) scale(1); }
}
.quick-adjust-tabs { border-bottom: 1px solid var(--border-color); gap: 4px; padding-bottom: 6px; display: flex; }
.adjust-tab-btn { color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; flex: 1 1 0%; padding: 5px 0px; font-size: 0.75rem; font-weight: 600; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.adjust-tab-btn.active { color: rgb(0, 122, 255); background: rgba(0, 122, 255, 0.1); }
.quick-adjust-content { flex-direction: column; display: flex; }
.tab-pane { flex-direction: column; gap: 8px; display: flex; }
.pane-header { justify-content: space-between; align-items: center; display: flex; }
.pane-label { color: var(--text-secondary); font-size: 0.72rem; font-weight: 600; }
.pane-value { color: var(--text-primary); font-size: 0.72rem; font-weight: 700; }
.pane-value.color-badge { text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px; border-radius: 4px; padding: 2px 6px; font-family: monospace; box-shadow: rgba(255, 255, 255, 0.1) 0px 0px 0px 1px inset; color: rgb(255, 255, 255) !important; }
.slider-wrapper { padding: 4px 0px; }
.mobile-quick-adjust-popover input[type="range"] { appearance: none; vertical-align: middle; background: rgba(120, 120, 128, 0.3); border-radius: 3px; outline: none; width: 100%; height: 6px; margin: 6px 0px; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px inset; }
.mobile-quick-adjust-popover input[type="range"]::-webkit-slider-thumb { appearance: none; cursor: pointer; background: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 50%; width: 20px; height: 20px; transition: transform 0.1s; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 8px; }
.mobile-quick-adjust-popover input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.15); }
.hue-range { background: linear-gradient(90deg, red, rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), red) !important; }
.hsl-sliders { flex-direction: column; gap: 8px; display: flex; }
.hsl-slider-row { align-items: center; gap: 10px; display: flex; }
.hsl-slider-row .slider-label { width: 38px; color: var(--text-secondary); text-align: right; flex-shrink: 0; font-size: 0.68rem; font-weight: 600; }
.hsl-slider-row input[type="range"] { flex: 1 1 0%; }
.pane-actions { align-items: center; gap: 6px; display: flex; }
.reset-style-btn { color: var(--text-placeholder,#8e8e93); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; justify-content: center; align-items: center; padding: 2px; font-size: 1rem; transition: color 0.2s, background-color 0.2s; display: flex; }
.reset-style-btn:hover { color: var(--color-danger,#ff3b30); background: rgba(120, 120, 128, 0.15); }
.reset-style-btn:active { transform: scale(0.9); }
.tiptap, .ql-editor { line-height: 1.6; }
.tiptap p, .ql-editor p { margin-bottom: 0.5em !important; }
.tiptap h1, .ql-editor h1 { color: var(--text-primary) !important; margin-top: 0.8em !important; margin-bottom: 0.4em !important; font-size: 1.8em !important; font-weight: 800 !important; }
.tiptap h2, .ql-editor h2 { color: var(--text-primary) !important; margin-top: 0.7em !important; margin-bottom: 0.35em !important; font-size: 1.5em !important; font-weight: 700 !important; }
.tiptap h3, .ql-editor h3 { color: var(--text-primary) !important; margin-top: 0.6em !important; margin-bottom: 0.3em !important; font-size: 1.25em !important; font-weight: 700 !important; }
.tiptap h4, .ql-editor h4 { color: rgb(59, 130, 246) !important; margin-top: 0.5em !important; margin-bottom: 0.25em !important; font-size: 1.1em !important; font-weight: 700 !important; }
.tiptap strong, .ql-editor strong, .tiptap b, .ql-editor b { font-weight: 700 !important; }
.tiptap em, .ql-editor em, .tiptap i, .ql-editor i { font-style: italic !important; }
.tiptap u, .ql-editor u { text-decoration: underline !important; }
.tiptap s, .ql-editor s, .tiptap strike, .ql-editor strike { text-decoration: line-through !important; }
.tiptap sub, .ql-editor sub { vertical-align: sub !important; font-size: 0.75em !important; }
.tiptap sup, .ql-editor sup { vertical-align: super !important; font-size: 0.75em !important; }
.tiptap blockquote, .ql-editor blockquote { border-left: 4px solid var(--color-primary,#007aff) !important; color: var(--text-secondary,#666) !important; margin: 0.8em 0px !important; padding-left: 1em !important; font-style: italic !important; }
.tiptap pre, .ql-editor pre { background: var(--bg-input,#f5f5f5) !important; color: var(--text-primary,#333) !important; border-radius: 6px !important; margin: 0.8em 0px !important; padding: 0.8em !important; font-family: monospace !important; overflow-x: auto !important; }
.tiptap code, .ql-editor code { background: var(--bg-input,#f5f5f5) !important; border-radius: 4px !important; padding: 0.2em 0.4em !important; font-family: monospace !important; font-size: 0.9em !important; }
.tiptap img, .ql-editor img { border-radius: 8px !important; max-width: 100% !important; height: auto !important; margin: 0.8em 0px !important; display: block !important; }
.tiptap a, .ql-editor a { color: var(--color-primary,#007aff) !important; cursor: pointer !important; text-decoration: underline !important; }
.tiptap ul, .ql-editor ul { margin-bottom: 8px !important; padding-left: 20px !important; list-style-type: disc !important; display: block !important; }
.tiptap ol, .ql-editor ol { margin-bottom: 8px !important; padding-left: 20px !important; list-style-type: decimal !important; display: block !important; }
.tiptap li, .ql-editor li { margin-bottom: 4px !important; display: list-item !important; }
.timeline-editor-row input[type="text"], .timeline-editor-row input[type="number"], .timeline-editor-row textarea, .timeline-editor-row select, .unified-editor-item input[type="text"]:not(.todo-text-input):not(.checklist-text-input):not(.stat-name-input), .unified-editor-item input[type="number"], .unified-editor-item textarea, .unified-editor-item select { background-color: var(--bg-inset) !important; border-color: var(--border-color) !important; color: var(--text-primary) !important; }
.timeline-editor-row input[type="text"]:focus, .timeline-editor-row input[type="number"]:focus, .timeline-editor-row textarea:focus, .timeline-editor-row select:focus, .unified-editor-item input[type="text"]:not(.todo-text-input):not(.checklist-text-input):not(.stat-name-input):focus, .unified-editor-item input[type="number"]:focus, .unified-editor-item textarea:focus, .unified-editor-item select:focus { border-color: var(--color-primary) !important; background-color: var(--bg-inset) !important; }
.preview-card-inner, .item-inner-container, .music-card-preview, .music-card-cassette, .music-card-MP3, .music-apple, .showcase-card, .rpg-card-preview, .timeline-preview, .timeline-pro-preview, .progress-bar-preview, .social-card-preview, .grid-preview-wrapper, .todo-preview-container, .calendar-preview, .qa-preview, .achievement-preview, .letter-preview, .ranking-preview, .checklist-preview, .relationship-preview, .timer-preview, .dialogue-preview-container, .marquee-container, .preview-header, .profile-pro, .profile-magazine, .profile-life, .profile-glass, .collage-preview-wrapper, .crossword-preview, .receipt-paper, .receipt-card, .receipt-linear, .linear-card, .qr-code-module-container { z-index: 1; position: relative; }
.preview-card-inner::after, .item-inner-container::after, .music-card-preview::after, .music-card-cassette::after, .music-card-MP3::after, .music-apple::after, .showcase-card::after, .rpg-card-preview::after, .timeline-preview::after, .timeline-pro-preview::after, .progress-bar-preview::after, .social-card-preview::after, .grid-preview-wrapper::after, .todo-preview-container::after, .calendar-preview::after, .qa-preview::after, .achievement-preview::after, .letter-preview::after, .ranking-preview::after, .checklist-preview::after, .relationship-preview::after, .timer-preview::after, .dialogue-preview-container::after, .marquee-container::after, .preview-header::after, .profile-pro::after, .profile-magazine::after, .profile-life::after, .profile-glass::after, .collage-preview-wrapper::after, .crossword-preview::after, .receipt-paper::after, .receipt-card::after, .receipt-linear::after, .linear-card::after, .qr-code-module-container::after { content: ""; pointer-events: none; background-image: var(--item-texture-bg); background-size: var(--item-texture-size); opacity: var(--item-texture-opacity); border-radius: inherit; z-index: -1; display: var(--item-texture-display,none); will-change: transform; backface-visibility: hidden; background-repeat: repeat; position: absolute; inset: 0px; transform: translateZ(0px); }
.preview-item-wrapper::after { content: ""; pointer-events: none; background-image: var(--item-texture-bg); background-size: var(--item-texture-size); opacity: var(--item-texture-opacity); border-radius: inherit; z-index: 0; display: var(--item-texture-glass-display,none); will-change: transform; backface-visibility: hidden; background-repeat: repeat; position: absolute; inset: 0px; transform: translateZ(0px); }
.tiptap, .ql-editor { overflow-wrap: break-word; word-break: break-all; white-space: pre-wrap !important; }
.tiptap p, .ql-editor p { margin: 0px 0px 0.4em; }
.tiptap p[style*="line-height"], .ql-editor p[style*="line-height"] { line-height: unset; }
.tiptap ul, .tiptap ol, .ql-editor ul, .ql-editor ol { margin: 0.5em 0px !important; padding-left: 1.5em !important; list-style-position: outside !important; }
.tiptap ul, .ql-editor ul { list-style-type: disc !important; }
.tiptap ol, .ql-editor ol { list-style-type: decimal !important; }
.tiptap li p, .ql-editor li p { margin: 0px !important; }
.tiptap ul[data-type="taskList"], .ql-editor ul[data-type="taskList"] { padding: 0px !important; list-style: none !important; }
.tiptap ul[data-type="taskList"] li, .ql-editor ul[data-type="taskList"] li { align-items: flex-start; gap: 8px; margin-bottom: 4px; display: flex; }
.tiptap ul[data-type="taskList"] li > label, .ql-editor ul[data-type="taskList"] li > label { user-select: none; flex: 0 0 auto; margin-top: 4px; }
.tiptap ul[data-type="taskList"] input[type="checkbox"], .ql-editor ul[data-type="taskList"] input[type="checkbox"] { cursor: pointer; width: 1.2em; height: 1.2em; accent-color: var(--color-primary); }
.tiptap table, .ql-editor table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 1em 0px; overflow: hidden; }
.tiptap table td, .tiptap table th, .ql-editor table td, .ql-editor table th { border: 2px solid var(--border-color,#ddd); vertical-align: top; box-sizing: border-box; min-width: 1em; line-height: inherit; padding: 6px 10px; }
.tiptap table th, .ql-editor table th { text-align: left; background-color: rgba(128, 128, 128, 0.05); font-weight: 700; }
.tiptap h1, .tiptap h2, .tiptap h3 { margin: 0.5em 0px 0.3em !important; font-weight: 800 !important; line-height: 1.2 !important; }
.tiptap h1 { font-size: 1.6em; }
.tiptap h2 { font-size: 1.4em; }
.tiptap h3 { font-size: 1.2em; }
.tiptap blockquote { border-left: 4px solid var(--color-primary,#007aff); color: var(--text-secondary); background: rgba(128, 128, 128, 0.05); border-radius: 2px 8px 8px 2px; margin: 0.8em 0px !important; padding-left: 1em !important; }
.tiptap pre { color: rgb(212, 212, 212); background: rgb(30, 30, 30); font-family: "Fira Code", monospace; font-size: 0.9em; border-radius: 8px !important; margin: 0.8em 0px !important; padding: 12px !important; overflow-x: auto !important; }
.tiptap code { background: rgba(128, 128, 128, 0.1); font-family: monospace; border-radius: 4px !important; padding: 2px 4px !important; }
.tiptap img { vertical-align: middle; border-radius: 8px; max-width: 100%; height: auto; display: inline-block; margin: 5px 4px !important; }
.is-empty-paragraph { min-height: 1em; }
.tiptap hr, .ql-editor hr { border-right-width: medium !important; border-bottom-width: medium !important; border-left-width: medium !important; border-right-style: none !important; border-bottom-style: none !important; border-left-style: none !important; border-right-color: currentcolor !important; border-bottom-color: currentcolor !important; border-left-color: currentcolor !important; border-image: initial !important; border-top: 1px dashed var(--border-color,#ffffff26) !important; height: 0px !important; margin: 1.2em 0px !important; }
.main-floating-toggle-btn { backdrop-filter: blur(8px); cursor: pointer; z-index: 1010; justify-content: center; align-items: center; width: 20px; height: 46px; padding: 0px; font-size: 1.15rem; transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; position: absolute; top: 50%; transform: translateY(-50%); box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; background: var(--bg-editor) !important; border: 1px solid var(--border-color) !important; color: var(--text-secondary) !important; }
.main-floating-toggle-btn.floating-teleported { position: fixed !important; top: 50% !important; transform: translateY(-50%) !important; }
.main-floating-toggle-btn .toggle-icon { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: inline-block; }
.main-floating-toggle-btn.panel-collapsed .toggle-icon { transform: rotate(180deg); }
.main-floating-toggle-btn:hover { color: rgb(255, 255, 255) !important; background: var(--color-primary,#007aff) !important; border-color: var(--color-primary,#007aff) !important; }
.main-floating-toggle-btn.left-toggle { border-radius: 0px 8px 8px 0px; left: 0px; border-left-width: medium !important; border-left-style: none !important; border-left-color: currentcolor !important; }
.main-floating-toggle-btn.right-toggle { border-radius: 8px 0px 0px 8px; right: 0px; border-right-width: medium !important; border-right-style: none !important; border-right-color: currentcolor !important; }
.layout-floating-mode .main-floating-toggle-btn { z-index: 1020 !important; transform: none !important; }
.layout-floating-mode .main-floating-toggle-btn.left-toggle { border-left-width: medium !important; border-left-style: none !important; border-left-color: currentcolor !important; border-radius: 0px 8px 8px 0px !important; margin: 0px !important; padding: 0px !important; transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s, border-color 0.2s, color 0.2s !important; position: fixed !important; top: 50% !important; left: 280px !important; transform: translateY(-50%) !important; }
.layout-floating-mode .main-floating-toggle-btn.left-toggle.panel-collapsed { z-index: 1021 !important; border-left-width: medium !important; border-left-style: none !important; border-left-color: currentcolor !important; border-radius: 0px 8px 8px 0px !important; left: 0px !important; right: auto !important; transform: translateY(-50%) !important; }
.layout-floating-mode .main-floating-toggle-btn.right-toggle { border-right: 1px solid var(--border-color) !important; border-radius: 8px !important; right: 12px !important; }
@keyframes fadeInUpApp { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.is-initial-loading .workspace-tabs-container { animation-delay: 0.15s; }
.workspace-slide-enter-active, .workspace-slide-leave-active { transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); }
.workspace-slide-enter-from { opacity: 0; transform: translate(30px); }
.workspace-slide-leave-to { opacity: 0; transform: translate(-30px); }
.is-theme-transitioning, .is-theme-transitioning *, .is-theme-transitioning .preview-canvas, .is-theme-transitioning .preview-item-wrapper, .is-theme-transitioning .item-inner-container, .is-theme-transitioning .preview-card, .is-theme-transitioning .preview-card-inner, .is-theme-transitioning .preview-card-title, .is-theme-transitioning .preview-card-content, .is-theme-transitioning .title-text-content, .is-theme-transitioning .title-icon-fixed, .is-theme-transitioning .floating-title-badge, .is-theme-transitioning .floating-title-text, .is-theme-transitioning .win95-header, .is-theme-transitioning .browser-header, .is-theme-transitioning span, .is-theme-transitioning h1, .is-theme-transitioning h2, .is-theme-transitioning h3, .is-theme-transitioning h4, .is-theme-transitioning h5, .is-theme-transitioning h6, .is-theme-transitioning p, .is-theme-transitioning a, .is-theme-transitioning button, .is-theme-transitioning svg, .is-theme-transitioning .icon-view-wrapper { transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), text-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), fill 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), stroke 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important; }
:root { --world-bg-primary: #fff; --world-bg-secondary: #f7f8fa; --world-bg-tertiary: #eef0f4; --world-bg-hover: #f0f2f5; --world-bg-active: #e4e7ed; --world-text-primary: #1a1d26; --world-text-secondary: #5e6470; --world-text-tertiary: #8e95a2; --world-text-inverse: #fff; --world-border: #e2e5eb; --world-border-light: #eef0f4; --world-border-focus: #007aff; --world-accent: #007aff; --world-accent-hover: #0066d6; --world-accent-light: #e8f2ff; --world-accent-text: #fff; --world-accent-soft: #007aff0f; --world-success: #10b981; --world-success-light: #ecfdf5; --world-warning: #f59e0b; --world-warning-light: #fffbeb; --world-error: #ef4444; --world-error-light: #fef2f2; --world-info: #007aff; --world-info-light: #e8f2ff; --world-card-bg: #fff; --world-card-shadow: 0 1px 3px #0000000f, 0 0 0 1px #0000000a; --world-card-hover-shadow: 0 4px 12px #00000014, 0 0 0 1px #0000000a; --world-card-radius: 12px; --world-input-bg: #f7f8fa; --world-input-border: #e2e5eb; --world-input-focus: #007aff; --world-overlay: #0006; --world-scrollbar-thumb: #d1d5db; --world-scrollbar-track: transparent; --world-divider: #e2e5eb; --world-radius-sm: 6px; --world-radius-md: 8px; --world-radius-lg: 12px; --world-radius-xl: 16px; --world-space-xs: 4px; --world-space-sm: 8px; --world-space-md: 12px; --world-space-lg: 16px; --world-space-xl: 24px; --world-font-xs: 11px; --world-font-sm: 12px; --world-font-base: 13px; --world-font-md: 14px; --world-font-lg: 16px; --world-font-xl: 18px; --world-font-2xl: 22px; --world-transition-fast: .15s ease; --world-transition-normal: .2s ease; --world-transition-slow: .3s ease; }
html.dark-mode { --world-bg-primary: #0e1017; --world-bg-secondary: #161820; --world-bg-tertiary: #1e2029; --world-bg-hover: #252730; --world-bg-active: #2e3039; --world-text-primary: #edf0f5; --world-text-secondary: #8e95a2; --world-text-tertiary: #5e6470; --world-text-inverse: #1a1d26; --world-border: #252730; --world-border-light: #1e2029; --world-border-focus: #4da3ff; --world-accent: #4da3ff; --world-accent-hover: #007aff; --world-accent-light: #007aff1f; --world-accent-text: #fff; --world-accent-soft: #007aff14; --world-success: #34d399; --world-success-light: #34d3991a; --world-warning: #fbbf24; --world-warning-light: #fbbf241a; --world-error: #f87171; --world-error-light: #f871711a; --world-info: #4da3ff; --world-info-light: #007aff1a; --world-card-bg: #161820; --world-card-shadow: 0 1px 3px #0000004d, 0 0 0 1px #ffffff0a; --world-card-hover-shadow: 0 4px 12px #0006, 0 0 0 1px #ffffff0f; --world-card-radius: 12px; --world-input-bg: #1e2029; --world-input-border: #2e3039; --world-input-focus: #4da3ff; --world-overlay: #000000a6; --world-scrollbar-thumb: #2e3039; --world-scrollbar-track: transparent; --world-divider: #252730; --world-radius-sm: 6px; --world-radius-md: 8px; --world-radius-lg: 12px; --world-radius-xl: 16px; --world-space-xs: 4px; --world-space-sm: 8px; --world-space-md: 12px; --world-space-lg: 16px; --world-space-xl: 24px; --world-font-xs: 11px; --world-font-sm: 12px; --world-font-base: 13px; --world-font-md: 14px; --world-font-lg: 16px; --world-font-xl: 18px; --world-font-2xl: 22px; --world-transition-fast: .15s ease; --world-transition-normal: .2s ease; --world-transition-slow: .3s ease; }
.fw-window { box-shadow: 0 24px 80px #00000040, 0 0 0 1px var(--border-color,#00000014); background: var(--bg-card,#fff); color: var(--text-primary,#1a1a1a); user-select: none; will-change: transform; border-radius: 12px; flex-direction: column; display: flex; position: fixed; overflow: hidden; }
.fw-window.fw-maximized, .fw-window.fw-mobile { border-radius: 0px; width: 100vw !important; height: 100vh !important; top: 0px !important; left: 0px !important; }
.fw-titlebar { cursor: grab; background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary,#007aff), transparent 88%) 0%, color-mix(in srgb, var(--color-primary,#007aff), transparent 95%) 100%); border-bottom: 1px solid var(--border-color,#0000000f); flex-shrink: 0; align-items: center; height: 42px; padding: 0px 8px 0px 14px; display: flex; }
.fw-titlebar:active { cursor: grabbing; }
.fw-title { white-space: nowrap; text-overflow: ellipsis; color: var(--text-primary,#1a1a1a); flex-shrink: 1; min-width: 0px; font-size: 13px; font-weight: 600; overflow: hidden; }
.fw-header-extra { flex-shrink: 0; align-items: center; margin-left: 8px; display: flex; }
.fw-titlebar-actions { flex-shrink: 0; align-items: center; gap: 2px; margin-left: auto; display: flex; }
.fw-btn { width: 28px; height: 28px; color: var(--text-primary,#1a1a1a); cursor: pointer; opacity: 0.7; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; justify-content: center; align-items: center; padding: 0px; transition: background 0.15s, color 0.15s; display: flex; }
.fw-btn:hover { opacity: 1; background: rgba(0, 0, 0, 0.08); }
html.dark-mode .fw-btn:hover { background: rgba(255, 255, 255, 0.1); }
.fw-btn-close:hover { color: rgb(255, 255, 255); background: rgb(232, 17, 35); }
.fw-body { flex: 1 1 0%; min-height: 0px; overflow: auto; }
.fw-resize-handle { cursor: nwse-resize; z-index: 2; width: 16px; height: 16px; position: absolute; bottom: 0px; right: 0px; }
.fw-resize-handle::before { content: ""; border-style: solid; border-width: 0px 0px 10px 10px; border-color: transparent transparent var(--border-color,#00000026) transparent; opacity: 0.6; width: 0px; height: 0px; transition: opacity 0.15s; position: absolute; bottom: 3px; right: 3px; }
.fw-resize-handle:hover::before { opacity: 1; }
.fw-scale-fade-enter-active { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.fw-scale-fade-leave-active { transition: transform 0.18s cubic-bezier(0.4, 0, 1, 1), opacity 0.18s cubic-bezier(0.4, 0, 1, 1); }
.fw-scale-fade-enter-from { opacity: 0; transform: scale(0.92); }
.fw-scale-fade-leave-to { opacity: 0; transform: scale(0.95); }
.fw-taskbar-item { background: var(--bg-card,#fff); box-shadow: 0 8px 32px #0000002e, 0 0 0 1px var(--border-color,#0000000f); cursor: pointer; max-width: 300px; color: var(--text-primary,#1a1a1a); user-select: none; border-radius: 10px; align-items: center; gap: 8px; padding: 6px 10px 6px 14px; display: flex; position: fixed; bottom: 12px; left: 50%; transform: translate(-50%); }
.fw-taskbar-item:hover { background: color-mix(in srgb, var(--bg-card,#fff), var(--color-primary,#007aff) 6%); }
.fw-taskbar-title { white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 500; overflow: hidden; }
.fw-taskbar-close { width: 22px; height: 22px; color: var(--text-primary,#1a1a1a); cursor: pointer; opacity: 0.5; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; flex-shrink: 0; justify-content: center; align-items: center; padding: 0px; transition: opacity 0.15s, background 0.15s; display: flex; }
.fw-taskbar-close:hover { opacity: 1; color: rgb(255, 255, 255); background: rgb(232, 17, 35); }
.fw-taskbar-slide-enter-active { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.fw-taskbar-slide-leave-active { transition: transform 0.2s cubic-bezier(0.4, 0, 1, 1), opacity 0.2s cubic-bezier(0.4, 0, 1, 1); }
.fw-taskbar-slide-enter-from, .fw-taskbar-slide-leave-to { opacity: 0; transform: translate(-50%) translateY(20px); }
.fw-taskbar-slide-enter-to, .fw-taskbar-slide-leave-from { transform: translate(-50%) translateY(0px); }
.april-fools-bouncer-wrapper[data-v-a34daebe] { z-index: 1000; pointer-events: auto; perspective: 500px; position: absolute; }
@media (max-width: 768px) {
  .april-fools-bouncer-wrapper[data-v-a34daebe] { align-items: center; margin-left: 8px; display: flex; position: static; }
}
.app-logo[data-v-a34daebe] { width: auto; max-width: 220px; height: 52px; }
@media screen and (max-width: 768px) {
  .app-logo[data-v-a34daebe], .cat-logo-wrapper[data-v-a34daebe] { display: none !important; }
}
.theme-switch-wrapper button[data-v-a34daebe] { min-width: 80px; }
.new-badge-dot[data-v-a34daebe] { background-color: var(--color-danger,#ff4757); border: 2px solid var(--bg-card); z-index: 10; border-radius: 50%; width: 8px; height: 8px; position: absolute; top: -2px; right: -2px; box-shadow: rgba(255, 71, 87, 0.5) 0px 0px 5px; }
.inbox-badge-header[data-v-a34daebe] { color: rgb(255, 255, 255); text-align: center; z-index: 10; pointer-events: none; background: rgb(255, 59, 48); border-radius: 8px; min-width: 16px; height: 16px; padding: 0px 4px; font-size: 10px; font-weight: 700; line-height: 16px; position: absolute; }
.btn-rainbow-exclamation[data-v-a34daebe]:hover { filter: brightness(1.2) drop-shadow(rgba(255, 255, 255, 0.5) 0px 0px 5px); transform: scale(1.1); }
.btn-ssuinian-banner[data-v-a34daebe] { color: rgb(255, 165, 2); cursor: pointer; background: rgba(255, 165, 2, 0.1); border: 1px solid rgba(255, 165, 2, 0.2); border-radius: 8px; justify-content: center; align-items: center; width: 28px; height: 28px; margin-right: 4px; font-weight: 900; transition: 0.2s; display: flex; }
.btn-ssuinian-banner[data-v-a34daebe]:hover { background: rgba(255, 165, 2, 0.2); animation: auto ease 0s 1 normal none running none; transform: scale(1.1); box-shadow: rgba(255, 165, 2, 0.2) 0px 0px 10px; }
.is-bouncing[data-v-a34daebe] { animation: 2s ease 0s infinite normal none running ssuinian-gentle-bounce-a34daebe; }
@keyframes ssuinian-gentle-bounce-a34daebe { 
  0%, 20%, 50%, 80%, 100% { transform: translateY(0px); }
  40% { transform: translateY(-4px); }
  60% { transform: translateY(-2px); }
}
.is-anniversary[data-v-a34daebe] { color: var(--color-primary,#007aff) !important; background: rgba(0, 122, 255, 0.1) !important; border-color: rgba(0, 122, 255, 0.25) !important; }
.is-anniversary[data-v-a34daebe]:hover { background: rgba(0, 122, 255, 0.18) !important; box-shadow: rgba(0, 122, 255, 0.2) 0px 0px 10px !important; }
.is-anniversary-bounce[data-v-a34daebe] { animation: 2s ease 0s infinite normal none running ssuinian-gentle-bounce-a34daebe; }
.btn-rainbow-exclamation[data-v-a34daebe] { color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px; transform-style: preserve-3d; justify-content: center; align-items: center; font-size: 1.2rem; font-weight: 800; animation: 0.4s linear 0s infinite normal none running mc-spin-float-a34daebe, 0.2s linear 0s infinite normal none running rainbow-bg-a34daebe; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; border-radius: 51% !important; width: 32px !important; height: 32px !important; padding: 0px !important; display: flex !important; }
@keyframes mc-spin-float-a34daebe { 
  0% { transform: translateY(0px) rotateY(0deg); }
  25% { transform: translateY(-5px) rotateY(90deg); }
  50% { transform: translateY(0px) rotateY(180deg); }
  75% { transform: translateY(5px) rotateY(270deg); }
  100% { transform: translateY(0px) rotateY(360deg); }
}
@keyframes rainbow-bg-a34daebe { 
  0% { background: rgb(255, 71, 87); }
  20% { background: rgb(255, 165, 2); }
  40% { background: rgb(46, 213, 115); }
  60% { background: rgb(30, 144, 255); }
  80% { background: rgb(83, 82, 237); }
  100% { background: rgb(255, 71, 87); }
}
.anniversary-hat[data-v-a34daebe] { transform-origin: 12px 30px; filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 2px 3px); }
.checkerboard-bg[data-v-63eeef5d] { background-color: rgb(23, 23, 23); background-image: linear-gradient(45deg, rgb(37, 37, 37) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(37, 37, 37) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(37, 37, 37) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(37, 37, 37) 75%); background-position: 0px 0px, 0px 5px, 5px -5px, -5px 0px; background-size: 10px 10px; }
.layer-list[data-v-63eeef5d] { border-bottom: 1px solid var(--border-color); flex: 1 1 0%; min-height: 0px; padding: 10px 0px; overflow-y: auto; }
.module-library-container[data-v-63eeef5d] { background: var(--bg-panel); border-top: 1px solid var(--border-color); flex: 0 0 auto; height: auto; }
.skeleton-list[data-v-63eeef5d] { flex-direction: column; gap: 8px; display: flex; }
.btn-icon[data-v-63eeef5d] { cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; justify-content: center; align-items: center; width: auto; padding: 6px 10px; font-size: 0.9rem; display: flex; }
.layer-actions[data-v-63eeef5d] { gap: 4px; display: flex; }
.layer-actions .btn-icon[data-v-63eeef5d] { width: 26px; height: 26px; color: var(--text-secondary); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; font-size: 1.1rem; }
.layer-actions .btn-icon[data-v-63eeef5d]:hover { background: var(--border-color); border-radius: 4px; }
.layer-actions .btn-icon.danger-text[data-v-63eeef5d]:hover { color: var(--color-danger); background: rgba(255, 71, 87, 0.1); }
.layer-move-btn[data-v-63eeef5d] { opacity: 0.3; }
.layer-item:hover .layer-move-btn[data-v-63eeef5d] { opacity: 1; }
.layer-move-btn[data-v-63eeef5d]:disabled { cursor: default; opacity: 0.1 !important; }
.layer-move-btn[data-v-63eeef5d]:disabled:hover { background: 0px 0px !important; }
.layer-item[data-v-63eeef5d] { cursor: pointer; transition: background-color var(--transition-short), border-color var(--transition-short); background-color: var(--bg-section); border: 1px solid var(--border-color); border-radius: 6px; align-items: center; gap: 4px; margin-bottom: 4px; padding: 8px 10px; display: flex; }
.layer-item[data-v-63eeef5d]:hover { background-color: var(--bg-input); border-color: var(--text-secondary); }
.layer-item.selected[data-v-63eeef5d] { background-color: var(--bg-image-upload-hover); border-color: var(--color-primary); border-left-width: 4px; padding-left: 7px; font-weight: 600; }
.layer-item.selected .layer-name[data-v-63eeef5d], .layer-item.selected .layer-icon[data-v-63eeef5d] { color: var(--color-primary-text); }
.group-header[data-v-63eeef5d] { background: var(--bg-editor); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 4px solid var(--group-color,var(--color-primary)); cursor: pointer; border-radius: 8px; align-items: center; gap: 8px; margin-bottom: 6px; padding: 10px; transition: 0.2s; display: flex; }
.group-header[data-v-63eeef5d]:hover { background: var(--bg-input); border-color: var(--text-secondary); }
.group-header .folder-toggle[data-v-63eeef5d] { width: 20px; color: var(--text-secondary); justify-content: center; align-items: center; display: flex; }
.group-header .layer-name[data-v-63eeef5d] { color: var(--text-primary); flex: 1 1 0%; font-size: 0.95rem; font-weight: 600; }
.group-children[data-v-63eeef5d] { border-left: 2px dashed var(--border-color); margin-bottom: 8px; margin-left: 18px; padding-left: 20px; }
.group-children .layer-item[data-v-63eeef5d] { background: var(--bg-panel); margin-bottom: 4px; }
.layer-item .layer-icon[data-v-63eeef5d] { color: var(--text-secondary); font-size: 1.1em; }
.layer-item .layer-name[data-v-63eeef5d] { white-space: nowrap; text-overflow: ellipsis; flex-grow: 1; padding-left: 4px; overflow: hidden; }
.edit-layer-input[data-v-63eeef5d] { background: var(--bg-input); border: 1px solid var(--color-primary); color: var(--text-primary); border-radius: 4px; flex-grow: 1; width: 0px; min-width: 50px; padding: 2px 4px; font-size: 0.9rem; }
.lib-btn[data-v-63eeef5d] { background-color: var(--bg-editor); border: 1px solid var(--border-input); cursor: pointer; color: var(--text-primary); border-radius: 8px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; height: 68px; padding: 8px 4px; transition: 0.2s; display: flex; position: relative; }
.lib-btn .badge-beta[data-v-63eeef5d] { color: rgb(0, 0, 0); z-index: 5; cursor: pointer; background-color: rgb(241, 196, 15); border-radius: 4px; padding: 1.5px 4.5px; font-size: 0.62rem; font-weight: 900; line-height: 1; transition: transform 0.15s; position: absolute; top: 4px; right: 4px; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px; }
.lib-btn .badge-beta[data-v-63eeef5d]:hover { transform: scale(1.1); }
.lib-btn[data-v-63eeef5d]:hover { border-color: var(--color-primary); background-color: var(--bg-input); transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 5px; }
.lib-btn span[data-v-63eeef5d] { opacity: 0.9; color: var(--text-secondary); font-size: 0.75rem !important; }
.lib-btn[data-v-63eeef5d]:hover .icon-view-wrapper, .lib-btn:hover .iconify[data-v-63eeef5d] { color: var(--color-primary); }
.lib-btn.feedback-btn[data-v-63eeef5d] .icon-view-wrapper, .lib-btn.feedback-btn .iconify[data-v-63eeef5d] { opacity: 0.8; color: var(--color-primary); font-size: 0.85em !important; }
.lib-btn.feedback-btn span[data-v-63eeef5d] { color: var(--color-primary); opacity: 0.9; font-weight: 600; }
.layer-node[data-v-63eeef5d] { cursor: default; }
.drag-handle[data-v-63eeef5d] { cursor: grab; width: 20px; height: 100%; color: var(--text-secondary); opacity: 0.3; justify-content: center; align-items: center; transition: opacity 0.2s; display: flex; }
.layer-item:hover .drag-handle[data-v-63eeef5d], .group-header:hover .drag-handle[data-v-63eeef5d] { opacity: 1; }
.drag-handle[data-v-63eeef5d]:active { cursor: grabbing; }
.layer-node .layer-actions button[data-v-63eeef5d] { cursor: pointer; }
.layer-sortable-ghost[data-v-63eeef5d] { opacity: 0.2; background: var(--color-primary-light) !important; border: 2px dashed var(--color-primary) !important; }
.layer-node.sortable-chosen[data-v-63eeef5d] { background: var(--bg-section-hover,#ffffff0d); }
.btn-preset-library[data-v-63eeef5d] { background: var(--color-primary,#6c5ce7) !important; color: rgb(255, 255, 255) !important; cursor: pointer !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; font-weight: 700 !important; transition: 0.22s !important; box-shadow: rgba(108, 92, 231, 0.12) 0px 4px 12px !important; }
.btn-preset-library[data-v-63eeef5d]:hover { filter: brightness(1.08) !important; transform: translateY(-1.5px) !important; box-shadow: rgba(108, 92, 231, 0.24) 0px 6px 16px !important; }
.btn-preset-library[data-v-63eeef5d]:active { transform: translateY(0px) !important; }
.btn-preset-library[data-v-63eeef5d] svg { width: 1.15rem !important; height: 1.15rem !important; font-size: 1.15rem !important; }
.lib-tab[data-v-63eeef5d] { justify-content: center; align-items: center; gap: 4px; display: inline-flex; }
.lib-tab[data-v-63eeef5d] svg { width: 0.95rem; height: 0.95rem; font-size: 0.95rem; }
.workspace-tabs-container[data-v-a804a114] { background: var(--bg-editor); scrollbar-width: none; border-bottom: 1px solid var(--border-color); user-select: none; box-sizing: border-box; align-items: center; gap: 6px; height: 50px; padding: 8px 16px; display: flex; overflow: auto hidden; }
.workspace-tabs-container[data-v-a804a114]::-webkit-scrollbar { display: none; }
.workspace-tab[data-v-a804a114], .workspace-folder-tab[data-v-a804a114] { background: var(--bg-card); border: 1px solid var(--border-color); cursor: pointer; height: 34px; color: var(--text-secondary); border-radius: 8px; flex: 0 0 auto; align-items: center; gap: 8px; padding: 0px 14px; font-size: 13px; transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, color 0.2s; display: flex; position: relative; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 3px; }
.workspace-tab[data-v-a804a114]:hover, .workspace-folder-tab[data-v-a804a114]:hover { background: var(--bg-item-hover,#0000000d); border-color: var(--color-primary); color: var(--color-primary); }
.dark-mode .workspace-tab[data-v-a804a114]:hover, .dark-mode .workspace-folder-tab[data-v-a804a114]:hover { background: rgba(255, 255, 255, 0.05); }
.workspace-tab.active[data-v-a804a114] { z-index: 2; background: var(--color-primary) !important; color: rgb(255, 255, 255) !important; border-color: var(--color-primary) !important; opacity: 1 !important; box-shadow: rgba(0, 122, 255, 0.3) 0px 4px 10px !important; }
.workspace-tab.active .tab-title[data-v-a804a114] { color: rgb(255, 255, 255) !important; }
.workspace-tab.in-folder[data-v-a804a114] { background: var(--bg-inset,#00000005); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--color-primary); opacity: 0.9; margin-left: 2px; }
.dark-mode .workspace-tab.in-folder[data-v-a804a114] { background: rgba(255, 255, 255, 0.02); }
.workspace-folder-tab[data-v-a804a114] { background: var(--bg-card); border: 1.5px solid var(--text-placeholder); font-weight: 800; }
.workspace-folder-tab.folder-open[data-v-a804a114] { border-color: var(--color-primary); background: var(--color-primary-bg,#007aff0d); color: var(--color-primary); margin-left: 6px; }
.workspace-folder-tab.is-dragging-over[data-v-a804a114], .folder-bracket-line.is-dragging-over[data-v-a804a114] { box-shadow: 0 0 10px var(--color-primary-light); background: var(--color-primary-bg,#007aff26) !important; border-color: var(--color-primary) !important; opacity: 1 !important; }
.workspace-folder-tab.folder-open[data-v-a804a114]::before { content: ""; background: var(--color-primary); border-radius: 3px; width: 3px; height: 70%; position: absolute; top: 15%; left: -10px; }
.workspace-tab.is-merging[data-v-a804a114] { border-color: var(--color-primary); background: var(--color-primary-bg,#007aff1a); box-shadow: 0 0 15px var(--color-primary); transform: scale(1.05); }
.folder-bracket-line[data-v-a804a114] { background: var(--color-primary); opacity: 0.6; pointer-events: none; border-radius: 3px; flex-shrink: 0; width: 3px; height: 20px; transition: opacity 0.2s; }
.workspace-bracket-tab[data-v-a804a114] { cursor: pointer; flex: 0 0 auto; justify-content: center; align-items: center; width: 12px; height: 34px; display: flex; position: relative; box-shadow: none !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; padding: 0px !important; }
.workspace-bracket-tab:hover .folder-bracket-line[data-v-a804a114] { opacity: 1; box-shadow: 0 0 8px var(--color-primary); }
.folder-bracket-line.is-empty[data-v-a804a114] { opacity: 0.3; border: 1px dashed var(--color-primary); background: 0px 0px; }
.folder-icon[data-v-a804a114] { color: var(--color-primary); font-size: 18px; }
.folder-badge[data-v-a804a114] { background: var(--color-primary); color: rgb(255, 255, 255); text-align: center; border-radius: 10px; min-width: 16px; padding: 1px 5px; font-size: 10px; font-weight: 800; }
.tab-title[data-v-a804a114] { text-overflow: ellipsis; white-space: nowrap; max-width: 140px; overflow: hidden; }
.tab-close[data-v-a804a114] { border-radius: 50%; justify-content: center; align-items: center; width: 18px; height: 18px; margin-left: 4px; font-size: 12px; transition: background 0.2s; display: flex; }
.tab-close[data-v-a804a114]:hover { background: rgba(0, 0, 0, 0.1); }
.workspace-tab.active .tab-close[data-v-a804a114]:hover { background: rgba(255, 255, 255, 0.2); }
.tab-rename-input[data-v-a804a114] { color: inherit; font-size: inherit; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; width: 90px; padding: 0px; font-family: inherit; }
.workspace-controls[data-v-a804a114] { border-left: 1px solid var(--border-color); align-items: center; gap: 8px; margin-left: 12px; padding-left: 12px; display: flex; }
.workspace-control-btn[data-v-a804a114] { background: var(--bg-item); border: 1px solid var(--border-color); cursor: pointer; width: 32px; height: 32px; color: var(--text-secondary); border-radius: 8px; justify-content: center; align-items: center; transition: 0.2s; display: flex; }
.workspace-control-btn[data-v-a804a114]:hover { background: var(--color-primary); color: rgb(255, 255, 255); border-color: var(--color-primary); }
.create-folder-btn[data-v-a804a114] { color: var(--color-primary); border-color: var(--color-primary-light); }
.tab-ghost[data-v-a804a114] { opacity: 0.3; }
.tab-dragging[data-v-a804a114] { z-index: 100; opacity: 1 !important; transition: none !important; }
.tab-chosen[data-v-a804a114] { transition: none !important; }
.cloud-tab-icon[data-v-a804a114] { vertical-align: middle; color: rgb(105, 168, 255); align-items: center; margin-right: 2px; font-size: 14px; display: inline-flex; }
.workspace-tab.is-cloud.active .cloud-tab-icon[data-v-a804a114] { color: rgb(255, 255, 255); }
.workspace-tab.is-cloud[data-v-a804a114] { border: 1px dashed rgb(105, 168, 255) !important; }
.workspace-tab.is-cloud[data-v-a804a114]:hover { background: rgba(0, 122, 255, 0.05); border-color: rgb(0, 122, 255) !important; }
.workspace-tab.is-cloud.active[data-v-a804a114] { color: rgb(255, 255, 255) !important; background: linear-gradient(135deg, rgb(105, 168, 255), rgb(0, 122, 255)) !important; border: 1px solid rgb(0, 122, 255) !important; box-shadow: rgba(0, 122, 255, 0.3) 0px 4px 10px !important; }
.workspace-tab.is-cloud.active .tab-title[data-v-a804a114] { color: rgb(255, 255, 255) !important; }
@media (max-width: 768px) {
  .workspace-tabs-container[data-v-a804a114] { height: 46px; padding: 6px 12px; }
  .workspace-tab[data-v-a804a114], .workspace-folder-tab[data-v-a804a114] { height: 32px; padding: 0px 10px; font-size: 12px; }
  .tab-title[data-v-a804a114] { max-width: 90px; }
  .workspace-controls[data-v-a804a114] { margin-left: 8px; padding-left: 8px; }
}
.collage-title-container[data-v-636ba9a3] { width: 100% !important; display: block !important; }
.collage-title-inner[data-v-636ba9a3] { align-items: center !important; max-width: 100% !important; display: inline-flex !important; }
.collage-preview-wrapper[data-v-636ba9a3] { flex-direction: column; width: 100%; display: flex; }
.collage-preview-container[data-v-636ba9a3] { width: 100%; }
.collage-item[data-v-636ba9a3] { user-select: none; -webkit-user-drag: none; width: 100%; height: 100%; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.3s; position: relative; }
.collage-item.is-dragging[data-v-636ba9a3] { filter: brightness(1.03); pointer-events: none; cursor: grabbing !important; z-index: 999 !important; transform: scale(1.04) !important; box-shadow: rgba(0, 0, 0, 0.25) 0px 15px 30px, rgba(0, 0, 0, 0.15) 0px 10px 15px !important; }
.collage-list-move[data-v-636ba9a3] { transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); }
.collage-img-wrapper[data-v-636ba9a3] { border-radius: var(--grid-radius,8px); background: rgba(128, 128, 128, 0.05); width: 100%; height: 100%; transition: outline 0.2s, opacity 0.2s; overflow: hidden; }
.collage-img-wrapper img[data-v-636ba9a3] { object-fit: cover; user-select: none; -webkit-user-drag: none; width: 100%; height: 100%; display: block; }
.collage-placeholder[data-v-636ba9a3] { color: rgb(204, 204, 204); user-select: none; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; min-height: 40px; display: flex; }
.span-indicator[data-v-636ba9a3] { opacity: 0.7; margin-top: 4px; font-family: monospace; font-size: 0.7rem; }
.collage-item-index-badge[data-v-636ba9a3] { color: rgb(255, 255, 255); pointer-events: none; z-index: 2; background: rgba(0, 0, 0, 0.6); border-bottom-right-radius: 4px; padding: 2px 6px; font-size: 0.7rem; font-weight: 700; position: absolute; top: 0px; left: 0px; }
.left-handle[data-v-636ba9a3] { cursor: ew-resize; border-radius: 4px; width: 8px; top: 4px; bottom: 4px; left: -4px; }
.left-handle[data-v-636ba9a3]:hover { box-shadow: 0 0 8px var(--color-primary,#ffd100); transform: scaleX(1.5); background: var(--color-primary,#ffd100) !important; }
.right-handle[data-v-636ba9a3] { cursor: ew-resize; border-radius: 4px; width: 8px; top: 4px; bottom: 4px; right: -4px; }
.right-handle[data-v-636ba9a3]:hover { box-shadow: 0 0 8px var(--color-primary,#ffd100); transform: scaleX(1.5); background: var(--color-primary,#ffd100) !important; }
.top-handle[data-v-636ba9a3] { cursor: ns-resize; border-radius: 4px; height: 8px; top: -4px; left: 4px; right: 4px; }
.top-handle[data-v-636ba9a3]:hover { box-shadow: 0 0 8px var(--color-primary,#ffd100); transform: scaleY(1.5); background: var(--color-primary,#ffd100) !important; }
.bottom-handle[data-v-636ba9a3] { cursor: ns-resize; border-radius: 4px; height: 8px; bottom: -4px; left: 4px; right: 4px; }
.bottom-handle[data-v-636ba9a3]:hover { box-shadow: 0 0 8px var(--color-primary,#ffd100); transform: scaleY(1.5); background: var(--color-primary,#ffd100) !important; }
.bottom-right-handle[data-v-636ba9a3] { cursor: nwse-resize; background: linear-gradient(135deg, transparent 40%, var(--color-primary,#ffd100) 40%); border-bottom-right-radius: var(--grid-radius,8px); opacity: 0.4; width: 14px; height: 14px; bottom: 2px; right: 2px; }
.collage-item:hover .bottom-right-handle[data-v-636ba9a3] { opacity: 0.9; }
.bottom-right-handle[data-v-636ba9a3]:hover { filter: drop-shadow(0 0 4px var(--color-primary,#ffd100)); transform: scale(1.1); opacity: 1 !important; }
.collage-item.is-resizing .collage-img-wrapper[data-v-636ba9a3] { outline: 2px solid var(--color-primary,#ffd100); opacity: 0.8; }
.collage-item.is-resizing .bottom-right-handle[data-v-636ba9a3] { opacity: 1; }
.exporting { display: none !important; }
.collage-item.is-drop-target[data-v-636ba9a3]::after { content: ""; border: 3px dashed var(--color-primary,#ffd100); background: rgba(var(--color-primary-rgb), .15); border-radius: var(--grid-radius,8px); z-index: 5; pointer-events: none; position: absolute; inset: 0px; }
.lyrics-wall-host[data-v-26a8cb1b] { width: 100%; min-height: 180px; }
.lyrics-bg-image[data-v-26a8cb1b], .lyrics-bg-overlay[data-v-26a8cb1b] { pointer-events: none; }
.lyric-line[data-v-26a8cb1b] { will-change: transform, opacity, filter; word-break: break-word; }
.lyric-translation[data-v-26a8cb1b] { opacity: 0.7; margin-top: 4px; font-size: 0.75em; }
.lyrics-style-poster .lyric-line[data-v-26a8cb1b] { font-family: "Songti SC", "Noto Serif SC", STSong, Georgia, serif; text-shadow: none !important; font-size: 32px !important; line-height: 1.6 !important; }
.poster-footer[data-v-26a8cb1b] { text-align: right; flex-direction: column; align-items: flex-end; padding: 0px 24px 30px; display: flex; }
.poster-quote-icon[data-v-26a8cb1b] { opacity: 0.3; margin-bottom: -20px; margin-right: 10px; font-family: Georgia, serif; font-size: 60px; line-height: 1; }
.poster-title[data-v-26a8cb1b] { margin-bottom: 4px; font-size: 14px; font-weight: 600; }
.poster-artist[data-v-26a8cb1b] { opacity: 0.7; margin-right: 10px; font-size: 12px; }
.lyrics-player-widget[data-v-26a8cb1b] { background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 12px; align-items: center; gap: 12px; padding: 10px 14px; display: flex; position: absolute; }
.widget-cover[data-v-26a8cb1b] { border-radius: 6px; flex-shrink: 0; width: 36px; height: 36px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px; }
.widget-cover img[data-v-26a8cb1b] { object-fit: cover; width: 100%; height: 100%; }
.widget-info[data-v-26a8cb1b] { flex-direction: column; flex: 1 1 0%; justify-content: center; min-width: 0px; display: flex; }
.widget-title[data-v-26a8cb1b] { white-space: nowrap; text-overflow: ellipsis; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px; font-size: 13px; font-weight: 600; overflow: hidden; }
.widget-artist[data-v-26a8cb1b] { color: rgba(255, 255, 255, 0.7); white-space: nowrap; text-overflow: ellipsis; font-size: 11px; overflow: hidden; }
.widget-visualizer[data-v-26a8cb1b] { align-items: flex-end; gap: 3px; height: 16px; padding-right: 4px; display: flex; }
.widget-visualizer .bar[data-v-26a8cb1b] { opacity: 0.8; border-radius: 2px; width: 3px; animation: 1.2s ease-in-out 0s infinite alternate none running sound-26a8cb1b; }
.widget-pos-bottom-left[data-v-26a8cb1b] { bottom: 16px; left: 16px; right: auto; transform: none; }
.widget-pos-bottom-center[data-v-26a8cb1b] { bottom: 16px; left: 50%; right: auto; transform: translate(-50%); }
.widget-pos-bottom-right[data-v-26a8cb1b] { bottom: 16px; left: auto; right: 16px; transform: none; }
.widget-pos-top-left[data-v-26a8cb1b] { inset: 16px auto auto 16px; transform: none; }
.widget-pos-top-right[data-v-26a8cb1b] { inset: 16px 16px auto auto; transform: none; }
.widget-netease[data-v-26a8cb1b] { background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; }
.widget-netease .widget-title[data-v-26a8cb1b] { font-size: 14px; font-weight: 700; }
.widget-netease .widget-artist[data-v-26a8cb1b] { opacity: 0.6; font-size: 12px; }
.widget-spotify[data-v-26a8cb1b] { background: rgba(0, 0, 0, 0.65); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 8px; }
.widget-spotify .widget-title[data-v-26a8cb1b] { letter-spacing: -0.01em; font-size: 14px; font-weight: 700; }
.widget-spotify .widget-artist[data-v-26a8cb1b] { opacity: 0.6; text-transform: none; font-size: 11px; }
.widget-spotify .widget-cover img[data-v-26a8cb1b] { border-radius: 4px; }
@keyframes sound-26a8cb1b { 
  0% { height: 3px; }
  100% { height: 16px; }
}
.timeline-pro-preview[data-v-9f5b19f2] { border-radius: var(--g-comp-border-radius,8px); flex-direction: column; align-items: center; width: 100%; display: flex; position: relative; }
.timeline-pro-preview[data-v-9f5b19f2]::before { content: ""; z-index: -2; border-radius: inherit; background-image: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: cover; background-position: center var(--card-bg-pos-y,50%); opacity: var(--card-bg-opacity,1); filter: var(--g-comp-bg-blur,none); transform: var(--g-comp-bg-transform,none); pointer-events: none; background-repeat: no-repeat; transition: filter 0.3s, opacity 0.3s; position: absolute; inset: 0px; }
.timeline-edges-layer[data-v-9f5b19f2] { pointer-events: none; z-index: 0; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: visible; }
.timeline-nodes-container[data-v-9f5b19f2] { z-index: 1; flex-direction: column; align-items: center; gap: 60px; width: 100%; display: flex; position: relative; }
.timeline-row[data-v-9f5b19f2] { flex-direction: column; align-items: center; width: 100%; display: flex; position: relative; }
.timeline-row-date[data-v-9f5b19f2] { z-index: 2; background: rgba(128, 128, 128, 0.05); border: 1px solid; border-radius: 10px; margin-bottom: 15px; padding: 2px 8px; font-size: 0.72rem; font-weight: 700; }
.timeline-row-nodes[data-v-9f5b19f2] { flex-direction: row; justify-content: center; align-items: center; width: 100%; min-height: 80px; display: flex; position: relative; }
.timeline-pro-node[data-v-9f5b19f2] { justify-content: center; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; position: absolute; left: 50%; }
.node-content-box[data-v-9f5b19f2] { background: var(--bg-panel,#fff); border: 1px solid var(--border-color,#e0e0e0); text-align: center; cursor: pointer; box-sizing: border-box; border-radius: 8px; flex-direction: column; justify-content: center; align-items: center; min-width: 120px; max-width: 200px; padding: 12px 16px; display: flex; position: relative; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px; }
.node-content-box[data-v-9f5b19f2]:hover { border-color: var(--color-primary); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 16px; }
.timeline-dot[data-v-9f5b19f2] { z-index: 2; background: rgb(255, 255, 255); border: 3px solid; border-radius: 50%; width: 12px; height: 12px; position: absolute; top: -6px; left: 50%; transform: translate(-50%); }
.timeline-time[data-v-9f5b19f2] { margin-bottom: 4px; font-size: 0.85em; font-weight: 700; }
.timeline-content[data-v-9f5b19f2] { font-size: 1em; }
.hover-add-menu[data-v-9f5b19f2] { pointer-events: auto; z-index: 10; position: absolute; inset: -30px -40px; }
.add-btn[data-v-9f5b19f2] { background: var(--color-primary); color: rgb(255, 255, 255); cursor: pointer; pointer-events: auto; opacity: 0.8; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; width: 24px; height: 24px; transition: 0.2s; display: flex; position: absolute; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px; }
.add-btn[data-v-9f5b19f2]:hover { opacity: 1; transform: scale(1.1); }
.add-btn.up[data-v-9f5b19f2] { top: 0px; left: 50%; transform: translate(-50%); }
.add-btn.down[data-v-9f5b19f2] { bottom: 0px; left: 50%; transform: translate(-50%); }
.add-btn.left[data-v-9f5b19f2] { top: 50%; left: 0px; transform: translateY(-50%); }
.add-btn.right[data-v-9f5b19f2] { top: 50%; right: 0px; transform: translateY(-50%); }
h3.preview-card-title[data-v-9f5b19f2] { text-align: inherit !important; box-sizing: border-box !important; width: 100% !important; margin: 0px 0px 16px !important; padding: 0px !important; line-height: 1.4 !important; display: block !important; }
h3.preview-card-title > span.title-text-content[data-item-key][data-v-9f5b19f2] { white-space: nowrap !important; text-overflow: ellipsis !important; width: auto !important; min-width: 0px !important; max-width: 100% !important; margin: 0px !important; display: inline-block !important; overflow: hidden !important; }
.item-upload-progress-overlay[data-v-2c99d78d] { z-index: 100; backdrop-filter: blur(4px); border-radius: inherit; pointer-events: none; background: rgba(255, 255, 255, 0.85); flex-direction: column; justify-content: center; align-items: center; display: flex; position: absolute; inset: 0px; }
.progress-bar-container[data-v-2c99d78d] { background: rgba(0, 0, 0, 0.1); border-radius: 2px; width: 60%; height: 4px; margin-bottom: 6px; overflow: hidden; }
.progress-bar-fill[data-v-2c99d78d] { background: var(--g-theme-accent,#007aff); height: 100%; transition: width 0.3s; }
.progress-label[data-v-2c99d78d] { color: rgb(51, 51, 51); font-size: 11px; font-weight: 600; }
.fade-enter-active[data-v-2c99d78d], .fade-leave-active[data-v-2c99d78d] { transition: opacity 0.3s; }
.fade-enter-from[data-v-2c99d78d], .fade-leave-to[data-v-2c99d78d] { opacity: 0; }
.preview-overlay[data-v-2c99d78d], .preview-texture-layer[data-v-2c99d78d] { z-index: 0; }
.preview-glass-layer[data-v-2c99d78d] { z-index: 1; }
.preview-items-container[data-v-2c99d78d] { z-index: 5; position: relative; }
.preview-stickers-layer[data-v-2c99d78d] { z-index: 10; pointer-events: none; position: relative; }
.me-pencils-layer[data-v-2c99d78d] { pointer-events: none; z-index: 99; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
.preview-item-wrapper[data-v-2c99d78d] { cursor: pointer; position: relative; }
.me-pencil-container[data-v-2c99d78d] { pointer-events: none !important; overflow: visible !important; }
.me-pencil-node[data-v-2c99d78d] { background: var(--color-primary,#6366f1) !important; color: rgb(255, 255, 255) !important; cursor: pointer !important; pointer-events: auto !important; aspect-ratio: 1 / 1 !important; box-sizing: border-box !important; border: 1px solid rgb(255, 255, 255) !important; border-radius: 999px !important; flex-grow: 0 !important; flex-shrink: 0 !important; justify-content: center !important; align-items: center !important; width: 20px !important; height: 20px !important; margin: 0px !important; font-size: 11px !important; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important; display: flex !important; position: absolute !important; top: -9px !important; left: auto !important; right: -9px !important; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 8px !important; }
.me-pencil-node[data-v-2c99d78d]:hover { filter: brightness(1.1) !important; transform: scale(1.1) !important; }
.me-pencil-node[data-v-2c99d78d]:active { transform: scale(0.9) !important; }
.preview-item-wrapper.selected[data-v-2c99d78d] { outline: 2px solid var(--bento-group-color,var(--color-primary)); z-index: 100 !important; cursor: pointer !important; pointer-events: auto !important; }
.preview-item-wrapper.multi-selected[data-v-2c99d78d]:not(.selected) { outline: 2px dashed var(--bento-group-color,var(--color-primary)); outline-offset: 2px; z-index: 9; }
.preview-item-wrapper.multi-selected.selected[data-v-2c99d78d] { outline-style: solid; outline-color: var(--bento-group-color,var(--color-primary)); box-shadow: 0 0 0 4px var(--bento-group-color,#007aff1a); outline-width: 2px; }
.preview-item-wrapper.is-dragging-bento[data-v-2c99d78d] { pointer-events: auto; opacity: 0.8 !important; z-index: 9999 !important; cursor: grabbing !important; box-shadow: rgba(0, 0, 0, 0.2) 0px 10px 30px !important; }
.preview-item-wrapper.is-dragging-bento[data-v-2c99d78d] * { pointer-events: none !important; }
.preview-item-wrapper.is-resizing-bento[data-v-2c99d78d] { opacity: 0.9 !important; z-index: 9999 !important; outline: 2px dashed var(--bento-group-color,var(--color-primary)) !important; }
.grid-cell-marker[data-v-2c99d78d] { box-sizing: border-box; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 0px; width: 100%; height: 100%; position: relative; }
.grid-cell-marker[data-v-2c99d78d]::after { content: ""; box-sizing: border-box; height: 100%; width: calc(100% + var(--preview-gap,24px) + 2px); border-top: 1.5px dashed var(--bento-grid-color,#0000004d); border-bottom: 1.5px dashed var(--bento-grid-color,#0000004d); position: absolute; top: 0px; left: 0px; }
.grid-cell-marker[data-v-2c99d78d]::before { content: ""; box-sizing: border-box; width: 100%; height: calc(100% + var(--preview-gap,24px) + 2px); border-left: 1.5px dashed var(--bento-grid-color,#0000004d); border-right: 1.5px dashed var(--bento-grid-color,#0000004d); background: 0px 0px; border-radius: 0px; position: absolute; top: 0px; left: 0px; }
.is-rotating-bento .item-inner-container[data-v-2c99d78d] { pointer-events: none; }
.preview-items-container.is-bento-canvas.is-interacting[data-v-2c99d78d], .preview-items-container.is-bento-canvas.is-interacting .preview-item-wrapper[data-v-2c99d78d], .preview-items-container.is-bento-canvas.is-interacting .item-inner-container[data-v-2c99d78d] { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
.is-bento-canvas > .preview-item-wrapper[data-v-2c99d78d] { height: 100%; }
.is-bento-canvas > .preview-item-wrapper .preview-card-inner[data-v-2c99d78d], .is-bento-canvas > .preview-item-wrapper .social-item-inner[data-v-2c99d78d], .is-bento-canvas > .preview-item-wrapper .preview-header[data-v-2c99d78d], .is-bento-canvas > .preview-item-wrapper .image-item-inner[data-v-2c99d78d], .preview-item-wrapper[data-has-custom-height="true"] .preview-card-inner[data-v-2c99d78d], .preview-item-wrapper[data-has-custom-height="true"] .social-item-inner[data-v-2c99d78d], .preview-item-wrapper[data-has-custom-height="true"] .preview-header[data-v-2c99d78d], .preview-item-wrapper[data-has-custom-height="true"] .image-item-inner[data-v-2c99d78d] { flex: 1 1 0% !important; height: 100% !important; }
.is-bento-canvas > .preview-item-wrapper .preview-card-content[data-v-2c99d78d], .is-bento-canvas > .preview-item-wrapper .preview-card-content-wrapper[data-v-2c99d78d], .preview-item-wrapper[data-has-custom-height="true"] .preview-card-content[data-v-2c99d78d], .preview-item-wrapper[data-has-custom-height="true"] .preview-card-content-wrapper[data-v-2c99d78d] { overflow: auto; flex: 1 1 0% !important; height: auto !important; }
.empty-canvas-state[data-v-2c99d78d] { text-align: center; width: 100%; min-height: 560px; color: var(--text-secondary); opacity: 0.9; flex-direction: column; grid-column: 1 / -1; justify-content: center; align-items: center; padding: 40px 20px; display: flex; }
.empty-canvas-emoji[data-v-2c99d78d] { filter: grayscale(); opacity: 0.5; margin-bottom: 15px; font-size: 3rem; }
.empty-canvas-title[data-v-2c99d78d] { color: var(--text-primary); margin: 0px 0px 10px; }
.empty-canvas-desc[data-v-2c99d78d] { margin-bottom: 18px; font-size: 0.9rem; }
.empty-canvas-actions[data-v-2c99d78d] { flex-wrap: wrap; justify-content: center; gap: 10px; display: flex; }
.empty-canvas-actions .btn[data-v-2c99d78d] { align-items: center; gap: 6px; width: auto; display: inline-flex; }
.preview-item-wrapper.is-bounce-feedback[data-v-2c99d78d] .item-inner-container { animation: 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal none running select-bounce-2c99d78d; }
@keyframes select-bounce-2c99d78d { 
  0% { scale: 1; }
  32% { scale: 0.965; }
  68% { scale: 1.01; }
  100% { scale: 1; }
}
.sortable-ghost[data-v-2c99d78d] { opacity: 0.4; background-color: rgb(240, 240, 240); border: 2px dashed rgb(0, 122, 255); }
.sortable-drag[data-v-2c99d78d] { will-change: transform, box-shadow; cursor: grabbing !important; z-index: 9999 !important; }
.preview-stickers-layer[data-v-2c99d78d] { pointer-events: none; z-index: 50; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
.preview-stickers-layer[data-v-2c99d78d] > * { pointer-events: auto; }
.preview-item-wrapper.is-editing-wrapper[data-v-2c99d78d] { z-index: 1000 !important; overflow: visible !important; }
.preview-item-wrapper.is-editing-wrapper[data-v-2c99d78d] .item-inner-container, .preview-item-wrapper.is-editing-wrapper[data-v-2c99d78d] .preview-card-inner, .preview-item-wrapper.is-editing-wrapper[data-v-2c99d78d] .preview-card-content-wrapper, .preview-item-wrapper.is-editing-wrapper[data-v-2c99d78d] .preview-card-content { overflow: visible !important; }
.preview-items-container[data-v-2c99d78d]:has(.is-editing-wrapper) { overflow: visible !important; }
.is-editing-rich-text[data-v-2c99d78d] .tiptap { background: 0px 0px; outline: none; }
[data-v-2c99d78d] .preview-items-container p, [data-v-2c99d78d] .preview-items-container li, [data-v-2c99d78d] .preview-items-container ul, [data-v-2c99d78d] .preview-items-container ol, [data-v-2c99d78d] .preview-items-container .tiptap, [data-v-2c99d78d] .preview-items-container .ql-editor { line-height: inherit !important; letter-spacing: inherit !important; }
.locked-mode .preview-item-wrapper.selected[data-v-2c99d78d] { box-shadow: none !important; outline: none !important; }
@media screen and (max-width: 768px) {
  .locked-mode .preview-item-wrapper[data-v-2c99d78d] { cursor: default !important; }
}
.bulk-action-bar[data-v-2c99d78d] { z-index: 90; background: rgb(255, 255, 255); border-radius: 16px; align-items: center; gap: 16px; min-width: 320px; max-width: 90vw; padding: 8px 8px 8px 20px; display: flex; position: fixed; bottom: 24px; left: 50%; transform: translate(-50%); box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 40px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; }
.bulk-info[data-v-2c99d78d] { flex-direction: column; line-height: 1.2; display: flex; }
.bulk-info .count[data-v-2c99d78d] { color: var(--color-primary); font-size: 18px; font-weight: 800; }
.bulk-info .label[data-v-2c99d78d] { color: rgb(153, 153, 153); text-transform: uppercase; font-size: 10px; }
.bulk-actions[data-v-2c99d78d] { flex: 1 1 0%; gap: 8px; display: flex; }
.bulk-btn[data-v-2c99d78d] { color: rgb(51, 51, 51); cursor: pointer; white-space: nowrap; background: rgb(245, 245, 247); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 10px; align-items: center; gap: 4px; padding: 8px 12px; font-size: 13px; font-weight: 600; display: flex; }
.bulk-btn.primary[data-v-2c99d78d] { background: var(--color-primary); color: rgb(255, 255, 255); }
.bulk-btn.danger[data-v-2c99d78d] { color: rgb(255, 71, 87); }
.bulk-btn.cancel[data-v-2c99d78d] { color: rgb(255, 255, 255); background: rgb(51, 51, 51); margin-left: auto; }
.bulk-btn[data-v-2c99d78d]:disabled { opacity: 0.3; cursor: not-allowed; }
.slide-up-enter-active[data-v-2c99d78d], .slide-up-leave-active[data-v-2c99d78d] { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; }
.slide-up-enter-from[data-v-2c99d78d], .slide-up-leave-to[data-v-2c99d78d] { opacity: 0; transform: translate(-50%, 100%) translateY(20px); }
.bento-group-container[data-v-2c99d78d] { box-sizing: border-box; flex-direction: column; display: flex; }
.item-inner-container[data-v-2c99d78d] { box-sizing: border-box; flex-direction: column; width: 100%; display: flex; }
.item-inner-container[data-is-glass="true"][data-v-2c99d78d] .social-card-preview, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .dialogue-preview-container, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .dialogue-preview-container[data-style="wechat"], .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .dialogue-preview-container[data-style="discord"], .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .preview-button, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .stat-block-preview, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .preview-card-inner, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .preview-header:not([data-style="social-card"]), .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .music-card-preview, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .todo-item-preview, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .timer-preview, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .timeline-preview, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .timeline-pro-preview, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .qa-preview, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .rpg-card-preview, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .grid-preview-wrapper, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .collage-preview-wrapper { background: 0px 0px !important; }
.item-inner-container[data-is-glass="true"][data-v-2c99d78d] .preview-card-inner::before, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .preview-header:not([data-style="social-card"])::before, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .music-card-preview::before, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .todo-item-preview::before, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .timer-preview::before, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .timeline-preview::before, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .timeline-pro-preview::before, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .qa-preview::before, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .rpg-card-preview::before, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .grid-preview-wrapper::before, .item-inner-container[data-is-glass="true"][data-v-2c99d78d] .collage-preview-wrapper::before { display: none !important; }
.item-inner-container[style*="--local-has-height: true"][data-v-2c99d78d] > :not(.item-loading-spinner) { flex: 1 1 0%; height: 100%; }
.item-loading-spinner[data-v-2c99d78d] { padding: 0px 12px; position: absolute; top: 0px; left: 0px; right: 0px; }
.bento-group-title[data-v-2c99d78d] { height: 34px; color: var(--g-comp-text-color,#666); opacity: 0.9; white-space: nowrap; pointer-events: none; font-size: 14px; font-weight: 600; font-family: var(--g-comp-font-family,sans-serif); z-index: 2; align-items: center; padding: 0px 12px; transition: 0.3s; display: flex; position: absolute; top: 0px; left: 0px; right: 0px; }
#preview-items-container > .bento-group-container[data-v-2c99d78d] { z-index: 1 !important; }
#preview-items-container > .preview-item-wrapper[data-v-2c99d78d] { z-index: 2; }
#preview-items-container > .preview-item-wrapper.selected[data-v-2c99d78d] { z-index: 10; }
#preview-items-container > .bento-group-container.drop-highlight[data-v-2c99d78d] { animation: 1.2s ease-in-out 0s infinite normal none running group-pulse-2c99d78d; box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb,99, 102, 241), .6), 0 0 20px rgba(var(--color-primary-rgb,99, 102, 241), .35), 0 0 40px rgba(var(--color-primary-rgb,99, 102, 241), .15) !important; z-index: 100 !important; }
@keyframes group-pulse-2c99d78d { 
  0%, 100% { box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb,99, 102, 241), .6), 0 0 20px rgba(var(--color-primary-rgb,99, 102, 241), .35); }
  50% { box-shadow: 0 0 0 5px rgba(var(--color-primary-rgb,99, 102, 241), .8), 0 0 30px rgba(var(--color-primary-rgb,99, 102, 241), .5); }
}
.bubble-text[data-v-2c99d78d] { margin-right: 4px; }
.bubble-btn[data-v-2c99d78d] { cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; width: 28px; height: 28px; font-size: 16px; transition: 0.2s; display: flex; }
.bubble-btn.confirm[data-v-2c99d78d] { background: var(--color-primary,#6366f1); color: rgb(255, 255, 255); }
.bubble-btn.confirm[data-v-2c99d78d]:hover { box-shadow: 0 2px 8px rgba(var(--color-primary-rgb,99, 102, 241), .4); transform: scale(1.15); }
.bubble-btn.cancel[data-v-2c99d78d] { color: rgb(102, 102, 102); background: rgb(240, 240, 240); }
.bubble-btn.cancel[data-v-2c99d78d]:hover { color: rgb(255, 255, 255); background: rgb(255, 77, 79); transform: scale(1.15); }
.bubble-pop-enter-active[data-v-2c99d78d] { animation: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0s 1 normal none running bubble-in-2c99d78d; }
.bubble-pop-leave-active[data-v-2c99d78d] { animation: 0.15s ease-in 0s 1 normal forwards running bubble-out-2c99d78d; }
@keyframes bubble-in-2c99d78d { 
  0% { opacity: 0; transform: translate(-50%) scale(0.5) translateY(10px); }
  100% { opacity: 1; transform: translate(-50%) scale(1) translateY(0px); }
}
@keyframes bubble-out-2c99d78d { 
  0% { opacity: 1; transform: translate(-50%) scale(1); }
}
.preview-wrapper.container-shape-ticket[data-v-2c99d78d] { --ticket-bg: #fff; --mask-ticket: radial-gradient(circle at left center, transparent 24px, black 24.5px), radial-gradient(circle at right center, transparent 24px, black 24.5px); mask-image: ; -webkit-mask-position-x: ; -webkit-mask-position-y: ; mask-size: ; mask-repeat: ; mask-origin: ; mask-clip: ; mask-mode: ; mask-composite: intersect; background: var(--ticket-bg) !important; border-radius: 8px !important; padding: 25px !important; box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 30px !important; }
.preview-wrapper.container-shape-ticket[data-v-2c99d78d]::before { content: ""; z-index: 5; opacity: 0.5; background-image: linear-gradient(rgb(221, 221, 221) 50%, rgba(0, 0, 0, 0) 50%); background-size: 1px 10px; width: 1px; position: absolute; top: 0px; bottom: 0px; left: 60px; }
.floating-title-badge[data-v-2c99d78d] { --ft-align-x: 0%; --ft-hover-y: -56%; --ft-normal-y: -50%; --ft-scale-normal: 1; --ft-scale-hover: 1.02; top: 0px; left: var(--ft-left,16px); transform: translate(var(--ft-align-x), var(--ft-normal-y)) scale(var(--ft-scale-normal)); pointer-events: auto; z-index: 10; white-space: nowrap; box-sizing: border-box; align-items: center; gap: 6px; padding: 6px 12px; font-size: 13px; font-weight: 600; line-height: 1.2; transition: left 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s, background-color 0.3s, color 0.3s, border-color 0.3s; display: inline-flex; position: absolute; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px; }
.preview-item-wrapper:hover .floating-title-badge[data-v-2c99d78d] { transform: translate(var(--ft-align-x), var(--ft-hover-y)) scale(var(--ft-scale-hover)); box-shadow: rgba(0, 0, 0, 0.12) 0px 6px 16px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; }
.floating-title-left[data-v-2c99d78d] { --ft-left: 16px; --ft-align-x: 0%; }
.floating-title-center[data-v-2c99d78d] { --ft-left: 50%; --ft-align-x: -50%; }
.floating-title-right[data-v-2c99d78d] { --ft-left: calc(100% - 16px); --ft-align-x: -100%; }
.floating-title-style-simple[data-v-2c99d78d] { --ft-hover-y: -45%; --ft-scale-hover: 1; padding: 4px 0px; font-weight: 700; box-shadow: none !important; border-top-width: medium !important; border-right-width: medium !important; border-left-width: medium !important; border-top-style: none !important; border-right-style: none !important; border-left-style: none !important; border-top-color: currentcolor !important; border-right-color: currentcolor !important; border-left-color: currentcolor !important; border-image: initial !important; border-bottom: 2px solid var(--g-theme-accent,#007aff) !important; background: 0px 0px !important; border-radius: 0px !important; }
.floating-title-style-tab[data-v-2c99d78d] { --ft-normal-y: -100%; --ft-hover-y: -105%; border-bottom-width: medium !important; border-bottom-style: none !important; border-bottom-color: currentcolor !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; }
.floating-title-icon[data-v-2c99d78d] { font-size: 14px; flex-shrink: 0 !important; justify-content: center !important; align-items: center !important; display: inline-flex !important; }
.floating-title-badge.floating-title-no-border[data-v-2c99d78d] { border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; }
.floating-title-badge.floating-title-no-shadow[data-v-2c99d78d], .preview-item-wrapper:hover .floating-title-badge.floating-title-no-shadow[data-v-2c99d78d] { box-shadow: none !important; }
[data-v-2c99d78d] .has-title-floating .preview-card-title, [data-v-2c99d78d] .has-title-floating .win95-header, [data-v-2c99d78d] .has-title-floating .browser-header, [data-v-2c99d78d] .has-title-floating .todo-title, [data-v-2c99d78d] .has-title-floating .rpg-title, [data-v-2c99d78d] .has-title-floating .store-title, [data-v-2c99d78d] .has-title-floating .qr-title, [data-v-2c99d78d] .has-title-floating .crossword-title, [data-v-2c99d78d] .has-title-floating .ticket-title, [data-v-2c99d78d] .has-title-floating .wechat-header-title { display: none !important; }
.common-style-editor[data-v-08c43961] { flex-direction: column; gap: 12px; display: flex; }
.shadow-toggle-group[data-v-08c43961] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; justify-content: space-around; padding: 4px; }
.layout-value[data-v-08c43961] { color: var(--color-primary); font-size: 0.75rem; font-weight: 700; }
.color-preview-btn[data-v-08c43961] { border: 1px solid var(--border-color); cursor: pointer; border-radius: 6px; flex-shrink: 0; width: 36px; height: 36px; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset; }
.bg-thumb-preview[data-v-08c43961] { border: 2px dashed var(--border-color); cursor: pointer; background: var(--bg-input); border-radius: 6px; justify-content: center; align-items: center; width: 80px; height: 60px; display: flex; overflow: hidden; }
.bg-thumb-preview img[data-v-08c43961] { object-fit: cover; width: 100%; height: 100%; }
.danger-text[data-v-08c43961] { color: rgb(239, 68, 68); }
.btn-small[data-v-08c43961] { padding: 4px 8px; font-size: 0.8rem; }
.dialogue-editor[data-v-fdd4d8de] { flex-direction: column; display: flex; }
select[data-v-fdd4d8de] { color: rgb(255, 255, 255) !important; border: 1px solid var(--border-input,#ffffff26) !important; background-color: rgb(30, 32, 38) !important; }
option[data-v-fdd4d8de] { color: rgb(255, 255, 255) !important; background-color: rgb(30, 32, 38) !important; }
.hint-box[data-v-fdd4d8de] { color: var(--text-secondary); background: var(--bg-input); border-radius: 6px; margin-bottom: 15px; padding: 8px; font-size: 0.75rem; }
.editor-section[data-v-fdd4d8de] { border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 20px; padding: 15px; }
.editor-section legend[data-v-fdd4d8de] { color: var(--text-secondary); padding: 0px 10px; font-size: 0.85rem; font-weight: 600; }
.receipt-editor[data-v-99717e5c] { flex-direction: column; display: flex; }
.selected-sub-tabs[data-v-99717e5c] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-99717e5c] { opacity: 0.6; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; padding: 8px; font-size: 0.85rem; }
.selected-sub-tab-btn.active[data-v-99717e5c] { opacity: 1; border-bottom: 2px solid var(--color-primary); }
.hint[data-v-99717e5c] { color: var(--text-secondary); margin-top: 8px; font-size: 0.75rem; line-height: 1.4; }
.separator[data-v-99717e5c] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px dashed var(--border-color); opacity: 0.5; margin: 15px 0px; }
.color-control-row[data-v-99717e5c] { gap: 10px; width: 100%; display: flex; }
.color-control-group[data-v-99717e5c] { flex-direction: column; flex: 1 1 0%; gap: 5px; display: flex; }
.color-control-group label[data-v-99717e5c] { color: var(--text-secondary); font-size: 0.85rem; }
.qr-code-editor[data-v-da62f423] { flex-direction: column; display: flex; }
.selected-sub-tabs[data-v-da62f423] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-da62f423] { opacity: 0.6; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; padding: 8px; font-size: 0.85rem; }
.selected-sub-tab-btn.active[data-v-da62f423] { opacity: 1; border-bottom: 2px solid var(--color-primary); }
.form-control[data-v-da62f423] { background: var(--bg-input); border: 1px solid var(--border-color); width: 100%; color: var(--text-primary); border-radius: 6px; padding: 8px; font-family: inherit; font-size: 0.9rem; }
.separator[data-v-da62f423] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.color-control-row[data-v-da62f423] { gap: 12px; display: flex; }
.color-control-group[data-v-da62f423] { flex: 1 1 0%; }
.val-display[data-v-da62f423] { float: right; color: var(--color-primary); font-weight: 700; }
.chart-editor[data-v-aa892b0e] { flex-direction: column; display: flex; }
.selected-sub-tabs[data-v-aa892b0e] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-aa892b0e] { opacity: 0.6; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 10px; font-size: 0.85rem; display: flex; }
.selected-sub-tab-btn.active[data-v-aa892b0e] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.chart-editor-row[data-v-aa892b0e] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; align-items: center; gap: 8px; margin-bottom: 6px; padding: 6px; display: flex; }
.drag-handle[data-v-aa892b0e] { cursor: grab; color: var(--text-secondary); opacity: 0.5; align-items: center; display: flex; }
.chart-item-main[data-v-aa892b0e] { flex: 1 1 0%; align-items: center; gap: 6px; min-width: 0px; display: flex; }
.label-input[data-v-aa892b0e] { border: 1px solid var(--border-input); border-radius: 4px; flex: 2 1 0%; min-width: 0px; padding: 4px 6px; font-size: 0.85rem; }
.value-input[data-v-aa892b0e] { border: 1px solid var(--border-input); text-align: center; border-radius: 4px; flex: 1 1 0%; min-width: 0px; padding: 4px 6px; font-size: 0.85rem; }
.delete-btn[data-v-aa892b0e] { cursor: pointer; opacity: 0.4; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 4px; }
.delete-btn[data-v-aa892b0e]:hover { opacity: 1; color: rgb(255, 77, 79); }
.flex-between[data-v-aa892b0e] { justify-content: space-between; align-items: center; display: flex; }
.add-item-btn[data-v-aa892b0e] { margin-top: 5px; }
.btn-block[data-v-aa892b0e] { width: 100%; }
.separator[data-v-aa892b0e] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.text-editor[data-v-953be290] { flex-direction: column; display: flex; }
.rich-text-preview[data-v-953be290] { border: 1px solid var(--border-color); background: var(--bg-input); cursor: pointer; border-radius: 6px; min-height: 80px; max-height: 200px; padding: 10px; transition: border-color 0.2s; overflow-y: auto; }
.rich-text-preview[data-v-953be290]:hover { border-color: var(--color-primary); }
.placeholder[data-v-953be290] { color: var(--text-secondary); text-align: center; margin-top: 20px; font-style: italic; }
.rich-text-preview-box[data-v-9bb12bfc] { border: 1px solid var(--border-color); background: var(--bg-input); cursor: pointer; border-radius: 6px; min-height: 60px; max-height: 150px; padding: 10px; font-size: 0.9rem; overflow-y: auto; }
.rich-text-preview-box[data-v-9bb12bfc]:hover { border-color: var(--color-primary); }
.preview-content[data-v-9bb12bfc] { opacity: 0.8; }
.empty-items-hint[data-v-9bb12bfc] { text-align: center; border: 2px dashed var(--border-color); color: var(--text-secondary); cursor: pointer; opacity: 0.7; border-radius: 8px; padding: 20px; font-size: 0.85rem; }
.empty-items-hint[data-v-9bb12bfc]:hover { border-color: var(--color-primary); color: var(--color-primary); opacity: 1; }
.items-list-container[data-v-9bb12bfc] { flex-direction: column; gap: 8px; display: flex; }
.item-accordion-card[data-v-9bb12bfc] { border: 1px solid var(--border-color); background: var(--bg-section); border-radius: 8px; transition: 0.2s; overflow: hidden; }
.item-accordion-card.expanded[data-v-9bb12bfc] { border-color: var(--color-primary); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
.item-header[data-v-9bb12bfc] { cursor: pointer; user-select: none; align-items: center; padding: 10px 12px; display: flex; }
.item-header[data-v-9bb12bfc]:hover { background: var(--bg-input); }
.drag-handle[data-v-9bb12bfc] { cursor: grab; color: var(--text-secondary); opacity: 0.5; align-items: center; margin-right: 8px; display: flex; }
.drag-handle[data-v-9bb12bfc]:active { cursor: grabbing; }
.item-title[data-v-9bb12bfc] { flex: 1 1 0%; align-items: center; min-width: 0px; font-size: 0.9rem; font-weight: 500; display: flex; }
.title-text[data-v-9bb12bfc] { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.item-actions[data-v-9bb12bfc] { align-items: center; gap: 8px; display: flex; }
.action-btn[data-v-9bb12bfc] { cursor: pointer; color: var(--text-secondary); opacity: 0.6; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; align-items: center; padding: 4px; transition: 0.2s; display: flex; }
.action-btn[data-v-9bb12bfc]:hover { color: rgb(255, 69, 58); opacity: 1; background: rgba(255, 69, 58, 0.1); }
.delete-btn[data-v-9bb12bfc] { color: rgb(255, 69, 58); opacity: 0.8; }
.expand-arrow[data-v-9bb12bfc] { font-size: 1.2rem; color: rgb(0, 122, 255) !important; opacity: 1 !important; }
.item-body[data-v-9bb12bfc] { border-top: 1px solid var(--border-color); background: var(--bg-panel); flex-direction: column; gap: 12px; padding: 15px; display: flex; }
.add-item-btn[data-v-9bb12bfc] { color: var(--color-primary); background: 0px 0px; border-style: dashed; font-weight: 700; }
.add-item-btn[data-v-9bb12bfc]:hover { background: rgba(var(--color-primary-rgb,0, 122, 255), .05); border-style: solid; }
.item-header-edit[data-v-9bb12bfc] { flex: 1 1 0%; min-width: 0px; margin-right: 10px; }
.input-group.compact[data-v-9bb12bfc] { background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 6px; align-items: center; height: 32px; display: flex; overflow: hidden; }
.input-group.compact input[data-v-9bb12bfc] { flex: 1 1 0%; font-size: 0.85rem; height: 100% !important; box-shadow: none !important; color: var(--text-primary) !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; padding: 0px 8px !important; }
.select-icon-btn-header[data-v-9bb12bfc] { cursor: pointer; flex-shrink: 0; justify-content: center; align-self: center; align-items: center; width: 28px; height: 28px; margin: 4px; padding: 0px; transition: 0.2s; display: flex; position: relative; border: 1.5px solid var(--g-theme-accent,#007aff) !important; color: var(--g-theme-accent,#007aff) !important; background: rgba(0, 122, 255, 0.08) !important; border-radius: 6px !important; }
.select-icon-btn-header[data-v-9bb12bfc]:hover { border-color: var(--g-theme-accent,#007aff) !important; background: rgba(0, 122, 255, 0.15) !important; }
.select-icon-btn-header[data-v-9bb12bfc]::after { content: "✎"; color: rgb(255, 255, 255); opacity: 0; pointer-events: none; background: rgba(0, 0, 0, 0.65); border-radius: 50%; justify-content: center; align-items: center; width: 16px; height: 16px; font-size: 10px; line-height: 1; transition: opacity 0.2s; display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.select-icon-btn-header[data-v-9bb12bfc]:hover::after { opacity: 1; }
.select-icon-btn-header[data-v-9bb12bfc]:hover .icon-view-wrapper { opacity: 0.35; }
.profile-editor[data-v-9bb12bfc] { flex-direction: column; display: flex; }
.selected-sub-tabs[data-v-9bb12bfc] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-9bb12bfc] { opacity: 0.6; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; padding: 8px; font-size: 0.85rem; }
.selected-sub-tab-btn.active[data-v-9bb12bfc] { opacity: 1; border-bottom: 2px solid var(--color-primary); }
.unified-editor-item[data-v-9bb12bfc] { background: var(--bg-input); border-radius: 6px; align-items: center; gap: 8px; width: 100%; margin-bottom: 6px; padding: 4px 8px; display: flex; }
.unified-content[data-v-9bb12bfc] { flex: 1 1 0%; gap: 8px; display: flex; }
.unified-content input[data-v-9bb12bfc] { background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; }
.thumbnail-wrapper[data-v-9bb12bfc] { border: 2px dashed var(--border-color); cursor: pointer; border-radius: 6px; justify-content: center; align-items: center; width: 60px; height: 60px; margin-bottom: 8px; display: flex; }
.avatar-col[data-v-9bb12bfc] { flex-direction: column; align-items: center; width: 80px; display: flex; }
.banner-thumb[data-v-9bb12bfc] { width: 100%; height: 60px; }
.style-row-box[data-v-9bb12bfc] { background: var(--bg-section); border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 8px; padding: 8px; }
.row-header[data-v-9bb12bfc] { justify-content: space-between; align-items: center; margin-bottom: 5px; display: flex; }
.row-header .label[data-v-9bb12bfc] { font-size: 0.85rem; font-weight: 700; }
.input-group.color-hex[data-v-9bb12bfc] { width: 100%; max-width: 220px; display: flex; }
.input-group.color-hex input[type="text"][data-v-9bb12bfc] { flex: 1 1 0%; min-width: 0px; }
.coord-row[data-v-9bb12bfc] { gap: 8px; display: flex; }
.coord-item[data-v-9bb12bfc] { text-align: center; flex: 1 1 0%; }
.coord-item label[data-v-9bb12bfc] { font-size: 0.7rem; }
.style-divider[data-v-9bb12bfc] { text-align: center; color: var(--text-secondary); border-bottom: 1px dashed var(--border-color); margin: 20px 0px 10px; font-size: 0.75rem; font-weight: 700; line-height: 0.1em; }
.section-label[data-v-9bb12bfc] { color: var(--color-primary); margin-bottom: 8px; font-weight: 700; display: block; }
.banner-section-box[data-v-9bb12bfc] { background: var(--bg-editor); border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 20px; padding: 15px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 8px; }
.thumb-preview[data-v-9bb12bfc] { border: 1px solid var(--border-color); cursor: pointer; background: var(--bg-image-thumb,#f5f5f5); border-radius: 4px; justify-content: center; align-items: center; width: 100%; height: 60px; margin-bottom: 5px; display: flex; }
.thumb-img[data-v-9bb12bfc] { object-fit: cover; width: 100%; height: 100%; }
.banner-footer-row[data-v-9bb12bfc] { border-top: 1px dashed var(--border-color); gap: 10px; margin-top: 10px; padding-top: 10px; display: flex; }
.footer-item[data-v-9bb12bfc] { flex: 1 1 0%; }
.styled-box[data-v-9bb12bfc] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; padding: 8px; }
.flex-row-sb[data-v-9bb12bfc] { justify-content: space-between; align-items: center; display: flex; }
.m-0[data-v-9bb12bfc] { margin: 0px; }
.mb-1[data-v-9bb12bfc] { margin-bottom: 4px; }
.mt-1[data-v-9bb12bfc] { margin-top: 4px; }
.mt-2[data-v-9bb12bfc] { margin-top: 8px; }
.font-bold[data-v-9bb12bfc] { font-weight: 700; }
.small[data-v-9bb12bfc] { font-size: 0.85rem; }
.label-tiny[data-v-9bb12bfc] { text-align: center; color: var(--text-secondary); margin-top: 2px; font-size: 0.7rem; }
.badge-pos-controls[data-v-9bb12bfc] { background: var(--bg-input); border-radius: 6px; padding: 8px; }
.delete-btn-overlay[data-v-9bb12bfc] { color: rgb(255, 255, 255); cursor: pointer; z-index: 5; background: rgb(244, 63, 94); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; width: 20px; height: 20px; font-size: 14px; display: flex; position: absolute; top: -8px; right: -8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; }
.delete-btn-overlay[data-v-9bb12bfc]:hover { background: rgb(225, 29, 72); }
.second-overlay[data-v-9bb12bfc] { cursor: pointer; z-index: 10; pointer-events: auto; justify-content: center; align-items: center; display: flex; position: absolute; top: 0px; right: 0px; overflow: hidden; transform: translate(14px, 14px); }
.card-editor[data-v-b6f69769] { flex-direction: column; display: flex; }
.selected-sub-tabs[data-v-b6f69769] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-b6f69769] { opacity: 0.6; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; padding: 8px; font-size: 0.85rem; }
.selected-sub-tab-btn.active[data-v-b6f69769] { opacity: 1; border-bottom: 2px solid var(--color-primary); }
.rich-text-preview-box[data-v-b6f69769] { border: 1px solid var(--border-color); background: var(--bg-input); cursor: pointer; border-radius: 6px; min-height: 60px; max-height: 150px; padding: 10px; font-size: 0.9rem; overflow: hidden; }
.preview-content[data-v-b6f69769] { opacity: 0.8; }
.hint[data-v-b6f69769] { color: var(--text-secondary); margin-top: 8px; font-size: 0.75rem; line-height: 1.4; }
.music-editor[data-v-4c7a84c8] { flex-direction: column; display: flex; }
.hint-box[data-v-4c7a84c8] { color: var(--text-secondary); background: var(--bg-input); border-radius: 6px; margin-bottom: 15px; padding: 8px; font-size: 0.75rem; }
.danger-text[data-v-4c7a84c8] { color: rgb(239, 68, 68); }
.editor-section[data-v-4c7a84c8] { border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 20px; padding: 15px; }
.editor-section legend[data-v-4c7a84c8] { color: var(--text-secondary); padding: 0px 10px; font-size: 0.85rem; font-weight: 600; }
.premium-modal[data-v-bba399b1] { background: var(--bg-editor,#fff); width: 90%; max-width: 700px; height: 85vh; box-shadow: 0 10px 40px var(--shadow-medium,#0000001a); border: 1px solid var(--border-color,#e0e0e0); border-radius: 16px; flex-direction: column; animation: 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running modalScaleIn-bba399b1; display: flex; overflow: hidden; }
@keyframes modalScaleIn-bba399b1 { 
  0% { opacity: 0; transform: scale(0.96) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.modal-header[data-v-bba399b1] { border-bottom: 1px solid var(--border-color,#e0e0e0); background: var(--bg-editor); flex-shrink: 0; justify-content: space-between; align-items: center; padding: 16px 20px; display: flex; }
.modal-header h3[data-v-bba399b1] { color: var(--text-primary); margin: 0px; font-size: 1.15rem; font-weight: 700; }
.back-btn[data-v-bba399b1] { border: 1px solid var(--border-color); background: var(--bg-input); width: 32px; height: 32px; color: var(--text-primary); cursor: pointer; border-radius: 8px; justify-content: center; align-items: center; transition: 0.2s; display: flex; }
.back-btn[data-v-bba399b1]:hover { background: var(--bg-image-upload-hover); transform: translate(-2px); }
.modal-actions[data-v-bba399b1] { border-top: 1px solid var(--border-color); background: var(--bg-editor); padding: 16px 20px; display: flex; }
.btn-primary[data-v-bba399b1] { background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary), black 20%)); color: rgb(255, 255, 255); box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary), transparent 80%); }
.tab-btn[data-v-bba399b1] { color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-width: medium medium 3px; border-style: none none solid; border-color: currentcolor currentcolor rgba(0, 0, 0, 0); border-image: initial; border-radius: 8px; padding: 8px 16px; font-size: 0.9rem; font-weight: 600; transition: 0.2s; }
.tab-btn[data-v-bba399b1]:hover { background: var(--bg-image-upload-hover); color: var(--text-primary); }
.tab-btn.active[data-v-bba399b1] { background: var(--bg-image-upload-hover); color: var(--color-primary); border-bottom-color: var(--color-primary); }
.steam-list-item[data-v-bba399b1] { border: 1px solid rgba(0, 0, 0, 0); transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; }
.steam-list-item[data-v-bba399b1]:hover { background: var(--bg-image-upload-hover); border-color: color-mix(in srgb, var(--color-primary), transparent 90%); border-radius: 8px; transform: translate(4px); }
@keyframes fadeIn-bba399b1 { 
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.masonry-container[data-v-bba399b1] { column-count: 3; column-gap: 12px; width: 100%; }
.masonry-item[data-v-bba399b1] { break-inside: avoid; cursor: pointer; border: 1px solid var(--border-color); background: var(--bg-editor); border-radius: 10px; margin-bottom: 12px; transition: 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative; overflow: hidden; }
.masonry-item[data-v-bba399b1]:hover { box-shadow: 0 4px 12px var(--shadow-medium); border-color: var(--color-primary); transform: translateY(-2px); }
.masonry-image[data-v-bba399b1] { object-fit: cover; background: var(--bg-input); width: 100%; display: block; }
.masonry-info[data-v-bba399b1] { color: var(--text-secondary); background: var(--bg-section); border-top: 1px solid var(--border-color); white-space: nowrap; text-overflow: ellipsis; opacity: 0.8; padding: 6px 10px; font-size: 0.7rem; overflow: hidden; }
@media (max-width: 600px) {
  .masonry-container[data-v-bba399b1] { column-count: 2; column-gap: 8px; }
}
.lyrics-editor[data-v-6df9b34f] { flex-direction: column; width: 100%; display: flex; }
.lyrics-editor[data-v-6df9b34f] .radio-group.wrap { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)) !important; gap: 6px !important; }
.lyrics-editor[data-v-6df9b34f] .radio-group.wrap label { white-space: nowrap; text-overflow: ellipsis; text-align: center; padding: 5px 4px; font-size: 0.82rem; overflow: hidden; }
.lyrics-editor[data-v-6df9b34f] .form-group { width: 100%; }
.lyrics-editor[data-v-6df9b34f] input[type="range"] { width: 100% !important; }
.smart-color-schemes[data-v-6df9b34f] { background: var(--bg-section,#0000000a); border: 1px solid var(--border-color,#00000014); border-radius: 8px; margin-top: 10px; padding: 10px 12px; }
.scheme-label[data-v-6df9b34f] { color: var(--text-secondary); margin-bottom: 8px; font-size: 0.8rem; font-weight: 500; }
.scheme-list[data-v-6df9b34f] { gap: 8px; display: flex; }
.scheme-card[data-v-6df9b34f] { border: 2px solid var(--border-color,#0000001a); cursor: pointer; border-radius: 6px; flex-direction: column; flex: 1 1 0%; align-items: center; gap: 6px; padding: 8px; transition: border-color 0.2s, transform 0.15s; display: flex; }
.scheme-card[data-v-6df9b34f]:hover { border-color: var(--color-primary,#6366f1); transform: scale(1.03); }
.scheme-preview[data-v-6df9b34f] { align-items: center; gap: 6px; display: flex; }
.scheme-text[data-v-6df9b34f] { font-size: 16px; font-weight: 700; }
.scheme-accent[data-v-6df9b34f] { border-radius: 50%; width: 14px; height: 14px; }
.scheme-colors[data-v-6df9b34f] { gap: 4px; display: flex; }
.scheme-dot[data-v-6df9b34f] { border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 50%; width: 10px; height: 10px; }
.image-editor[data-v-ae07138b] { flex-direction: column; display: flex; }
.button-editor[data-v-56444cf9] { flex-direction: column; gap: 15px; display: flex; }
.multi-items-section[data-v-56444cf9] { flex-direction: column; gap: 10px; display: flex; }
.empty-items-hint[data-v-56444cf9] { text-align: center; border: 2px dashed var(--border-color); color: var(--text-secondary); cursor: pointer; opacity: 0.7; border-radius: 8px; padding: 20px; font-size: 0.85rem; }
.empty-items-hint[data-v-56444cf9]:hover { border-color: var(--color-primary); color: var(--color-primary); opacity: 1; }
.items-list-container[data-v-56444cf9] { flex-direction: column; gap: 8px; display: flex; }
.item-accordion-card[data-v-56444cf9] { border: 1px solid var(--border-color); background: var(--bg-section); border-radius: 8px; transition: 0.2s; overflow: hidden; }
.item-accordion-card.expanded[data-v-56444cf9] { border-color: var(--color-primary); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
.item-header[data-v-56444cf9] { cursor: pointer; user-select: none; align-items: center; padding: 10px 12px; display: flex; }
.item-header[data-v-56444cf9]:hover { background: var(--bg-input); }
.drag-handle[data-v-56444cf9] { cursor: grab; color: var(--text-secondary); opacity: 0.5; align-items: center; margin-right: 8px; display: flex; }
.drag-handle[data-v-56444cf9]:active { cursor: grabbing; }
.item-title[data-v-56444cf9] { flex: 1 1 0%; align-items: center; min-width: 0px; font-size: 0.9rem; font-weight: 500; display: flex; }
.title-text[data-v-56444cf9] { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.item-actions[data-v-56444cf9] { align-items: center; gap: 8px; display: flex; }
.action-btn[data-v-56444cf9] { cursor: pointer; color: var(--text-secondary); opacity: 0.6; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; align-items: center; padding: 4px; transition: 0.2s; display: flex; }
.action-btn[data-v-56444cf9]:hover { color: rgb(255, 69, 58); opacity: 1; background: rgba(255, 69, 58, 0.1); }
.delete-btn[data-v-56444cf9] { color: rgb(255, 69, 58); opacity: 0.8; }
.expand-arrow[data-v-56444cf9] { font-size: 1.2rem; color: rgb(0, 122, 255) !important; opacity: 1 !important; }
.item-body[data-v-56444cf9] { border-top: 1px solid var(--border-color); background: var(--bg-panel); flex-direction: column; gap: 12px; padding: 15px; display: flex; }
.add-item-btn[data-v-56444cf9] { color: var(--color-primary); background: 0px 0px; border-style: dashed; font-weight: 700; }
.add-item-btn[data-v-56444cf9]:hover { background: rgba(var(--color-primary-rgb,0, 122, 255), .05); border-style: solid; }
.sortable-ghost[data-v-56444cf9] { opacity: 0.4; background: var(--color-primary-light,#e0f0ff); }
.item-header-edit[data-v-56444cf9] { flex: 1 1 0%; min-width: 0px; margin-right: 10px; }
.input-group.compact[data-v-56444cf9] { background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 6px; align-items: center; height: 32px; display: flex; overflow: hidden; }
.input-group.compact input[data-v-56444cf9] { flex: 1 1 0%; font-size: 0.85rem; height: 100% !important; box-shadow: none !important; color: var(--text-primary) !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; padding: 0px 8px !important; }
.select-icon-btn-header[data-v-56444cf9] { cursor: pointer; flex-shrink: 0; justify-content: center; align-self: center; align-items: center; width: 28px; height: 28px; margin: 4px; padding: 0px; transition: 0.2s; display: flex; position: relative; border: 1.5px solid var(--g-theme-accent,#007aff) !important; color: var(--g-theme-accent,#007aff) !important; background: rgba(0, 122, 255, 0.08) !important; border-radius: 6px !important; }
.select-icon-btn-header[data-v-56444cf9]:hover { border-color: var(--g-theme-accent,#007aff) !important; background: rgba(0, 122, 255, 0.15) !important; }
.select-icon-btn-header[data-v-56444cf9]::after { content: "✎"; color: rgb(255, 255, 255); opacity: 0; pointer-events: none; background: rgba(0, 0, 0, 0.65); border-radius: 50%; justify-content: center; align-items: center; width: 16px; height: 16px; font-size: 10px; line-height: 1; transition: opacity 0.2s; display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.select-icon-btn-header[data-v-56444cf9]:hover::after { opacity: 1; }
.select-icon-btn-header[data-v-56444cf9]:hover .icon-view-wrapper { opacity: 0.35; }
.input-group.compact.has-textarea[data-v-56444cf9] { align-items: stretch; height: auto; }
.input-group.compact.has-textarea textarea[data-v-56444cf9] { resize: vertical; box-sizing: border-box; flex: 1 1 0%; min-height: 48px; font-family: inherit; font-size: 0.85rem; line-height: 1.4; box-shadow: none !important; color: var(--text-primary) !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; padding: 6px 8px !important; }
.input-group.compact.has-textarea textarea[data-v-56444cf9]:focus { outline: none; }
.input-group.compact.has-textarea .select-icon-btn-header[data-v-56444cf9] { height: 28px; min-height: unset; align-self: center; }
textarea[data-v-56444cf9] { border: 1px solid var(--border-input); background: var(--bg-input); width: 100%; color: var(--text-primary); resize: vertical; box-sizing: border-box; border-radius: 6px; padding: 8px 10px; font-family: inherit; font-size: 0.85rem; }
textarea[data-v-56444cf9]:focus { border-color: var(--color-primary); outline: none; }
.social-editor[data-v-c42df9d0] { flex-direction: column; display: flex; }
.image-card-editor-content[data-v-4ec559d1] { margin-top: 10px; }
.showcase-tags-editor[data-v-4ec559d1] { margin-top: 5px; }
.unified-editor-item[data-v-4ec559d1] { transition: 0.2s; }
.unified-editor-item[data-v-4ec559d1]:hover { border-color: var(--color-primary) !important; }
.hint-text[data-v-4ec559d1] { color: var(--text-secondary); margin-top: 10px; font-size: 0.75rem; line-height: 1.4; }
.card-style[data-v-4ec559d1] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; padding: 15px; }
.inspector-sub-content[data-v-50943cf1] { padding: 15px; }
.section-label[data-v-50943cf1] { align-items: center; gap: 5px; margin-bottom: 12px; font-size: 0.85rem; font-weight: 700; display: flex; }
.q-label[data-v-50943cf1] { color: var(--color-primary); }
.a-label[data-v-50943cf1] { color: var(--text-secondary); }
.edit-mode-card[data-v-50943cf1] { background: var(--bg-editor-panel); border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 15px; padding: 15px; }
.qa-section-q[data-v-50943cf1] { border-left: 4px solid var(--color-primary); }
.qa-section-a[data-v-50943cf1] { border-left: 4px solid var(--text-secondary); }
.qa-input-small[data-v-50943cf1] { opacity: 0.8; font-size: 0.85rem; }
.bold-text[data-v-50943cf1] { font-weight: 700; }
.image-upload-area[data-v-50943cf1] { margin: 10px 0px 15px; }
.image-preview-v2[data-v-50943cf1] { flex-direction: column; gap: 8px; display: flex; }
.thumb-box[data-v-50943cf1] { border: 1px solid var(--border-color); cursor: pointer; background: var(--bg-input); border-radius: 8px; justify-content: center; align-items: center; width: 100%; height: 100px; display: flex; overflow: hidden; }
.thumb-box img[data-v-50943cf1] { object-fit: contain; max-width: 100%; max-height: 100%; }
.image-actions[data-v-50943cf1] { gap: 8px; display: flex; }
.image-actions button[data-v-50943cf1] { flex: 1 1 0%; }
.btn-dashed[data-v-50943cf1] { border: 1px dashed var(--border-color); width: 100%; color: var(--text-secondary); background: 0px 0px; border-radius: 8px; padding: 12px; transition: 0.2s; }
.btn-dashed[data-v-50943cf1]:hover { background: var(--bg-secondary); border-color: var(--color-primary); color: var(--color-primary); }
.hint-text[data-v-50943cf1] { color: var(--text-secondary); margin-top: 10px; font-size: 0.75rem; line-height: 1.4; }
.card-style[data-v-50943cf1] { background: var(--bg-editor-panel); border: 1px solid var(--border-color); border-radius: 12px; padding: 15px; }
.rich-text-preview-box[data-v-50943cf1] { border: 1px solid var(--border-color); background: var(--bg-input); cursor: pointer; border-radius: 6px; min-height: 60px; max-height: 150px; padding: 10px; font-size: 0.9rem; overflow-y: auto; }
.rich-text-preview-box[data-v-50943cf1]:hover { border-color: var(--color-primary); }
.preview-content[data-v-50943cf1] { opacity: 0.8; }
.section-label[data-v-987ae8aa] { color: var(--color-primary); margin-bottom: 12px; font-size: 0.85rem; font-weight: 700; display: block; }
.dark-bg[data-v-987ae8aa] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; padding: 15px; }
.highlight-group[data-v-987ae8aa] { border-left: 4px solid var(--color-primary); }
.form-item[data-v-987ae8aa] { margin-bottom: 16px; }
.form-item label[data-v-987ae8aa] { color: var(--text-secondary); margin-bottom: 6px; font-size: 0.8rem; font-weight: 600; display: block; }
.form-control[data-v-987ae8aa] { border: 1px solid var(--border-color); background: var(--bg-editor); width: 100%; color: var(--text-primary); border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; transition: 0.2s; }
.form-control[data-v-987ae8aa]:focus { border-color: var(--color-primary); outline: none; box-shadow: rgba(0, 122, 255, 0.1) 0px 0px 0px 2px; }
.no-resize[data-v-987ae8aa] { resize: none; }
.dual-row[data-v-987ae8aa] { grid-template-columns: 1fr; gap: 12px; display: grid; }
.segmented-control[data-v-987ae8aa] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 10px; width: 100%; padding: 3px; display: flex; }
.segmented-control label[data-v-987ae8aa] { text-align: center; cursor: pointer; color: var(--text-secondary); user-select: none; border-radius: 8px; flex: 1 1 0%; padding: 8px 4px; font-size: 0.8rem; font-weight: 600; transition: 0.2s; }
.segmented-control input[data-v-987ae8aa] { display: none; }
.segmented-control label.active[data-v-987ae8aa] { background: var(--bg-editor); color: var(--color-primary); box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 6px; }
.segmented-control.small-icons label[data-v-987ae8aa] { justify-content: center; align-items: center; gap: 4px; display: flex; }
.custom-checkbox-wrapper[data-v-987ae8aa] { cursor: pointer; user-select: none; align-items: center; gap: 8px; display: flex; }
.custom-checkbox-wrapper input[data-v-987ae8aa] { display: none; }
.checkbox-box[data-v-987ae8aa] { border: 2px solid var(--border-color); background: var(--bg-editor); border-radius: 4px; width: 18px; height: 18px; transition: 0.2s; position: relative; }
.custom-checkbox-wrapper input:checked + .checkbox-box[data-v-987ae8aa] { background: var(--color-primary); border-color: var(--color-primary); }
.checkbox-box[data-v-987ae8aa]::after { content: ""; border-width: 0px 2px 2px 0px; border-style: none solid solid none; border-color: currentcolor rgb(255, 255, 255) rgb(255, 255, 255) currentcolor; border-image: initial; width: 5px; height: 10px; transition: 0.2s; position: absolute; top: 1px; left: 5px; transform: rotate(45deg) scale(0); }
.custom-checkbox-wrapper input:checked + .checkbox-box[data-v-987ae8aa]::after { transform: rotate(45deg) scale(1); }
.checkbox-label[data-v-987ae8aa] { color: var(--text-secondary); font-size: 0.85rem; }
.input-with-action[data-v-987ae8aa] { gap: 8px; display: flex; }
.icon-btn[data-v-987ae8aa] { background: var(--bg-input); border: 1px solid var(--border-color); cursor: pointer; width: 42px; height: 42px; color: var(--text-secondary); border-radius: 8px; justify-content: center; align-items: center; transition: 0.2s; display: flex; }
.icon-btn[data-v-987ae8aa]:hover { color: var(--color-primary); border-color: var(--color-primary); }
.stepper-input[data-v-987ae8aa] { align-items: center; gap: 8px; display: flex; }
.stepper-btn[data-v-987ae8aa] { border: 1px solid var(--border-color); background: var(--bg-editor); cursor: pointer; width: 32px; height: 32px; color: var(--text-primary); border-radius: 6px; }
.stepper-input input[type="range"][data-v-987ae8aa] { cursor: pointer; flex: 1 1 0%; }
.style-row-box[data-v-987ae8aa] { flex-direction: column; gap: 12px; margin-top: 8px; display: flex; }
.style-row-box.no-bg[data-v-987ae8aa] { background: 0px 0px; padding: 0px; }
.style-field[data-v-987ae8aa] { flex: 1 1 0%; }
.color-input-container[data-v-987ae8aa] { border: 1px solid var(--border-color); background: var(--bg-editor); border-radius: 8px; height: 40px; overflow: hidden; }
.mini-divider[data-v-987ae8aa] { border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: initial; border-top: 1px dashed var(--border-color); margin: 16px 0px; }
.separator[data-v-987ae8aa] { border-right: 0px; border-bottom: 0px; border-left: 0px; border-image: initial; border-top: 1px solid var(--border-color); margin: 20px 0px; }
.select-styled[data-v-987ae8aa] { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-position: right 10px center; background-repeat: no-repeat; background-size: 16px; padding-right: 40px; }
.achievement-editor-container[data-v-ead1097e] { flex-direction: column; display: flex; }
.form-group[data-v-ead1097e] { margin-bottom: 12px; }
.form-group label[data-v-ead1097e] { color: var(--text-secondary); margin-bottom: 4px; font-size: 0.8rem; font-weight: 500; display: block; }
.radio-group[data-v-ead1097e] { flex-direction: column; gap: 8px; display: flex; }
.radio-group.wrap[data-v-ead1097e] { flex-flow: wrap; }
.radio-group label[data-v-ead1097e] { align-items: center; gap: 6px; margin: 0px; font-size: 0.9rem; font-weight: 400; display: flex; }
.checkbox-group[data-v-ead1097e] { align-items: center; gap: 6px; font-weight: 400; display: flex; }
.separator[data-v-ead1097e] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 12px 0px; }
.input-group[data-v-ead1097e] { gap: 0px; display: flex; }
.input-group input[type="text"][data-v-ead1097e], .input-group input[type="color"][data-v-ead1097e] { border: 1px solid var(--border-input); flex: 1 1 0%; }
.achievement-icon-preview-box[data-v-ead1097e] { background: var(--bg-input); border: 1px solid var(--border-input); cursor: pointer; border-radius: 8px; justify-content: center; align-items: center; width: 64px; height: 64px; margin-bottom: 8px; transition: 0.2s; display: flex; position: relative; overflow: hidden; }
.achievement-icon-preview-box[data-v-ead1097e]:hover { border-color: var(--color-primary); box-shadow: rgba(0, 122, 255, 0.1) 0px 0px 0px 3px; }
.preview-content[data-v-ead1097e] { justify-content: center; align-items: center; width: 100%; height: 100%; padding: 8px; display: flex; }
.preview-content[data-v-ead1097e] .iconify, .preview-content[data-v-ead1097e] img, .preview-content[data-v-ead1097e] svg { object-fit: contain; width: 40px; height: 40px; }
.placeholder-icon[data-v-ead1097e] { color: var(--text-placeholder); flex-direction: column; align-items: center; gap: 4px; font-size: 0.7rem; display: flex; }
.placeholder-icon .iconify[data-v-ead1097e] { font-size: 1.2rem; }
.hover-overlay[data-v-ead1097e] { color: rgb(255, 255, 255); opacity: 0; background: rgba(0, 0, 0, 0.4); justify-content: center; align-items: center; width: 100%; height: 100%; transition: opacity 0.2s; display: flex; position: absolute; top: 0px; left: 0px; }
.achievement-icon-preview-box:hover .hover-overlay[data-v-ead1097e] { opacity: 1; }
.achievement-editor-main-row[data-v-ead1097e] { align-items: flex-start; gap: 12px; margin-bottom: 12px; display: flex; }
.icon-column[data-v-ead1097e] { flex-direction: column; flex-shrink: 0; gap: 4px; display: flex; }
.text-fields-column[data-v-ead1097e] { flex-direction: column; flex: 1 1 0%; gap: 8px; display: flex; }
.text-fields-column .form-group[data-v-ead1097e] { margin-bottom: 0px; }
.btn-steam-import[data-v-ead1097e] { color: rgb(27, 40, 56); background: rgb(238, 242, 247); border: 1px solid rgb(209, 217, 230); justify-content: center; align-items: center; gap: 6px; width: 100%; margin-bottom: 15px; font-weight: 600; transition: 0.2s; display: flex; }
.btn-steam-import[data-v-ead1097e]:hover { color: rgb(16, 24, 34); background: rgb(226, 234, 244); border-color: rgb(181, 199, 222); box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 8px; }
.dark-mode .btn-steam-import[data-v-ead1097e] { color: rgb(248, 250, 252); background: rgb(42, 71, 94); border: 1px solid rgba(102, 192, 244, 0.3); }
.dark-mode .btn-steam-import[data-v-ead1097e]:hover { color: rgb(255, 255, 255); background: rgb(56, 91, 124); box-shadow: rgba(42, 71, 94, 0.4) 0px 4px 12px; }
.color-control-row[data-v-ead1097e] { flex-wrap: wrap; gap: 12px; margin-top: 12px; display: flex; }
.color-control-group[data-v-ead1097e] { flex-direction: column; flex: 1 1 0%; min-width: 220px; display: flex; }
.color-control-group label[data-v-ead1097e] { margin-bottom: 6px; }
.color-control-group .input-group[data-v-ead1097e] { align-items: stretch; gap: 0px; display: flex; }
.color-control-group .input-group[data-v-ead1097e] > * { border: 1px solid var(--border-input); height: 38px; }
.color-control-group .btn-small[data-v-ead1097e] { flex-shrink: 0; width: 38px; padding: 0px !important; }
.todo-editor[data-v-24ebee99] { flex-direction: column; display: flex; }
.inspector-sub-content[data-v-24ebee99] { padding: 15px; }
.todo-items-editor[data-v-24ebee99] { flex-direction: column; display: flex; }
.todo-text-input[data-v-24ebee99]:focus { outline: none; }
.separator[data-v-24ebee99] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.color-control-row[data-v-24ebee99] { gap: 10px; display: flex; }
.color-control-group[data-v-24ebee99] { flex-direction: column; flex: 1 1 0%; gap: 5px; display: flex; }
.color-control-group label[data-v-24ebee99] { color: var(--text-secondary); font-size: 0.85rem; }
.hint-box[data-v-24ebee99] { color: var(--text-secondary); background: var(--bg-input); border-radius: 6px; margin-bottom: 15px; padding: 8px; font-size: 0.75rem; }
.editor-section[data-v-24ebee99] { border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 20px; padding: 15px; }
.editor-section legend[data-v-24ebee99] { color: var(--text-secondary); padding: 0px 10px; font-size: 0.85rem; font-weight: 600; }
.calendar-editor[data-v-3c8ef0bb] { flex-direction: column; display: flex; }
.selected-sub-tabs[data-v-3c8ef0bb] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-3c8ef0bb] { opacity: 0.6; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 10px; font-size: 0.85rem; display: flex; }
.selected-sub-tab-btn.active[data-v-3c8ef0bb] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.cal-month-grid-editor[data-v-3c8ef0bb] { grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 10px; display: grid; }
.cal-edit-cell[data-v-3c8ef0bb] { aspect-ratio: 1 / 1; border: 1px solid var(--border-input); cursor: pointer; background: var(--bg-input); border-radius: 4px; justify-content: center; align-items: center; font-size: 0.8rem; transition: 0.2s; display: flex; position: relative; }
.cal-edit-cell[data-v-3c8ef0bb]:hover { border-color: var(--color-primary); }
.cal-edit-cell.active[data-v-3c8ef0bb] { background: var(--bg-image-upload-hover); color: var(--color-primary); border-color: currentcolor; font-weight: 700; }
.cal-edit-cell.selected[data-v-3c8ef0bb] { box-shadow: 0 0 0 3px var(--color-primary); z-index: 10; transform: scale(1.1); border-color: var(--color-primary) !important; }
.note-dot[data-v-3c8ef0bb] { background: rgb(255, 77, 79); border-radius: 50%; width: 4px; height: 4px; position: absolute; bottom: 2px; right: 2px; }
.cal-grid-hint[data-v-3c8ef0bb] { text-align: center; opacity: 0.5; margin-top: 6px; font-size: 0.72rem; }
.cal-edit-day-name[data-v-3c8ef0bb] { opacity: 0.4; text-align: center; padding: 4px 0px; font-size: 0.7rem; font-weight: 700; }
.cal-edit-cell.empty[data-v-3c8ef0bb] { pointer-events: none; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }
.cal-day-detail-panel[data-v-3c8ef0bb] { background: var(--bg-input); border-top-color: ; border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-left: 3px solid var(--color-primary); border-radius: 8px; margin-top: 15px; padding: 12px; }
.cal-day-detail-header[data-v-3c8ef0bb] { justify-content: space-between; align-items: center; font-size: 0.9rem; font-weight: 700; display: flex; }
.cal-note-textarea[data-v-3c8ef0bb] { border: 1px solid var(--border-input); background: var(--bg-secondary); width: 100%; color: var(--text-primary); resize: vertical; border-radius: 6px; min-height: 40px; padding: 8px; font-family: inherit; font-size: 0.85rem; }
.week-editor-row[data-v-3c8ef0bb] { align-items: center; gap: 10px; margin-bottom: 8px; display: flex; }
.week-label[data-v-3c8ef0bb] { width: 40px; color: var(--text-secondary); font-size: 0.85rem; font-weight: 700; }
.week-input[data-v-3c8ef0bb] { flex: 1 1 0%; padding: 6px 10px !important; font-size: 0.9rem !important; }
.separator[data-v-3c8ef0bb] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.ranking-editor[data-v-1e552a1d] { flex-direction: column; display: flex; }
.selected-sub-tabs[data-v-1e552a1d] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-1e552a1d] { opacity: 0.6; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 10px; font-size: 0.85rem; display: flex; }
.selected-sub-tab-btn.active[data-v-1e552a1d] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.rank-editor-row[data-v-1e552a1d] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; align-items: flex-start; gap: 10px; margin-bottom: 8px; padding: 10px; display: flex; position: relative; }
.drag-handle[data-v-1e552a1d] { cursor: grab; color: var(--text-placeholder); padding: 5px 0px; }
.rank-item-main[data-v-1e552a1d] { flex: 1 1 0%; gap: 12px; min-width: 0px; display: flex; }
.rank-thumb-container[data-v-1e552a1d] { flex-direction: column; flex-shrink: 0; gap: 4px; width: 50px; display: flex; }
.rank-thumb[data-v-1e552a1d] { border: 2px dashed var(--border-input); cursor: pointer; background: var(--bg-secondary); border-radius: 4px; justify-content: center; align-items: center; width: 50px; height: 50px; display: flex; overflow: hidden; }
.rank-thumb img[data-v-1e552a1d] { object-fit: cover; width: 100%; height: 100%; }
.thumb-actions[data-v-1e552a1d] { gap: 2px; display: flex; }
.thumb-actions .btn-xs[data-v-1e552a1d] { flex: 1 1 0%; padding: 2px 0px; font-size: 0.65rem; }
.rank-inputs[data-v-1e552a1d] { flex-direction: column; flex: 1 1 0%; gap: 6px; min-width: 0px; display: flex; }
.rank-inputs input[data-v-1e552a1d] { width: 100%; padding: 4px 8px !important; font-size: 0.85rem !important; }
.name-input[data-v-1e552a1d] { font-weight: 700; }
.score-input[data-v-1e552a1d] { color: var(--color-primary); }
.desc-input[data-v-1e552a1d] { opacity: 0.7; font-size: 0.8rem !important; }
.delete-btn[data-v-1e552a1d] { cursor: pointer; opacity: 0.4; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 4px; }
.delete-btn[data-v-1e552a1d]:hover { opacity: 1; color: rgb(255, 77, 79); }
.add-item-btn[data-v-1e552a1d] { margin-top: 5px; }
.separator[data-v-1e552a1d] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.btn-block[data-v-1e552a1d] { width: 100%; }
.checklist-editor[data-v-ecfec2d5] { flex-direction: column; display: flex; }
.inspector-sub-content[data-v-ecfec2d5] { padding: 15px; }
.checklist-items-list[data-v-ecfec2d5] { flex-direction: column; display: flex; }
.checklist-text-input[data-v-ecfec2d5]:focus { outline: none; }
.separator[data-v-ecfec2d5] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.color-control-row[data-v-ecfec2d5] { gap: 10px; display: flex; }
.color-control-group[data-v-ecfec2d5] { flex-direction: column; flex: 1 1 0%; gap: 5px; display: flex; }
.checklist-col-value[data-v-ecfec2d5], .chk-radius-value[data-v-ecfec2d5] { color: var(--color-primary); margin-left: 4px; font-weight: 700; }
.stepper-group[data-v-ecfec2d5] { align-items: center; gap: 4px; display: flex; }
.btn-stepper[data-v-ecfec2d5] { justify-content: center; align-items: center; width: 32px; height: 32px; padding: 0px; display: flex; }
.hint-box[data-v-ecfec2d5] { color: var(--text-secondary); background: var(--bg-input); border-radius: 6px; margin-bottom: 15px; padding: 8px; font-size: 0.75rem; }
.editor-section[data-v-ecfec2d5] { border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 20px; padding: 15px; }
.editor-section legend[data-v-ecfec2d5] { color: var(--text-secondary); padding: 0px 10px; font-size: 0.85rem; font-weight: 600; }
.relationship-editor[data-v-659eac07] { flex-direction: column; display: flex; }
.selected-sub-tabs[data-v-659eac07] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-659eac07] { opacity: 0.6; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 10px; font-size: 0.85rem; display: flex; }
.selected-sub-tab-btn.active[data-v-659eac07] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.rel-node-editor-card[data-v-659eac07] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; flex-direction: column; gap: 8px; padding: 10px; display: flex; }
.rel-badges-section[data-v-659eac07] { background: rgba(0, 0, 0, 0.1); border-radius: 6px; flex-direction: column; gap: 6px; margin: 4px 0px 8px; padding: 8px 6px; display: flex; }
.rel-badge-row[data-v-659eac07] { align-items: center; gap: 8px; display: flex; }
.badge-icon-btn[data-v-659eac07] { background: var(--bg-section); border: 1px solid var(--border-input); cursor: pointer; border-radius: 4px; flex-shrink: 0; justify-content: center; align-items: center; width: 32px; height: 32px; transition: 0.2s; display: flex; }
.badge-icon-btn[data-v-659eac07]:hover { background: var(--bg-hover); border-color: var(--color-primary); }
.badge-icon-btn .iconify[data-v-659eac07] { font-size: 1.2rem; }
.rel-badge-color[data-v-659eac07] { border: 1px solid var(--border-color); cursor: pointer; background: 0px 0px; border-radius: 4px; flex-shrink: 0; width: 28px; height: 28px; padding: 1px; }
.rel-badge-delete[data-v-659eac07] { cursor: pointer; opacity: 0.4; color: inherit; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex-shrink: 0; align-items: center; padding: 2px; font-size: 0.85rem; display: flex; }
.rel-badge-delete[data-v-659eac07]:hover { opacity: 1; color: rgb(255, 77, 79); }
.rel-add-badge-btn[data-v-659eac07] { opacity: 0.65; width: 100%; padding: 4px; font-size: 0.75rem; }
.rel-add-badge-btn[data-v-659eac07]:hover { opacity: 1; }
.separator[data-v-659eac07] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.rel-node-offsets-box[data-v-659eac07] { border-top: 1px dashed var(--border-color); flex-direction: column; gap: 10px; margin-top: 5px; padding: 10px 4px 4px; display: flex; }
.rel-offset-control-item[data-v-659eac07] { flex-direction: column; gap: 4px; display: flex; }
.control-label-row[data-v-659eac07] { align-items: center; gap: 6px; display: flex; }
.control-label-row label[data-v-659eac07] { color: var(--text-secondary); font-size: 0.75rem; font-weight: 700; }
.value-badge[data-v-659eac07] { color: var(--text-placeholder); background: var(--bg-section); border-radius: 4px; padding: 1px 4px; font-family: monospace; font-size: 0.7rem; }
.value-badge.has-val[data-v-659eac07] { color: var(--color-primary); background: var(--color-primary-bg); }
.reset-icon-btn[data-v-659eac07] { cursor: pointer; color: var(--text-placeholder); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; margin-left: auto; padding: 0px 4px; font-size: 0.9rem; transition: 0.2s; }
.reset-icon-btn[data-v-659eac07]:hover { color: var(--color-primary); transform: rotate(-90deg); }
.rel-visual-editor-btn[data-v-659eac07] { background: linear-gradient(135deg, var(--bg-section), var(--bg-input)); color: var(--color-primary); transition: 0.25s; border: 1px dashed var(--color-primary) !important; }
.rel-visual-editor-btn[data-v-659eac07]:hover { background: var(--color-primary); color: rgb(255, 255, 255); transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; border-style: solid !important; }
.relationship-editor select[data-v-659eac07] { color: var(--text-primary,#f1f2f6) !important; }
.relationship-editor select option[data-v-659eac07] { color: var(--text-primary,#f1f2f6) !important; background-color: var(--bg-section,#232326) !important; }
.rel-camps-list input[type="range"][data-v-659eac07] { appearance: none !important; background: var(--border-dashed,#ffffff26) !important; cursor: pointer !important; border-radius: 3px !important; outline: none !important; width: 100% !important; height: 6px !important; margin: 6px 0px !important; }
.rel-camps-list input[type="range"][data-v-659eac07]::-webkit-slider-thumb { appearance: none !important; background: var(--color-primary,#007aff) !important; cursor: pointer !important; border-radius: 50% !important; width: 14px !important; height: 14px !important; transition: 0.15s !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px !important; }
.rel-camps-list input[type="range"][data-v-659eac07]::-webkit-slider-thumb:hover { background: var(--color-primary-hover,#0066d6) !important; transform: scale(1.2) !important; }
.marquee-editor[data-v-05bcb0c6] { flex-direction: column; display: flex; }
.selected-sub-tabs[data-v-05bcb0c6] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-05bcb0c6] { opacity: 0.6; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 10px; font-size: 0.85rem; display: flex; }
.selected-sub-tab-btn.active[data-v-05bcb0c6] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
textarea[data-v-05bcb0c6] { resize: vertical; width: 100%; padding: 8px; font-size: 0.9rem; }
select[data-v-05bcb0c6] { width: 100%; padding: 6px; }
.separator[data-v-05bcb0c6] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.timer-editor[data-v-2a53c2a1] { flex-direction: column; display: flex; }
.selected-sub-tabs[data-v-2a53c2a1] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-2a53c2a1] { opacity: 0.6; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 10px; font-size: 0.85rem; display: flex; }
.selected-sub-tab-btn.active[data-v-2a53c2a1] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.highlight-box[data-v-2a53c2a1] { background: var(--bg-input); border: 1px solid var(--color-primary); border-radius: 8px; padding: 12px; }
.accent-label[data-v-2a53c2a1] { color: var(--color-primary); margin-bottom: 10px; font-weight: 700; display: block; }
.datetime-input[data-v-2a53c2a1] { background-color: var(--bg-card); width: 100%; color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; padding: 8px; font-family: monospace; }
.dark-mode { --lightningcss-light: ; --lightningcss-dark: initial; color-scheme: dark; }
:not(.dark-mode) { --lightningcss-light: initial; --lightningcss-dark: ; color-scheme: light; }
.separator[data-v-2a53c2a1] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.hint-box[data-v-2a53c2a1] { color: var(--text-secondary); background: var(--bg-input); border-radius: 6px; margin-bottom: 15px; padding: 8px; font-size: 0.75rem; }
.editor-section[data-v-2a53c2a1] { border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 20px; padding: 15px; }
.editor-section legend[data-v-2a53c2a1] { color: var(--text-secondary); padding: 0px 10px; font-size: 0.85rem; font-weight: 600; }
.separator[data-v-0c718bf1] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.timeline-editor[data-v-d87a0599] { flex-direction: column; display: flex; }
.selected-sub-tabs[data-v-d87a0599] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-d87a0599] { opacity: 0.6; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 10px; font-size: 0.85rem; display: flex; }
.selected-sub-tab-btn.active[data-v-d87a0599] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.timeline-editor-row[data-v-d87a0599] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; align-items: flex-start; gap: 10px; margin-bottom: 8px; padding: 10px; display: flex; }
.drag-handle[data-v-d87a0599] { cursor: grab; color: var(--text-placeholder); padding: 5px 0px; }
.timeline-item-main[data-v-d87a0599] { flex-direction: column; flex: 1 1 0%; gap: 8px; min-width: 0px; display: flex; }
.row-top[data-v-d87a0599] { align-items: center; gap: 8px; display: flex; }
.time-input[data-v-d87a0599] { flex: 1 1 0%; font-weight: 700; }
textarea[data-v-d87a0599] { resize: vertical; width: 100%; padding: 6px 8px; font-size: 0.85rem; }
.delete-btn[data-v-d87a0599] { cursor: pointer; opacity: 0.4; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 4px; }
.delete-btn[data-v-d87a0599]:hover { opacity: 1; color: rgb(255, 77, 79); }
.add-item-btn[data-v-d87a0599] { margin-top: 5px; }
.add-spacer-btn[data-v-d87a0599] { border-style: dashed !important; border-color: var(--border-dashed) !important; }
.add-spacer-btn[data-v-d87a0599]:hover:not(:disabled) { border-color: var(--color-primary) !important; color: var(--color-primary) !important; }
.separator[data-v-d87a0599] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.btn-block[data-v-d87a0599] { width: 100%; }
.event-advanced-colors[data-v-d87a0599] { background: var(--bg-editor); border: 1px solid var(--border-color); box-sizing: border-box; border-radius: 6px; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; padding: 8px; display: flex; }
.event-advanced-colors-header[data-v-d87a0599] { border-bottom: 1px dashed var(--border-color); align-items: center; gap: 4px; width: 100%; padding-bottom: 6px; display: flex; }
.event-advanced-colors-pickers[data-v-d87a0599] { justify-content: space-between; align-items: center; gap: 4px; width: 100%; display: flex; }
.color-picker-inline[data-v-d87a0599] .color-input-container { background: var(--bg-input) !important; border: 1px solid var(--border-input) !important; border-radius: 4px !important; height: 24px !important; }
.color-picker-inline[data-v-d87a0599] .color-preview-wrapper { border-right-width: medium !important; border-right-style: none !important; border-right-color: currentcolor !important; width: 24px !important; height: 24px !important; }
.color-picker-inline[data-v-d87a0599] .reset-btn { border-left: 1px solid var(--border-color) !important; justify-content: center !important; align-items: center !important; width: 20px !important; height: 24px !important; padding: 0px !important; display: flex !important; }
.color-picker-inline[data-v-d87a0599] .reset-btn svg { width: 12px !important; height: 12px !important; }
.rich-text-preview-box[data-v-d87a0599] { border: 1px solid var(--border-color); background: var(--bg-input); cursor: pointer; box-sizing: border-box; border-radius: 6px; width: 100%; min-height: 40px; max-height: 120px; padding: 8px 10px; font-size: 0.85rem; overflow-y: auto; }
.rich-text-preview-box[data-v-d87a0599]:hover { border-color: var(--color-primary); }
.preview-content[data-v-d87a0599] { opacity: 0.8; }
.grid-editor[data-v-476c83b3] { flex-direction: column; display: flex; }
.selected-sub-tabs[data-v-476c83b3] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-476c83b3] { opacity: 0.6; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 10px; font-size: 0.85rem; display: flex; }
.selected-sub-tab-btn.active[data-v-476c83b3] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.grid-items-list[data-v-476c83b3] { flex-direction: column; gap: 10px; display: flex; }
.grid-editor-row[data-v-476c83b3] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 10px; align-items: flex-start; gap: 10px; padding: 10px; display: flex; }
.grid-item-main[data-v-476c83b3] { flex-direction: column; flex: 1 1 0%; gap: 10px; display: flex; }
.grid-item-image-row[data-v-476c83b3] { gap: 10px; display: flex; }
.grid-thumb[data-v-476c83b3] { background: rgba(0, 0, 0, 0.05); border-radius: 10px; flex-shrink: 0; justify-content: center; align-items: center; width: 64px; height: 64px; display: flex; overflow: hidden; }
.grid-thumb img[data-v-476c83b3] { object-fit: cover; width: 100%; height: 100%; }
.grid-thumb-actions[data-v-476c83b3] { flex-wrap: wrap; flex: 1 1 0%; align-items: center; gap: 6px; display: flex; }
.grid-item-text-row[data-v-476c83b3] { flex-direction: column; gap: 8px; display: flex; }
.drag-handle[data-v-476c83b3] { cursor: grab; opacity: 0.6; padding-top: 4px; }
.delete-btn[data-v-476c83b3] { border: 1px solid var(--border-color); cursor: pointer; opacity: 0.7; background: 0px 0px; border-radius: 8px; justify-content: center; align-items: center; width: 32px; height: 32px; display: flex; }
.delete-btn[data-v-476c83b3]:hover { opacity: 1; }
.separator[data-v-476c83b3] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.collage-editor[data-v-19fa17e4] { flex-direction: column; display: flex; }
.selected-sub-tabs[data-v-19fa17e4] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-19fa17e4] { opacity: 0.6; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 10px; font-size: 0.85rem; display: flex; }
.selected-sub-tab-btn.active[data-v-19fa17e4] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.collage-items-list[data-v-19fa17e4] { flex-direction: column; gap: 10px; display: flex; }
.collage-editor-row[data-v-19fa17e4] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 10px; align-items: flex-start; gap: 10px; padding: 10px; display: flex; }
.collage-item-main[data-v-19fa17e4] { flex-direction: column; flex: 1 1 0%; gap: 10px; display: flex; }
.collage-item-image-row[data-v-19fa17e4] { gap: 10px; display: flex; }
.collage-thumb[data-v-19fa17e4] { background: rgba(0, 0, 0, 0.05); border-radius: 10px; flex-shrink: 0; justify-content: center; align-items: center; width: 64px; height: 64px; display: flex; overflow: hidden; }
.collage-thumb img[data-v-19fa17e4] { object-fit: cover; width: 100%; height: 100%; }
.collage-thumb-actions[data-v-19fa17e4] { flex-wrap: wrap; flex: 1 1 0%; align-items: center; gap: 6px; display: flex; }
.drag-handle[data-v-19fa17e4] { cursor: grab; opacity: 0.6; flex-shrink: 0; padding-top: 4px; }
.delete-btn[data-v-19fa17e4] { border: 1px solid var(--border-color); cursor: pointer; opacity: 0.7; width: 32px; height: 32px; color: var(--text-secondary); background: 0px 0px; border-radius: 8px; flex-shrink: 0; justify-content: center; align-items: center; transition: 0.2s; display: flex; }
.delete-btn[data-v-19fa17e4]:hover { opacity: 1; color: rgb(239, 68, 68); background: rgba(239, 68, 68, 0.08); border-color: rgba(239, 68, 68, 0.2); }
.separator[data-v-19fa17e4] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.unified-editor-item[data-v-f9ca3bdb] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; align-items: center; margin-bottom: 5px; display: flex; }
.unified-drag-handle[data-v-f9ca3bdb] { cursor: default; color: rgb(136, 136, 136); background: rgba(0, 0, 0, 0.03); align-self: stretch; align-items: center; display: flex; }
.delete-btn[data-v-f9ca3bdb] { border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-top-style: none; border-right-style: none; border-bottom-style: none; border-top-color: currentcolor; border-right-color: currentcolor; border-bottom-color: currentcolor; border-image: initial; border-left: 1px solid var(--border-color); cursor: pointer; color: rgb(136, 136, 136); background: 0px 0px; align-self: stretch; padding: 0px 8px; }
.delete-btn[data-v-f9ca3bdb]:hover { color: rgb(255, 77, 79); }
.rpg-editor[data-v-f9ca3bdb] { color: var(--text-main); flex-direction: column; display: flex; }
.rpg-editor input[type="text"][data-v-f9ca3bdb] { color: var(--text-main); }
.selected-sub-tabs[data-v-f9ca3bdb] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-f9ca3bdb] { opacity: 0.6; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 10px; font-size: 0.85rem; display: flex; }
.selected-sub-tab-btn.active[data-v-f9ca3bdb] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.stats-label[data-v-f9ca3bdb] { color: var(--text-secondary); margin-bottom: 10px; font-size: 0.85rem; font-weight: 700; display: block; }
.stat-item[data-v-f9ca3bdb] { margin-bottom: 8px; }
.unified-drag-handle[data-v-f9ca3bdb] { justify-content: center; align-items: center; width: 28px; font-size: 0.75rem; font-weight: 700; display: flex; }
.unified-content[data-v-f9ca3bdb] { flex-direction: column; flex: 1 1 0%; gap: 4px; padding: 8px 12px; display: flex; }
.stat-header[data-v-f9ca3bdb] { justify-content: space-between; align-items: center; display: flex; }
.stat-name-input[data-v-f9ca3bdb] { width: 100px; color: var(--text-main); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; font-size: 0.85rem; font-weight: 700; }
.rpg-val-display[data-v-f9ca3bdb] { color: var(--color-primary); font-family: monospace; font-size: 0.85rem; font-weight: 700; }
.compare-val[data-v-f9ca3bdb] { color: var(--text-secondary); margin-left: 4px; font-size: 0.75rem; font-weight: 400; }
.dual-range-container[data-v-f9ca3bdb] { flex-direction: column; gap: 2px; display: flex; }
.stat-range[data-v-f9ca3bdb] { width: 100%; height: 6px; margin: 4px 0px; }
.compare-range[data-v-f9ca3bdb] { opacity: 0.5; accent-color: var(--text-secondary); }
.checkbox-group[data-v-f9ca3bdb] { color: var(--text-secondary); user-select: none; align-items: center; gap: 5px; display: flex; }
.flex-between[data-v-f9ca3bdb] { justify-content: space-between; align-items: center; display: flex; }
.options-row[data-v-f9ca3bdb] { gap: 15px; margin-top: -5px; padding: 0px 4px; display: flex; }
.separator[data-v-f9ca3bdb] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); opacity: 0.5; margin: 15px 0px; }
.crossword-editor[data-v-9e2bb551] { flex-direction: column; display: flex; }
.inspector-sub-content[data-v-9e2bb551] { padding: 15px; }
.selected-sub-tabs[data-v-9e2bb551] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-9e2bb551] { opacity: 0.6; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 10px; font-size: 0.85rem; display: flex; }
.selected-sub-tab-btn.active[data-v-9e2bb551] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.list-editor[data-v-9e2bb551] { flex-direction: column; display: flex; }
.hint-text[data-v-9e2bb551] { color: var(--text-secondary); font-size: 0.75rem; line-height: 1.4; }
.separator[data-v-9e2bb551] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); opacity: 0.5; margin: 15px 0px; }
.cw-color-row[data-v-9e2bb551] { flex-wrap: wrap; align-items: flex-start; gap: 15px; min-width: 0px; display: flex; }
.cw-color-group[data-v-9e2bb551] { flex: 1 1 0%; min-width: 0px; }
@media (max-width: 768px) {
  .cw-color-row[data-v-9e2bb551] { flex-direction: column !important; gap: 12px !important; }
  .cw-color-group[data-v-9e2bb551] { flex: 0 0 auto !important; width: 100% !important; }
}
.timeline-pro-editor[data-v-47a4f5af] { flex-direction: column; display: flex; }
.selected-sub-tabs[data-v-47a4f5af] { border-bottom: 1px solid var(--border-color); margin-bottom: 15px; display: flex; }
.selected-sub-tab-btn[data-v-47a4f5af] { opacity: 0.6; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 8px; font-size: 0.85rem; display: flex; }
.selected-sub-tab-btn.active[data-v-47a4f5af] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.btn-block[data-v-47a4f5af] { width: 100%; }
.add-node-btn-header[data-v-47a4f5af] { cursor: pointer; border-radius: 4px !important; align-items: center !important; gap: 3px !important; height: auto !important; padding: 2px 8px !important; display: inline-flex !important; }
.editor-section[data-v-47a4f5af] { margin-bottom: 15px; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; margin-inline: 0px !important; padding: 0px !important; }
.editor-section legend[data-v-47a4f5af] { color: var(--text-primary); cursor: pointer; user-select: none; border-bottom: 1px solid var(--border-color); width: 100%; padding-bottom: 4px; font-size: 0.85rem; font-weight: 700; }
.editor-section.collapsed legend[data-v-47a4f5af] { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.section-content[data-v-47a4f5af] { padding-top: 10px; }
.timeline-editor-row[data-v-47a4f5af] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; align-items: flex-start; gap: 10px; margin-bottom: 8px; padding: 10px; display: flex; }
.timeline-item-main[data-v-47a4f5af] { flex-direction: column; flex: 1 1 0%; gap: 8px; min-width: 0px; display: flex; }
.row-top[data-v-47a4f5af] { align-items: center; gap: 8px; display: flex; }
.time-input[data-v-47a4f5af] { flex: 1 1 0%; padding: 3px 6px; font-size: 0.85rem; font-weight: 700; }
textarea[data-v-47a4f5af] { resize: vertical; width: 100%; padding: 6px 8px; font-size: 0.85rem; }
.delete-btn[data-v-47a4f5af] { cursor: pointer; opacity: 0.4; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; justify-content: center; align-items: center; padding: 4px; display: flex; }
.delete-btn[data-v-47a4f5af]:hover { opacity: 1; color: rgb(255, 77, 79); }
.separator[data-v-47a4f5af] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.event-advanced-colors[data-v-47a4f5af] { background: var(--bg-editor,#00000005); border: 1px solid var(--border-color); box-sizing: border-box; border-radius: 6px; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; padding: 8px; display: flex; }
.event-advanced-colors-header[data-v-47a4f5af] { border-bottom: 1px dashed var(--border-color); align-items: center; gap: 4px; width: 100%; padding-bottom: 6px; display: flex; }
.event-advanced-colors-pickers[data-v-47a4f5af] { justify-content: space-between; align-items: center; gap: 4px; width: 100%; display: flex; }
.color-picker-inline[data-v-47a4f5af] .color-input-container { background: var(--bg-input) !important; border: 1px solid var(--border-input) !important; border-radius: 4px !important; height: 24px !important; }
.color-picker-inline[data-v-47a4f5af] .color-preview-wrapper { border-right-width: medium !important; border-right-style: none !important; border-right-color: currentcolor !important; width: 24px !important; height: 24px !important; }
.color-picker-inline[data-v-47a4f5af] .reset-btn { border-left: 1px solid var(--border-color) !important; justify-content: center !important; align-items: center !important; width: 20px !important; height: 24px !important; padding: 0px !important; display: flex !important; }
.color-picker-inline[data-v-47a4f5af] .reset-btn svg { width: 12px !important; height: 12px !important; }
.reset-icon-btn-inline[data-v-47a4f5af] { cursor: pointer; color: var(--text-placeholder); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; align-items: center; padding: 0px; font-size: 14px; display: flex; }
.reset-icon-btn-inline[data-v-47a4f5af]:hover { color: var(--color-primary); }
.val-badge[data-v-47a4f5af] { background: var(--bg-inset); border-radius: 4px; padding: 1px 6px; font-size: 10px; font-weight: 700; }
.rich-text-preview-box[data-v-47a4f5af] { border: 1px solid var(--border-color); background: var(--bg-input); cursor: pointer; box-sizing: border-box; border-radius: 6px; width: 100%; min-height: 40px; max-height: 120px; padding: 8px 10px; font-size: 0.85rem; overflow-y: auto; }
.rich-text-preview-box[data-v-47a4f5af]:hover { border-color: var(--color-primary); }
.preview-content[data-v-47a4f5af] { opacity: 0.8; }
.editor-item[data-v-7f557cdb] { border: 1px solid var(--border-color); background: var(--bg-panel); border-radius: 8px; overflow: hidden; }
.editor-item-header[data-v-7f557cdb] { background: var(--bg-section); border-bottom: 1px solid var(--border-color); justify-content: space-between; align-items: center; padding: 10px 12px; display: flex; }
.header-main[data-v-7f557cdb] { flex: 1 1 0%; align-items: center; gap: 8px; min-width: 0px; display: flex; }
.module-icon[data-v-7f557cdb] { color: var(--color-primary); flex-shrink: 0; align-items: center; display: flex; }
.module-title[data-v-7f557cdb] { cursor: pointer; white-space: nowrap; text-overflow: ellipsis; font-size: 0.9rem; font-weight: 700; overflow: hidden; }
.module-title[data-v-7f557cdb]:hover { color: var(--color-primary); }
.header-main .badge-beta[data-v-7f557cdb] { color: rgb(0, 0, 0); cursor: pointer; vertical-align: middle; background-color: rgb(241, 196, 15); border-radius: 4px; flex-shrink: 0; margin-left: 4px; padding: 1.5px 4.5px; font-size: 0.62rem; font-weight: 900; line-height: 1; transition: transform 0.15s; display: inline-block; transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 3px; }
.header-main .badge-beta[data-v-7f557cdb]:hover { transform: translateY(-4px) scale(1.1); }
.edit-name-input[data-v-7f557cdb] { background: var(--bg-input); border: 1px solid var(--color-primary); color: var(--text-primary); border-radius: 4px; width: 100%; padding: 2px 6px; font-size: 0.85rem; font-weight: 700; }
.module-id[data-v-7f557cdb] { opacity: 0.4; margin-left: 4px; font-size: 0.7rem; }
.action-btn[data-v-7f557cdb] { cursor: pointer; color: var(--text-secondary); opacity: 0.7; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; align-items: center; padding: 4px; transition: 0.2s; display: flex; }
.action-btn[data-v-7f557cdb]:hover { background: var(--bg-input); color: var(--text-primary); opacity: 1; }
.action-btn.delete[data-v-7f557cdb]:hover { color: var(--color-danger); }
.editor-item-content[data-v-7f557cdb] { min-height: 100px; padding: 15px; position: relative; }
.empty-state[data-v-7f557cdb] { text-align: center; color: var(--text-secondary); padding: 40px 20px; }
.loading-network-hint[data-v-7f557cdb] { text-align: center; color: var(--text-secondary); background: var(--bg-panel); z-index: 10; pointer-events: none; padding: 20px; animation: 0.5s ease-out 0s 1 normal none running fadeIn-7f557cdb; position: absolute; top: 15px; left: 0px; right: 0px; }
.loading-network-hint .spin[data-v-7f557cdb] { margin-bottom: 10px; font-size: 2rem; animation: 1s linear 0s infinite normal none running spin-7f557cdb; }
.loading-network-hint p[data-v-7f557cdb] { margin: 5px 0px; font-size: 0.9rem; }
.loading-network-hint .small[data-v-7f557cdb] { opacity: 0.7; font-size: 0.75rem; }
.loading-network-hint a[data-v-7f557cdb] { color: var(--color-primary); cursor: pointer; text-decoration: underline; }
@keyframes spin-7f557cdb { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes fadeIn-7f557cdb { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.btn-convert-header[data-v-7f557cdb] { background: var(--color-primary,#007bff); color: rgb(255, 255, 255); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; flex-shrink: 0; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 8px; font-size: 0.72rem; font-weight: 700; transition: 0.2s; display: inline-flex; box-shadow: rgba(0, 123, 255, 0.3) 0px 1px 3px; }
.btn-convert-header[data-v-7f557cdb]:hover { background: var(--color-primary-hover,#0056b3); transform: translateY(-1px); box-shadow: rgba(0, 123, 255, 0.4) 0px 2px 5px; }
.btn-convert-header[data-v-7f557cdb]:active { transform: translateY(0px); }
.btn-convert-header .iconify[data-v-7f557cdb] { font-size: 0.85rem; }
.popover-special-actions-row[data-v-7f557cdb] { background: rgba(0, 122, 255, 0.08); border: 1px solid rgba(0, 122, 255, 0.15); border-radius: 8px; justify-content: center; align-items: center; margin-bottom: 15px; padding: 8px; display: flex; }
.btn-convert-popover[data-v-7f557cdb] { background: var(--color-primary); color: rgb(255, 255, 255); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; align-items: center; gap: 6px; padding: 6px 16px; font-size: 0.8rem; font-weight: 700; transition: 0.2s; display: inline-flex; box-shadow: rgba(0, 122, 255, 0.2) 0px 4px 10px; }
.btn-convert-popover[data-v-7f557cdb]:hover { background: var(--color-primary-hover,#0056b3); transform: translateY(-1px); }
.btn-convert-popover .iconify[data-v-7f557cdb] { font-size: 1rem; }
.multi-item-editor[data-v-d387bb06] { border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; background: var(--bg-panel); border-top-width: medium; border-top-style: none; border-top-color: currentcolor; border-radius: 0px 0px 8px 8px; flex-direction: column; height: calc(-180px + 100vh); max-height: calc(-180px + 100vh); display: flex; }
.editor-item-header[data-v-d387bb06] { background: var(--bg-section); border-bottom: 1px solid var(--border-color); justify-content: space-between; align-items: center; padding: 10px 12px; display: flex; }
.header-main[data-v-d387bb06] { flex: 1 1 0%; align-items: center; gap: 8px; display: flex; }
.module-icon[data-v-d387bb06] { color: var(--color-primary); align-items: center; display: flex; }
.module-title[data-v-d387bb06] { font-size: 0.9rem; font-weight: 700; }
.action-btn[data-v-d387bb06] { cursor: pointer; color: var(--text-secondary); opacity: 0.7; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; align-items: center; padding: 4px; transition: 0.2s; display: flex; }
.action-btn[data-v-d387bb06]:hover { background: var(--bg-input); color: var(--text-primary); opacity: 1; }
.action-btn.delete[data-v-d387bb06]:hover { color: var(--color-danger); }
.native-style-tabs[data-v-d387bb06] { border-bottom: 1px solid var(--border-color); background: var(--bg-panel); justify-content: space-between; padding: 0px 10px; display: flex; }
.tabs-scroll-area[data-v-d387bb06] { scrollbar-width: none; flex: 1 1 0%; gap: 5px; display: flex; overflow-x: auto; }
.tabs-scroll-area[data-v-d387bb06]::-webkit-scrollbar { display: none; }
.tab-btn[data-v-d387bb06] { cursor: pointer; color: var(--text-secondary); white-space: nowrap; background: 0px 0px; border-width: medium medium 2px; border-style: none none solid; border-color: currentcolor currentcolor rgba(0, 0, 0, 0); border-image: initial; align-items: center; gap: 6px; padding: 10px 12px; font-size: 0.85rem; display: flex; }
.tab-btn.active[data-v-d387bb06] { color: var(--color-primary); border-bottom-color: var(--color-primary); background: rgba(var(--color-primary-rgb), .05); }
.shared-appearance-tab[data-v-d387bb06] { border-left: 1px solid var(--border-color); margin-left: 5px; padding-left: 15px; font-weight: 700; }
.native-style-tabs.compact-mode .tab-btn[data-v-d387bb06] { gap: 4px; padding: 8px 10px; font-size: 0.82rem; }
.native-style-tabs.compact-mode .shared-appearance-tab[data-v-d387bb06] { padding-left: 12px; }
.native-style-tabs.icon-only-mode .item-unique-tab[data-v-d387bb06] { padding: 8px 12px; }
.native-style-tabs.icon-only-mode .item-unique-tab .iconify[data-v-d387bb06] { margin: 0px; font-size: 1.2rem; }
.native-style-tabs.icon-only-mode .shared-appearance-tab[data-v-d387bb06] { padding: 8px 10px; }
.multi-editor-content[data-v-d387bb06] { flex: 1 1 0%; padding: 15px; overflow-y: auto; }
.native-style-tabs .container-settings-tab[data-v-d387bb06] { border-left: 1px solid var(--border-color); margin-left: auto; }
.container-settings-tab[data-v-d387bb06] { background: rgba(var(--color-primary-rgb), .03); }
.container-section[data-v-d387bb06] { animation: 0.2s ease 0s 1 normal none running fadeIn-d387bb06; }
.container-section .tabs[data-v-d387bb06] { justify-content: center; gap: 10px; display: flex; }
.setting-row[data-v-d387bb06] { gap: 15px; margin-bottom: 20px; display: flex; }
.setting-col[data-v-d387bb06] { flex: 1 1 0%; }
.setting-group[data-v-d387bb06] { margin-bottom: 20px; }
.setting-label[data-v-d387bb06] { color: var(--text-secondary); margin-bottom: 8px; font-size: 0.8rem; display: block; }
.native-input[data-v-d387bb06] { background: var(--bg-input); border: 1px solid var(--border-color); width: 100%; color: var(--text-primary); border-radius: 6px; padding: 8px 12px; font-size: 0.9rem; }
.color-picker-trigger[data-v-d387bb06] { background: var(--bg-input); border: 1px solid var(--border-color); cursor: pointer; border-radius: 6px; align-items: center; gap: 10px; padding: 8px 12px; display: flex; }
.color-preview[data-v-d387bb06] { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 4px; width: 20px; height: 20px; }
.color-value[data-v-d387bb06] { color: var(--text-primary); font-size: 0.85rem; }
.slider-control[data-v-d387bb06] { align-items: center; gap: 10px; display: flex; }
.slider-control input[type="range"][data-v-d387bb06] { flex: 1 1 0%; }
.slider-value[data-v-d387bb06] { color: var(--text-secondary); min-width: 40px; font-size: 0.8rem; }
.common-section[data-v-d387bb06], .individual-section[data-v-d387bb06] { animation: 0.2s ease 0s 1 normal none running fadeIn-d387bb06; }
@keyframes fadeIn-d387bb06 { 
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.batch-edit-hint[data-v-d387bb06] { color: var(--text-secondary); background: var(--bg-hover); border-left: 3px solid var(--color-primary); border-radius: 6px; margin-bottom: 20px; padding: 8px 12px; font-size: 0.75rem; }
.separator[data-v-d387bb06] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px dashed var(--border-color); margin: 15px 0px; }
.color-control-row[data-v-d387bb06] { gap: 15px; display: flex; }
.color-control-group[data-v-d387bb06] { flex: 1 1 0%; }
.segment-control[data-v-d387bb06] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; padding: 2px; display: flex; overflow: hidden; }
.segment-control.full-width[data-v-d387bb06] { width: 100%; }
.segment-btn[data-v-d387bb06] { cursor: pointer; color: var(--text-secondary); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; flex: 1 1 0%; padding: 6px 10px; font-size: 0.8rem; transition: 0.2s; }
.segment-btn.active[data-v-d387bb06] { background: var(--bg-panel); color: var(--color-primary); box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px; }
.segment-btn.tiny[data-v-d387bb06] { padding: 4px; font-size: 0.75rem; }
.segment-control.shrink[data-v-d387bb06] { width: fit-content; }
.container-bg-preview[data-v-d387bb06] { background: var(--bg-input); border: 2px dashed var(--border-color); cursor: pointer; border-radius: 8px; justify-content: center; align-items: center; width: 100%; height: 80px; display: flex; position: relative; overflow: hidden; }
.container-bg-preview img[data-v-d387bb06] { object-fit: cover; width: 100%; height: 100%; }
.upload-placeholder[data-v-d387bb06] { color: var(--text-secondary); flex-direction: column; align-items: center; gap: 4px; font-size: 0.75rem; display: flex; }
.editor-section[data-v-d387bb06] { border: 1px solid var(--border-color); background: rgba(var(--color-primary-rgb), .01); border-radius: 8px; margin-bottom: 15px; padding: 12px; }
.editor-section legend[data-v-d387bb06] { color: var(--text-secondary); padding: 0px 8px; font-size: 0.8rem; font-weight: 700; }
.align-center[data-v-d387bb06] { align-items: center; }
.max-width[data-v-d387bb06] { flex: 1 1 0%; }
.gradient-config-area[data-v-d387bb06] { background: rgba(var(--color-primary-rgb), .02); border-radius: 8px; margin-top: 10px; padding: 10px; }
.item-group-page-selector[data-v-d387bb06] { background: rgba(var(--color-primary-rgb), .03); border-radius: 8px; margin-bottom: 12px; padding: 8px; }
.scrollable-x[data-v-d387bb06] { scrollbar-width: none; overflow-x: auto; }
.scrollable-x[data-v-d387bb06]::-webkit-scrollbar { display: none; }
.separator.tiny[data-v-d387bb06] { margin: 10px 0px 5px; }
.pagination-area[data-v-d387bb06] { border-top: 1px dashed var(--border-color); margin-top: 10px; padding-top: 10px; }
.pagination-button-wrap[data-v-d387bb06] { margin-bottom: 15px; }
.pagination-list[data-v-d387bb06] { flex-wrap: wrap; gap: 8px; display: flex; }
.page-nav-btn[data-v-d387bb06] { border: 1px solid var(--border-color); background: var(--bg-panel); width: 32px; height: 32px; color: var(--text-secondary); cursor: pointer; border-radius: 6px; justify-content: center; align-items: center; font-size: 0.8rem; font-weight: 700; transition: 0.2s; display: flex; }
.page-nav-btn[data-v-d387bb06]:hover { border-color: var(--color-primary); color: var(--color-primary); }
.page-nav-btn.active[data-v-d387bb06] { background: var(--color-primary); color: rgb(255, 255, 255); border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(var(--color-primary-rgb), .3); }
.page-nav-btn.add-btn[data-v-d387bb06] { background: var(--bg-hover); border-style: dashed; }
.page-action-row[data-v-d387bb06] { justify-content: flex-end; display: flex; }
.btn-outline-danger[data-v-d387bb06] { color: rgb(239, 68, 68); background: 0px 0px; border: 1px solid rgba(239, 68, 68, 0.2); }
.btn-outline-danger[data-v-d387bb06]:hover { background: rgba(239, 68, 68, 0.05); border-color: rgb(239, 68, 68); }
.mt-10[data-v-d387bb06] { margin-top: 10px; }
.no-margin[data-v-d387bb06] { margin: 0px; }
.flex-between[data-v-d387bb06] { justify-content: space-between; display: flex; }
.setting-hint[data-v-d387bb06] { color: rgb(153, 153, 153); margin-top: 4px; font-size: 0.7rem; }
.toggle-switch[data-v-d387bb06] { width: 40px; height: 20px; position: relative; }
.toggle-switch input[data-v-d387bb06] { opacity: 0; width: 0px; height: 0px; }
.toggle-switch label[data-v-d387bb06] { cursor: pointer; background-color: rgb(221, 221, 221); border-radius: 20px; transition: 0.4s; position: absolute; inset: 0px; }
.toggle-switch label[data-v-d387bb06]::before { content: ""; background-color: rgb(255, 255, 255); border-radius: 50%; width: 14px; height: 14px; transition: 0.4s; position: absolute; bottom: 3px; left: 3px; }
.toggle-switch input:checked + label[data-v-d387bb06] { background-color: var(--color-primary); }
.toggle-switch input:checked + label[data-v-d387bb06]::before { transform: translate(20px); }
.showing-individual[data-v-d387bb06] .selected-sub-tabs, .showing-individual[data-v-d387bb06] .tabs { display: none !important; }
.showing-individual[data-v-d387bb06] .editor-item { background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; }
.showing-individual[data-v-d387bb06] .editor-item-header { display: none !important; }
.showing-individual[data-v-d387bb06] .editor-item-content { padding: 0px !important; }
.editor-body[data-v-d387bb06] { flex: 1 1 0%; display: flex; position: relative; overflow: hidden; }
.has-sidebar[data-v-d387bb06] { min-height: 0px; }
.editor-sidebar[data-v-d387bb06] { background: var(--bg-section); border-right: 1px solid var(--border-color); z-index: 10; flex-direction: column; flex-shrink: 0; align-items: center; width: 58px; height: 100%; padding: 6px 0px; display: flex; }
.sidebar-scroll-area[data-v-d387bb06] { scrollbar-width: none; flex-direction: column; flex: 1 1 0%; align-items: center; gap: 8px; width: 100%; min-height: 0px; padding: 2px 0px; display: flex; overflow-y: auto; }
.sidebar-scroll-area[data-v-d387bb06]::-webkit-scrollbar { display: none; }
.sidebar-tab-btn[data-v-d387bb06] { border: 1px solid var(--border-color); background: var(--bg-input); cursor: pointer; width: 40px; height: 40px; color: var(--text-secondary); border-radius: 10px; flex-shrink: 0; justify-content: center; align-items: center; transition: 0.2s; display: flex; position: relative; }
.sidebar-tab-btn .iconify[data-v-d387bb06] { font-size: 1.25rem; line-height: 1; display: block; }
.sidebar-tab-btn[data-v-d387bb06]:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--bg-hover); }
.sidebar-tab-btn.active[data-v-d387bb06] { background: var(--color-primary); color: rgb(255, 255, 255); border-color: var(--color-primary); box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), .3); }
.sidebar-footer[data-v-d387bb06] { border-top: 1px solid var(--border-color); background: var(--bg-section); flex-direction: column; flex-shrink: 0; align-items: center; gap: 8px; width: 100%; padding: 8px 0px; display: flex; }
.editor-main-area[data-v-d387bb06] { background: var(--bg-panel); flex-direction: column; flex: 1 1 0%; display: flex; overflow-y: auto; }
.multi-editor-content[data-v-d387bb06] { padding-bottom: 40px; }
.multi-editor-content.with-inset-padding[data-v-d387bb06] { padding-left: 0px; }
.icon-wrapper[data-v-d387bb06], .tab-icon-wrap[data-v-d387bb06] { justify-content: center; align-items: center; display: flex; position: relative; }
.page-badge[data-v-d387bb06] { background: var(--color-primary); color: rgb(255, 255, 255); min-width: 18px; height: 18px; box-shadow: 0 0 0 2px var(--bg-section); z-index: 5; border-radius: 9px; justify-content: center; align-items: center; font-size: 10px; font-weight: 700; display: flex; position: absolute; top: -6px; right: -6px; }
.sidebar-tab-btn.active .page-badge[data-v-d387bb06] { color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); background: rgb(255, 255, 255); }
.page-badge-mini[data-v-d387bb06] { background: var(--color-primary); color: rgb(255, 255, 255); pointer-events: none; border-radius: 4px; padding: 0px 4px; font-size: 8px; position: absolute; top: -4px; right: -4px; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px; }
[data-v-d387bb06] .settings-group .btn-outline-primary, .container-section .btn-outline-primary[data-v-d387bb06] { border-color: var(--color-primary); color: var(--color-primary); }
[data-v-d387bb06] .settings-group .btn-outline-primary:hover, .container-section .btn-outline-primary[data-v-d387bb06]:hover { background: var(--color-primary); color: rgb(255, 255, 255); }
.container-section[data-v-d387bb06] { padding: 0px 16px; }
.multi-item-editor[data-v-d387bb06] label, .multi-item-editor[data-v-d387bb06] .setting-label { color: var(--text-primary); }
.multi-item-editor[data-v-d387bb06] .form-control, .multi-item-editor[data-v-d387bb06] select, .multi-item-editor[data-v-d387bb06] input[type="text"] { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); }
.multi-item-editor[data-v-d387bb06] .segment-control { justify-content: center; gap: 4px; display: flex; }
.multi-item-editor[data-v-d387bb06] .segment-btn { background: var(--bg-input); color: var(--text-secondary); border-color: var(--border-color); }
.multi-item-editor[data-v-d387bb06] .segment-btn.active { background: var(--color-primary); color: rgb(255, 255, 255); border-color: var(--color-primary); }
.multi-item-editor[data-v-d387bb06] .editor-section { border-color: var(--border-color); background: var(--bg-section); margin-bottom: 16px; }
.multi-item-editor[data-v-d387bb06] legend { color: var(--text-secondary); font-weight: 700; }
.multi-item-editor[data-v-d387bb06] .btn-default { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); }
.multi-item-editor[data-v-d387bb06] .btn-default:hover { background: var(--bg-hover); }
.stickers-editor.editor-item[data-v-d2dc60b8] { border: 1px solid var(--border-color); background: var(--bg-panel); border-radius: 8px; margin-top: 5px; overflow: hidden; }
.stickers-editor .editor-item-header[data-v-d2dc60b8] { background: var(--bg-section); border-bottom: 1px solid var(--border-color); justify-content: space-between; align-items: center; padding: 10px 12px; display: flex; }
.stickers-editor .header-main[data-v-d2dc60b8] { flex: 1 1 0%; align-items: center; gap: 8px; min-width: 0px; display: flex; }
.stickers-editor .module-icon[data-v-d2dc60b8] { color: var(--color-primary); flex-shrink: 0; align-items: center; display: flex; }
.stickers-editor .module-title[data-v-d2dc60b8] { cursor: pointer; white-space: nowrap; text-overflow: ellipsis; color: var(--text-primary); font-size: 0.9rem; font-weight: 700; overflow: hidden; }
.stickers-editor .module-title[data-v-d2dc60b8]:hover { color: var(--color-primary); }
.stickers-editor .edit-name-input[data-v-d2dc60b8] { background: var(--bg-input); border: 1px solid var(--color-primary); color: var(--text-primary); border-radius: 4px; width: 100%; padding: 2px 6px; font-size: 0.85rem; font-weight: 700; }
.stickers-editor .action-btn[data-v-d2dc60b8] { cursor: pointer; color: var(--text-secondary); opacity: 0.7; border-radius: 4px; align-items: center; transition: 0.2s; display: flex; box-shadow: none !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; outline: none !important; padding: 4px !important; }
.stickers-editor .action-btn[data-v-d2dc60b8]:hover { color: var(--text-primary); opacity: 1; background: var(--bg-input) !important; }
.stickers-editor .action-btn.delete[data-v-d2dc60b8]:hover { color: var(--color-danger); }
.stickers-editor .editor-item-content[data-v-d2dc60b8] { min-height: 100px; padding: 15px; position: relative; }
.inspector-scroll-container[data-v-d2dc60b8] { background-color: var(--bg-editor); backface-visibility: hidden; flex: 1 1 0%; padding-bottom: 20px; overflow-y: auto; transform: translate(0px, 0px); }
.inspector-footer[data-v-d2dc60b8] { background: var(--bg-secondary); border-top: 1px solid var(--border-color); color: var(--text-secondary); z-index: 10; flex-shrink: 0; justify-content: space-between; align-items: center; padding: 10px 15px; font-size: 0.85rem; display: flex; }
.empty-selection-premium[data-v-d2dc60b8] { text-align: center; color: var(--text-secondary); flex-direction: column; justify-content: center; align-items: center; min-height: 400px; padding: 4rem 1.5rem; display: flex; }
.empty-icon-wrapper[data-v-d2dc60b8] { background: linear-gradient(135deg, var(--color-primary), #60a5fa); color: rgb(255, 255, 255); width: 80px; height: 80px; box-shadow: 0 10px 25px color-mix(in srgb, var(--color-primary), transparent 80%); border-radius: 24px; justify-content: center; align-items: center; margin-bottom: 2rem; font-size: 2.5rem; display: flex; position: relative; }
.empty-icon-pulse[data-v-d2dc60b8] { border: 2px solid var(--color-primary); pointer-events: none; border-radius: 24px; animation: 2s ease-out 0s infinite normal none running icon-pulse-d2dc60b8; position: absolute; inset: 0px; }
@keyframes icon-pulse-d2dc60b8 { 
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}
.empty-selection-premium h3[data-v-d2dc60b8] { color: var(--text-primary); margin: 0px 0px 0.75rem; font-size: 1.25rem; font-weight: 700; }
.empty-selection-premium p[data-v-d2dc60b8] { opacity: 0.7; margin: 0px; font-size: 0.95rem; line-height: 1.6; }
.empty-tips[data-v-d2dc60b8] { flex-direction: column; gap: 12px; width: 100%; margin-top: 3rem; display: flex; }
.tip-item[data-v-d2dc60b8] { background: var(--bg-input); color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 12px; align-items: center; gap: 10px; padding: 10px 15px; font-size: 0.82rem; transition: transform 0.2s; display: flex; }
.tip-item[data-v-d2dc60b8]:hover { background: var(--bg-section); transform: translateY(-2px); }
.tip-item .iconify[data-v-d2dc60b8] { color: var(--color-primary-text); }
.btn-active[data-v-d2dc60b8] { background: var(--bg-image-upload-hover); color: var(--color-primary-text); border-color: var(--color-primary); }
.stickers-editor .setting-item[data-v-d2dc60b8] { margin-bottom: 12px; }
.stickers-editor label[data-v-d2dc60b8] { color: var(--text-secondary); margin-bottom: 5px; font-size: 0.85rem; display: block; }
.stickers-editor input[type="text"][data-v-d2dc60b8], .stickers-editor select[data-v-d2dc60b8] { border: 1px solid var(--border-color); background: var(--bg-input); width: 100%; color: var(--text-primary); border-radius: 6px; padding: 6px 10px; }
.fade-enter-active[data-v-d2dc60b8], .fade-leave-active[data-v-d2dc60b8] { transition: opacity 0.2s; }
.fade-enter-from[data-v-d2dc60b8], .fade-leave-to[data-v-d2dc60b8] { opacity: 0; }
@keyframes fadeIn-d2dc60b8 { 
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.animate-fade-in[data-v-d2dc60b8] { animation: 0.3s ease-out 0s 1 normal none running fadeIn-d2dc60b8; }
.segmented-control .seg-btn[data-v-d2dc60b8] { color: var(--text-secondary); font-weight: 500; transition: 0.2s; }
.segmented-control .seg-btn[data-v-d2dc60b8]:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
.segmented-control .seg-btn.active[data-v-d2dc60b8] { box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px; background: var(--color-primary-text) !important; color: rgb(255, 255, 255) !important; }
.mode-gear-control[data-v-d2dc60b8] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 20px; gap: 2px; padding: 2px; display: flex; }
.mode-gear-control .seg-btn[data-v-d2dc60b8] { cursor: pointer; white-space: nowrap; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 18px; padding: 4px 12px; font-size: 0.75rem; }
.mode-gear-control .seg-btn.active[data-v-d2dc60b8] { box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary), transparent 60%); background: var(--color-primary) !important; color: rgb(255, 255, 255) !important; }
.btn-icon-only[data-v-d2dc60b8] { justify-content: center; align-items: center; padding: 0px; display: flex; }
.btn-icon-only.active[data-v-d2dc60b8] { background: var(--color-primary-text); color: rgb(255, 255, 255); border-color: var(--color-primary); }
.btn-icon-small[data-v-d2dc60b8] { color: rgb(255, 255, 255); cursor: pointer; background: rgba(255, 255, 255, 0.2); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; padding: 6px; transition: background 0.2s; display: flex; }
.btn-icon-small[data-v-d2dc60b8]:hover { background: rgba(255, 255, 255, 0.4); }
.stickers-editor .form-group label[data-v-d2dc60b8] { color: var(--text-primary); margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; }
.editor-section .section-content[data-v-d2dc60b8] { opacity: 1; max-height: 2000px; transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out, margin 0.3s ease-out; overflow: hidden; }
.editor-section.collapsed .section-content[data-v-d2dc60b8] { opacity: 0; pointer-events: none; max-height: 0px; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; margin-top: 0px !important; margin-bottom: 0px !important; padding-top: 0px !important; padding-bottom: 0px !important; display: block !important; }
.editor-section legend[data-v-d2dc60b8] { user-select: none; }
.inspector-tab-content#inspector-tab-content-global .editor-section[data-v-d2dc60b8] { box-shadow: none; background: 0px 0px; border-left-width: medium; border-left-style: none; border-left-color: currentcolor; border-right-width: medium; border-right-style: none; border-right-color: currentcolor; border-radius: 0px; margin-bottom: 20px; }
.inspector-tab-content#inspector-tab-content-global .editor-section .section-content[data-v-d2dc60b8] { background: 0px 0px; padding: 15px 12px; }
.inspector-tab-content#inspector-tab-content-global .editor-section legend[data-v-d2dc60b8] { background: var(--bg-section); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 10px 12px; }
.inspector-tab-content#inspector-tab-content-global .separator[data-v-d2dc60b8] { margin: 15px 12px; }
.magic-palette-btn[data-v-d2dc60b8] { background: var(--magic-btn-bg,linear-gradient(135deg, #007aff 0%, #99ffe6 100%)); box-shadow: 0 8px 20px var(--magic-btn-shadow,#007aff33); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 14px; padding: 14px; font-size: 14px; font-weight: 800; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); color: var(--magic-btn-text,#003a3d) !important; }
.magic-palette-btn[data-v-d2dc60b8]:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: rgba(0, 122, 255, 0.3) 0px 12px 25px; }
.magic-palette-btn[data-v-d2dc60b8]:active { transform: scale(0.98); }
.theme-preset-divider[data-v-d2dc60b8] { border-top: 1px dashed var(--border-color); opacity: 0.6; grid-column: 1 / -1; height: 1px; margin: 5px 0px; }
.inspector-drag-handle-bar[data-v-d2dc60b8] { cursor: ns-resize; background: var(--bg-editor); border-bottom: 1px solid var(--border-color); touch-action: none; z-index: 100; flex-shrink: 0; justify-content: center; align-items: center; width: 100%; height: 32px; display: flex; position: relative; }
.inspector-drag-indicator[data-v-d2dc60b8] { background: var(--border-input); border-radius: 2px; width: 40px; height: 4px; transition: background 0.2s; }
.inspector-drag-handle-bar:active .inspector-drag-indicator[data-v-d2dc60b8] { background: var(--color-primary); }
.advanced-export-panel select[data-v-d2dc60b8], .advanced-export-panel textarea[data-v-d2dc60b8], .advanced-export-panel input[type="text"][data-v-d2dc60b8] { background-color: var(--bg-panel) !important; color: var(--text-primary) !important; border-color: var(--border-color) !important; }
.advanced-export-panel select option[data-v-d2dc60b8] { background-color: var(--bg-panel) !important; color: var(--text-primary) !important; }
html.dark-mode .advanced-export-panel select[data-v-d2dc60b8], html.dark-mode .advanced-export-panel textarea[data-v-d2dc60b8], html.dark-mode .advanced-export-panel input[type="text"][data-v-d2dc60b8] { color: rgb(224, 224, 224) !important; background-color: rgb(26, 28, 34) !important; border-color: rgb(58, 60, 68) !important; }
html.dark-mode .advanced-export-panel select option[data-v-d2dc60b8] { color: rgb(224, 224, 224) !important; background-color: rgb(26, 28, 34) !important; }
.menu-list[data-v-f75ed497] { flex-direction: column; gap: 2px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.menu-list li[data-v-f75ed497] { color: rgb(44, 62, 80); cursor: pointer; border-radius: 10px; align-items: center; gap: 12px; padding: 10px 14px; font-size: 14px; font-weight: 500; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; }
.menu-list li[data-v-f75ed497]:hover:not(.disabled):not(.hint) { color: var(--color-primary); background: rgb(240, 244, 248); transform: translate(2px); }
.menu-list li.disabled[data-v-f75ed497] { opacity: 0.35; cursor: not-allowed; pointer-events: none; }
.menu-list li.hint[data-v-f75ed497] { opacity: 0.5; text-transform: uppercase; letter-spacing: 0.8px; pointer-events: none; padding: 8px 14px 4px; font-size: 11px; font-weight: 700; }
.menu-list li .iconify[data-v-f75ed497] { opacity: 0.8; font-size: 1.3em; }
.menu-list li:hover .iconify[data-v-f75ed497] { opacity: 1; }
.menu-list li.danger[data-v-f75ed497] { color: rgb(255, 77, 79); }
.menu-list li.danger[data-v-f75ed497]:hover { color: rgb(245, 34, 45); background: rgb(255, 241, 240); }
.menu-list li.separator[data-v-f75ed497] { border-bottom: 1px solid rgb(240, 240, 240); margin-bottom: 6px; padding-bottom: 8px; }
.menu-list li.separator-top[data-v-f75ed497] { border-top: 1px solid rgb(240, 240, 240); margin-top: 6px; padding-top: 10px; }
.has-submenu[data-v-f75ed497] { position: relative; }
.has-submenu[data-v-f75ed497]::after { content: "›"; opacity: 0.5; margin-left: auto; font-size: 18px; }
.submenu[data-v-f75ed497] { background: rgb(255, 255, 255); border: 1px solid rgb(240, 240, 240); border-radius: 12px; min-width: 150px; padding: 6px; display: none; position: absolute; top: -4px; left: 100%; box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 30px; }
.submenu.flip-left[data-v-f75ed497] { left: auto; right: 100%; }
.has-submenu:hover > .submenu[data-v-f75ed497] { display: block; }
.submenu li[data-v-f75ed497] { justify-content: space-between; }
.icon-check[data-v-f75ed497] { color: var(--color-primary) !important; font-size: 1rem !important; }
.is-mobile-sheet[data-v-f75ed497] { border-radius: 20px 20px 0px 0px !important; width: 100% !important; padding-bottom: 40px !important; position: fixed !important; top: auto !important; bottom: 0px !important; left: 0px !important; }
.mobile-handle[data-v-f75ed497] { background: rgb(221, 221, 221); border-radius: 3px; width: 40px; height: 5px; margin: 0px auto 15px; }
.scale-fade-enter-active[data-v-f75ed497], .scale-fade-leave-active[data-v-f75ed497] { transition: opacity 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.scale-fade-enter-from[data-v-f75ed497], .scale-fade-leave-to[data-v-f75ed497] { opacity: 0; transform: scale(0.9) translateY(10px); }
.mobile-theme-fab[data-v-697d3805] { top: calc(60px + var(--system-broadcast-height,0px) + var(--global-banners-height,0px)); background: var(--bg-card,#fff); border: 1px solid var(--border-color,#0000001a); width: 44px; height: 44px; box-shadow: 0 4px 15px var(--shadow-medium,#00000026); z-index: 900; color: var(--text-primary,#333); cursor: pointer; border-radius: 50%; justify-content: center; align-items: center; padding: 0px; font-size: 1.4rem; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: none; position: fixed; right: 15px; }
.mobile-theme-fab[data-v-697d3805]:active { transform: scale(0.9); }
:root.dark-mode .mobile-theme-fab[data-v-697d3805], .dark-mode .mobile-theme-fab[data-v-697d3805] { color: gold !important; background: rgba(45, 49, 58, 0.8) !important; border-color: rgba(255, 255, 255, 0.1) !important; }
@media (max-width: 1024px) {
  .mobile-theme-fab[data-v-697d3805] { display: flex; }
}
@supports (padding:env(safe-area-inset-top)) {
  .mobile-theme-fab[data-v-697d3805] { top: calc(60px + env(safe-area-inset-top) + var(--system-broadcast-height,0px) + var(--global-banners-height,0px)); }
}
.mobile-cloud-fab[data-v-ffe93c00] { top: calc(112px + var(--system-broadcast-height,0px) + var(--global-banners-height,0px)); background: var(--bg-card,#fff); border: 1px solid var(--border-color,#0000001a); width: 52px; height: 52px; box-shadow: 0 4px 15px var(--shadow-medium,#00000026); z-index: 900; color: var(--text-primary,#333); cursor: pointer; border-radius: 26px; flex-direction: column; justify-content: center; align-items: center; gap: 1px; padding: 0px; font-size: 1.2rem; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: none; position: fixed; right: 15px; }
.cloud-fab-label[data-v-ffe93c00] { color: var(--text-secondary,#666); letter-spacing: 0.5px; font-size: 9px; line-height: 1; }
.mobile-cloud-fab[data-v-ffe93c00]:active { transform: scale(0.9); }
.cloud-fab-dot[data-v-ffe93c00] { border: 2px solid var(--bg-card,#fff); background: rgb(52, 211, 153); border-radius: 50%; width: 8px; height: 8px; position: absolute; top: 6px; right: 6px; }
.inbox-badge-fab[data-v-ffe93c00] { color: rgb(255, 255, 255); text-align: center; z-index: 10; pointer-events: none; background: rgb(255, 59, 48); border-radius: 8px; min-width: 16px; height: 16px; padding: 0px 4px; font-size: 10px; font-weight: 700; line-height: 16px; position: absolute; top: 2px; right: 2px; }
:root.dark-mode .mobile-cloud-fab[data-v-ffe93c00], .dark-mode .mobile-cloud-fab[data-v-ffe93c00] { background: rgba(45, 49, 58, 0.8) !important; border-color: rgba(255, 255, 255, 0.1) !important; }
@media (max-width: 1024px) {
  .mobile-cloud-fab[data-v-ffe93c00] { display: flex; }
}
@supports (padding:env(safe-area-inset-top)) {
  .mobile-cloud-fab[data-v-ffe93c00] { top: calc(112px + env(safe-area-inset-top) + var(--system-broadcast-height,0px) + var(--global-banners-height,0px)); }
}
.workspace-dock-wrapper[data-v-97c6cf20] { z-index: 1010; flex-direction: column; align-items: center; display: flex; position: absolute; bottom: 20px; left: 50%; transform: translate(-50%); }
.workspace-dock[data-v-97c6cf20] { background: rgba(255, 255, 255, 0.75); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 20px; align-items: center; gap: 6px; height: 64px; padding: 6px 12px; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 30px; }
.dark-mode .workspace-dock[data-v-97c6cf20] { background: rgba(30, 34, 42, 0.75); border-color: rgba(255, 255, 255, 0.08); box-shadow: rgba(0, 0, 0, 0.25) 0px 10px 30px; }
.workspace-dock[data-v-97c6cf20]:hover { transform: scale(1.01); box-shadow: rgba(0, 0, 0, 0.12) 0px 14px 40px; }
.dock-item[data-v-97c6cf20] { width: 44px; height: 50px; color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 10px; flex-direction: column; justify-content: center; align-items: center; gap: 2px; padding: 4px 2px; transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1); display: flex; position: relative; }
.dock-item[data-v-97c6cf20] svg, .dock-item .iconify[data-v-97c6cf20] { color: var(--text-secondary); font-size: 1.25rem; }
.dock-item[data-v-97c6cf20]:hover { color: var(--color-primary); background: rgba(0, 0, 0, 0.05); transform: translateY(-2px); }
.dock-item[data-v-97c6cf20]:hover svg, .dock-item:hover .iconify[data-v-97c6cf20] { color: var(--color-primary); }
.dark-mode .dock-item[data-v-97c6cf20]:hover { background: rgba(255, 255, 255, 0.08); }
.dock-item.active[data-v-97c6cf20] { background: var(--color-primary); box-shadow: rgba(0, 122, 255, 0.2) 0px 4px 10px; color: rgb(255, 255, 255) !important; }
.dock-item.active[data-v-97c6cf20] svg, .dock-item.active .iconify[data-v-97c6cf20] { color: rgb(255, 255, 255) !important; }
.dock-divider[data-v-97c6cf20] { background: var(--border-color); width: 1px; height: 36px; margin: 0px 4px; }
.dock-label[data-v-97c6cf20] { color: inherit; white-space: nowrap; pointer-events: none; opacity: 0.85; margin-top: 1px; font-size: 0.65rem; font-weight: 600; line-height: 1.1; }
.dock-item.active .dock-label[data-v-97c6cf20] { opacity: 1; }
.dock-popover[data-v-97c6cf20] { background: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 16px; width: 310px; max-height: 380px; padding: 14px; transition: 0.35s cubic-bezier(0.16, 1, 0.3, 1); position: absolute; bottom: 76px; left: 50%; overflow-y: auto; transform: translate(-50%); box-shadow: rgba(0, 0, 0, 0.12) 0px 15px 40px; }
.dark-mode .dock-popover[data-v-97c6cf20] { background: rgba(30, 34, 42, 0.85); border-color: rgba(255, 255, 255, 0.08); box-shadow: rgba(0, 0, 0, 0.3) 0px 15px 40px; }
.popover-header[data-v-97c6cf20] { border-bottom: 1px solid var(--border-color); justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 8px; display: flex; }
.popover-header h3[data-v-97c6cf20] { color: var(--text-primary); margin: 0px; font-size: 0.88rem; font-weight: 700; }
.popover-close-btn[data-v-97c6cf20] { color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; width: 20px; height: 20px; font-size: 1rem; display: flex; }
.popover-close-btn[data-v-97c6cf20]:hover { background: var(--border-color); color: var(--text-primary); }
.popover-grid[data-v-97c6cf20] { grid-template-columns: repeat(3, 1fr); gap: 8px; display: grid; }
.popover-btn[data-v-97c6cf20] { background: var(--bg-editor); border: 1px solid var(--border-color); cursor: pointer; height: 64px; color: var(--text-primary); border-radius: 8px; flex-direction: column; justify-content: center; align-items: center; gap: 6px; padding: 4px; transition: 0.2s; display: flex; position: relative; }
.popover-btn[data-v-97c6cf20] svg, .popover-btn .iconify[data-v-97c6cf20] { color: var(--text-secondary); font-size: 1.45rem; }
.popover-btn[data-v-97c6cf20]:hover { border-color: var(--color-primary); background: var(--bg-input); transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 10px; }
.popover-btn[data-v-97c6cf20]:hover svg, .popover-btn:hover .iconify[data-v-97c6cf20] { color: var(--color-primary); }
.popover-btn span[data-v-97c6cf20] { text-align: center; color: var(--text-secondary); font-size: 0.72rem; }
.popover-btn:hover span[data-v-97c6cf20] { color: var(--text-primary); }
.badge-beta[data-v-97c6cf20] { color: rgb(0, 0, 0); background-color: rgb(241, 196, 15); border-radius: 4px; padding: 1px 3px; font-size: 0.55rem; font-weight: 800; position: absolute; top: 2px; right: 2px; transform: scale(0.9); }
.popover-btn.coming-soon[data-v-97c6cf20] { opacity: 0.45; cursor: not-allowed; position: relative; }
.popover-btn.coming-soon[data-v-97c6cf20]:hover { background: var(--surface-hover); }
.badge-coming-soon[data-v-97c6cf20] { background: var(--text-muted); color: var(--surface-sunken); letter-spacing: 0.5px; border-radius: 3px; padding: 1px 4px; font-size: 0.5rem; font-weight: 700; position: absolute; top: 2px; right: 2px; transform: scale(0.85); }
.stickers-grid[data-v-97c6cf20] { grid-template-columns: repeat(2, 1fr); }
.stickers-grid .popover-btn[data-v-97c6cf20] { flex-direction: row; justify-content: flex-start; gap: 10px; height: 52px; padding-left: 12px; }
.stickers-grid .popover-btn[data-v-97c6cf20] svg, .stickers-grid .popover-btn .iconify[data-v-97c6cf20] { font-size: 1.25rem; }
.sticker-lib-btn[data-v-97c6cf20] { grid-column: 1 / -1; background: var(--color-primary-bg) !important; border-color: color-mix(in srgb, var(--color-primary) 30%, transparent) !important; }
.sticker-lib-btn[data-v-97c6cf20] svg, .sticker-lib-btn .iconify[data-v-97c6cf20] { color: var(--color-primary) !important; }
.dock-popover-slide-enter-active[data-v-97c6cf20] { transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.dock-popover-slide-leave-active[data-v-97c6cf20] { transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.dock-popover-slide-enter-from[data-v-97c6cf20] { opacity: 0; transform: translate(-50%, 15px) scale(0.92); }
.dock-popover-slide-leave-to[data-v-97c6cf20] { opacity: 0; transform: translate(-50%, 10px) scale(0.95); }
.selection-dock[data-v-97c6cf20] { gap: 10px !important; }
.selected-item-info[data-v-97c6cf20] { align-items: center; gap: 8px; padding: 0px 4px; display: flex; }
.selected-label-title[data-v-97c6cf20] { color: var(--text-primary); white-space: nowrap; text-overflow: ellipsis; max-width: 110px; font-size: 0.8rem; font-weight: 800; overflow: hidden; }
.dock-item.delete-btn[data-v-97c6cf20]:hover { color: var(--color-danger,#ff443b) !important; background: rgba(255, 68, 58, 0.1) !important; }
.dock-item.delete-btn[data-v-97c6cf20]:hover svg, .dock-item.delete-btn:hover .iconify[data-v-97c6cf20] { color: var(--color-danger,#ff443b) !important; }
.popover-selection-editor[data-v-97c6cf20] { text-align: left; flex-direction: column; gap: 12px; display: flex; }
.popover-selection-editor[data-v-97c6cf20] .editor-item { box-shadow: none !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; }
.popover-selection-editor[data-v-97c6cf20] .editor-item-header { display: none !important; }
.popover-selection-editor[data-v-97c6cf20] .editor-item-content { padding: 0px !important; }
.popover-selection-editor[data-v-97c6cf20] .selected-sub-tabs { display: none !important; }
.popover-selection-editor[data-v-97c6cf20] .inspector-sub-content { padding: 0px !important; }
.popover-selection-editor[data-v-97c6cf20] .edit-mode-card { background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; margin-bottom: 12px !important; padding: 0px !important; }
.popover-selection-editor[data-v-97c6cf20] .form-group { margin-bottom: 14px !important; }
.popover-selection-editor[data-v-97c6cf20] label { color: var(--text-secondary) !important; margin-bottom: 5px !important; font-size: 0.76rem !important; font-weight: 700 !important; display: inline-block !important; }
.popover-selection-editor[data-v-97c6cf20] .section-label { align-items: center !important; gap: 6px !important; margin-bottom: 8px !important; font-size: 0.82rem !important; font-weight: 850 !important; display: flex !important; }
.popover-selection-editor[data-v-97c6cf20] input[type="text"], .popover-selection-editor[data-v-97c6cf20] textarea, .popover-selection-editor[data-v-97c6cf20] select { border: 1px solid var(--border-color) !important; background: var(--bg-input) !important; color: var(--text-primary) !important; box-sizing: border-box !important; border-radius: 8px !important; width: 100% !important; padding: 8px 12px !important; font-size: 0.85rem !important; transition: 0.2s !important; }
.popover-selection-editor[data-v-97c6cf20] input[type="text"]:focus, .popover-selection-editor[data-v-97c6cf20] textarea:focus, .popover-selection-editor[data-v-97c6cf20] select:focus { border-color: var(--color-primary) !important; background: var(--bg-editor) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent) !important; }
.popover-selection-editor[data-v-97c6cf20] .radio-group { background: var(--bg-input) !important; border: 1px solid var(--border-color) !important; box-sizing: border-box !important; border-radius: 8px !important; gap: 4px !important; width: 100% !important; padding: 3px !important; display: flex !important; }
.popover-selection-editor[data-v-97c6cf20] .radio-group label { text-align: center !important; cursor: pointer !important; color: var(--text-secondary) !important; white-space: nowrap !important; text-overflow: ellipsis !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; border-radius: 6px !important; flex: 1 1 0% !important; justify-content: center !important; align-items: center !important; gap: 4px !important; min-width: 0px !important; margin: 0px !important; padding: 6px 4px !important; font-size: 0.78rem !important; font-weight: 700 !important; transition: 0.2s !important; display: flex !important; overflow: hidden !important; }
.popover-selection-editor[data-v-97c6cf20] .radio-group label input[type="radio"] { opacity: 0 !important; pointer-events: none !important; width: 0px !important; height: 0px !important; margin: 0px !important; position: absolute !important; }
.popover-selection-editor[data-v-97c6cf20] .radio-group label:has(input:checked) { background: var(--color-primary) !important; color: rgb(255, 255, 255) !important; box-shadow: rgba(0, 122, 255, 0.2) 0px 2px 6px !important; }
.popover-selection-editor[data-v-97c6cf20] .rich-text-preview-box { border: 1px solid var(--border-color) !important; background: var(--bg-input) !important; border-radius: 8px !important; min-height: 48px !important; padding: 8px 12px !important; transition: 0.2s !important; }
.popover-selection-editor[data-v-97c6cf20] .rich-text-preview-box:hover { border-color: var(--color-primary) !important; background: var(--bg-editor) !important; }
.stickers-editor-popover[data-v-97c6cf20] { flex-direction: column; gap: 10px; display: flex; }
.form-group-dock[data-v-97c6cf20] { flex-direction: column; gap: 6px; width: 100%; display: flex; }
.form-group-dock label[data-v-97c6cf20] { color: var(--text-secondary); font-size: 0.78rem; font-weight: 700; }
.form-row-dock[data-v-97c6cf20] { gap: 10px; width: 100%; display: flex; }
.form-group-dock.half-width[data-v-97c6cf20] { flex: 1 1 0%; min-width: 0px; }
.thumbnail-preview-dock[data-v-97c6cf20] { border: 1px solid var(--border-color); background-position: 50% center; background-repeat: no-repeat; background-size: contain; background-color: var(--bg-input); border-radius: 8px; height: 90px; position: relative; overflow: hidden; }
.thumbnail-actions-dock[data-v-97c6cf20] { background: rgba(0, 0, 0, 0.5); justify-content: center; padding: 4px; display: flex; position: absolute; bottom: 0px; left: 0px; right: 0px; }
.btn-icon-small-dock[data-v-97c6cf20] { color: rgb(255, 255, 255); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; align-items: center; padding: 2px; font-size: 1rem; display: flex; }
.btn-icon-small-dock[data-v-97c6cf20]:hover { color: var(--color-primary); }
.upload-actions-grid[data-v-97c6cf20] { gap: 8px; display: flex; }
.btn-default-dock[data-v-97c6cf20] { background: var(--bg-editor); border: 1px solid var(--border-color); color: var(--text-primary); cursor: pointer; border-radius: 8px; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 8px; font-size: 0.8rem; display: inline-flex; }
.btn-default-dock[data-v-97c6cf20]:hover { background: var(--bg-input); border-color: var(--color-primary); color: var(--color-primary); }
.btn-default-dock.wide-btn[data-v-97c6cf20] { width: 100%; }
.stepper-group-dock[data-v-97c6cf20] { align-items: center; gap: 8px; display: flex; }
.btn-step[data-v-97c6cf20] { background: var(--bg-editor); border: 1px solid var(--border-color); width: 32px; height: 32px; color: var(--text-primary); cursor: pointer; border-radius: 6px; justify-content: center; align-items: center; font-weight: 700; display: flex; }
.btn-step[data-v-97c6cf20]:hover { background: var(--bg-input); }
.range-input-dock[data-v-97c6cf20] { height: 4px; accent-color: var(--color-primary); flex: 1 1 0%; }
.separator-dock[data-v-97c6cf20] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px dashed var(--border-color); margin: 8px 0px; }
.seg-control-dock[data-v-97c6cf20] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; padding: 2px; display: flex; }
.seg-btn-dock[data-v-97c6cf20] { cursor: pointer; color: var(--text-secondary); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; flex: 1 1 0%; padding: 6px; font-size: 0.75rem; transition: 0.2s; }
.seg-btn-dock.active[data-v-97c6cf20] { background: var(--color-primary); color: rgb(255, 255, 255); }
.btn-group-dock[data-v-97c6cf20] { gap: 4px; width: 100%; display: flex; }
.btn-action-icon-dock[data-v-97c6cf20] { background: var(--bg-editor); border: 1px solid var(--border-color); height: 30px; color: var(--text-secondary); cursor: pointer; border-radius: 6px; flex: 1 1 0%; justify-content: center; align-items: center; display: flex; }
.btn-action-icon-dock[data-v-97c6cf20]:hover { color: var(--color-primary); border-color: var(--color-primary); }
.btn-action-icon-dock.active[data-v-97c6cf20] { background: var(--color-primary-bg); color: var(--color-primary); border-color: var(--color-primary); }
.btn-action-icon-dock.active[data-v-97c6cf20] svg, .btn-action-icon-dock.active .iconify[data-v-97c6cf20] { color: var(--color-primary) !important; }
.campaign-banner[data-v-3bbc9c9c] { color: rgb(255, 255, 255); text-align: center; justify-content: center; align-items: center; gap: 16px; padding: 8px 16px; font-size: 14px; font-weight: 500; display: flex; }
.campaign-content[data-v-3bbc9c9c] { align-items: center; gap: 8px; display: flex; }
.campaign-content .emoji[data-v-3bbc9c9c] { font-size: 16px; }
.campaign-content .countdown[data-v-3bbc9c9c], .campaign-content .quota[data-v-3bbc9c9c] { background: rgba(0, 0, 0, 0.2); border-radius: 4px; margin-left: 8px; padding: 2px 6px; font-family: monospace; }
.campaign-btn[data-v-3bbc9c9c] { color: rgb(0, 0, 0); cursor: pointer; background: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 16px; padding: 4px 12px; font-size: 12px; font-weight: 700; transition: transform 0.1s, opacity 0.2s; }
.campaign-btn[data-v-3bbc9c9c]:hover:not(.disabled) { transform: scale(1.05); }
.campaign-btn.disabled[data-v-3bbc9c9c] { opacity: 0.7; cursor: not-allowed; transform: none; }
.close-banner-btn[data-v-3bbc9c9c] { color: rgba(255, 255, 255, 0.7); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; justify-content: center; align-items: center; margin-left: 8px; padding: 4px; transition: 0.2s; display: flex; }
.close-banner-btn[data-v-3bbc9c9c]:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.1); }
.marquee-content[data-v-3bbc9c9c] { padding-left: 100%; animation: 20s linear 0s infinite normal none running banner-marquee-3bbc9c9c; display: inline-block; }
@keyframes banner-marquee-3bbc9c9c { 
  0% { transform: translate(0px); }
  100% { transform: translate(-100%); }
}
.qa-content[data-v-3bbc9c9c] { justify-content: space-between; align-items: center; gap: 15px; width: 100%; max-width: 1200px; display: flex; }
.qa-text[data-v-3bbc9c9c] { align-items: center; gap: 8px; font-size: 0.85rem; display: flex; }
.emoji[data-v-3bbc9c9c] { font-size: 1.2rem; }
.qa-link[data-v-3bbc9c9c] { color: var(--color-primary); white-space: nowrap; background: rgb(255, 255, 255); border-radius: 6px; padding: 5px 12px; font-size: 0.8rem; font-weight: 700; text-decoration: none; }
.close-btn[data-v-3bbc9c9c] { color: rgba(255, 255, 255, 0.7); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; margin-left: 10px; font-size: 1.4rem; line-height: 1; }
#storage-warning-banner a[data-v-3bbc9c9c] { color: rgb(255, 255, 255); font-weight: 700; text-decoration: underline; }
@keyframes slideDown-3bbc9c9c { 
  0% { opacity: 0; transform: translateY(-100%); }
  100% { opacity: 1; transform: translateY(0px); }
}
@media (max-width: 768px) {
  .qa-content[data-v-3bbc9c9c] { flex-direction: column; align-items: flex-start; gap: 8px; }
  .qa-link[data-v-3bbc9c9c] { align-self: flex-end; }
}
.grab-modal-overlay[data-v-4a1ed995] { backdrop-filter: blur(4px); z-index: 100000; background: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; width: 100%; height: 100%; animation: 0.2s ease 0s 1 normal none running grabFadeIn-4a1ed995; display: flex; position: fixed; top: 0px; left: 0px; }
@keyframes grabFadeIn-4a1ed995 { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.grab-modal-content[data-v-4a1ed995] { background: rgb(255, 255, 255); border-radius: 16px; flex-direction: column; width: 90%; max-width: 480px; max-height: 90vh; animation: 0.25s ease 0s 1 normal none running grabSlideIn-4a1ed995; display: flex; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 40px; }
@keyframes grabSlideIn-4a1ed995 { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.grab-modal-header[data-v-4a1ed995] { border-bottom: 1px solid rgb(238, 238, 238); justify-content: space-between; align-items: center; padding: 20px 24px; display: flex; }
.grab-modal-title[data-v-4a1ed995] { color: rgb(51, 51, 51); align-items: center; gap: 8px; margin: 0px; font-size: 18px; font-weight: 600; display: flex; }
.grab-icon[data-v-4a1ed995] { flex-shrink: 0; }
.grab-close-btn[data-v-4a1ed995] { cursor: pointer; color: rgb(102, 102, 102); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; padding: 4px; transition: background 0.2s; display: flex; }
.grab-close-btn[data-v-4a1ed995]:hover { background: rgb(245, 245, 245); }
.grab-modal-body[data-v-4a1ed995] { padding: 24px; overflow-y: auto; }
.grab-loading-state[data-v-4a1ed995], .grab-error-state[data-v-4a1ed995], .grab-success-state[data-v-4a1ed995], .grab-my-codes-state[data-v-4a1ed995] { text-align: center; padding: 40px 0px; }
.grab-spinner[data-v-4a1ed995] { border-width: 3px; border-style: solid; border-color: rgb(0, 122, 255) rgb(238, 238, 238) rgb(238, 238, 238); border-image: initial; border-radius: 50%; width: 32px; height: 32px; margin: 0px auto 16px; animation: 1s linear 0s infinite normal none running grabSpin-4a1ed995; }
.grab-spinner.small[data-v-4a1ed995] { border-width: 2px; width: 16px; height: 16px; margin: 0px auto 8px; }
.grab-spinner-btn[data-v-4a1ed995] { vertical-align: middle; border-width: 2px; border-style: solid; border-color: rgb(255, 255, 255) rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.3); border-image: initial; border-radius: 50%; width: 14px; height: 14px; margin-right: 6px; animation: 0.8s linear 0s infinite normal none running grabSpin-4a1ed995; display: inline-block; }
@keyframes grabSpin-4a1ed995 { 
  100% { transform: rotate(360deg); }
}
.grab-state-icon[data-v-4a1ed995] { margin-bottom: 16px; }
.grab-error-text[data-v-4a1ed995] { color: rgb(239, 68, 68); margin-bottom: 20px; }
.grab-campaign-tabs[data-v-4a1ed995] { flex-wrap: wrap; gap: 8px; margin-bottom: 20px; display: flex; }
.grab-camp-tab[data-v-4a1ed995] { cursor: pointer; background: rgb(249, 249, 249); border: 2px solid rgb(238, 238, 238); border-radius: 10px; flex-direction: column; flex: 1 1 0%; align-items: center; gap: 4px; min-width: 120px; padding: 10px 12px; transition: 0.2s; display: flex; }
.grab-camp-tab.active[data-v-4a1ed995] { background: rgba(0, 122, 255, 0.05); border-color: rgb(0, 122, 255); }
.grab-camp-tab[data-v-4a1ed995]:hover { border-color: rgb(0, 122, 255); }
.grab-camp-tab-name[data-v-4a1ed995] { color: rgb(51, 51, 51); white-space: nowrap; text-overflow: ellipsis; max-width: 100%; font-size: 12px; font-weight: 600; overflow: hidden; }
.grab-camp-tab-status[data-v-4a1ed995] { border-radius: 10px; padding: 2px 8px; font-size: 10px; }
.grab-camp-tab-status.active[data-v-4a1ed995] { color: rgb(22, 163, 74); background: rgb(220, 252, 231); }
.grab-camp-tab-status.upcoming[data-v-4a1ed995] { color: rgb(0, 122, 255); background: rgba(0, 122, 255, 0.1); }
.grab-upcoming-state[data-v-4a1ed995] { text-align: center; padding: 40px 0px; }
.grab-upcoming-state h3[data-v-4a1ed995] { color: rgb(51, 51, 51); margin: 0px 0px 12px; font-size: 18px; }
.grab-upcoming-desc[data-v-4a1ed995] { color: rgb(102, 102, 102); margin-bottom: 24px; }
.grab-countdown-display[data-v-4a1ed995] { color: rgb(0, 122, 255); letter-spacing: 2px; background: rgb(245, 245, 245); border-radius: 12px; margin-bottom: 16px; padding: 16px 24px; font-family: monospace; font-size: 36px; font-weight: 700; }
.grab-upcoming-hint[data-v-4a1ed995] { color: rgb(153, 153, 153); margin-bottom: 24px; font-size: 13px; }
.grab-success-desc[data-v-4a1ed995] { color: rgb(102, 102, 102); margin-bottom: 24px; }
.grab-code-display[data-v-4a1ed995] { letter-spacing: 2px; color: rgb(0, 122, 255); cursor: pointer; background: rgb(245, 245, 245); border-radius: 8px; margin-bottom: 12px; padding: 16px; font-family: monospace; font-size: 24px; font-weight: 700; transition: background 0.2s; }
.grab-code-display[data-v-4a1ed995]:hover { background: rgb(232, 232, 232); }
.grab-auto-fill-tip[data-v-4a1ed995] { color: rgb(16, 185, 129); margin-bottom: 24px; font-size: 12px; }
.grab-campaign-info[data-v-4a1ed995] { text-align: center; margin-bottom: 24px; }
.grab-campaign-info h3[data-v-4a1ed995] { color: rgb(0, 122, 255); margin: 0px 0px 8px; }
.grab-quota-info[data-v-4a1ed995] { color: rgb(102, 102, 102); font-size: 14px; }
.grab-quota-info .highlight[data-v-4a1ed995] { color: rgb(239, 68, 68); font-size: 16px; font-weight: 700; }
.grab-quiz-section[data-v-4a1ed995] { background: rgb(249, 249, 249); border-radius: 12px; margin-bottom: 24px; padding: 16px; }
.grab-quiz-header[data-v-4a1ed995] { justify-content: space-between; align-items: center; margin-bottom: 16px; display: flex; }
.grab-quiz-header h4[data-v-4a1ed995] { margin: 0px; font-size: 14px; }
.grab-retry-info[data-v-4a1ed995] { color: rgb(239, 68, 68); font-size: 12px; }
.grab-question-item[data-v-4a1ed995] { margin-bottom: 20px; }
.grab-question-item[data-v-4a1ed995]:last-child { margin-bottom: 0px; }
.grab-q-title[data-v-4a1ed995] { margin: 0px 0px 12px; font-size: 14px; font-weight: 500; }
.grab-q-options[data-v-4a1ed995] { flex-direction: column; gap: 8px; display: flex; }
.grab-radio-label[data-v-4a1ed995], .grab-checkbox-label[data-v-4a1ed995] { cursor: pointer; align-items: center; gap: 8px; font-size: 14px; display: flex; }
.grab-fill-input[data-v-4a1ed995] { color: rgb(51, 51, 51); box-sizing: border-box; background: rgb(255, 255, 255); border: 1px solid rgb(221, 221, 221); border-radius: 6px; width: 100%; padding: 10px 12px; font-size: 14px; }
.grab-turnstile-wrapper[data-v-4a1ed995] { justify-content: center; min-height: 65px; margin-bottom: 24px; display: flex; }
.grab-btn[data-v-4a1ed995] { cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; width: 100%; padding: 12px; font-size: 16px; font-weight: 600; transition: 0.2s; }
.grab-btn.primary[data-v-4a1ed995] { color: rgb(255, 255, 255); background: rgb(0, 122, 255); }
.grab-btn.primary[data-v-4a1ed995]:hover:not(:disabled) { filter: brightness(1.1); }
.grab-btn.secondary[data-v-4a1ed995] { color: rgb(0, 122, 255); background: 0px 0px; border: 1px solid rgb(0, 122, 255); margin-top: 10px; padding: 8px; font-size: 13px; }
.grab-btn.secondary[data-v-4a1ed995]:hover { background: rgba(0, 122, 255, 0.05); }
.grab-btn[data-v-4a1ed995]:disabled { opacity: 0.5; cursor: not-allowed; }
.grab-my-codes-header[data-v-4a1ed995] { align-items: center; gap: 12px; margin-bottom: 20px; display: flex; }
.grab-my-codes-header h3[data-v-4a1ed995] { color: rgb(51, 51, 51); margin: 0px; font-size: 16px; }
.grab-back-btn[data-v-4a1ed995] { cursor: pointer; color: rgb(102, 102, 102); background: 0px 0px; border: 1px solid rgb(221, 221, 221); border-radius: 6px; align-items: center; gap: 4px; padding: 4px 10px; font-size: 12px; transition: 0.2s; display: flex; }
.grab-back-btn[data-v-4a1ed995]:hover { color: rgb(0, 122, 255); border-color: rgb(0, 122, 255); }
.grab-my-codes-list[data-v-4a1ed995] { flex-direction: column; gap: 8px; display: flex; }
.grab-my-code-card[data-v-4a1ed995] { cursor: pointer; background: rgba(0, 122, 255, 0.05); border: 1px solid rgba(0, 122, 255, 0.15); border-radius: 10px; padding: 12px 16px; transition: 0.2s; }
.grab-my-code-card[data-v-4a1ed995]:hover { background: rgba(0, 122, 255, 0.1); border-color: rgba(0, 122, 255, 0.3); }
.grab-my-code-top[data-v-4a1ed995] { justify-content: space-between; align-items: center; margin-bottom: 4px; display: flex; }
.grab-my-code-value[data-v-4a1ed995] { color: rgb(0, 122, 255); letter-spacing: 1px; font-family: monospace; font-size: 0.9rem; font-weight: 700; }
.grab-my-code-copy[data-v-4a1ed995], .grab-my-code-expire[data-v-4a1ed995] { color: rgb(148, 163, 184); font-size: 0.7rem; }
.grab-no-codes[data-v-4a1ed995] { color: rgb(148, 163, 184); padding: 30px 0px; }
.grab-no-codes p[data-v-4a1ed995] { margin-top: 12px; font-size: 13px; }
html.dark-mode .grab-modal-content { background: rgb(30, 30, 32); border: 1px solid rgb(51, 51, 51); }
html.dark-mode .grab-modal-header { border-bottom-color: rgb(51, 51, 51); }
html.dark-mode .grab-modal-title { color: rgb(248, 250, 252); }
html.dark-mode .grab-close-btn { color: rgb(148, 163, 184); }
html.dark-mode .grab-close-btn:hover { background: rgb(51, 51, 51); }
html.dark-mode .grab-spinner { border-color: rgb(0, 122, 255) rgb(58, 63, 75) rgb(58, 63, 75); }
html.dark-mode .grab-error-text { color: rgb(239, 68, 68); }
html.dark-mode .grab-camp-tab { background: rgb(35, 39, 47); border-color: rgb(58, 63, 75); }
html.dark-mode .grab-camp-tab.active { background: rgba(0, 122, 255, 0.1); border-color: rgb(0, 122, 255); }
html.dark-mode .grab-camp-tab-name { color: rgb(248, 250, 252); }
html.dark-mode .grab-camp-tab-status.active { color: rgb(74, 222, 128); background: rgb(20, 83, 45); }
html.dark-mode .grab-camp-tab-status.upcoming { color: rgb(90, 200, 250); background: rgba(0, 122, 255, 0.15); }
html.dark-mode .grab-upcoming-state h3 { color: rgb(248, 250, 252); }
html.dark-mode .grab-upcoming-desc { color: rgb(148, 163, 184); }
html.dark-mode .grab-countdown-display { color: rgb(0, 122, 255); background: rgb(15, 17, 21); }
html.dark-mode .grab-upcoming-hint { color: rgb(100, 116, 139); }
html.dark-mode .grab-success-desc { color: rgb(148, 163, 184); }
html.dark-mode .grab-code-display { color: rgb(0, 122, 255); background: rgb(15, 17, 21); }
html.dark-mode .grab-campaign-info h3 { color: rgb(0, 122, 255); }
html.dark-mode .grab-quota-info { color: rgb(148, 163, 184); }
html.dark-mode .grab-quiz-section { background: rgb(35, 39, 47); }
html.dark-mode .grab-q-title { color: rgb(248, 250, 252); }
html.dark-mode .grab-radio-label, html.dark-mode .grab-checkbox-label { color: rgb(229, 229, 234); }
html.dark-mode .grab-fill-input { color: rgb(248, 250, 252); background: rgb(26, 28, 34); border-color: rgb(58, 63, 75); }
html.dark-mode .grab-btn.primary { background: rgb(0, 122, 255); }
html.dark-mode .grab-btn.secondary { color: rgb(90, 200, 250); border-color: rgb(90, 200, 250); }
html.dark-mode .grab-quiz-header h4, html.dark-mode .grab-my-codes-header h3 { color: rgb(248, 250, 252); }
html.dark-mode .grab-back-btn { color: rgb(148, 163, 184); border-color: rgb(58, 63, 75); }
html.dark-mode .grab-back-btn:hover { color: rgb(90, 200, 250); border-color: rgb(0, 122, 255); }
html.dark-mode .grab-my-code-card { background: rgba(0, 122, 255, 0.08); border-color: rgba(0, 122, 255, 0.2); }
html.dark-mode .grab-my-code-card:hover { background: rgba(0, 122, 255, 0.15); }
html.dark-mode .grab-my-code-value { color: rgb(90, 200, 250); }
.rel-modal-overlay[data-v-dd401616] { --modal-bg: #fff; --modal-header-bg: #f9fafb; --modal-sidebar-bg: #f3f4f6; --modal-canvas-viewport-bg: #f0f2f5; --modal-canvas-inner-bg: #fff; --modal-border: #00000014; --modal-input-border: #0000001f; --modal-text-primary: #111827; --modal-text-secondary: #4b5563; --modal-text-muted: #9ca3af; --modal-input-bg: #fff; --modal-btn-default-bg: #f3f4f6; --modal-btn-default-hover: #e5e7eb; --modal-btn-default-text: #111827; --modal-shadow: 0 20px 50px #00000014; --modal-grid-dot: #0000000f; --modal-panel-header-bg: #00000008; --modal-card-bg: #00000005; --modal-divider: #0000000d; backdrop-filter: blur(20px); z-index: 15000; width: 100vw; height: 100vh; color: var(--modal-text-primary); background: rgba(255, 255, 255, 0.45); justify-content: center; align-items: center; font-family: Outfit, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif; display: flex; position: fixed; top: 0px; left: 0px; }
html.dark-mode .rel-modal-overlay, .dark-mode .rel-modal-overlay { --modal-bg: #141416; --modal-header-bg: #1c1c1f; --modal-sidebar-bg: #18181b; --modal-canvas-viewport-bg: #0e0e10; --modal-canvas-inner-bg: #121214; --modal-border: #ffffff14; --modal-input-border: #ffffff14; --modal-text-primary: #f1f2f6; --modal-text-secondary: #ffffff8c; --modal-text-muted: #fff6; --modal-input-bg: #1b1b1d; --modal-btn-default-bg: #2a2a2e; --modal-btn-default-hover: #34343a; --modal-btn-default-text: #e3e4e8; --modal-shadow: 0 24px 64px #0000008c; --modal-grid-dot: #ffffff0f; --modal-panel-header-bg: #00000026; --modal-card-bg: #ffffff05; --modal-divider: #ffffff0d; background: rgba(8, 8, 10, 0.45); }
.rel-modal-container[data-v-dd401616] { background: var(--modal-bg); border: 1px solid var(--modal-border); width: 95vw; height: 90vh; box-shadow: var(--modal-shadow); border-radius: 18px; flex-direction: column; animation: 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running modalScaleIn-dd401616; display: flex; overflow: hidden; }
@keyframes modalScaleIn-dd401616 { 
  0% { opacity: 0; transform: scale(0.96) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.rel-modal-header[data-v-dd401616] { background: var(--modal-header-bg); border-bottom: 1px solid var(--modal-border); flex-shrink: 0; justify-content: space-between; align-items: center; height: 64px; padding: 0px 20px; display: flex; }
.header-left[data-v-dd401616] { align-items: center; gap: 12px; display: flex; }
.header-left .logo-icon[data-v-dd401616] { background: linear-gradient(135deg, var(--color-primary,#007aff), #0056b3); color: rgb(255, 255, 255); border-radius: 10px; justify-content: center; align-items: center; width: 38px; height: 38px; font-size: 1.25rem; display: flex; box-shadow: rgba(0, 122, 255, 0.2) 0px 4px 12px; }
.header-left h3[data-v-dd401616] { color: var(--modal-text-primary); letter-spacing: -0.2px; margin: 0px; font-size: 1.05rem; font-weight: 700; }
.header-left p[data-v-dd401616] { color: var(--modal-text-secondary); margin: 2px 0px 0px; font-size: 0.72rem; }
.header-center[data-v-dd401616] { background: var(--modal-panel-header-bg); border: 1px solid var(--modal-border); border-radius: 12px; align-items: center; gap: 8px; padding: 4px 8px; display: flex; }
.tool-group[data-v-dd401616] { align-items: center; gap: 4px; display: flex; }
.divider[data-v-dd401616] { background: var(--modal-border); width: 1px; height: 18px; margin: 0px 4px; }
.tool-btn[data-v-dd401616] { color: var(--modal-text-secondary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; align-items: center; gap: 6px; padding: 6px 12px; font-size: 0.8rem; font-weight: 600; transition: 0.2s; display: flex; }
.tool-btn[data-v-dd401616]:hover { background: var(--modal-panel-header-bg); color: var(--modal-text-primary); }
.tool-btn.active[data-v-dd401616] { background: var(--color-primary,#007aff); color: rgb(255, 255, 255); box-shadow: rgba(0, 122, 255, 0.25) 0px 4px 12px; }
.action-btn[data-v-dd401616] { color: var(--modal-text-secondary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; justify-content: center; align-items: center; width: 28px; height: 28px; font-size: 0.95rem; transition: 0.2s; display: flex; }
.action-btn[data-v-dd401616]:hover { background: var(--modal-panel-header-bg); color: var(--modal-text-primary); }
.action-btn.text-danger[data-v-dd401616] { color: rgb(255, 77, 79); gap: 4px; width: auto; padding: 0px 8px; font-size: 0.75rem; font-weight: 600; }
.action-btn.text-danger[data-v-dd401616]:hover { color: rgb(255, 77, 79); background: rgba(255, 77, 79, 0.1); }
.zoom-badge[data-v-dd401616] { color: var(--modal-text-secondary); text-align: center; width: 36px; font-family: monospace; font-size: 0.72rem; }
.header-right[data-v-dd401616] { align-items: center; display: flex; }
.btn[data-v-dd401616] { cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; align-items: center; gap: 6px; padding: 8px 16px; font-size: 0.82rem; font-weight: 600; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: inline-flex; }
.btn[data-v-dd401616]:active { transform: scale(0.97); }
.btn-primary[data-v-dd401616] { background: var(--color-primary,#007aff); color: rgb(255, 255, 255); box-shadow: rgba(0, 122, 255, 0.25) 0px 4px 12px; }
.btn-primary[data-v-dd401616]:hover { filter: brightness(1.1); box-shadow: rgba(0, 122, 255, 0.35) 0px 6px 16px; }
.btn-default[data-v-dd401616] { background: var(--modal-btn-default-bg); color: var(--modal-btn-default-text); border: 1px solid var(--modal-border); }
.btn-default[data-v-dd401616]:hover { background: var(--modal-btn-default-hover); color: var(--modal-text-primary); }
.btn-danger[data-v-dd401616] { color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(255, 77, 79), rgb(224, 36, 36)); }
.btn-danger[data-v-dd401616]:hover { filter: brightness(1.05); }
.rel-modal-body[data-v-dd401616] { flex: 1 1 0%; display: flex; overflow: hidden; }
.rel-modal-leftbar[data-v-dd401616] { background: var(--modal-sidebar-bg); border-right: 1px solid var(--modal-border); flex-direction: column; flex-shrink: 0; gap: 20px; width: 250px; padding: 16px; display: flex; }
.leftbar-section h4[data-v-dd401616] { color: var(--modal-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin: 0px 0px 10px; font-size: 0.72rem; font-weight: 700; }
.add-btn[data-v-dd401616] { background: var(--modal-input-bg); justify-content: center; width: 100%; padding: 10px; border: 1px dashed var(--modal-input-border) !important; }
.add-btn[data-v-dd401616]:hover { background: rgba(0, 122, 255, 0.06); border-color: var(--color-primary) !important; }
.guide-list[data-v-dd401616] { color: var(--modal-text-secondary); margin: 0px; padding: 0px 0px 0px 14px; font-size: 0.74rem; line-height: 1.6; }
.guide-list li[data-v-dd401616] { margin-bottom: 8px; }
.connect-banner[data-v-dd401616] { color: var(--color-primary); background: rgba(0, 122, 255, 0.1); border: 1px solid rgba(0, 122, 255, 0.25); border-radius: 8px; align-items: center; gap: 8px; margin-top: auto; padding: 10px 12px; font-size: 0.76rem; font-weight: 600; display: flex; }
.animate-pulse[data-v-dd401616] { animation: 2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running pulse-dd401616; }
@keyframes pulse-dd401616 { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.rel-modal-canvas-viewport[data-v-dd401616] { background: var(--modal-canvas-viewport-bg); cursor: grab; flex: 1 1 0%; justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; }
.rel-modal-canvas-viewport.is-panning[data-v-dd401616] { cursor: grabbing; }
.rel-modal-canvas-inner[data-v-dd401616] { transform-origin: 50% center; transition: transform 50ms ease-out; border: 2px dashed var(--modal-border) !important; background: var(--modal-canvas-inner-bg) !important; box-shadow: var(--modal-shadow) !important; border-radius: 12px !important; }
.rel-canvas-grid[data-v-dd401616] { background-image: radial-gradient(var(--modal-grid-dot) 1.2px, transparent 1.2px); pointer-events: none; z-index: 0; background-size: 24px 24px; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
.canvas-svg-element[data-v-dd401616] { z-index: 1; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: visible; }
.canvas-node[data-v-dd401616] { z-index: 2; user-select: none; transition: box-shadow 0.2s, transform 0.2s; position: absolute; }
.canvas-node.is-selected[data-v-dd401616] { z-index: 15 !important; }
.canvas-node.is-selected .rel-avatar[data-v-dd401616] { transform: scale(1.05); border-color: rgb(0, 122, 255) !important; box-shadow: rgba(0, 122, 255, 0.35) 0px 0px 0px 4px, rgba(0, 0, 0, 0.4) 0px 8px 24px !important; }
.canvas-node.is-connecting-src .rel-avatar[data-v-dd401616] { animation: 1.5s ease 0s infinite normal none running linkingPulse-dd401616; border-color: rgb(52, 199, 89) !important; box-shadow: rgba(52, 199, 89, 0.4) 0px 0px 0px 5px, rgba(0, 0, 0, 0.4) 0px 8px 24px !important; }
@keyframes linkingPulse-dd401616 { 
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
.canvas-node.is-dragging[data-v-dd401616] { cursor: grabbing !important; z-index: 100 !important; }
.canvas-node.is-dragging .rel-avatar[data-v-dd401616] { transform: scale(1.1) rotate(2deg); box-shadow: rgba(0, 0, 0, 0.5) 0px 12px 32px !important; }
.canvas-node.is-connect-tool[data-v-dd401616] { cursor: pointer !important; }
.canvas-node.is-connect-tool:hover .rel-avatar[data-v-dd401616] { transform: scale(1.08); border-color: rgb(52, 199, 89) !important; }
.rel-avatar-container[data-v-dd401616] { transition: transform 0.2s; }
.rel-avatar[data-v-dd401616] { border: 3px solid; border-radius: 50%; justify-content: center; align-items: center; transition: transform 0.15s, box-shadow 0.15s; display: flex; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 10px; }
.rel-avatar img[data-v-dd401616] { pointer-events: none; }
.rel-badge[data-v-dd401616] { border-radius: 50%; justify-content: center; align-items: center; display: flex; position: absolute; box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px; }
.rel-name[data-v-dd401616] { pointer-events: none; }
.svg-edge-group[data-v-dd401616] { cursor: pointer; }
.svg-edge-group.is-select-tool .rel-line-hover[data-v-dd401616] { cursor: grab; }
.svg-edge-group.is-select-tool:active .rel-line-hover[data-v-dd401616] { cursor: grabbing; }
.svg-edge-group:hover .rel-line[data-v-dd401616] { filter: drop-shadow(rgba(255, 255, 255, 0.2) 0px 0px 2px); stroke-width: 3.5px !important; }
.svg-edge-group.is-selected .rel-line[data-v-dd401616] { stroke: rgb(0, 122, 255) !important; stroke-width: 3.5px !important; filter: drop-shadow(rgba(0, 122, 255, 0.4) 0px 0px 5px) !important; }
.bubble-editor-popover[data-v-dd401616] { background: var(--modal-header-bg); border: 1px solid var(--modal-border); z-index: 1000; border-radius: 10px; width: 220px; padding: 10px 12px; animation: 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running popoverFadeIn-dd401616; box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px; }
@keyframes popoverFadeIn-dd401616 { 
  0% { opacity: 0; transform: translate(-50%, -105%) scale(0.9); }
  100% { opacity: 1; transform: translate(-50%, -115%) scale(1); }
}
.popover-arrow[data-v-dd401616] { background: rgb(28, 28, 31); border-bottom: 1px solid rgba(255, 255, 255, 0.12); border-right: 1px solid rgba(255, 255, 255, 0.12); width: 12px; height: 12px; position: absolute; bottom: -6px; left: 50%; transform: translate(-50%) rotate(45deg); }
.close-pop-btn[data-v-dd401616] { color: rgba(255, 255, 255, 0.4); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 2px; }
.close-pop-btn[data-v-dd401616]:hover { color: rgb(255, 255, 255); }
.input-group-row[data-v-dd401616] { flex-direction: column; gap: 4px; display: flex; }
.input-group-row label[data-v-dd401616] { color: rgba(255, 255, 255, 0.5); font-size: 0.68rem; font-weight: 600; }
.input-group-row input[type="text"][data-v-dd401616] { color: rgb(255, 255, 255); background: rgb(42, 42, 46); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 6px; outline: none; padding: 5px 8px; font-size: 0.78rem; transition: 0.2s; }
.input-group-row input[type="text"][data-v-dd401616]:focus { border-color: var(--color-primary); }
.rel-modal-inspector[data-v-dd401616], .rel-modal-inspector[data-v-dd401616] * { box-sizing: border-box !important; }
.rel-modal-inspector[data-v-dd401616] { background: var(--modal-sidebar-bg) !important; border-left: 1px solid var(--modal-border) !important; flex-direction: column !important; flex-shrink: 0 !important; width: 340px !important; height: 100% !important; display: flex !important; overflow: hidden !important; }
.rel-modal-inspector .rel-inspector-panel[data-v-dd401616] { flex-direction: column !important; width: 100% !important; height: 100% !important; display: flex !important; overflow: hidden !important; }
.rel-modal-inspector .panel-body[data-v-dd401616] { flex-direction: column !important; flex: 1 1 0% !important; gap: 16px !important; width: 100% !important; max-width: 100% !important; padding: 16px 12px 16px 16px !important; display: flex !important; overflow: hidden auto !important; }
.rel-modal-inspector .avatar-uploader-center[data-v-dd401616] { flex-direction: column !important; align-items: center !important; gap: 8px !important; padding: 8px 0px !important; display: flex !important; }
.rel-modal-inspector .unified-thumb-modal[data-v-dd401616] { cursor: pointer !important; background: var(--modal-input-bg) !important; border: 3px solid !important; border-radius: 50% !important; justify-content: center !important; align-items: center !important; width: 72px !important; height: 72px !important; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.2s !important; display: flex !important; overflow: hidden !important; box-shadow: rgba(0, 0, 0, 0.15) 0px 6px 16px !important; }
.rel-modal-inspector .unified-thumb-modal[data-v-dd401616]:hover { transform: scale(1.05) !important; }
.rel-modal-inspector .upload-tip[data-v-dd401616] { color: var(--modal-text-muted) !important; font-size: 0.65rem !important; }
.rel-modal-inspector .form-group-modal[data-v-dd401616] { flex-direction: column !important; gap: 6px !important; width: 100% !important; max-width: 100% !important; display: flex !important; }
.rel-modal-inspector .form-group-modal label[data-v-dd401616] { color: var(--modal-text-secondary) !important; font-size: 0.75rem !important; font-weight: 600 !important; }
.rel-modal-inspector .form-group-modal input[type="text"][data-v-dd401616], .rel-modal-inspector .form-group-modal select[data-v-dd401616] { background: var(--modal-input-bg) !important; border: 1px solid var(--modal-input-border) !important; color: var(--modal-text-primary) !important; border-radius: 8px !important; outline: none !important; width: 100% !important; max-width: 100% !important; padding: 8px 12px !important; font-size: 0.82rem !important; transition: 0.2s !important; }
.rel-modal-inspector .form-group-modal select option[data-v-dd401616] { background-color: var(--modal-input-bg) !important; color: var(--modal-text-primary) !important; }
.rel-modal-inspector .form-group-modal input[type="text"][data-v-dd401616]:hover, .rel-modal-inspector .form-group-modal select[data-v-dd401616]:hover { border-color: var(--modal-border) !important; }
.form-group-modal input[type="text"][data-v-dd401616]:focus, .form-group-modal select[data-v-dd401616]:focus { border-color: var(--color-primary,#007aff); background: var(--modal-input-bg); box-shadow: rgba(0, 122, 255, 0.18) 0px 0px 0px 3px; }
.offset-label-row[data-v-dd401616] { justify-content: space-between; align-items: center; display: flex; }
.val-badge[data-v-dd401616] { background: var(--modal-card-bg); border: 1px solid var(--modal-border); color: var(--color-primary,#007aff); border-radius: 4px; padding: 2px 6px; font-family: monospace; font-size: 0.7rem; font-weight: 700; }
input[type="range"][data-v-dd401616] { appearance: none; background: var(--modal-border); box-sizing: border-box; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 2px; outline: none; width: 100%; height: 4px; margin: 8px 0px; }
input[type="range"][data-v-dd401616]::-webkit-slider-thumb { appearance: none; background: var(--color-primary,#007aff); cursor: pointer; border: 2px solid var(--modal-bg); border-radius: 50%; width: 14px; height: 14px; transition: transform 0.1s, background-color 0.1s; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px; }
input[type="range"][data-v-dd401616]::-webkit-slider-thumb:hover { background: rgb(51, 153, 255); transform: scale(1.2); }
.badges-editor-box[data-v-dd401616] { background: var(--modal-card-bg); border: 1px solid var(--modal-border); border-radius: 8px; padding: 10px; }
.no-badge-tip[data-v-dd401616] { color: var(--modal-text-muted); text-align: center; padding: 8px 0px; font-size: 0.7rem; }
.modal-badges-list[data-v-dd401616] { flex-direction: column; gap: 8px; display: flex; }
.modal-badge-card[data-v-dd401616] { background: var(--modal-card-bg); border: 1px solid var(--modal-border); border-radius: 6px; align-items: center; gap: 8px; padding: 4px 6px; display: flex; }
.m-badge-icon[data-v-dd401616] { cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; align-items: center; font-size: 1.1rem; display: flex; }
.m-badge-del[data-v-dd401616] { color: rgb(255, 77, 79); cursor: pointer; opacity: 0.7; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; align-items: center; padding: 4px; font-size: 0.8rem; display: flex; }
.m-badge-del[data-v-dd401616]:hover { opacity: 1; }
.add-badge-btn[data-v-dd401616] { background: 0px 0px; border: 1px dashed var(--modal-border) !important; }
.actions-box[data-v-dd401616] { margin-top: 10px; }
.delete-element-btn[data-v-dd401616] { box-sizing: border-box; justify-content: center; width: 100%; padding: 10px; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); color: rgb(255, 77, 79) !important; background: 0px 0px !important; border: 1px solid rgba(255, 77, 79, 0.3) !important; }
.delete-element-btn[data-v-dd401616]:hover { color: rgb(255, 77, 79) !important; background: rgba(255, 77, 79, 0.1) !important; border-color: rgb(255, 77, 79) !important; }
.delete-element-btn[data-v-dd401616]:active { transform: scale(0.98); }
.rel-modal-inspector .btn-tabs[data-v-dd401616] { background: var(--modal-canvas-viewport-bg) !important; border: 1px solid var(--modal-border) !important; box-sizing: border-box !important; border-radius: 8px !important; flex-flow: row !important; gap: 4px !important; width: 100% !important; max-width: 100% !important; padding: 3px !important; display: flex !important; }
.rel-modal-inspector .tab-btn[data-v-dd401616] { width: auto !important; min-width: 0px !important; color: var(--modal-text-secondary) !important; cursor: pointer !important; white-space: nowrap !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; border-radius: 6px !important; flex: 1 1 0% !important; justify-content: center !important; align-items: center !important; gap: 2px !important; padding: 6px 1px !important; font-size: 0.7rem !important; font-weight: 600 !important; transition: 0.2s !important; display: flex !important; overflow: hidden !important; }
.rel-modal-inspector .tab-btn[data-v-dd401616]:hover { color: var(--modal-text-primary) !important; }
.rel-modal-inspector .tab-btn.active[data-v-dd401616] { background: var(--modal-btn-default-bg) !important; color: var(--modal-text-primary) !important; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 6px !important; }
.rel-modal-inspector .layout-type-tabs .tab-btn.active[data-v-dd401616] { background: var(--color-primary,#007aff) !important; box-shadow: rgba(0, 122, 255, 0.25) 0px 2px 6px !important; }
.reset-curv[data-v-dd401616] { color: var(--modal-text-muted); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 0.9rem; }
.reset-curv[data-v-dd401616]:hover { color: var(--modal-text-primary); }
.modal-sep[data-v-dd401616] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--modal-divider); margin: 10px 0px; }
.checkbox-group-modal[data-v-dd401616] { cursor: pointer; align-items: center; gap: 8px; font-size: 0.78rem; display: flex; }
.checkbox-group-modal input[type="checkbox"][data-v-dd401616] { cursor: pointer; width: 14px; height: 14px; }
.layout-locked-banner[data-v-dd401616] { z-index: 100; backdrop-filter: blur(12px); color: rgb(255, 77, 79); pointer-events: none; background: rgba(224, 36, 36, 0.12); border: 1px solid rgba(224, 36, 36, 0.3); border-radius: 20px; align-items: center; gap: 8px; padding: 8px 16px; font-size: 0.76rem; font-weight: 600; animation: 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running bannerSlideIn-dd401616; display: flex; position: absolute; top: 16px; left: 50%; transform: translate(-50%); box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 24px; }
@keyframes bannerSlideIn-dd401616 { 
  0% { opacity: 0; transform: translate(-50%, -20px); }
  100% { opacity: 1; transform: translate(-50%); }
}
.rel-modal-leftbar[data-v-dd401616] { transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.rel-modal-leftbar.collapsed[data-v-dd401616] { opacity: 0 !important; border-right-width: medium !important; border-right-style: none !important; border-right-color: currentcolor !important; width: 0px !important; padding: 0px !important; overflow: hidden !important; }
.rel-modal-inspector[data-v-dd401616] { transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.rel-modal-inspector.collapsed[data-v-dd401616] { opacity: 0 !important; border-left-width: medium !important; border-left-style: none !important; border-left-color: currentcolor !important; width: 0px !important; overflow: hidden !important; }
.floating-toggle-btn[data-v-dd401616] { backdrop-filter: blur(8px); width: 20px; height: 44px; color: var(--modal-text-secondary); cursor: pointer; z-index: 1100; justify-content: center; align-items: center; padding: 0px; font-size: 1.1rem; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; position: absolute; top: 50%; transform: translateY(-50%); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; background: var(--modal-header-bg) !important; border: 1px solid var(--modal-border) !important; }
.floating-toggle-btn[data-v-dd401616]:hover { color: rgb(255, 255, 255); background: var(--color-primary,#007aff) !important; border-color: var(--color-primary,#007aff) !important; }
.floating-toggle-btn.left-toggle[data-v-dd401616] { border-radius: 0px 8px 8px 0px; left: 0px; border-left-width: medium !important; border-left-style: none !important; border-left-color: currentcolor !important; }
.floating-toggle-btn.right-toggle[data-v-dd401616] { border-radius: 8px 0px 0px 8px; right: 0px; border-right-width: medium !important; border-right-style: none !important; border-right-color: currentcolor !important; }
@media (max-width: 768px) {
  .rel-modal-header[data-v-dd401616] { height: 56px !important; padding: 0px 10px !important; }
  .header-left h3[data-v-dd401616] { display: none !important; }
  .header-center[data-v-dd401616] { gap: 4px !important; padding: 3px 6px !important; }
  .tool-btn span[data-v-dd401616]:not(.iconify), .action-btn.text-danger span[data-v-dd401616] { display: none !important; }
  .tool-btn[data-v-dd401616] { padding: 6px 8px !important; }
  .btn-save span[data-v-dd401616] { display: none !important; }
  .btn-save[data-v-dd401616] { padding: 8px !important; }
  .rel-modal-leftbar[data-v-dd401616] { z-index: 1200 !important; width: 240px !important; height: calc(100% - 56px) !important; position: absolute !important; top: 56px !important; left: 0px !important; box-shadow: rgba(0, 0, 0, 0.15) 8px 0px 24px !important; }
  .rel-modal-inspector[data-v-dd401616] { z-index: 1200 !important; width: 300px !important; height: calc(100% - 56px) !important; position: absolute !important; top: 56px !important; right: 0px !important; box-shadow: rgba(0, 0, 0, 0.15) -8px 0px 24px !important; }
  .floating-toggle-btn.left-toggle.panel-open[data-v-dd401616] { left: 240px; }
  .floating-toggle-btn.right-toggle.panel-open[data-v-dd401616] { right: 300px; }
  .layout-locked-banner[data-v-dd401616] { text-align: center !important; max-width: 85% !important; padding: 6px 12px !important; font-size: 0.68rem !important; top: 10px !important; }
}
.node-connector-row-container[data-v-dd401616] { background: var(--modal-input-bg) !important; border: 1px solid var(--modal-input-border) !important; box-sizing: border-box !important; border-radius: 8px !important; align-items: center !important; width: 100% !important; padding: 2px !important; display: flex !important; }
.node-connector-row-container select[data-v-dd401616] { cursor: pointer !important; color: var(--modal-text-primary) !important; width: auto !important; max-width: none !important; box-shadow: none !important; text-align: center !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; outline: none !important; flex: 1 1 0% !important; padding: 6px 8px !important; font-size: 0.82rem !important; }
.node-connector-row-container select[data-v-dd401616]:hover, .node-connector-row-container select[data-v-dd401616]:focus { box-shadow: none !important; background: 0px 0px !important; border-color: rgba(0, 0, 0, 0) !important; }
.node-connector-row-container select[data-v-dd401616]:last-child { text-align: right !important; }
.node-connector-row-container select[data-v-dd401616]:first-child { text-align: left !important; }
.node-connector-row-container .iconify[data-v-dd401616] { color: var(--modal-text-muted) !important; flex-shrink: 0 !important; margin: 0px 8px !important; font-size: 1.1rem !important; }
.coll-modal-overlay[data-v-f2596f90] { backdrop-filter: blur(8px); z-index: 9999; background: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; padding: 20px; display: flex; position: fixed; inset: 0px; }
.coll-modal-container[data-v-f2596f90] { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 16px; flex-direction: column; width: 90vw; max-width: 1250px; height: 85vh; animation: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0s 1 normal none running modalScaleIn-f2596f90; display: flex; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 50px; }
@keyframes modalScaleIn-f2596f90 { 
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.coll-modal-header[data-v-f2596f90] { border-bottom: 1px solid var(--border-color); background: var(--bg-editor); flex-shrink: 0; justify-content: space-between; align-items: center; height: 60px; padding: 0px 20px; display: flex; }
.header-left[data-v-f2596f90] { align-items: center; gap: 10px; display: flex; }
.logo-icon[data-v-f2596f90] { color: var(--color-primary); align-items: center; font-size: 1.5rem; display: flex; }
.header-left h3[data-v-f2596f90] { color: var(--text-primary); margin: 0px; font-size: 1.05rem; font-weight: 700; }
.header-center[data-v-f2596f90] { align-items: center; gap: 15px; display: flex; }
.divider[data-v-f2596f90] { background: var(--border-color); width: 1px; height: 20px; }
.stepper-group-modal[data-v-f2596f90] { align-items: center; gap: 6px; display: flex; }
.stepper-label[data-v-f2596f90] { color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; }
.stepper-value[data-v-f2596f90] { color: var(--text-primary); text-align: center; min-width: 32px; font-size: 0.85rem; font-weight: 700; }
.btn-stepper[data-v-f2596f90] { border-radius: 4px; justify-content: center; align-items: center; width: 24px; height: 24px; font-size: 0.9rem; display: inline-flex; padding: 0px !important; }
.btn-save[data-v-f2596f90] { border-radius: 8px; align-items: center; gap: 6px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; display: inline-flex; }
.coll-modal-body[data-v-f2596f90] { flex: 1 1 0%; min-height: 0px; display: flex; }
.coll-modal-leftbar[data-v-f2596f90] { background: var(--bg-editor); border-right: 1px solid var(--border-color); flex-direction: column; flex-shrink: 0; gap: 20px; width: 240px; padding: 20px; display: flex; overflow-y: auto; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.coll-modal-leftbar.collapsed[data-v-f2596f90] { opacity: 0 !important; border-right-width: medium !important; border-right-style: none !important; border-right-color: currentcolor !important; width: 0px !important; padding: 0px !important; overflow: hidden !important; }
.leftbar-section h4[data-v-f2596f90] { color: var(--text-primary); text-transform: uppercase; letter-spacing: 0.5px; margin: 0px 0px 10px; font-size: 0.85rem; font-weight: 700; }
.presets-grid[data-v-f2596f90] { grid-template-columns: 1fr; gap: 8px; display: grid; }
.guide-list[data-v-f2596f90] { color: var(--text-secondary); flex-direction: column; gap: 8px; margin: 0px; padding-left: 15px; font-size: 0.75rem; line-height: 1.5; display: flex; }
.coll-modal-workspace[data-v-f2596f90] { background: var(--bg-preview-pane); flex: 1 1 0%; justify-content: center; align-items: flex-start; padding: 30px; display: flex; position: relative; overflow-y: auto; }
.coll-canvas-container[data-v-f2596f90] { background: var(--bg-panel); border-radius: 12px; width: 100%; padding: 15px; position: relative; box-shadow: rgba(0, 0, 0, 0.15) 0px 8px 30px; }
.coll-canvas-real-grid[data-v-f2596f90] { z-index: 1; width: 100%; position: relative; }
.coll-canvas-grid-bg[data-v-f2596f90] { pointer-events: none; z-index: 0; grid-auto-flow: dense; display: grid; position: absolute; top: 15px; left: 15px; right: 15px; }
.grid-bg-cell[data-v-f2596f90] { aspect-ratio: 1 / 1; background: rgba(128, 128, 128, 0.01); border: 1px dashed rgba(128, 128, 128, 0.12); }
.collage-item-modal[data-v-f2596f90] { z-index: 1; cursor: grab; outline-offset: -2px; outline: rgba(0, 0, 0, 0) solid 2px; transition: transform 0.25s, box-shadow 0.25s, outline 0.2s; position: relative; }
.collage-item-modal[data-v-f2596f90]:active { cursor: grabbing; }
.collage-item-modal.is-selected[data-v-f2596f90] { outline-color: var(--color-primary); box-shadow: 0 4px 15px rgba(var(--color-primary-rgb), .2); }
.collage-item-modal.is-dragging[data-v-f2596f90] { cursor: grabbing !important; z-index: 999 !important; transform: scale(1.04) !important; box-shadow: rgba(0, 0, 0, 0.25) 0px 15px 30px !important; }
.collage-img-wrapper-modal[data-v-f2596f90] { background: var(--bg-inset); width: 100%; height: 100%; position: relative; overflow: hidden; }
.collage-img-wrapper-modal img[data-v-f2596f90] { object-fit: cover; width: 100%; height: 100%; display: block; }
.collage-placeholder-modal[data-v-f2596f90] { width: 100%; height: 100%; color: var(--text-placeholder); flex-direction: column; justify-content: center; align-items: center; display: flex; }
.collage-placeholder-modal .icon-view-wrapper[data-v-f2596f90] { margin-bottom: 4px; font-size: 1.8rem; }
.span-indicator-modal[data-v-f2596f90] { font-family: monospace; font-size: 0.7rem; }
.collage-item-index-badge-modal[data-v-f2596f90] { color: rgb(255, 255, 255); pointer-events: none; background: rgba(0, 0, 0, 0.65); border-bottom-right-radius: 4px; padding: 2px 6px; font-size: 0.7rem; font-weight: 700; position: absolute; top: 0px; left: 0px; }
.left-handle[data-v-f2596f90] { cursor: ew-resize; width: 8px; top: 4px; bottom: 4px; left: -4px; }
.left-handle[data-v-f2596f90]:hover { transform: scaleX(1.5); background: var(--color-primary) !important; }
.right-handle[data-v-f2596f90] { cursor: ew-resize; width: 8px; top: 4px; bottom: 4px; right: -4px; }
.right-handle[data-v-f2596f90]:hover { transform: scaleX(1.5); background: var(--color-primary) !important; }
.top-handle[data-v-f2596f90] { cursor: ns-resize; height: 8px; top: -4px; left: 4px; right: 4px; }
.top-handle[data-v-f2596f90]:hover { transform: scaleY(1.5); background: var(--color-primary) !important; }
.bottom-handle[data-v-f2596f90] { cursor: ns-resize; height: 8px; bottom: -4px; left: 4px; right: 4px; }
.bottom-handle[data-v-f2596f90]:hover { transform: scaleY(1.5); background: var(--color-primary) !important; }
.bottom-right-handle[data-v-f2596f90] { cursor: nwse-resize; background: linear-gradient(135deg, transparent 40%, var(--color-primary) 40%); width: 12px; height: 12px; bottom: 2px; right: 2px; }
.coll-modal-inspector[data-v-f2596f90] { background: var(--bg-editor); border-left: 1px solid var(--border-color); flex-direction: column; flex-shrink: 0; width: 300px; display: flex; overflow: hidden; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.coll-modal-inspector.collapsed[data-v-f2596f90] { opacity: 0 !important; border-left-width: medium !important; border-left-style: none !important; border-left-color: currentcolor !important; width: 0px !important; overflow: hidden !important; }
.coll-inspector-panel[data-v-f2596f90] { flex-direction: column; height: 100%; display: flex; }
.empty-inspector[data-v-f2596f90] { text-align: center; color: var(--text-placeholder); flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 40px 20px; display: flex; }
.empty-inspector .icon-view-wrapper[data-v-f2596f90] { opacity: 0.6; margin-bottom: 15px; font-size: 3rem; }
.empty-inspector p[data-v-f2596f90] { margin: 0px; font-size: 0.8rem; line-height: 1.5; }
.panel-close-btn[data-v-f2596f90] { color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; margin-left: auto; padding: 2px; }
.panel-close-btn[data-v-f2596f90]:hover { background: var(--border-color); }
.panel-body[data-v-f2596f90] { flex-direction: column; flex: 1 1 0%; gap: 15px; padding: 20px; display: flex; overflow-y: auto; }
.image-uploader-section[data-v-f2596f90] { flex-direction: column; gap: 8px; display: flex; }
.image-uploader-section label[data-v-f2596f90] { color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; }
.avatar-uploader-center[data-v-f2596f90] { background: var(--bg-inset); border: 1px dashed var(--border-color); border-radius: 10px; flex-direction: column; align-items: center; gap: 8px; padding: 15px; display: flex; }
.unified-thumb-modal[data-v-f2596f90] { border: 2px solid var(--border-color); background: var(--bg-panel); cursor: pointer; border-radius: 10px; justify-content: center; align-items: center; width: 90px; height: 90px; transition: border-color 0.2s; display: flex; overflow: hidden; }
.unified-thumb-modal[data-v-f2596f90]:hover { border-color: var(--color-primary); }
.upload-tip[data-v-f2596f90] { color: var(--text-placeholder); font-size: 0.7rem; }
.media-actions-row[data-v-f2596f90] { grid-template-columns: 1fr 1fr; gap: 8px; display: grid; }
.form-group-modal[data-v-f2596f90] { flex-direction: column; gap: 6px; display: flex; }
.offset-label-row[data-v-f2596f90] { justify-content: space-between; align-items: center; display: flex; }
.offset-label-row label[data-v-f2596f90] { color: var(--text-secondary); font-size: 0.8rem; font-weight: 600; }
.val-badge[data-v-f2596f90] { color: var(--color-primary); background: rgba(var(--color-primary-rgb), .1); border-radius: 4px; padding: 2px 6px; font-size: 0.75rem; font-weight: 700; }
.modal-sep[data-v-f2596f90] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--border-color); margin: 5px 0px; }
.actions-box[data-v-f2596f90] { margin-top: auto; padding-top: 10px; }
.delete-element-btn[data-v-f2596f90] { border-radius: 8px; justify-content: center; align-items: center; gap: 8px; width: 100%; padding: 10px; font-size: 0.85rem; font-weight: 600; display: inline-flex; }
.floating-toggle-btn[data-v-f2596f90] { backdrop-filter: blur(8px); width: 20px; height: 44px; color: var(--text-secondary); cursor: pointer; z-index: 1100; justify-content: center; align-items: center; padding: 0px; font-size: 1.1rem; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; position: absolute; top: 50%; transform: translateY(-50%); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; background: var(--bg-editor) !important; border: 1px solid var(--border-color) !important; }
.floating-toggle-btn[data-v-f2596f90]:hover { color: rgb(255, 255, 255); background: var(--color-primary,#007aff) !important; border-color: var(--color-primary,#007aff) !important; }
.floating-toggle-btn.left-toggle[data-v-f2596f90] { border-radius: 0px 8px 8px 0px; left: 0px; border-left-width: medium !important; border-left-style: none !important; border-left-color: currentcolor !important; }
.floating-toggle-btn.right-toggle[data-v-f2596f90] { border-radius: 8px 0px 0px 8px; right: 0px; border-right-width: medium !important; border-right-style: none !important; border-right-color: currentcolor !important; }
@media (max-width: 768px) {
  .coll-modal-header[data-v-f2596f90] { height: 56px !important; padding: 0px 10px !important; }
  .header-left h3[data-v-f2596f90] { display: none !important; }
  .header-center[data-v-f2596f90] { flex: 1 1 0%; min-width: 0px; justify-content: flex-start !important; gap: 8px !important; padding: 3px 6px !important; overflow-x: auto !important; }
  .header-center[data-v-f2596f90]::-webkit-scrollbar { display: none; }
  .header-right[data-v-f2596f90] { flex-shrink: 0; margin-left: 8px; }
  .stepper-label[data-v-f2596f90] { display: none !important; }
  .stepper-group-modal[data-v-f2596f90] { flex-shrink: 0; gap: 4px !important; }
  .divider[data-v-f2596f90] { flex-shrink: 0; margin: 0px 4px !important; }
  .coll-modal-leftbar[data-v-f2596f90] { z-index: 1200 !important; width: 240px !important; height: calc(100% - 56px) !important; position: absolute !important; top: 56px !important; left: 0px !important; box-shadow: rgba(0, 0, 0, 0.15) 8px 0px 24px !important; }
  .coll-modal-inspector[data-v-f2596f90] { z-index: 1200 !important; width: 300px !important; height: calc(100% - 56px) !important; position: absolute !important; top: 56px !important; right: 0px !important; box-shadow: rgba(0, 0, 0, 0.15) -8px 0px 24px !important; }
  .floating-toggle-btn.left-toggle.panel-open[data-v-f2596f90] { left: 240px; }
  .floating-toggle-btn.right-toggle.panel-open[data-v-f2596f90] { right: 300px; }
  .coll-modal-workspace[data-v-f2596f90] { padding: 15px !important; }
}
.premium-modal[data-v-88b4877f] { border: 1px solid var(--border-color); border-radius: 12px; flex-direction: column; width: 90%; max-width: 960px; max-height: 90vh; animation: 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running modalScaleIn-88b4877f; display: flex; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 40px; background: var(--bg-card,#fff) !important; }
@keyframes modalScaleIn-88b4877f { 
  0% { opacity: 0; transform: scale(0.96) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.modal-header[data-v-88b4877f] { color: var(--text-primary); justify-content: flex-start; align-items: center; padding: 12px 32px; display: flex; }
.modal-header h3[data-v-88b4877f] { text-align: left; margin: 0px; font-size: 1.4rem; font-weight: 700; }
.mobile-hint[data-v-88b4877f] { display: none; }
.mode-selector[data-v-88b4877f] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; margin-left: auto; padding: 2px; display: flex; }
.mode-selector button[data-v-88b4877f] { cursor: pointer; color: var(--text-secondary); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; padding: 4px 12px; font-size: 11px; transition: 0.2s; }
.mode-selector button.active[data-v-88b4877f] { background: var(--color-primary); color: rgb(255, 255, 255); }
.modal-editor-body[data-v-88b4877f] { flex-direction: column; flex: 1 1 0%; min-height: 0px; padding: 0px 32px 10px; display: flex; }
.modal-toolbar-wrapper[data-v-88b4877f] { flex-direction: column; gap: 6px; padding: 12px 0px 20px; display: flex; }
.modal-toolbar[data-v-88b4877f] { color: var(--text-primary); border: 1px solid var(--border-color); background: 0px 0px; border-radius: 6px; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 14px; display: flex; }
.toolbar-group[data-v-88b4877f] { gap: 2px; display: flex; }
.select-container[data-v-88b4877f] { flex-direction: column; justify-content: center; align-items: center; display: flex; }
.premium-select[data-v-88b4877f] { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 4px; outline: none; width: 70px; height: 24px; padding: 0px 4px; font-size: 11px; }
.premium-select.short[data-v-88b4877f] { width: 60px; }
.modal-toolbar button[data-v-88b4877f] { cursor: pointer; width: auto; min-width: 32px; height: 40px; color: inherit; opacity: 0.85; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; flex-direction: column; justify-content: center; align-items: center; padding: 2px 4px; transition: 0.2s; display: flex; }
.modal-toolbar button .iconify[data-v-88b4877f] { width: 1.1rem; height: 1.1rem; margin-bottom: 2px; font-size: 1.1rem; }
.btn-label[data-v-88b4877f] { opacity: 0.6; white-space: nowrap; font-size: 9px; font-weight: 500; }
.modal-toolbar button.is-active .btn-label[data-v-88b4877f] { opacity: 1; }
.modal-toolbar button[data-v-88b4877f]:hover { background: var(--rt-toolbar-btn-hover,#ffffff1a); color: var(--text-primary); opacity: 1; }
.typography-controls[data-v-88b4877f] { gap: 4px; }
.input-with-label[data-v-88b4877f] { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 4px; align-items: center; height: 30px; padding: 0px 4px; display: flex; }
.small-label[data-v-88b4877f] { color: var(--text-secondary); opacity: 0.8; white-space: nowrap; user-select: none; margin-right: 2px; font-size: 9px; }
.tiny-input[data-v-88b4877f] { color: var(--text-primary); text-align: center; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; width: 32px; padding: 0px; font-size: 12px; }
.tiny-input[data-v-88b4877f]::placeholder { opacity: 0.3; }
.modal-toolbar button.is-active[data-v-88b4877f] { background: var(--rt-toolbar-btn-active,var(--color-primary-bg)); color: var(--color-primary); opacity: 1; }
.divider[data-v-88b4877f] { background: var(--border-color); flex: 0 0 auto; width: 1px; height: 24px; margin: 0px 4px; }
.font-size-container[data-v-88b4877f] { align-items: center; display: flex; }
.font-size-input[data-v-88b4877f] { color: var(--text-secondary); cursor: text; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; width: 65px; padding: 2px 4px; font-size: 0.8rem; transition: 0.2s; }
.font-size-input[data-v-88b4877f]:hover, .font-size-input[data-v-88b4877f]:focus { background: var(--bg-input); color: var(--text-primary); }
.font-size-input[data-v-88b4877f]::placeholder { color: rgb(102, 102, 102); opacity: 0.8; }
.tiptap-modal-content[data-v-88b4877f] { background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-color); border-radius: 4px; flex: 1 1 0%; padding: 16px; transition: 0.2s; display: flow-root; overflow-y: auto; }
.tiptap-modal-content[data-v-88b4877f]:focus-within { border-color: rgb(59, 130, 246); box-shadow: rgb(59, 130, 246) 0px 0px 0px 1px; }
.tiptap-modal-content[data-v-88b4877f] .tiptap { min-height: 100%; }
[data-v-88b4877f] .tiptap { outline: none; min-height: 100px; display: flow-root; }
[data-v-88b4877f] .tiptap p { margin: 0px 0px 0.4em; }
[data-v-88b4877f] .tiptap table { border-collapse: collapse; table-layout: fixed; width: 100%; margin: 1em 0px; overflow: hidden; }
[data-v-88b4877f] .tiptap table td, [data-v-88b4877f] .tiptap table th { border: 2px solid var(--border-color,#ddd); vertical-align: top; box-sizing: border-box; min-width: 1em; padding: 6px 10px; position: relative; }
[data-v-88b4877f] .tiptap table th { text-align: left; background-color: rgba(128, 128, 128, 0.05); font-weight: 700; }
[data-v-88b4877f] .tiptap table .selectedCell::after { z-index: 2; content: ""; pointer-events: none; background: rgba(200, 200, 255, 0.4); position: absolute; inset: 0px; }
[data-v-88b4877f] .tiptap table .column-resize-handle { pointer-events: none; background-color: rgb(170, 221, 255); width: 4px; position: absolute; top: 0px; bottom: -2px; right: -2px; }
[data-v-88b4877f] .tiptap ul[data-type="taskList"] { list-style: none; padding: 0px !important; }
[data-v-88b4877f] .tiptap ul[data-type="taskList"] li { align-items: flex-start; gap: 8px; margin-bottom: 4px; display: flex; }
[data-v-88b4877f] .tiptap ul[data-type="taskList"] li > label { user-select: none; flex: 0 0 auto; margin-top: 4px; }
[data-v-88b4877f] .tiptap ul[data-type="taskList"] li > div { flex: 1 1 auto; }
[data-v-88b4877f] .tiptap ul[data-type="taskList"] input[type="checkbox"] { cursor: pointer; width: 1.2em; height: 1.2em; accent-color: var(--color-primary); }
[data-v-88b4877f] .tiptap ul, [data-v-88b4877f] .tiptap ol { margin: 1em 0px; padding-left: 2em; }
[data-v-88b4877f] .tiptap ol { list-style-type: decimal; }
[data-v-88b4877f] .tiptap ul { list-style-type: disc; }
[data-v-88b4877f] .tiptap h1, [data-v-88b4877f] .tiptap h2, [data-v-88b4877f] .tiptap h3 { margin: 0.5em 0px 0.3em !important; font-weight: 800 !important; line-height: 1.2 !important; }
[data-v-88b4877f] .tiptap h1 { font-size: 1.6em; }
[data-v-88b4877f] .tiptap h2 { font-size: 1.4em; }
[data-v-88b4877f] .tiptap h3 { font-size: 1.2em; }
[data-v-88b4877f] .tiptap blockquote { border-left: 4px solid var(--color-primary,#007aff); color: var(--text-secondary); background: rgba(128, 128, 128, 0.05); border-radius: 2px 8px 8px 2px; margin: 0.8em 0px !important; padding-left: 1em !important; }
[data-v-88b4877f] .tiptap hr { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 2px solid var(--border-color); margin: 1.2em 0px !important; }
[data-v-88b4877f] .tiptap pre { color: rgb(212, 212, 212); background: rgb(30, 30, 30); font-family: monospace; font-size: 0.9em; border-radius: 8px !important; margin: 0.8em 0px !important; padding: 12px !important; overflow-x: auto !important; }
[data-v-88b4877f] .tiptap code { background: rgba(128, 128, 128, 0.1); border-radius: 4px !important; padding: 2px 4px !important; }
[data-v-88b4877f] .rich-image-container { user-select: none; outline: rgba(0, 0, 0, 0) solid 2px; max-width: 100%; transition: outline 0.2s; display: inline-block; position: relative; }
[data-v-88b4877f] .rich-image-container:hover, [data-v-88b4877f] .rich-image-container.is-resizing { outline: 2px solid var(--color-primary,#3b82f6); }
[data-v-88b4877f] .image-resize-handle { background: var(--color-primary,#3b82f6); cursor: nwse-resize; opacity: 0; z-index: 10; border-top-left-radius: 2px; width: 12px; height: 12px; transition: opacity 0.2s; position: absolute; bottom: 0px; right: 0px; }
[data-v-88b4877f] .rich-image-container:hover .image-resize-handle, [data-v-88b4877f] .rich-image-container.is-resizing .image-resize-handle { opacity: 1; }
[data-v-88b4877f] .rich-image { max-width: 100%; height: auto; }
.modal-footer[data-v-88b4877f] { background: 0px 0px; justify-content: flex-end; gap: 12px; padding: 12px 32px 24px; display: flex; }
.btn[data-v-88b4877f] { cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; min-width: 80px; padding: 6px 20px; font-size: 0.9rem; font-weight: 500; transition: 0.2s; }
.btn[data-v-88b4877f]:hover { filter: brightness(1.05); transform: translateY(-1px); }
.btn[data-v-88b4877f]:active { transform: scale(0.96); }
.btn-default[data-v-88b4877f] { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-secondary); }
.btn-default[data-v-88b4877f]:hover { background: var(--bg-editor); color: var(--text-primary); }
.btn-primary[data-v-88b4877f] { background: var(--color-primary); color: rgb(255, 255, 255); }
.btn-primary[data-v-88b4877f]:hover { background: rgb(0, 106, 230); }
@media screen and (max-width: 768px) {
  .premium-modal[data-v-88b4877f] { border-radius: 12px; width: 98%; max-height: 96vh; }
  .modal-header[data-v-88b4877f] { padding: 12px 16px; }
  .modal-header h3[data-v-88b4877f] { font-size: 1.1rem; }
  .modal-editor-body[data-v-88b4877f] { padding: 0px 12px 10px; }
  .modal-toolbar-wrapper[data-v-88b4877f] { gap: 8px; padding: 8px 0px 12px; }
  .modal-toolbar[data-v-88b4877f] { scrollbar-width: none; flex-wrap: nowrap; gap: 6px; padding: 6px 10px; overflow-x: auto; }
  .modal-toolbar[data-v-88b4877f]::-webkit-scrollbar { display: none; }
  .toolbar-group[data-v-88b4877f] { flex-shrink: 0; gap: 4px; }
  .modal-toolbar button[data-v-88b4877f] { min-width: 36px; height: 36px; padding: 4px; }
  .modal-toolbar button .iconify[data-v-88b4877f] { width: 1.3rem; height: 1.3rem; margin-bottom: 0px; font-size: 1.3rem; }
  .btn-label[data-v-88b4877f] { display: none; }
  .divider[data-v-88b4877f] { height: 16px; margin: 0px 4px; }
  .typography-controls[data-v-88b4877f] { gap: 8px; }
  .input-with-label[data-v-88b4877f] { height: 32px; padding: 0px 6px; }
  .premium-select[data-v-88b4877f] { width: 80px; height: 28px; font-size: 12px; }
  .premium-select.short[data-v-88b4877f] { width: 70px; }
  .modal-footer[data-v-88b4877f] { padding: 12px 16px 16px; }
  .btn[data-v-88b4877f] { min-width: 70px; padding: 8px 16px; font-size: 0.85rem; }
  .modal-header[data-v-88b4877f] { flex-direction: row-reverse; justify-content: space-between; padding: 12px 16px; display: flex; }
  .mobile-hint[data-v-88b4877f] { color: var(--color-primary); opacity: 0.9; background: var(--color-primary-bg); border-radius: 4px; padding: 2px 8px; font-size: 11px; font-weight: 500; display: inline-block; }
}
.export-options-grid[data-v-b24c550d] { grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 15px; display: grid; }
.export-menu-grid[data-v-b24c550d] { grid-template-columns: repeat(2, 1fr); gap: 10px; display: grid; }
.import-options-grid[data-v-3aa192d0] { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 15px; display: grid; }
.import-menu-grid[data-v-3aa192d0] { grid-template-columns: repeat(3, 1fr); gap: 10px; display: grid; }
.desktop-side-by-side[data-v-3b010a02] { align-items: flex-start; flex-direction: row !important; }
@media (max-width: 768px) {
  .desktop-side-by-side[data-v-3b010a02] { flex-direction: column !important; }
}
.social-support-btn[data-v-85279893] { box-sizing: border-box; white-space: nowrap; cursor: pointer; border: 1px solid rgba(0, 0, 0, 0); border-radius: 8px; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; min-width: 0px; height: 42px; padding: 8px; font-size: 0.8rem; font-weight: 600; text-decoration: none; transition: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; }
.social-support-btn[data-v-85279893]:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; }
.social-support-btn[data-v-85279893]:active { transform: translateY(0px); }
.ri--weibo-fill[data-v-85279893] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4.278 8.592c2.773-2.77 6.004-4.033 7.219-2.816c.537.537.588 1.464.244 2.572c-.178.557.524.25.524.25c2.241-.938 4.197-.994 4.91.027c.38.542.343 1.306-.008 2.19c-.163.407.048.47.36.563c1.262.392 2.668 1.336 2.668 3.004c0 2.763-3.98 6.239-9.964 6.239c-4.565 0-9.23-2.213-9.23-5.852c0-1.902 1.204-4.102 3.277-6.177m12.133 5.742c-.237-2.391-3.382-4.039-7.023-3.677c-3.64.359-6.403 2.59-6.167 4.98c.237 2.394 3.382 4.039 7.023 3.68c3.641-.362 6.401-2.592 6.167-4.983m-10.249.104c.754-1.528 2.712-2.39 4.446-1.94c1.792.463 2.707 2.154 1.976 3.799c-.744 1.683-2.883 2.58-4.695 1.994c-1.752-.566-2.493-2.295-1.727-3.853m2.715.578c-.563-.237-1.291.008-1.64.553c-.354.547-.189 1.201.371 1.456c.568.257 1.325.013 1.676-.55c.346-.568.163-1.217-.408-1.459m1.387-.578c-.216-.084-.486.018-.613.232c-.123.214-.054.458.163.547c.219.092.501-.012.628-.231c.123-.22.044-.466-.178-.548m5.694-11.514A5.83 5.83 0 0 1 21.5 4.72a5.84 5.84 0 0 1 1.22 5.704a.84.84 0 0 1-1.06.54a.844.844 0 0 1-.542-1.062a4.142 4.142 0 0 0-4.808-5.327a.845.845 0 0 1-.353-1.65m.626 2.926a2.836 2.836 0 0 1 3.29 3.648a.725.725 0 1 1-1.378-.45a1.38 1.38 0 0 0-.287-1.357a1.4 1.4 0 0 0-1.322-.426a.723.723 0 1 1-.303-1.415'/%3E%3C/svg%3E"); width: 24px; height: 24px; mask-image: var(--svg); background-color: currentcolor; display: inline-block; mask-size: 100% 100%; mask-repeat: no-repeat; }
.simple-icons--xiaohongshu[data-v-85279893] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M22.405 9.879c.002.016.01.02.07.019h.725a.797.797 0 0 0 .78-.972a.794.794 0 0 0-.884-.618a.795.795 0 0 0-.692.794c0 .101-.002.666.001.777m-11.509 4.808c-.203.001-1.353.004-1.685.003a2.5 2.5 0 0 1-.766-.126a.025.025 0 0 0-.03.014L7.7 16.127a.025.025 0 0 0 .01.032c.111.06.336.124.495.124c.66.01 1.32.002 1.981 0q.017 0 .023-.015l.712-1.545a.025.025 0 0 0-.024-.036zM.477 9.91c-.071 0-.076.002-.076.01l-.01.08c-.027.397-.038.495-.234 3.06c-.012.24-.034.389-.135.607c-.026.057-.033.042.003.112c.046.092.681 1.523.787 1.74c.008.015.011.02.017.02c.008 0 .033-.026.047-.044q.219-.282.371-.606c.306-.635.44-1.325.486-1.706c.014-.11.021-.22.03-.33l.204-2.616l.022-.293c.003-.029 0-.033-.03-.034zm7.203 3.757a1.4 1.4 0 0 1-.135-.607c-.004-.084-.031-.39-.235-3.06a.4.4 0 0 0-.01-.082c-.004-.011-.052-.008-.076-.008h-1.48c-.03.001-.034.005-.03.034l.021.293q.114 1.473.233 2.946c.05.4.186 1.085.487 1.706c.103.215.223.419.37.606c.015.018.037.051.048.049c.02-.003.742-1.642.804-1.765c.036-.07.03-.055.003-.112m3.861-.913h-.872a.126.126 0 0 1-.116-.178l1.178-2.625a.025.025 0 0 0-.023-.035l-1.318-.003a.148.148 0 0 1-.135-.21l.876-1.954a.025.025 0 0 0-.023-.035h-1.56q-.017 0-.024.015l-.926 2.068c-.085.169-.314.634-.399.938a.5.5 0 0 0-.02.191a.46.46 0 0 0 .23.378a1 1 0 0 0 .46.119h.59c.041 0-.688 1.482-.834 1.972a.5.5 0 0 0-.023.172a.47.47 0 0 0 .23.398c.15.092.342.12.475.12l1.66-.001q.017 0 .023-.015l.575-1.28a.025.025 0 0 0-.024-.035m-6.93-4.937H3.1a.032.032 0 0 0-.034.033c0 1.048-.01 2.795-.01 6.829c0 .288-.269.262-.28.262h-.74c-.04.001-.044.004-.04.047c.001.037.465 1.064.555 1.263c.01.02.03.033.051.033c.157.003.767.009.938-.014c.153-.02.3-.06.438-.132c.3-.156.49-.419.595-.765c.052-.172.075-.353.075-.533q.003-3.495-.007-6.991a.03.03 0 0 0-.032-.032zm11.784 6.896q-.002-.02-.024-.022h-1.465c-.048-.001-.049-.002-.05-.049v-4.66c0-.072-.005-.07.07-.07h.863c.08 0 .075.004.075-.074V8.393c0-.082.006-.076-.08-.076h-3.5c-.064 0-.075-.006-.075.073v1.445c0 .083-.006.077.08.077h.854c.075 0 .07-.004.07.07v4.624c0 .095.008.084-.085.084c-.37 0-1.11-.002-1.304 0c-.048.001-.06.03-.06.03l-.697 1.519s-.014.025-.008.036s.013.008.058.008q2.622.003 5.243.002c.03-.001.034-.006.035-.033zm4.177-3.43q0 .021-.02.024c-.346.006-.692.004-1.037.004q-.021-.003-.022-.024q-.006-.651-.01-1.303c0-.072-.006-.071.07-.07l.733-.003c.041 0 .081.002.12.015c.093.025.16.107.165.204c.006.431.002 1.153.001 1.153m2.67.244a1.95 1.95 0 0 0-.883-.222h-.18c-.04-.001-.04-.003-.042-.04V10.21q.001-.198-.025-.394a1.8 1.8 0 0 0-.153-.53a1.53 1.53 0 0 0-.677-.71a2.2 2.2 0 0 0-1-.258c-.153-.003-.567 0-.72 0c-.07 0-.068.004-.068-.065V7.76c0-.031-.01-.041-.046-.039H17.93s-.016 0-.023.007q-.008.008-.008.023v.546c-.008.036-.057.015-.082.022h-.95c-.022.002-.028.008-.03.032v1.481c0 .09-.004.082.082.082h.913c.082 0 .072.128.072.128v1.148s.003.117-.06.117h-1.482c-.068 0-.06.082-.06.082v1.445s-.01.068.064.068h1.457c.082 0 .076-.006.076.079v3.225c0 .088-.007.081.082.081h1.43c.09 0 .082.007.082-.08v-3.27c0-.029.006-.035.033-.035l2.323-.003a.7.7 0 0 1 .28.061a.46.46 0 0 1 .274.407c.008.395.003.79.003 1.185c0 .259-.107.367-.33.367h-1.218c-.023.002-.029.008-.028.033q.276.655.57 1.303a.05.05 0 0 0 .04.026c.17.005.34.002.51.003c.15-.002.517.004.666-.01a2 2 0 0 0 .408-.075c.59-.18.975-.698.976-1.313v-1.981q.001-.191-.034-.38c0 .078-.029-.641-.724-.998'/%3E%3C/svg%3E"); width: 1em; height: 1em; mask-image: var(--svg); background-color: currentcolor; display: inline-block; mask-size: 100% 100%; mask-repeat: no-repeat; }
.bxs--donate-heart[data-v-85279893] { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M17.726 13.02L14 16H9v-1h4.065a.5.5 0 0 0 .416-.777l-.888-1.332A2 2 0 0 0 10.93 12H3a1 1 0 0 0-1 1v6a2 2 0 0 0 2 2h9.639a3 3 0 0 0 2.258-1.024L22 13l-1.452-.484a3 3 0 0 0-2.822.504m1.532-5.63c.451-.465.73-1.108.73-1.818s-.279-1.353-.73-1.818A2.45 2.45 0 0 0 17.494 3S16.25 2.997 15 4.286C13.75 2.997 12.506 3 12.506 3a2.45 2.45 0 0 0-1.764.753c-.451.466-.73 1.108-.73 1.818s.279 1.354.73 1.818L15 12z'/%3E%3C/svg%3E"); width: 24px; height: 24px; mask-image: var(--svg); background-color: currentcolor; display: inline-block; mask-size: 100% 100%; mask-repeat: no-repeat; }
#qa-guide-banner[data-v-85279893] { background: var(--color-primary); color: rgb(255, 255, 255); z-index: 100; box-sizing: border-box; border-radius: 12px 12px 0px 0px; width: 100%; padding: 12px 40px 12px 20px; animation: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal none running slideDown-85279893; position: absolute; top: 0px; left: 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px; }
.qa-emoji[data-v-85279893] { font-size: 1.2rem; }
@keyframes slideDown-85279893 { 
  0% { opacity: 0; transform: translateY(-100%); }
  100% { opacity: 1; transform: translateY(0px); }
}
@keyframes slideUp-85279893 { 
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.backup-reminder-fade-enter-active[data-v-85279893] { transition: opacity 0.3s; }
.backup-reminder-fade-enter-active .backup-reminder-box[data-v-85279893] { transition: transform 0.3s, opacity 0.3s; }
.backup-reminder-fade-enter-from[data-v-85279893] { opacity: 0; }
.backup-reminder-fade-enter-from .backup-reminder-box[data-v-85279893] { opacity: 0; transform: scale(0.95) translateY(10px); }
.backup-reminder-fade-leave-active[data-v-85279893] { transition: opacity 0.2s; }
.backup-reminder-fade-leave-active .backup-reminder-box[data-v-85279893] { transition: transform 0.2s, opacity 0.2s; }
.backup-reminder-fade-leave-to[data-v-85279893] { opacity: 0; }
.backup-reminder-fade-leave-to .backup-reminder-box[data-v-85279893] { opacity: 0; transform: scale(0.95); }
.ucp-sv-box[data-v-d86d4d95] { cursor: crosshair; border-radius: 12px; width: 100%; height: 130px; margin-bottom: 5px; transition: background-color 0.1s linear; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset; }
@media (max-width: 767px) {
  .ucp-sv-box[data-v-d86d4d95] { height: 115px; margin-bottom: 8px; }
}
.ucp-sv-white[data-v-d86d4d95] { background: linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0)); position: absolute; inset: 0px; }
.ucp-sv-black[data-v-d86d4d95] { background: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0)); position: absolute; inset: 0px; }
.ucp-sv-cursor[data-v-d86d4d95] { pointer-events: none; will-change: left, top, transform; border: 2.5px solid rgb(255, 255, 255); border-radius: 50%; width: 16px; height: 16px; transition: left 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.1s ease-out, border-color 0.25s; position: absolute; transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px; }
.ucp-sv-cursor.is-dragging[data-v-d86d4d95] { transition: none !important; }
.ucp-hue-slider[data-v-48945446] { cursor: pointer; background: linear-gradient(90deg, red 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, red 100%); border-radius: 7px; width: 100%; height: 14px; margin-bottom: 20px; position: relative; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset; }
.ucp-hue-cursor[data-v-48945446] { will-change: left, transform; background: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; width: 22px; height: 22px; transition: left 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.1s ease-out; position: absolute; top: 50%; transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; }
.inline-color-picker[data-v-db9ee2a6] { flex-direction: column; gap: 10px; display: flex; }
.icp-hue-wrap[data-v-db9ee2a6] { width: 100%; }
.icp-hue-wrap[data-v-db9ee2a6] .ucp-hue-slider { margin-bottom: 0px; }
.icp-result-row[data-v-db9ee2a6] { align-items: center; gap: 10px; margin-top: 4px; display: flex; }
.icp-swatch[data-v-db9ee2a6] { border: 2px solid var(--border-color,#0000001a); cursor: pointer; border-radius: 10px; width: 40px; min-width: 40px; height: 40px; transition: transform 0.15s; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.06) 0px 0px 0px 1px inset; }
.icp-swatch[data-v-db9ee2a6]:hover { transform: scale(1.05); }
.icp-copy-ok[data-v-db9ee2a6] { color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; font-size: 11px; font-weight: 700; animation: 0.2s ease 0s 1 normal none running icpFadeIn-db9ee2a6; display: flex; position: absolute; inset: 0px; }
@keyframes icpFadeIn-db9ee2a6 { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.icp-hex-input-wrap[data-v-db9ee2a6] { flex: 1 1 0%; }
.icp-hex-input[data-v-db9ee2a6] { border: 1px solid var(--border-color,#0000001a); background: var(--bg-editor,#fff); width: 100%; color: var(--text-primary,#111); text-align: center; letter-spacing: 0.5px; box-sizing: border-box; border-radius: 10px; outline: none; padding: 8px 12px; font-family: Outfit, "SF Mono", Consolas, monospace; font-size: 0.9rem; font-weight: 700; transition: 0.2s; }
.icp-hex-input[data-v-db9ee2a6]:focus { border-color: rgb(0, 122, 255); box-shadow: rgba(0, 122, 255, 0.15) 0px 0px 0px 3px; }
:root.dark-mode .icp-swatch[data-v-db9ee2a6] { border-color: rgba(255, 255, 255, 0.12); box-shadow: rgba(255, 255, 255, 0.06) 0px 0px 0px 1px inset; }
:root.dark-mode .icp-hex-input[data-v-db9ee2a6] { color: rgb(238, 238, 238); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.1); }
@keyframes marquee-5346d5e1 { 
  0% { transform: translate(100%); }
  100% { transform: translate(-100%); }
}
.spinning[data-v-5346d5e1] { animation: 1s linear 0s infinite normal none running spin-5346d5e1; }
@keyframes spin-5346d5e1 { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.modal-sidebar[data-v-5346d5e1] { scroll-behavior: auto !important; }
.display-mode-segments[data-v-5346d5e1] { background: var(--bg-editor); border: 1px solid var(--border-color); border-radius: 10px; gap: 4px; padding: 4px; display: flex; }
.segment-btn[data-v-5346d5e1] { color: var(--text-secondary); cursor: pointer; white-space: nowrap; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 7px; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 8px 4px; font-size: 0.85rem; font-weight: 500; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; }
.segment-btn[data-v-5346d5e1]:hover { background: var(--bg-input); color: var(--text-primary); }
.segment-btn.active[data-v-5346d5e1] { background: var(--color-primary); color: rgb(255, 255, 255); box-shadow: rgba(0, 122, 255, 0.25) 0px 4px 12px; }
.sub-tab-segments .segment-btn.rules-btn[data-v-5346d5e1]:not(.active) { color: var(--color-danger) !important; }
.sub-tab-segments .segment-btn.rules-btn.active[data-v-5346d5e1] { background: var(--color-danger) !important; color: rgb(0, 0, 0) !important; box-shadow: rgba(255, 71, 87, 0.25) 0px 4px 12px !important; }
html.dark-mode .sub-tab-segments .segment-btn.rules-btn.active[data-v-5346d5e1] { color: rgb(255, 255, 255) !important; }
.feedback-title[data-v-5346d5e1] { align-items: center; gap: 10px; margin-top: 0px; display: flex; }
.feedback-title-text[data-v-5346d5e1] { font-size: 1.15rem; font-weight: 600; }
.feedback-subtitle[data-v-5346d5e1] { color: var(--text-placeholder); opacity: 0.6; font-size: 0.75rem; font-weight: 400; text-decoration: line-through; }
.feedback-desc[data-v-5346d5e1] { color: var(--text-secondary); margin-bottom: 20px; font-size: 0.85rem; line-height: 1.6; }
.segment-btn .iconify[data-v-5346d5e1] { font-size: 1.1rem; }
.sub-tab-segments[data-v-5346d5e1] { background: var(--bg-input); border: 1px solid var(--border-color); scrollbar-width: none; border-radius: 10px; gap: 4px; width: max-content; max-width: 100%; margin-bottom: 20px; padding: 4px; display: flex; overflow-x: auto; flex-wrap: nowrap !important; }
.sub-tab-segments[data-v-5346d5e1]::-webkit-scrollbar { display: none; }
.sub-tab-segments .segment-btn[data-v-5346d5e1] { color: var(--text-secondary); cursor: pointer; white-space: nowrap; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 7px; flex-shrink: 0; justify-content: center; align-items: center; gap: 6px; padding: 8px 16px; font-size: 0.85rem; font-weight: 500; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; }
.sub-tab-segments .segment-btn[data-v-5346d5e1]:hover { background: var(--bg-editor); color: var(--text-primary); }
.sub-tab-segments .segment-btn.active[data-v-5346d5e1] { background: var(--color-primary); color: rgb(255, 255, 255); box-shadow: rgba(0, 122, 255, 0.25) 0px 4px 12px; }
.tab-content.no-scroll[data-v-5346d5e1] { flex-direction: column; display: none; max-height: 70vh !important; overflow-y: hidden !important; }
.tab-content.no-scroll.active[data-v-5346d5e1] { display: flex !important; }
.sub-tab-content-scroll[data-v-5346d5e1] { flex: 1 1 0%; max-height: 55vh; padding-right: 5px; overflow-y: auto; }
.crazy-thursday-text[data-v-5346d5e1] { background: linear-gradient(90deg, rgb(255, 0, 127), rgb(255, 127, 0), rgb(255, 0, 255), rgb(0, 255, 255), rgb(0, 255, 127), rgb(255, 0, 127)) 0px 0px / 200% text; font-weight: 700; animation: 3s linear 0s infinite normal none running rainbow-flow-5346d5e1; color: rgba(0, 0, 0, 0) !important; }
@keyframes rainbow-flow-5346d5e1 { 
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.donation-color-picker-section[data-v-5346d5e1] { background: var(--bg-input,#f9f9fb); border: 1px solid var(--border-color,#00000014); border-radius: 16px; margin-top: 20px; padding: 16px; }
.donation-color-picker-header[data-v-5346d5e1] { color: var(--text-primary); align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.85rem; font-weight: 800; display: flex; }
.donation-color-picker-header .iconify[data-v-5346d5e1] { color: rgb(0, 122, 255); font-size: 1rem; }
.donation-color-picker-hint[data-v-5346d5e1] { color: var(--text-secondary); margin: 0px 0px 12px; font-size: 0.78rem; line-height: 1.6; }
.flower-particle { z-index: 9999; pointer-events: none; animation: 3s linear 0s 1 normal forwards running fall; position: fixed; top: -50px; }
@keyframes fall { 
  100% { transform: translateY(100vh) translateX(var(--drift)) rotate(var(--rotation)); opacity: 0; }
}
.announcement-card { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 12px; transition: 0.3s; overflow: hidden; }
.announcement-card.is-new { border-color: rgba(0, 122, 255, 0.4); box-shadow: rgba(0, 122, 255, 0.05) 0px 4px 12px; }
.announcement-header { cursor: pointer; user-select: none; justify-content: space-between; align-items: center; padding: 14px 18px; display: flex; }
.announcement-header:hover { background: rgba(0, 122, 255, 0.02); }
.announcement-title-row { flex: 1 1 0%; align-items: center; gap: 10px; display: flex; }
.ann-badge { text-transform: uppercase; border-radius: 4px; padding: 2px 8px; font-size: 0.7rem; font-weight: 700; }
.ann-badge.info { color: var(--color-primary); background: rgba(0, 122, 255, 0.1); }
.ann-badge.success, .ann-badge.update { color: rgb(16, 185, 129); background: rgba(16, 185, 129, 0.1); }
.announcement-card.is-pinned { background: linear-gradient(to right, #f59e0b08, var(--bg-input)); border-color: rgba(245, 158, 11, 0.3); }
.ann-pin-icon { color: rgb(245, 158, 11); align-items: center; font-size: 1rem; display: flex; }
.ann-badge.warning { color: rgb(255, 159, 67); background: rgba(255, 159, 67, 0.1); }
.ann-badge.important { color: var(--color-danger); background: rgba(255, 71, 87, 0.1); }
.ann-badge.new_feature { color: rgb(46, 213, 115); background: rgba(46, 213, 115, 0.1); }
.ann-title { color: var(--text-primary); font-size: 0.95rem; font-weight: 600; }
.ann-new-tag { background: var(--color-danger); color: rgb(255, 255, 255); border-radius: 3px; padding: 1px 5px; font-size: 0.65rem; font-weight: 900; animation: 2s ease 0s infinite normal none running pulse; }
.announcement-meta { align-items: center; gap: 12px; display: flex; }
.ann-date { color: var(--text-secondary); opacity: 0.7; font-family: monospace; font-size: 0.8rem; }
@media (max-width: 600px) {
  .announcement-header { flex-direction: column; gap: 10px; align-items: flex-start !important; }
  .announcement-title-row { flex-wrap: wrap; width: 100%; }
  .announcement-meta { border-top: 1px dashed rgba(255, 255, 255, 0.05); justify-content: space-between; width: 100%; padding-top: 8px; }
  .feedback-title { flex-direction: column; gap: 4px; align-items: flex-start !important; }
  .feedback-title-text { font-size: 1.05rem; }
  .feedback-subtitle { font-size: 0.7rem; }
  .feedback-desc { margin-bottom: 15px; font-size: 0.78rem; line-height: 1.45; }
  .announcement-content { overflow-x: auto; }
  .announcement-content table { min-width: 500px; font-size: 0.75rem; }
  .announcement-content table td, .announcement-content table th { min-width: 60px; padding: 6px 8px; }
}
.expand-icon { color: var(--text-secondary); font-size: 1.2rem; transition: transform 0.3s; }
.announcement-collapse-wrapper { overflow: hidden; }
.announcement-content { color: var(--text-primary); margin-top: 0px; font-size: 0.9rem; line-height: 1.6; border-top: 1px dashed var(--border-color) !important; padding: 18px !important; }
.announcement-content table { border-collapse: collapse; table-layout: auto; margin: 1em 0px; font-size: 0.82rem; width: 100% !important; }
.announcement-content table td, .announcement-content table th { border: 1px solid var(--border-color,#ddd); vertical-align: top; word-break: break-word; white-space: normal; padding: 8px 10px; }
.announcement-content table th { text-align: center; background: rgba(128, 128, 128, 0.08); font-weight: 600; }
.announcement-content img { border-radius: 8px; max-width: 100%; margin: 12px auto; display: block; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; height: auto !important; }
.side-new-dot { background: var(--color-danger); border-radius: 50%; width: 6px; height: 6px; position: absolute; top: 6px; right: 6px; }
@keyframes pulse { 
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}
.expand-enter-active, .expand-leave-active { opacity: 1; max-height: 500px; transition: 0.3s; }
.expand-enter-from, .expand-leave-to { opacity: 0; max-height: 0px; padding-top: 0px; padding-bottom: 0px; overflow: hidden; }
.tab-content a:not(.btn), .announcement-content a:not(.btn) { color: var(--color-primary); border-bottom: 1px dashed rgba(0, 122, 255, 0.2); padding: 0px 2px; font-weight: 500; text-decoration: none; transition: 0.2s; }
.tab-content a:not(.btn):hover, .announcement-content a:not(.btn):hover { color: var(--color-primary-hover,#006ae6); border-bottom-color: var(--color-primary-hover,#006ae6); background: rgba(0, 122, 255, 0.08); border-radius: 4px; }
.tab-content a:not(.btn):active, .announcement-content a:not(.btn):active { opacity: 0.7; }
.avatar-glow-container { background: var(--bg-editor); border: 3px solid var(--color-primary); box-shadow: 0 0 15px var(--color-primary-40,#007aff4d); cursor: pointer; border-radius: 50%; flex-shrink: 0; justify-content: center; align-items: center; width: 86px; height: 86px; margin: 0px auto; padding: 4px; transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; }
.avatar-glow-container:hover { box-shadow: 0 0 25px var(--color-primary-40,#007aff80); transform: scale(1.08) rotate(3deg); }
.about-author-avatar { object-fit: cover; border-radius: 50%; flex-shrink: 0; width: 72px; height: 72px; display: block; }
.avatar-glow-container.is-cat { border-color: rgb(255, 102, 153) !important; box-shadow: rgba(255, 102, 153, 0.4) 0px 0px 20px !important; }
.avatar-glow-container.is-cat:hover { box-shadow: rgb(255, 102, 153) 0px 0px 30px, rgba(255, 204, 0, 0.5) 0px 0px 50px !important; }
.donation-thanks-section { border-top: 1px dashed var(--border-color); margin-top: 30px; padding-top: 20px; }
.donation-list { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 15px; padding: 20px; display: grid; }
.donation-card { background: var(--bg-card,#ffffff0d); border: 1px solid var(--border-color); border-radius: 12px; flex-direction: column; gap: 8px; padding: 15px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: 0.5s ease 0s 1 normal backwards running cardFadeIn; display: flex; position: relative; }
.donation-card:hover { transform: translateY(-5px); box-shadow: rgba(0, 0, 0, 0.08) 0px 12px 30px; }
.donation-card.has-border { border-width: 2px; }
@property --border-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.donation-card.has-gradient-border { background-origin: padding-box, padding-box, border-box; background-clip: padding-box, padding-box, border-box; background-image: linear-gradient(var(--bg-card,#ffffff0d), var(--bg-card,#ffffff0d)), linear-gradient(#111113, #111113), var(--custom-gradient); animation: 0.5s ease 0s 1 normal backwards running cardFadeIn, 4s linear 0s infinite normal none running spinConic; border: 2.8px solid rgba(0, 0, 0, 0) !important; }
.donation-card.has-gradient-border::before { content: ""; background-image: var(--custom-gradient); filter: blur(14px); opacity: 0.65; z-index: -1; border-radius: inherit; will-change: transform, filter, opacity; pointer-events: none; background-origin: content-box; background-clip: content-box; padding: 28px; transition: 0.4s; animation: 4s linear 0s infinite normal none running spinConic; position: absolute; inset: -28px; transform: translate(0px, 0px); mask-image: linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)), linear-gradient(rgb(255, 255, 255), rgb(255, 255, 255)); mask-clip: content-box, border-box; mask-composite: exclude; }
.donation-card.has-gradient-border:hover::before { filter: blur(20px); opacity: 0.8; padding: 35px; inset: -35px; }
html[data-theme="dark"] .donation-card.has-gradient-border::before { opacity: 0.55; filter: blur(14px); }
html[data-theme="dark"] .donation-card.has-gradient-border { background-image: linear-gradient(var(--bg-card,#0003), var(--bg-card,#0003)), linear-gradient(#0c0c0e, #0c0c0e), var(--custom-gradient); }
@keyframes spinConic { 
  0% { --border-angle: 0deg; }
  100% { --border-angle: 360deg; }
}
@keyframes cardFadeIn { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.donor-header { justify-content: space-between; align-items: center; gap: 8px; display: flex; }
.donor-nickname { color: var(--text-primary); white-space: nowrap; scrollbar-width: none; font-size: 0.95rem; font-weight: 700; overflow-x: auto; }
.donor-nickname::-webkit-scrollbar { display: none; }
.donor-amount { color: var(--color-primary); flex-shrink: 0; font-family: monospace; font-size: 0.9rem; font-weight: 900; }
.donor-remark { color: var(--text-secondary); word-break: break-all; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.8em; font-size: 0.8rem; line-height: 1.4; display: -webkit-box; overflow: hidden; }
.donor-date { color: var(--text-placeholder); text-align: right; opacity: 0.8; margin-top: auto; font-family: monospace; font-size: 0.7rem; }
.donation-empty { text-align: center; background: var(--bg-input); color: var(--text-secondary); border-radius: 12px; grid-column: 1 / -1; padding: 40px; }
.faq-search-input-container { align-items: center; width: 100%; display: flex; position: relative; }
.faq-search-input { transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; }
.faq-search-input:focus { border-color: var(--color-primary) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary), transparent 85%) !important; }
.faq-card { background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 12px; margin-bottom: 12px; padding: 16px; transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1); }
.faq-card:hover { border-color: color-mix(in srgb, var(--color-primary), transparent 60%); transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.03) 0px 4px 12px; }
.faq-question { color: var(--text-primary); align-items: flex-start; gap: 8px; margin-bottom: 8px; font-size: 0.92rem; font-weight: 700; line-height: 1.4; display: flex; }
.faq-answer-content { color: var(--text-secondary); font-size: 0.82rem; line-height: 1.6; padding: 0px !important; }
.faq-answer-content p { margin-bottom: 6px; }
.faq-answer-content p:last-child { margin-bottom: 0px; }
.faq-answer-content a { color: var(--color-primary); text-decoration: underline; }
.faq-tags-filter-container::-webkit-scrollbar { display: none; }
.tag-filter-btn:hover { border-color: var(--color-primary) !important; color: var(--text-primary) !important; }
.tag-filter-btn.active { box-shadow: rgba(0, 122, 255, 0.2) 0px 2px 8px; background: var(--color-primary) !important; color: rgb(255, 255, 255) !important; border-color: var(--color-primary) !important; }
@keyframes modalScaleIn-8e861ccd { 
  0% { opacity: 0; transform: scale(0.96) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.modal-actions[data-v-8e861ccd] { justify-content: flex-end; gap: 12px; margin-top: 24px; display: flex; }
.modal-actions .btn[data-v-8e861ccd] { cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 10px; width: auto; min-width: 90px; padding: 10px 20px; font-size: 0.95rem; font-weight: 600; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.modal-actions .btn[data-v-8e861ccd]:hover { filter: brightness(1.05); transform: translateY(-1px); }
.modal-actions .btn[data-v-8e861ccd]:active { filter: brightness(0.95); transform: scale(0.96); }
.btn-default[data-v-8e861ccd] { background: var(--bg-section,#f3f3f3); color: var(--text-primary,#333); border: 1px solid var(--border-color) !important; }
.btn-primary[data-v-8e861ccd] { background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary), black 20%)); color: rgb(255, 255, 255); box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary), transparent 80%); }
.btn-danger[data-v-8e861ccd] { color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(255, 77, 79), rgb(217, 54, 62)); box-shadow: rgba(255, 77, 79, 0.2) 0px 4px 12px; }
.btn-success[data-v-8e861ccd] { color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(82, 196, 26), rgb(56, 158, 13)); }
.res-manager-modal[data-v-c7424a1f] { border-radius: 12px; flex-direction: column; width: 90%; max-width: 850px; height: 85vh; padding: 0px; display: flex; overflow: hidden; }
.modal-header[data-v-c7424a1f] { border-bottom: 1px solid var(--border-color); background: var(--bg-editor); justify-content: space-between; align-items: center; padding: 16px 20px; display: flex; }
.modal-header h3[data-v-c7424a1f] { margin: 0px; font-size: 1.2rem; font-weight: 600; }
.close-icon-btn[data-v-c7424a1f] { color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 1.5rem; line-height: 1; }
.tabs-container[data-v-c7424a1f] { background: var(--bg-editor); border-bottom: 1px solid var(--border-color); padding: 0px 10px; }
.tabs[data-v-c7424a1f] { gap: 4px; display: flex; }
.tab-btn[data-v-c7424a1f] { cursor: pointer; color: var(--text-secondary); background: 0px 0px; border-width: medium medium 3px; border-style: none none solid; border-color: currentcolor currentcolor rgba(0, 0, 0, 0); border-image: initial; align-items: center; gap: 8px; padding: 12px 20px; font-size: 0.95rem; font-weight: 500; transition: 0.2s; display: flex; }
.tab-btn[data-v-c7424a1f]:hover { background: var(--bg-input); color: var(--text-primary); }
.tab-btn.active[data-v-c7424a1f] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.modal-body-scroll[data-v-c7424a1f] { background: var(--bg-input); flex: 1 1 0%; padding: 0px; overflow-y: auto; }
.tab-pane[data-v-c7424a1f] { padding: 20px; animation: 0.3s ease-out 0s 1 normal none running slideUp-c7424a1f; }
@keyframes slideUp-c7424a1f { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.pane-header[data-v-c7424a1f] { border-bottom: 1px dashed var(--border-color); justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; display: flex; }
.count-badge[data-v-c7424a1f] { color: var(--text-primary); margin-bottom: 4px; font-size: 1rem; font-weight: 700; display: block; }
.sub-text[data-v-c7424a1f] { color: var(--text-secondary); font-size: 0.8rem; }
.centered-state[data-v-c7424a1f] { text-align: center; color: var(--text-secondary); flex-direction: column; justify-content: center; align-items: center; padding: 80px 20px; display: flex; }
.centered-state .big-icon[data-v-c7424a1f] { opacity: 0.3; margin-bottom: 15px; font-size: 4rem; }
.loading-spinner[data-v-c7424a1f] { border-top-style: ; border-top-width: ; border-right-color: ; border-right-style: ; border-right-width: ; border-bottom-color: ; border-bottom-style: ; border-bottom-width: ; border-left-color: ; border-left-style: ; border-left-width: ; border-image-source: ; border-image-slice: ; border-image-width: ; border-image-outset: ; border-image-repeat: ; border-top-color: var(--color-primary); border-radius: 50%; width: 30px; height: 30px; margin-bottom: 15px; animation: 0.8s linear 0s infinite normal none running spin-c7424a1f; }
@keyframes spin-c7424a1f { 
  100% { transform: rotate(360deg); }
}
.resource-grid[data-v-c7424a1f] { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; display: grid; }
.resource-item[data-v-c7424a1f] { background: var(--bg-card); border: 2px solid var(--border-color); border-radius: 8px; transition: 0.2s; overflow: hidden; }
.resource-item[data-v-c7424a1f]:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; }
.resource-item.in-use[data-v-c7424a1f] { border-color: var(--color-primary); }
.img-preview[data-v-c7424a1f] { background-color: rgb(26, 26, 26); background-position: 50% center; background-size: cover; height: 120px; position: relative; }
.in-use-badge[data-v-c7424a1f] { background: var(--color-primary); color: rgb(255, 255, 255); border-radius: 4px; padding: 2px 6px; font-size: 0.65rem; font-weight: 700; position: absolute; top: 6px; left: 6px; box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px; }
.item-action-btn[data-v-c7424a1f] { color: rgb(255, 255, 255); cursor: pointer; opacity: 0; backdrop-filter: blur(2px); background: rgba(0, 0, 0, 0.6); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; width: 24px; height: 24px; transition: opacity 0.2s; display: flex; position: absolute; top: 6px; right: 6px; }
.resource-item:hover .item-action-btn[data-v-c7424a1f] { opacity: 1; }
.item-action-btn.delete[data-v-c7424a1f]:hover { background: var(--color-danger); }
.img-meta[data-v-c7424a1f] { background: var(--bg-section); text-align: center; border-top: 1px solid var(--border-color); padding: 6px 10px; }
.size-text[data-v-c7424a1f] { color: var(--text-secondary); font-size: 0.75rem; }
.font-sections[data-v-c7424a1f] { flex-direction: column; gap: 30px; display: flex; }
.section-title[data-v-c7424a1f] { color: var(--text-secondary); letter-spacing: 1px; margin-bottom: 12px; padding-left: 4px; font-size: 0.85rem; font-weight: 700; }
.font-list[data-v-c7424a1f] { flex-direction: column; gap: 8px; display: flex; }
.font-item[data-v-c7424a1f] { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; justify-content: space-between; align-items: center; padding: 12px 16px; transition: border-color 0.2s; display: flex; }
.font-item[data-v-c7424a1f]:hover { border-color: var(--color-primary); }
.font-item.online[data-v-c7424a1f] { border-left: 4px solid var(--color-primary); }
.font-preview-text[data-v-c7424a1f] { color: var(--text-primary); margin-bottom: 4px; font-size: 1.2rem; }
.font-meta[data-v-c7424a1f] { color: var(--text-secondary); font-size: 0.75rem; }
.recycle-list[data-v-c7424a1f] { flex-direction: column; gap: 8px; display: flex; }
.recycle-item[data-v-c7424a1f] { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; justify-content: space-between; align-items: center; padding: 12px 16px; display: flex; }
.item-name[data-v-c7424a1f] { margin-bottom: 4px; font-weight: 600; }
.item-date[data-v-c7424a1f] { color: var(--text-secondary); font-size: 0.75rem; }
.recycle-actions[data-v-c7424a1f] { gap: 12px; display: flex; }
.modal-footer[data-v-c7424a1f] { border-top: 1px solid var(--border-color); background: var(--bg-editor); justify-content: center; padding: 16px 20px; display: flex; }
.btn-small[data-v-c7424a1f] { padding: 6px 12px; font-size: 0.85rem; }
.icon-btn[data-v-c7424a1f] { cursor: pointer; color: var(--text-secondary); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; padding: 8px; transition: 0.2s; }
.icon-btn[data-v-c7424a1f]:hover { background: var(--bg-input); color: var(--text-primary); }
.icon-btn.danger[data-v-c7424a1f]:hover { color: var(--color-danger); background: rgba(255, 0, 0, 0.1); }
.upload-label[data-v-c7424a1f] { cursor: pointer; }
.pane-actions[data-v-c7424a1f] { align-items: center; gap: 12px; display: flex; }
.btn-text[data-v-c7424a1f] { color: var(--color-primary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 4px 8px; font-size: 0.85rem; text-decoration: underline; }
.btn-text[data-v-c7424a1f]:hover { opacity: 0.8; }
.storage-status-banner[data-v-c7424a1f] { background: var(--bg-editor); border-bottom: 1px solid var(--border-color); flex-direction: column; gap: 8px; padding: 12px 20px; display: flex; }
.storage-info-row[data-v-c7424a1f] { justify-content: space-between; align-items: center; display: flex; }
.storage-label[data-v-c7424a1f] { color: var(--text-secondary); align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 600; display: flex; }
.storage-usage-text[data-v-c7424a1f] { font-family: monospace; font-size: 0.85rem; }
.storage-usage-text .used[data-v-c7424a1f] { color: var(--color-primary); font-weight: 700; }
.storage-usage-text .sep[data-v-c7424a1f] { opacity: 0.5; margin: 0px 4px; }
.storage-usage-text .percent[data-v-c7424a1f] { margin-left: 6px; font-weight: 700; }
.storage-progress[data-v-c7424a1f] { background: rgba(0, 0, 0, 0.1); border-radius: 3px; height: 6px; overflow: hidden; }
.storage-progress-fill[data-v-c7424a1f] { background: var(--color-primary); border-radius: 3px; height: 100%; transition: width 0.3s; }
.storage-progress-fill.warning[data-v-c7424a1f] { background: rgb(245, 158, 11); }
.storage-progress-fill.danger[data-v-c7424a1f] { background: rgb(239, 68, 68); }
.storage-warning[data-v-c7424a1f] { color: rgb(239, 68, 68); align-items: center; gap: 4px; font-size: 0.75rem; font-weight: 500; animation: 2.5s ease 0s infinite normal none running storagePulse-c7424a1f; display: flex; }
@keyframes storagePulse-c7424a1f { 
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}
.stickers-manager-modal[data-v-a0230752] { background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 12px; flex-direction: column; width: 90%; max-width: 850px; height: 85vh; padding: 0px; animation: 0.25s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running modalEnter-a0230752; display: flex; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.4) 0px 20px 45px; }
@keyframes modalEnter-a0230752 { 
  0% { opacity: 0; transform: scale(0.96) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.modal-header[data-v-a0230752] { border-bottom: 1px solid var(--border-color); background: var(--bg-editor); justify-content: space-between; align-items: center; padding: 16px 20px; display: flex; }
.header-title-row[data-v-a0230752] { align-items: center; gap: 10px; display: flex; }
.header-icon[data-v-a0230752] { color: var(--color-primary); font-size: 1.4rem; }
.modal-header h3[data-v-a0230752] { color: var(--text-primary); margin: 0px; font-size: 1.15rem; font-weight: 600; }
.close-icon-btn[data-v-a0230752] { color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; font-size: 1.5rem; line-height: 1; transition: color 0.2s; }
.close-icon-btn[data-v-a0230752]:hover { color: var(--color-danger); }
.tabs-container[data-v-a0230752] { background: var(--bg-editor); border-bottom: 1px solid var(--border-color); padding: 0px 12px; }
.tabs[data-v-a0230752] { gap: 4px; display: flex; }
.tab-btn[data-v-a0230752] { cursor: pointer; color: var(--text-secondary); background: 0px 0px; border-width: medium medium 3px; border-style: none none solid; border-color: currentcolor currentcolor rgba(0, 0, 0, 0); border-image: initial; align-items: center; gap: 8px; padding: 12px 20px; font-size: 0.92rem; font-weight: 500; transition: 0.2s; display: flex; }
.tab-btn[data-v-a0230752]:hover { background: var(--bg-input); color: var(--text-primary); }
.tab-btn.active[data-v-a0230752] { color: var(--color-primary); border-bottom-color: var(--color-primary); background: rgba(var(--color-primary-rgb,100, 100, 255), .05); }
.modal-body-scroll[data-v-a0230752] { background: var(--bg-editor); flex: 1 1 0%; padding: 0px; overflow-y: auto; }
.tab-pane[data-v-a0230752] { flex-direction: column; height: 100%; padding: 20px; display: flex; }
.pane-header[data-v-a0230752] { border-bottom: 1px dashed var(--border-color); justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 16px; padding-bottom: 12px; display: flex; }
.count-badge[data-v-a0230752] { color: var(--text-primary); margin-bottom: 4px; font-size: 1rem; font-weight: 700; display: block; }
.sub-text[data-v-a0230752] { color: var(--text-secondary); font-size: 0.78rem; }
.search-box-container[data-v-a0230752] { width: 250px; position: relative; }
.search-icon[data-v-a0230752] { color: var(--text-secondary); pointer-events: none; position: absolute; top: 50%; left: 10px; transform: translateY(-50%); }
.search-input[data-v-a0230752] { background: var(--bg-input); border: 1px solid var(--border-color); width: 100%; color: var(--text-primary); border-radius: 6px; outline: none; padding: 6px 12px 6px 32px; font-size: 0.85rem; transition: 0.25s; }
.search-input[data-v-a0230752]:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb,100, 100, 255), .25); }
.centered-state[data-v-a0230752] { text-align: center; color: var(--text-secondary); flex-direction: column; justify-content: center; align-items: center; padding: 60px 20px; display: flex; }
.centered-state .big-icon[data-v-a0230752] { opacity: 0.25; color: var(--text-secondary); margin-bottom: 12px; font-size: 3.5rem; }
.centered-state p[data-v-a0230752] { color: var(--text-primary); margin: 0px 0px 6px; font-size: 0.95rem; font-weight: 500; }
.centered-state small[data-v-a0230752] { opacity: 0.8; font-size: 0.8rem; }
.stickers-grid[data-v-a0230752] { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; padding-bottom: 20px; display: grid; }
.sticker-item-card[data-v-a0230752] { background: var(--bg-card); border: 1.5px solid var(--border-color); cursor: pointer; border-radius: 8px; flex-direction: column; transition: 0.22s; display: flex; position: relative; overflow: hidden; }
.sticker-item-card[data-v-a0230752]:hover { border-color: var(--color-primary); transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.25) 0px 6px 16px; }
.sticker-item-card.pinned[data-v-a0230752] { border-color: var(--color-primary); box-shadow: 0 0 0 1px rgba(var(--color-primary-rgb,100, 100, 255), .15); }
.sticker-preview[data-v-a0230752] { border-bottom: 1px solid var(--border-color); justify-content: center; align-items: center; height: 110px; display: flex; position: relative; overflow: hidden; }
.preview-img-wrapper[data-v-a0230752] { background-position: 50% center; background-repeat: no-repeat; background-size: contain; width: 90%; height: 90%; }
.checkerboard-bg[data-v-a0230752] { background-color: rgb(23, 23, 23); background-image: linear-gradient(45deg, rgb(37, 37, 37) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(-45deg, rgb(37, 37, 37) 25%, rgba(0, 0, 0, 0) 25%), linear-gradient(45deg, rgba(0, 0, 0, 0) 75%, rgb(37, 37, 37) 75%), linear-gradient(-45deg, rgba(0, 0, 0, 0) 75%, rgb(37, 37, 37) 75%); background-position: 0px 0px, 0px 7px, 7px -7px, -7px 0px; background-size: 14px 14px; }
.pinned-badge[data-v-a0230752] { background: var(--color-primary); color: rgb(255, 255, 255); border-radius: 4px; justify-content: center; align-items: center; width: 20px; height: 20px; font-size: 0.8rem; display: flex; position: absolute; top: 6px; left: 6px; box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px; }
.source-badge[data-v-a0230752] { color: rgb(255, 255, 255); text-overflow: ellipsis; white-space: nowrap; backdrop-filter: blur(2px); text-align: center; background: rgba(0, 0, 0, 0.75); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 4px; padding: 3px 6px; font-size: 0.65rem; position: absolute; bottom: 6px; left: 6px; right: 6px; overflow: hidden; }
.sticker-hover-actions[data-v-a0230752] { backdrop-filter: blur(2px); opacity: 0; background: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; gap: 12px; transition: opacity 0.2s; display: flex; position: absolute; inset: 0px; }
.sticker-item-card:hover .sticker-hover-actions[data-v-a0230752] { opacity: 1; }
.action-btn[data-v-a0230752] { color: rgb(255, 255, 255); cursor: pointer; background: rgba(255, 255, 255, 0.15); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; width: 32px; height: 32px; transition: 0.2s; display: flex; }
.action-btn[data-v-a0230752]:hover { background: rgba(255, 255, 255, 0.3); transform: scale(1.1); }
.pin-btn.is-pinned[data-v-a0230752] { color: var(--color-primary); background: rgb(255, 255, 255); }
.use-btn[data-v-a0230752] { background: var(--color-primary,#6464ff) !important; color: rgb(255, 255, 255) !important; }
.use-btn[data-v-a0230752]:hover { box-shadow: 0 0 10px var(--color-primary,#6464ff); background: var(--color-primary-hover,#4d4dff) !important; }
.delete-btn[data-v-a0230752]:hover { background: var(--color-danger) !important; }
.sticker-footer-meta[data-v-a0230752] { background: var(--bg-card); flex-direction: column; justify-content: center; gap: 2px; min-height: 46px; padding: 8px 10px; display: flex; }
.sticker-name-label[data-v-a0230752] { color: var(--text-primary); text-overflow: ellipsis; white-space: nowrap; text-align: left; font-size: 0.8rem; font-weight: 500; overflow: hidden; }
.rename-input[data-v-a0230752] { background: var(--bg-input); border: 1px solid var(--color-primary); width: 100%; color: var(--text-primary); border-radius: 4px; outline: none; padding: 2px 6px; font-size: 0.8rem; }
.date-badge[data-v-a0230752] { color: var(--text-secondary); text-align: left; font-size: 0.65rem; }
.extractor-card[data-v-a0230752] { cursor: default; }
.extractor-card[data-v-a0230752]:hover { box-shadow: none; border-color: var(--border-color); transform: none; }
.extractor-footer-actions[data-v-a0230752] { background: var(--bg-section); border-top: 1px solid var(--border-color); gap: 6px; padding: 8px; display: flex; }
.flex-btn[data-v-a0230752] { flex: 1 1 0%; justify-content: center; align-items: center; gap: 3px; padding: 6px 4px; font-size: 0.72rem; display: flex; }
.pane-upload-section[data-v-a0230752] { border-top: 1px solid var(--border-color); margin-top: 10px; padding-top: 20px; }
.drag-upload-box[data-v-a0230752] { border: 2px dashed var(--border-color); background: var(--bg-input); text-align: center; cursor: pointer; border-radius: 8px; flex-direction: column; justify-content: center; align-items: center; padding: 20px 16px; transition: 0.22s; display: flex; }
.drag-upload-box[data-v-a0230752]:hover, .drag-upload-box.dragging[data-v-a0230752] { border-color: var(--color-primary); background: rgba(var(--color-primary-rgb,100, 100, 255), .04); }
.upload-arrow[data-v-a0230752] { color: var(--text-secondary); margin-bottom: 8px; font-size: 2.2rem; transition: transform 0.2s; }
.drag-upload-box:hover .upload-arrow[data-v-a0230752] { color: var(--color-primary); transform: translateY(-2px); }
.upload-title[data-v-a0230752] { color: var(--text-primary); margin: 0px 0px 4px; font-size: 0.88rem; font-weight: 600; }
.upload-subtitle[data-v-a0230752] { color: var(--text-secondary); margin: 0px; font-size: 0.75rem; }
.modal-footer[data-v-a0230752] { border-top: 1px solid var(--border-color); background: var(--bg-editor); justify-content: flex-end; gap: 12px; padding: 16px 20px; display: flex; }
.btn-small[data-v-a0230752] { padding: 5px 10px; font-size: 0.8rem; }
.preview-text-wrapper[data-v-a0230752] { text-align: center; text-overflow: ellipsis; -webkit-line-clamp: 3; user-select: none; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 4px; -webkit-box-orient: vertical; max-width: 90%; max-height: 90%; padding: 10px; font-size: 0.88rem; font-weight: 700; line-height: 1.35; display: -webkit-box; overflow: hidden; }
.preview-icon-wrapper[data-v-a0230752] { filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 4px 10px); justify-content: center; align-items: center; font-size: 3.2rem; display: flex; }
.preview-shape-wrapper[data-v-a0230752] { justify-content: center; align-items: center; width: 90%; height: 90%; display: flex; }
.shape-indicator[data-v-a0230752] { text-transform: uppercase; letter-spacing: 0.5px; border-radius: 4px; padding: 5px 10px; font-size: 0.72rem; font-weight: 800; }
.shape-indicator.tape[data-v-a0230752] { color: rgb(17, 17, 17); text-align: center; background: rgb(255, 204, 0); border: 1px dashed rgba(0, 0, 0, 0.15); width: 85%; transform: rotate(-3deg); box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 10px; }
.shape-indicator.circle[data-v-a0230752] { padding: 0px; font-size: 3.2rem; line-height: 1; }
.shape-indicator.highlight[data-v-a0230752] { color: rgb(255, 204, 0); background: rgba(255, 204, 0, 0.2); border-bottom: 3.5px solid rgb(255, 204, 0); }
.shape-indicator.underline[data-v-a0230752] { border-bottom: 2.5px solid var(--text-primary); border-radius: 0px; padding-bottom: 2px; }
.shape-indicator.generic[data-v-a0230752] { padding: 0px; font-size: 2.2rem; }
@keyframes modal-enter-e0b79816 { 
  0% { opacity: 0; transform: scale(0.92) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.modal-header[data-v-e0b79816] { background: 0px 0px !important; border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; justify-content: space-between !important; align-items: center !important; padding: 20px 24px !important; display: flex !important; }
.header-title-row[data-v-e0b79816] { align-items: center !important; gap: 12px !important; display: flex !important; }
.header-icon[data-v-e0b79816] { color: rgb(108, 92, 231) !important; flex-shrink: 0 !important; width: 1.6rem !important; height: 1.6rem !important; font-size: 1.6rem !important; }
.modal-header h3[data-v-e0b79816] { color: rgb(30, 30, 36) !important; margin: 0px !important; font-size: 1.25rem !important; font-weight: 700 !important; }
.close-icon-btn[data-v-e0b79816] { color: rgb(74, 85, 104) !important; cursor: pointer !important; background: rgba(0, 0, 0, 0.05) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; border-radius: 50% !important; outline: none !important; justify-content: center !important; align-items: center !important; width: 32px !important; height: 32px !important; font-size: 20px !important; line-height: 1 !important; transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important; display: flex !important; }
.close-icon-btn[data-v-e0b79816]:hover { color: rgb(239, 68, 68) !important; background: rgba(239, 68, 68, 0.1) !important; transform: rotate(90deg) scale(1.1) !important; }
.modal-body-scroll[data-v-e0b79816] { flex: 1 1 0% !important; padding: 24px !important; overflow-y: auto !important; }
.strategy-selector-section[data-v-e0b79816] { background: rgba(0, 0, 0, 0.02) !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; border-radius: 14px !important; margin-bottom: 24px !important; padding: 16px 20px !important; }
.section-title[data-v-e0b79816] { color: rgb(45, 55, 72) !important; margin: 0px 0px 12px !important; font-size: 0.9rem !important; font-weight: 700 !important; }
.segmented-control[data-v-e0b79816] { background: rgba(0, 0, 0, 0.05) !important; border: 1px solid rgba(0, 0, 0, 0.02) !important; border-radius: 12px !important; gap: 4px !important; margin-bottom: 12px !important; padding: 4px !important; display: flex !important; }
.seg-btn[data-v-e0b79816] { cursor: pointer !important; color: rgb(74, 85, 104) !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; border-radius: 9px !important; outline: none !important; flex: 1 1 0% !important; justify-content: center !important; align-items: center !important; gap: 6px !important; padding: 10px 12px !important; font-size: 0.86rem !important; font-weight: 700 !important; transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important; display: flex !important; }
.seg-btn[data-v-e0b79816]:hover { color: rgb(26, 32, 44) !important; background: rgba(0, 0, 0, 0.02) !important; }
.seg-btn .btn-icon[data-v-e0b79816] { width: 1.05rem !important; height: 1.05rem !important; color: inherit !important; box-shadow: none !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; flex-shrink: 0 !important; margin: 0px !important; padding: 0px !important; font-size: 1.05rem !important; }
.seg-btn.active[data-v-e0b79816] { color: rgb(108, 92, 231) !important; background: rgb(255, 255, 255) !important; box-shadow: rgba(0, 0, 0, 0.06) 0px 4px 12px !important; }
.strategy-tiny-desc[data-v-e0b79816] { animation: 2.5s ease-in-out 0s infinite normal none running pulse-light-e0b79816; color: rgb(108, 92, 231) !important; align-items: center !important; gap: 6px !important; padding: 2px 4px !important; font-size: 0.78rem !important; font-weight: 600 !important; display: flex !important; }
.tiny-info-icon[data-v-e0b79816] { flex-shrink: 0 !important; width: 0.95rem !important; height: 0.95rem !important; font-size: 0.95rem !important; }
@keyframes pulse-light-e0b79816 { 
  0%, 100% { opacity: 0.85; }
  50% { opacity: 1; transform: translate(1px); }
}
.list-meta-header[data-v-e0b79816] { justify-content: space-between !important; align-items: center !important; margin-bottom: 16px !important; padding: 0px 4px !important; display: flex !important; }
.count-badge[data-v-e0b79816] { color: rgb(108, 92, 231) !important; background: rgba(108, 92, 231, 0.08) !important; border-radius: 6px !important; padding: 3px 9px !important; font-size: 0.8rem !important; font-weight: 700 !important; }
.sub-text[data-v-e0b79816] { color: rgb(113, 128, 150) !important; font-size: 0.75rem !important; }
.centered-state[data-v-e0b79816] { text-align: center !important; border: 2px dashed rgba(0, 0, 0, 0.08) !important; border-radius: 16px !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; margin-top: 10px !important; padding: 56px 24px !important; display: flex !important; }
.centered-state .big-icon[data-v-e0b79816] { color: rgb(160, 174, 192) !important; width: 3rem !important; height: 3rem !important; margin-bottom: 14px !important; font-size: 3rem !important; }
.centered-state p[data-v-e0b79816] { color: rgb(45, 55, 72) !important; margin: 0px 0px 6px !important; font-size: 0.95rem !important; font-weight: 700 !important; }
.centered-state small[data-v-e0b79816] { color: rgb(113, 128, 150) !important; max-width: 420px !important; font-size: 0.8rem !important; line-height: 1.5 !important; }
.presets-grid[data-v-e0b79816] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 16px !important; display: grid !important; }
.preset-item-card[data-v-e0b79816] { cursor: pointer !important; background: rgba(255, 255, 255, 0.75) !important; border: 1px solid rgba(0, 0, 0, 0.06) !important; border-radius: 14px !important; flex-direction: column !important; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; display: flex !important; position: relative !important; overflow: hidden !important; box-shadow: rgba(0, 0, 0, 0.02) 0px 2px 8px !important; }
.preset-item-card[data-v-e0b79816]:hover { background: rgb(255, 255, 255) !important; border-color: rgba(108, 92, 231, 0.35) !important; transform: translateY(-5px) !important; box-shadow: rgba(108, 92, 231, 0.1) 0px 16px 36px !important; }
.preset-preview-zone[data-v-e0b79816] { background: rgba(0, 0, 0, 0.01) !important; border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; height: 110px !important; display: flex !important; position: relative !important; overflow: hidden !important; }
.preset-thumbnail-preview[data-v-e0b79816] { opacity: 0.95 !important; box-sizing: border-box !important; background-position: 50% center !important; background-repeat: no-repeat !important; background-size: contain !important; width: 100% !important; height: 100% !important; padding: 8px !important; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; position: absolute !important; top: 0px !important; left: 0px !important; }
.preset-item-card:hover .preset-thumbnail-preview[data-v-e0b79816] { opacity: 1 !important; transform: scale(1.06) !important; }
.module-icon-badge[data-v-e0b79816] { color: rgb(255, 255, 255) !important; border-radius: 12px !important; justify-content: center !important; align-items: center !important; width: 46px !important; height: 46px !important; font-size: 1.5rem !important; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; display: flex !important; box-shadow: rgba(0, 0, 0, 0.08) 0px 8px 20px !important; }
.module-icon-badge[data-v-e0b79816] svg { width: 1.5rem !important; height: 1.5rem !important; }
.preset-item-card:hover .module-icon-badge[data-v-e0b79816] { transform: scale(1.1) rotate(-3deg) !important; }
.type-tag[data-v-e0b79816] { color: rgb(74, 85, 104) !important; z-index: 2 !important; background: rgba(0, 0, 0, 0.05) !important; border-radius: 5px !important; padding: 2px 6px !important; font-size: 0.7rem !important; font-weight: 700 !important; position: absolute !important; bottom: 6px !important; right: 6px !important; }
.preset-hover-actions[data-v-e0b79816] { backdrop-filter: blur(5px) !important; opacity: 0 !important; pointer-events: none !important; z-index: 5 !important; background: rgba(255, 255, 255, 0.75) !important; justify-content: center !important; align-items: center !important; gap: 12px !important; width: 100% !important; height: 100% !important; transition: opacity 0.22s !important; display: flex !important; position: absolute !important; top: 0px !important; left: 0px !important; }
.preset-item-card:hover .preset-hover-actions[data-v-e0b79816] { opacity: 1 !important; pointer-events: auto !important; }
.action-btn[data-v-e0b79816] { cursor: pointer !important; border: 1px solid rgba(0, 0, 0, 0.05) !important; border-radius: 50% !important; outline: none !important; justify-content: center !important; align-items: center !important; width: 36px !important; height: 36px !important; font-size: 1.1rem !important; transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important; display: flex !important; box-shadow: rgba(0, 0, 0, 0.04) 0px 4px 10px !important; }
.action-btn[data-v-e0b79816] svg { width: 1.1rem !important; height: 1.1rem !important; }
.action-btn.use-btn[data-v-e0b79816] { color: rgb(255, 255, 255) !important; background: rgb(108, 92, 231) !important; }
.action-btn.use-btn[data-v-e0b79816]:hover { background: rgb(95, 39, 205) !important; transform: scale(1.15) !important; box-shadow: rgba(108, 92, 231, 0.3) 0px 6px 14px !important; }
.action-btn.delete-btn[data-v-e0b79816] { color: rgb(255, 77, 79) !important; background: rgb(255, 255, 255) !important; }
.action-btn.delete-btn[data-v-e0b79816]:hover { color: rgb(255, 255, 255) !important; background: rgb(255, 77, 79) !important; transform: scale(1.15) !important; box-shadow: rgba(255, 77, 79, 0.25) 0px 6px 14px !important; }
.preset-footer-meta[data-v-e0b79816] { background: 0px 0px !important; flex-direction: column !important; gap: 4px !important; padding: 10px 12px !important; display: flex !important; }
.preset-name-label[data-v-e0b79816] { color: rgb(45, 55, 72) !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-size: 0.82rem !important; font-weight: 700 !important; overflow: hidden !important; }
.rename-input[data-v-e0b79816] { color: rgb(26, 32, 44) !important; background: rgb(255, 255, 255) !important; border: 1px solid rgb(108, 92, 231) !important; border-radius: 5px !important; outline: none !important; width: 100% !important; padding: 3px 6px !important; font-size: 0.8rem !important; box-shadow: rgba(108, 92, 231, 0.1) 0px 0px 0px 2px !important; }
.date-badge[data-v-e0b79816] { color: rgb(113, 128, 150) !important; font-size: 0.7rem !important; }
@keyframes modal-enter-mini-3ad670a7 { 
  0% { opacity: 0; transform: scale(0.9) translateY(15px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.modal-header-mini[data-v-3ad670a7] { border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important; justify-content: space-between !important; align-items: center !important; padding: 16px 20px !important; display: flex !important; }
.title-row[data-v-3ad670a7] { color: rgb(30, 30, 36) !important; align-items: center !important; gap: 8px !important; font-size: 0.95rem !important; font-weight: 700 !important; display: flex !important; }
.mini-icon[data-v-3ad670a7] { color: rgb(108, 92, 231) !important; width: 1.2rem !important; height: 1.2rem !important; font-size: 1.2rem !important; }
.close-mini-btn[data-v-3ad670a7] { color: rgb(113, 128, 150) !important; cursor: pointer !important; background: 0px 0px !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; outline: none !important; font-size: 18px !important; line-height: 1 !important; transition: color 0.2s !important; }
.close-mini-btn[data-v-3ad670a7]:hover { color: rgb(239, 68, 68) !important; }
.modal-body-mini[data-v-3ad670a7] { flex-direction: column !important; gap: 12px !important; padding: 20px !important; display: flex !important; }
.guide-text[data-v-3ad670a7] { color: rgb(45, 55, 72) !important; margin: 0px !important; font-size: 0.84rem !important; font-weight: 700 !important; }
.input-wrapper[data-v-3ad670a7] { width: 100% !important; position: relative !important; }
.preset-name-input[data-v-3ad670a7] { color: rgb(26, 32, 44) !important; box-sizing: border-box !important; background: rgb(255, 255, 255) !important; border: 1.5px solid rgba(0, 0, 0, 0.08) !important; border-radius: 8px !important; outline: none !important; width: 100% !important; padding: 10px 12px !important; font-size: 0.9rem !important; transition: 0.25s !important; }
.preset-name-input[data-v-3ad670a7]:focus { border-color: rgb(108, 92, 231) !important; box-shadow: rgba(108, 92, 231, 0.12) 0px 0px 0px 3px !important; }
.screenshot-hint[data-v-3ad670a7] { color: rgb(74, 85, 104) !important; box-sizing: border-box !important; background: rgba(91, 143, 249, 0.06) !important; border: 1px solid rgba(91, 143, 249, 0.12) !important; border-radius: 8px !important; gap: 8px !important; padding: 10px 12px !important; font-size: 0.76rem !important; line-height: 1.4 !important; display: flex !important; }
.hint-icon[data-v-3ad670a7] { color: rgb(91, 143, 249) !important; flex-shrink: 0 !important; width: 1.1rem !important; height: 1.1rem !important; font-size: 1.1rem !important; }
.modal-footer-mini[data-v-3ad670a7] { background: rgba(0, 0, 0, 0.016) !important; border-top: 1px solid rgba(0, 0, 0, 0.06) !important; justify-content: flex-end !important; gap: 12px !important; padding: 14px 20px !important; display: flex !important; }
.footer-btn[data-v-3ad670a7] { cursor: pointer !important; border-radius: 8px !important; outline: none !important; align-items: center !important; gap: 6px !important; padding: 9px 16px !important; font-size: 0.84rem !important; font-weight: 700 !important; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; display: flex !important; }
.footer-btn[data-v-3ad670a7]:disabled { opacity: 0.65 !important; cursor: not-allowed !important; }
.cancel-btn[data-v-3ad670a7] { color: rgb(74, 85, 104) !important; background: rgb(255, 255, 255) !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; }
.cancel-btn[data-v-3ad670a7]:hover { color: rgb(26, 32, 44) !important; background: rgba(0, 0, 0, 0.02) !important; }
.save-btn[data-v-3ad670a7] { color: rgb(255, 255, 255) !important; background: rgb(108, 92, 231) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; box-shadow: rgba(108, 92, 231, 0.25) 0px 4px 12px !important; }
.save-btn[data-v-3ad670a7]:hover:not(:disabled) { background: rgb(95, 39, 205) !important; transform: translateY(-1px) !important; box-shadow: rgba(108, 92, 231, 0.35) 0px 6px 16px !important; }
.spin-icon[data-v-3ad670a7] { animation: 1s linear 0s infinite normal none running spin-3ad670a7; }
@keyframes spin-3ad670a7 { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.premium-modal[data-v-02e5f725] { background: var(--bg-editor,#fff); width: 90%; max-width: 500px; box-shadow: 0 10px 40px var(--shadow-medium,#0000001a); border: 1px solid var(--border-color,#e0e0e0); border-radius: 16px; padding: 24px; animation: 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running modalScaleIn-02e5f725; }
@keyframes modalScaleIn-02e5f725 { 
  0% { opacity: 0; transform: scale(0.96) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.modal-header h3[data-v-02e5f725] { color: var(--text-primary); margin: 0px 0px 15px; font-size: 1.2rem; font-weight: 700; }
.font-instructions[data-v-02e5f725] { background: var(--bg-input,#f8f9fa); border: 1px solid var(--border-color); border-radius: 10px; margin-bottom: 20px; padding: 12px; font-size: 0.85rem; line-height: 1.6; }
.font-instructions ol[data-v-02e5f725] { margin-top: 8px; margin-left: 20px; }
.font-code-textarea[data-v-02e5f725] { resize: vertical; border-radius: 8px; width: 100%; font-family: "Courier New", Courier, monospace; font-size: 0.85rem; }
.font-import-preview[data-v-02e5f725] { border: 1px dashed var(--color-primary); background: var(--color-primary-bg); border-radius: 8px; align-items: center; gap: 8px; margin-top: 15px; padding: 10px; display: flex; }
.modal-actions[data-v-02e5f725] { justify-content: flex-end; gap: 12px; margin-top: 24px; display: flex; }
.btn-primary[data-v-02e5f725] { background: linear-gradient(135deg, var(--color-primary), color-mix(in srgb, var(--color-primary), black 20%)); color: rgb(255, 255, 255); box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary), transparent 80%); }
.spin[data-v-70333c67] { animation: 1s linear 0s infinite normal none running spin-70333c67; }
@keyframes spin-70333c67 { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.repair-logs[data-v-70333c67]::-webkit-scrollbar { width: 6px; }
.repair-logs[data-v-70333c67]::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }
.template-card[data-v-3a675def]:hover { border-color: var(--color-primary) !important; transform: translateY(-4px) !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 24px !important; }
#template-list-container[data-v-3a675def] { flex: 1 1 100%; min-height: 0px; padding: 5px; overflow: hidden auto; }
.masonry-container[data-v-3a675def] { align-items: flex-start; gap: 15px; display: flex; }
.masonry-column[data-v-3a675def] { flex-direction: column; flex: 1 1 0%; gap: 15px; min-width: 0px; display: flex; }
.template-card[data-v-3a675def] { background: var(--bg-card,#23272f); border: 1px solid var(--border-color,#2d313a); border-radius: 12px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
.template-card-img-wrapper[data-v-3a675def] { background: var(--bg-section,#1a1c22); min-height: 100px; position: relative; overflow: hidden; }
.template-card-img-wrapper img[data-v-3a675def] { width: 100%; height: auto; display: block; }
.btn-tab[data-v-3a675def] { color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; padding: 8px 16px; font-size: 0.9rem; font-weight: 600; transition: 0.2s; }
.btn-tab.active[data-v-3a675def] { background: var(--bg-section); color: var(--color-primary); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; }
.create-page-overlay[data-v-4949b70e] { backdrop-filter: blur(14px); z-index: 2000; background: rgba(0, 0, 0, 0.7); justify-content: center; align-items: center; padding: 20px; display: flex; position: fixed; inset: 0px; }
.create-page-container[data-v-4949b70e] { background: var(--bg-card); border: 1px solid var(--border-color); width: 100%; max-width: 480px; color: var(--text-primary); border-radius: 20px; animation: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0s 1 normal none running modal-pop-4949b70e; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.5) 0px 30px 60px; }
@keyframes modal-pop-4949b70e { 
  0% { opacity: 0; transform: scale(0.9) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.modal-header[data-v-4949b70e] { border-bottom: 1px solid rgba(255, 255, 255, 0.05); justify-content: space-between; align-items: center; padding: 24px 24px 16px; display: flex; }
.header-content h2[data-v-4949b70e] { color: var(--text-primary); margin: 0px; font-size: 1.25rem; font-weight: 700; }
.header-content p[data-v-4949b70e] { color: var(--text-secondary); margin: 4px 0px 0px; font-size: 0.85rem; }
.close-icon-btn[data-v-4949b70e] { cursor: pointer; width: 32px; height: 32px; color: var(--text-secondary); background: rgba(0, 0, 0, 0.2); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; display: flex; }
.composer-body[data-v-4949b70e] { padding: 24px; }
.config-section[data-v-4949b70e] { margin-bottom: 24px; }
.section-label[data-v-4949b70e] { color: var(--text-primary); align-items: center; gap: 6px; margin-bottom: 12px; font-size: 0.9rem; font-weight: 600; display: flex; }
.segmented-control[data-v-4949b70e] { background: var(--bg-input); border-radius: 12px; gap: 2px; padding: 4px; display: flex; }
.segmented-control button[data-v-4949b70e] { color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 10px; font-size: 0.85rem; font-weight: 500; transition: 0.2s; display: flex; }
.segmented-control button.active[data-v-4949b70e] { background: var(--bg-card); color: var(--color-primary); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
.layout-toggle-group[data-v-4949b70e] { border: 1px solid var(--border-color); background: rgba(0, 0, 0, 0.1); border-radius: 14px; padding: 3px; display: flex; }
.layout-btn[data-v-4949b70e] { color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 11px; flex: 1 1 0%; padding: 14px; font-size: 0.95rem; font-weight: 600; transition: 0.2s; position: relative; }
.layout-btn.active[data-v-4949b70e] { background: var(--bg-card); color: var(--text-primary); box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 15px; }
.layout-btn.bento.active[data-v-4949b70e] { color: rgb(255, 177, 59); }
.badge-new[data-v-4949b70e] { color: rgb(255, 255, 255); background: rgb(255, 77, 79); border-radius: 8px; padding: 1px 5px; font-size: 8px; position: absolute; top: 50%; right: 12px; transform: translateY(-50%); }
.checkbox-container[data-v-4949b70e] { cursor: pointer; color: rgb(255, 177, 59); align-items: center; gap: 10px; font-size: 0.9rem; font-weight: 700; display: flex; }
.checkbox-container input[data-v-4949b70e] { display: none; }
.checkmark[data-v-4949b70e] { border: 2px solid rgb(255, 177, 59); border-radius: 4px; width: 18px; height: 18px; position: relative; }
.checkbox-container input:checked + .checkmark[data-v-4949b70e]::after { content: ""; border-style: solid; border-color: rgb(255, 177, 59); border-image: initial; border-width: 0px 2px 2px 0px; width: 5px; height: 10px; position: absolute; top: 1px; left: 5px; transform: rotate(45deg); }
.config-section-advanced[data-v-4949b70e] { border: 1px dashed var(--border-color); background: rgba(0, 0, 0, 0.15); border-radius: 12px; margin-bottom: 20px; padding: 16px; }
.slider-header[data-v-4949b70e] { justify-content: space-between; margin-bottom: 12px; font-size: 0.85rem; display: flex; }
.slider-header .val[data-v-4949b70e] { color: var(--color-primary); }
.preset-group[data-v-4949b70e] { gap: 8px; display: flex; }
.preset-chip[data-v-4949b70e] { border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; background: rgba(255, 255, 255, 0.05); border-radius: 8px; flex: 1 1 0%; padding: 8px; font-size: 0.85rem; transition: 0.2s; }
.preset-chip[data-v-4949b70e]:hover { background: rgba(255, 255, 255, 0.1); }
.preset-chip.active[data-v-4949b70e] { background: var(--color-primary); color: rgb(255, 255, 255); border-color: var(--color-primary); }
.slider-control[data-v-4949b70e] { align-items: center; gap: 12px; display: flex; }
.slider-control input[type="range"][data-v-4949b70e] { accent-color: var(--color-primary); cursor: pointer; flex: 1 1 0%; }
.reset-btn[data-v-4949b70e] { color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; font-size: 1.2rem; }
.modal-footer-advanced[data-v-4949b70e] { gap: 12px; padding: 12px 24px 24px; display: flex; }
.btn-cancel[data-v-4949b70e] { border: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-radius: 12px; flex: 1 1 0%; padding: 14px; font-weight: 500; }
.btn-primary-create[data-v-4949b70e] { background: var(--color-primary); color: rgb(255, 255, 255); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 12px; flex: 2 1 0%; padding: 14px; font-weight: 700; transition: filter 0.2s; }
.btn-primary-create[data-v-4949b70e]:hover { filter: brightness(1.1); }
.april-fools-overlay[data-v-ce873546] { z-index: 9999; backdrop-filter: blur(14px); background: rgba(0, 0, 0, 0.65); justify-content: center; align-items: center; padding: 20px; display: flex; position: fixed; inset: 0px; }
.april-fools-container[data-v-ce873546] { background: var(--bg-card,#fff); border: 1px solid var(--border-color,#ffffff1a); border-radius: 28px; flex-direction: column; width: 100%; max-width: 500px; animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 1 normal none running modal-pop-ce873546; display: flex; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.5) 0px 30px 60px -12px; }
@keyframes modal-pop-ce873546 { 
  0% { opacity: 0; transform: scale(0.9) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.paw-bouncer[data-v-ce873546] { cursor: pointer; z-index: 1000; backdrop-filter: blur(6px); background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 51%; justify-content: center; align-items: center; width: 48px; height: 48px; padding: 0px; transition: color 0.2s, box-shadow 0.2s; display: flex; position: absolute; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 15px; }
.paw-bouncer[data-v-ce873546]:active { transform: scale(0.9) !important; }
.dark-mode .paw-bouncer[data-v-ce873546] { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 15px; }
.modal-header[data-v-ce873546] { text-align: center; padding: 36px 32px 20px; }
.badge[data-v-ce873546] { color: rgb(239, 68, 68); letter-spacing: 1px; background: rgb(254, 226, 226); border-radius: 20px; margin-bottom: 14px; padding: 4px 14px; font-size: 12px; font-weight: 700; display: inline-block; }
.dark-mode .badge[data-v-ce873546] { color: rgb(255, 142, 142); background: rgba(239, 68, 68, 0.2); }
h2[data-v-ce873546] { color: var(--text-primary,#111827); margin: 0px 0px 24px; font-size: 22px; font-weight: 800; line-height: 1.3; }
.tabs[data-v-ce873546] { background: var(--bg-editor,#f3f4f6); border-radius: 14px; padding: 5px; display: flex; }
.tabs button[data-v-ce873546] { cursor: pointer; color: var(--text-secondary,#6b7280); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 10px; flex: 1 1 0%; padding: 10px; font-size: 14px; font-weight: 600; transition: 0.25s; }
.tabs button.active[data-v-ce873546] { background: var(--bg-card,white); color: var(--text-primary,#111827); box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 8px; }
.modal-body-wrapper[data-v-ce873546] { scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; height: clamp(240px, 50vh, 340px); position: relative; overflow-y: auto; }
.modal-content[data-v-ce873546] { min-height: 100%; padding: 24px 32px; position: relative; }
.letter-text[data-v-ce873546] { color: var(--text-secondary,#4b5563); font-size: 15px; line-height: 1.8; }
.letter-salutation[data-v-ce873546] { color: var(--text-primary,#111827); margin-bottom: 18px; font-size: 19px; font-weight: 700; }
.announcement-highlight[data-v-ce873546] { color: var(--text-primary); background: rgba(254, 249, 195, 0.25); border-left: 4px solid rgb(251, 191, 36); border-radius: 6px; margin: 16px 0px; padding: 10px 14px; font-weight: 600; }
.dark-mode .announcement-highlight[data-v-ce873546] { color: rgb(251, 191, 36); background: rgba(251, 191, 36, 0.1); border-left-color: rgb(251, 191, 36); }
.nyan-text[data-v-ce873546] { background: linear-gradient(90deg, red, rgb(255, 153, 0), rgb(255, 255, 0), rgb(51, 255, 0), rgb(0, 153, 255), rgb(102, 51, 255)) text; -webkit-text-fill-color: transparent; filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 0px 1px); font-weight: 900; }
.final-word[data-v-ce873546] { text-align: center; letter-spacing: -0.5px; margin: 28px 0px; font-size: 24px; transform: rotate(-1.5deg); }
.signature[data-v-ce873546] { text-align: right; border-top: 1.5px dashed var(--border-color,#e5e7eb); margin-top: 36px; padding-top: 20px; }
.signature .name[data-v-ce873546] { color: var(--text-primary,#111827); font-size: 17px; font-weight: 700; }
.cat-theme[data-v-ce873546] { background: var(--bg-editor,#fffaf0); }
.dark-mode .cat-theme[data-v-ce873546] { background: var(--bg-editor,#1a1c22); }
.cat-mode[data-v-ce873546] { color: var(--text-primary,#713f12); }
.cat-list[data-v-ce873546] { margin: 20px 0px; padding: 0px; list-style: none; }
.cat-list li[data-v-ce873546] { margin-bottom: 10px; padding-left: 24px; font-weight: 500; position: relative; }
.cat-list li[data-v-ce873546]::before { content: "🐟"; position: absolute; left: 0px; }
.cat-watermark-overlay[data-v-ce873546] { pointer-events: none; z-index: 0; position: absolute; inset: 0px; }
.paw-print[data-v-ce873546] { opacity: 0.12; filter: grayscale(); font-size: 44px; position: absolute; }
.p1[data-v-ce873546] { top: 10%; left: 8%; transform: rotate(-12deg); }
.p2[data-v-ce873546] { font-size: 64px; top: 48%; right: 12%; transform: rotate(18deg); }
.p3[data-v-ce873546] { bottom: 12%; left: 28%; transform: rotate(-8deg); }
.nyan-trail[data-v-ce873546] { opacity: 0.6; background: linear-gradient(90deg, red, rgb(255, 153, 0), rgb(255, 255, 0), rgb(51, 255, 0), rgb(0, 153, 255), rgb(102, 51, 255)); width: 100%; height: 6px; position: absolute; top: 0px; left: 0px; }
.modal-footer[data-v-ce873546] { padding: 16px 32px 36px; }
.action-btn[data-v-ce873546] { background: var(--text-primary,#111827); width: 100%; color: var(--bg-card,white); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 16px; padding: 16px; font-weight: 700; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.nyan-btn[data-v-ce873546] { background: linear-gradient(-45deg, rgb(238, 119, 82), rgb(231, 60, 126), rgb(35, 166, 213), rgb(35, 213, 171)) 0px 0px / 400% 400%; animation: 4s ease 0s infinite normal none running nyan-gradient-ce873546; box-shadow: rgba(231, 60, 126, 0.45) 0px 6px 20px; color: rgb(255, 255, 255) !important; }
@keyframes nyan-gradient-ce873546 { 
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}
.action-btn[data-v-ce873546]:hover { transform: translateY(-3px) scale(1.03); }
.fade-in-enter-active[data-v-ce873546], .fade-in-leave-active[data-v-ce873546] { transition: opacity 0.35s; }
.fade-in-enter-from[data-v-ce873546], .fade-in-leave-to[data-v-ce873546] { opacity: 0; }
.slide-up-enter-active[data-v-ce873546], .slide-up-leave-active[data-v-ce873546] { transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
.slide-up-enter-from[data-v-ce873546] { opacity: 0; transform: translateY(15px); }
.slide-up-leave-to[data-v-ce873546] { opacity: 0; transform: translateY(-15px); }
.ssuinian-modal-overlay[data-v-07c197cc] { width: 100%; height: 100%; z-index: var(--a69a2ad2); background: rgba(0, 0, 0, 0.4); justify-content: center; align-items: center; padding: 20px; display: flex; position: fixed; top: 0px; left: 0px; }
.ssuinian-modal-container[data-v-07c197cc] { background: var(--bg-editor,#fff); border: 1px solid var(--border-color,#0000000d); border-radius: 32px; flex-direction: column; width: 100%; max-width: 620px; max-height: 90vh; animation: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running modalIn-07c197cc; display: flex; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.25) 0px 25px 50px -12px; }
@keyframes modalIn-07c197cc { 
  0% { opacity: 0; transform: scale(0.9) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.ssuinian-modal-header[data-v-07c197cc] { border-bottom: 1px solid var(--border-color,#00000005); justify-content: space-between; align-items: center; padding: 24px 30px; display: flex; }
.title-group[data-v-07c197cc] { align-items: center; gap: 12px; display: flex; }
.modal-icon[data-v-07c197cc] { color: var(--color-primary,#007aff); font-size: 1.6rem; }
h2[data-v-07c197cc] { color: var(--text-primary,#1a1a1a); letter-spacing: -0.02em; margin: 0px; font-size: 1.2rem; font-weight: 900; }
.ssuinian-tabs[data-v-07c197cc] { background: var(--bg-section,#f9f9fb); border-bottom: 1px solid var(--border-color,#0000000d); gap: 10px; padding: 8px 30px; display: flex; }
.tab-item[data-v-07c197cc] { color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 12px; padding: 8px 16px; font-size: 0.9rem; font-weight: 700; transition: 0.2s; }
.tab-item[data-v-07c197cc]:hover { color: var(--text-primary); background: rgba(0, 0, 0, 0.03); }
.tab-item.active[data-v-07c197cc] { background: var(--color-primary,#007aff); color: rgb(255, 255, 255); box-shadow: rgba(0, 122, 255, 0.2) 0px 4px 12px; }
.anniversary-body[data-v-07c197cc] { text-align: center; flex-direction: column; align-items: center; min-height: 400px; padding: 40px 20px; display: flex; }
.anniversary-main-title[data-v-07c197cc] { background: linear-gradient(90deg, rgb(64, 207, 214), rgb(0, 122, 255), rgb(64, 207, 214)) 0px 0px / 200% text; -webkit-text-fill-color: transparent; letter-spacing: -1px; margin-bottom: 30px; font-size: 2.2rem; font-weight: 900; animation: 8s linear 0s infinite normal none running textScroll-07c197cc; }
@keyframes textScroll-07c197cc { 
  0% { background-position: 0px 0px; }
  100% { background-position: -200% 0px; }
}
.countdown-container[data-v-07c197cc] { width: 100%; max-width: 500px; }
.countdown-box[data-v-07c197cc] { background: var(--bg-section,#f9f9fb); border: 1px solid var(--border-color); border-radius: 32px; padding: 40px; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.05) 0px 20px 40px; }
.countdown-box[data-v-07c197cc]::before { content: ""; background: linear-gradient(90deg, rgb(64, 207, 214), rgb(0, 122, 255), rgb(64, 207, 214)) 0px 0px / 200% 100%; height: 4px; animation: 5s linear 0s infinite normal none running barScroll-07c197cc; position: absolute; top: 0px; left: 0px; right: 0px; }
@keyframes barScroll-07c197cc { 
  0% { background-position: 0px 0px; }
  100% { background-position: -200% 0px; }
}
.countdown-label[data-v-07c197cc] { color: var(--text-secondary); text-transform: uppercase; letter-spacing: 3px; opacity: 0.7; margin-bottom: 25px; font-size: 0.85rem; font-weight: 800; }
.countdown-numbers[data-v-07c197cc] { grid-template-columns: repeat(4, 1fr); gap: 12px; width: 100%; max-width: 500px; margin: 0px auto; display: grid; }
.time-unit[data-v-07c197cc] { flex-direction: column; align-items: center; min-width: 0px; display: flex; }
.num[data-v-07c197cc] { color: var(--text-primary); font-family: Outfit, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: clamp(1.8rem, 8vw, 3.2rem); font-weight: 900; line-height: 1; }
.unit[data-v-07c197cc] { color: var(--text-placeholder); margin-top: 10px; font-size: 0.8rem; font-weight: 800; }
.countdown-hint[data-v-07c197cc] { color: var(--color-primary); opacity: 0.8; margin-top: 30px; font-size: 0.9rem; font-weight: 700; }
.anniversary-content[data-v-07c197cc] { width: 100%; animation: 0.6s ease 0s 1 normal none running contentFadeIn-07c197cc; }
@keyframes contentFadeIn-07c197cc { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.content-placeholder h2[data-v-07c197cc] { color: var(--text-primary); margin-bottom: 16px; font-size: 2rem; font-weight: 900; }
.content-placeholder p[data-v-07c197cc] { color: var(--text-secondary); opacity: 0.8; font-size: 1.1rem; }
.anniversary-article[data-v-07c197cc] { text-align: left; color: var(--text-primary); max-width: 580px; margin: 0px auto; line-height: 1.8; }
.anniversary-content.custom-scrollbar[data-v-07c197cc] { max-height: 60vh; padding-right: 15px; }
.intro-text[data-v-07c197cc] { color: var(--color-primary); background: var(--bg-section); border-left: 6px solid var(--color-primary); border-radius: 16px; margin-bottom: 30px; padding: 20px; font-weight: 700; }
.exclamation[data-v-07c197cc] { color: var(--text-primary); margin: 10px 0px; font-size: 1.4rem; font-weight: 900; }
.link-text[data-v-07c197cc] { color: var(--color-primary); cursor: pointer; font-weight: 700; text-decoration: underline; }
.data-section[data-v-07c197cc], .site-section[data-v-07c197cc], .finale-section[data-v-07c197cc] { margin-top: 40px; }
h3[data-v-07c197cc] { color: var(--color-primary); margin-bottom: 15px; font-size: 1.2rem; font-weight: 900; }
.sub-hint[data-v-07c197cc] { color: var(--text-placeholder); margin-bottom: 20px; font-size: 0.8rem; }
.stats-grid[data-v-07c197cc] { grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 25px; display: grid; }
.stat-item[data-v-07c197cc] { background: var(--bg-section); text-align: center; border: 1px solid var(--border-color); border-radius: 12px; padding: 15px; }
.stat-num[data-v-07c197cc] { color: var(--color-primary); font-family: monospace; font-size: 1.2rem; font-weight: 900; }
.stat-desc[data-v-07c197cc] { color: var(--text-secondary); margin-top: 4px; font-size: 0.75rem; font-weight: 600; }
.highlight[data-v-07c197cc] { color: var(--color-primary); background: rgba(0, 122, 255, 0.05); border-radius: 4px; padding: 2px 4px; font-weight: 800; }
.thought-bubble[data-v-07c197cc] { color: var(--text-placeholder); border-left: 3px solid var(--border-color); margin: 20px 0px; padding-left: 15px; font-size: 0.95rem; font-style: italic; }
.big-wish[data-v-07c197cc] { text-align: center; background: linear-gradient(90deg, rgb(255, 71, 87), rgb(255, 107, 129)) text; -webkit-text-fill-color: transparent; margin: 40px 0px; font-size: 2rem; font-weight: 900; }
.footer-msg[data-v-07c197cc] { text-align: center; margin-top: 30px; font-size: 1.1rem; font-weight: 800; }
.title-tldr[data-v-07c197cc] { border-left: 1px solid var(--border-color); flex-direction: column; justify-content: center; margin-left: 12px; padding-left: 12px; display: flex; }
.title-tldr p[data-v-07c197cc] { color: var(--text-primary); white-space: nowrap; margin: 0px; font-size: 0.8rem; font-weight: 600; line-height: 1.4; }
.close-btn[data-v-07c197cc] { background: var(--bg-input,#f5f5f7); cursor: pointer; width: 36px; height: 36px; color: var(--text-secondary); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1); display: flex; }
.close-btn[data-v-07c197cc]:hover { background: rgb(229, 229, 231); transform: rotate(90deg); }
.ssuinian-modal-content[data-v-07c197cc] { flex: 1 1 0%; padding: 40px; overflow-y: auto; }
.ssuinian-body[data-v-07c197cc] { color: var(--text-primary); font-size: 1.05rem; line-height: 1.8; }
.ssuinian-section[data-v-07c197cc] { margin-bottom: 25px; }
.ssuinian-section p[data-v-07c197cc] { margin-bottom: 1em; }
.highlight-p[data-v-07c197cc] { color: var(--color-primary); text-align: center; background: linear-gradient(120deg, rgba(0, 122, 255, 0.1) 0%, rgba(0, 122, 255, 0) 100%); border-radius: 16px; margin: 24px 0px; padding: 15px; font-size: 1.25rem; font-weight: 900; }
.warning-p[data-v-07c197cc] { color: rgb(255, 71, 87); background: rgba(255, 71, 87, 0.05); border-left: 5px solid rgb(255, 71, 87); border-radius: 14px; padding: 14px 20px; font-weight: 800; }
.punch-section[data-v-07c197cc] { background: var(--bg-section,#f9f9fb); border: 1px solid var(--border-color); text-align: center; border-radius: 28px; margin: 40px 0px; padding: 35px; }
.hp-wrapper[data-v-07c197cc] { max-width: 300px; margin-bottom: 25px; margin-left: auto; margin-right: auto; }
.hp-label[data-v-07c197cc] { color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 8px; font-size: 0.85rem; font-weight: 700; }
.hp-bar-container[data-v-07c197cc] { background: rgb(238, 238, 238); border: 2px solid rgb(221, 221, 221); border-radius: 10px; height: 14px; position: relative; overflow: hidden; }
.hp-bar-fill[data-v-07c197cc] { background: linear-gradient(90deg, rgb(255, 71, 87), rgb(255, 107, 129)); border-radius: 0px 10px 10px 0px; height: 100%; transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.hp-status[data-v-07c197cc] { color: rgb(255, 71, 87); margin-top: 6px; font-family: monospace; font-size: 0.8rem; font-weight: 800; }
.punch-btn[data-v-07c197cc] { color: rgb(255, 255, 255); cursor: pointer; background: linear-gradient(135deg, rgb(26, 26, 26), rgb(51, 51, 51)); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 20px; align-items: center; gap: 12px; padding: 16px 32px; font-size: 1.1rem; font-weight: 800; transition: 0.2s; display: inline-flex; box-shadow: rgba(0, 0, 0, 0.15) 0px 12px 24px; }
.dark-mode .punch-btn[data-v-07c197cc] { color: rgb(0, 0, 0); background: linear-gradient(135deg, rgb(255, 255, 255), rgb(221, 221, 221)); }
.punch-btn[data-v-07c197cc]:hover { transform: translateY(-3px) scale(1.03); box-shadow: rgba(0, 0, 0, 0.25) 0px 15px 30px; }
.punch-btn[data-v-07c197cc]:active { transform: translateY(1px) scale(0.97); }
.shake[data-v-07c197cc] { animation: 0.2s cubic-bezier(0.36, 0.07, 0.19, 0.97) 0s 1 normal both running shake-07c197cc; }
@keyframes shake-07c197cc { 
  10%, 90% { transform: translate(-1px); }
  20%, 80% { transform: translate(2px); }
  30%, 50%, 70% { transform: translate(-4px); }
  40%, 60% { transform: translate(4px); }
}
.punch-counter[data-v-07c197cc] { color: var(--text-secondary); margin-top: 20px; font-size: 0.95rem; font-weight: 700; }
.punch-counter span[data-v-07c197cc] { color: var(--text-primary); font-size: 1.1rem; font-weight: 900; }
.defeat-text[data-v-07c197cc] { color: rgb(255, 71, 87); margin-left: 8px; font-size: 0.8rem; font-style: italic; }
.opus-quote[data-v-07c197cc] { color: var(--text-secondary); border-top: 1px dashed var(--border-color); margin-top: 50px; padding-top: 20px; font-family: inherit; font-size: 1rem; }
.signature[data-v-07c197cc] { text-align: right; color: var(--text-placeholder); margin-top: 25px; font-size: 0.9rem; line-height: 1.6; }
.stats-today-section[data-v-07c197cc] { background: var(--bg-section,#f9f9fb); border: 1px solid var(--border-color); border-radius: 20px; justify-content: center; align-items: center; gap: 24px; margin: 0px 0px 20px; padding: 16px; display: flex; }
.stats-card[data-v-07c197cc] { text-align: center; flex: 1 1 0%; }
.stats-label[data-v-07c197cc] { color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.8; margin-bottom: 4px; font-size: 0.7rem; font-weight: 800; }
.stats-value[data-v-07c197cc] { color: var(--color-primary); font-family: monospace; font-size: 1.4rem; font-weight: 900; }
.ssuinian-modal-footer[data-v-07c197cc] { border-top: 1px solid var(--border-color,#00000005); justify-content: center; padding: 20px 40px 40px; display: flex; }
.btn-primary[data-v-07c197cc] { background: var(--color-primary,#007aff); color: rgb(255, 255, 255); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 20px; padding: 16px 60px; font-size: 1rem; font-weight: 800; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: rgba(0, 122, 255, 0.15) 0px 12px 24px; }
.custom-scrollbar[data-v-07c197cc]::-webkit-scrollbar { width: 8px; }
.custom-scrollbar[data-v-07c197cc]::-webkit-scrollbar-track { background: 0px 0px; }
.custom-scrollbar[data-v-07c197cc]::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 10px; }
.dark-mode .custom-scrollbar[data-v-07c197cc]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); }
.modal-fade-enter-active[data-v-07c197cc], .modal-fade-leave-active[data-v-07c197cc] { transition: opacity 0.4s; }
.modal-fade-enter-from[data-v-07c197cc], .modal-fade-leave-to[data-v-07c197cc] { opacity: 0; }
.dark-mode .ssuinian-modal-container[data-v-07c197cc] { background: rgb(28, 28, 30); }
.dark-mode .hp-bar-container[data-v-07c197cc] { background: rgb(51, 51, 51); border-color: rgb(68, 68, 68); }
.mobile-tldr[data-v-07c197cc] { opacity: 0.7; text-align: center; color: var(--text-primary); background: var(--bg-input,#00000008); border-radius: 12px; margin-bottom: 16px; padding: 12px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; display: none; }
.dark-mode .mobile-tldr[data-v-07c197cc] { background: rgba(255, 255, 255, 0.05); }
.mobile-tldr p[data-v-07c197cc] { margin: 0px 0px 4px !important; }
.mobile-tldr p[data-v-07c197cc]:last-child { margin: 0px !important; }
@media (max-width: 500px) {
  .title-tldr[data-v-07c197cc] { display: none; }
  .mobile-tldr[data-v-07c197cc] { display: block; }
  .ssuinian-modal-container[data-v-07c197cc] { border-radius: 28px; width: 92%; max-height: 75vh; }
  .ssuinian-modal-header[data-v-07c197cc] { padding: 16px 20px; }
  .ssuinian-modal-content[data-v-07c197cc] { padding: 20px; }
  .ssuinian-modal-footer[data-v-07c197cc] { padding: 0px 24px 24px; }
  .btn-primary[data-v-07c197cc] { width: 100%; padding: 14px; }
  .countdown-box[data-v-07c197cc] { border-radius: 24px; width: 100%; padding: 24px 12px; }
  .countdown-numbers[data-v-07c197cc] { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .num[data-v-07c197cc] { font-size: 7.5vw; }
  .unit[data-v-07c197cc] { margin-top: 4px; font-size: 0.65rem; }
  .countdown-label[data-v-07c197cc] { letter-spacing: 1px; margin-bottom: 12px; font-size: 0.7rem; }
  .anniversary-main-title[data-v-07c197cc] { margin-bottom: 20px; font-size: 1.8rem; }
}
.magic-palette-overlay[data-v-04f56658] { backdrop-filter: blur(8px); z-index: 10000; background: rgba(0, 0, 0, 0.4); justify-content: center; align-items: center; padding: 20px; display: flex; position: fixed; inset: 0px; }
.magic-palette-modal[data-v-04f56658] { background: rgb(255, 255, 255); border-radius: 28px; flex-direction: column; width: 100%; max-width: 800px; animation: 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running modal-enter-04f56658; display: flex; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.2) 0px 30px 60px; }
@keyframes modal-enter-04f56658 { 
  0% { opacity: 0; transform: scale(0.9) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.modal-header[data-v-04f56658] { border-bottom: 1px solid rgba(0, 0, 0, 0.05); justify-content: space-between; align-items: center; padding: 24px 32px; display: flex; }
.header-left[data-v-04f56658] { align-items: center; gap: 16px; display: flex; }
.magic-icon[data-v-04f56658] { background: var(--magic-gradient); width: 44px; height: 44px; color: var(--magic-text-on-accent); border-radius: 12px; justify-content: center; align-items: center; font-size: 24px; display: flex; box-shadow: rgba(0, 122, 255, 0.2) 0px 8px 16px; }
.title-group h3[data-v-04f56658] { color: rgb(30, 41, 59); margin: 0px; font-size: 20px; font-weight: 800; }
.title-group p[data-v-04f56658] { color: rgb(100, 116, 139); text-transform: uppercase; letter-spacing: 1px; margin: 0px; font-size: 12px; font-weight: 600; }
.close-btn[data-v-04f56658] { color: rgb(100, 116, 139); cursor: pointer; background: rgb(241, 245, 249); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; width: 36px; height: 36px; transition: 0.2s; display: flex; }
.close-btn[data-v-04f56658]:hover { color: rgb(30, 41, 59); background: rgb(226, 232, 240); transform: rotate(90deg); }
.modal-body[data-v-04f56658] { grid-template-columns: 280px 1fr; height: 480px; padding: 0px; display: grid; }
.controls-section[data-v-04f56658] { background: rgb(252, 252, 253); border-right: 1px solid rgba(0, 0, 0, 0.05); padding: 32px; }
.control-group label[data-v-04f56658] { color: rgb(71, 85, 105); margin-bottom: 12px; font-size: 13px; font-weight: 700; display: block; }
.seed-input-wrapper[data-v-04f56658] { background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 14px; align-items: center; gap: 8px; padding: 8px; display: flex; box-shadow: rgba(0, 0, 0, 0.02) 0px 2px 4px; }
.color-preview[data-v-04f56658] { cursor: pointer; border: 2px solid rgb(255, 255, 255); border-radius: 8px; width: 32px; height: 32px; box-shadow: rgb(226, 232, 240) 0px 0px 0px 1px; }
.seed-input-wrapper input[data-v-04f56658] { color: rgb(30, 41, 59); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; flex: 1 1 0%; width: 80px; font-family: monospace; font-size: 14px; }
.action-icon-btn[data-v-04f56658] { color: rgb(100, 116, 139); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; justify-content: center; align-items: center; width: 28px; height: 28px; transition: 0.2s; display: flex; }
.action-icon-btn[data-v-04f56658]:hover { color: rgb(30, 41, 59); background: rgb(241, 245, 249); }
.tips-box[data-v-04f56658] { background: rgb(241, 245, 249); border-radius: 16px; gap: 12px; margin-top: 32px; padding: 16px; display: flex; }
.tips-box .iconify[data-v-04f56658] { color: rgb(99, 102, 241); flex-shrink: 0; font-size: 20px; }
.tips-box p[data-v-04f56658] { color: rgb(71, 85, 105); margin: 0px; font-size: 13px; line-height: 1.6; }
.variations-section[data-v-04f56658] { padding: 32px; overflow-y: auto; }
.section-label[data-v-04f56658] { color: rgb(148, 163, 184); margin-bottom: 20px; font-size: 13px; font-weight: 700; }
.variations-grid[data-v-04f56658] { grid-template-columns: repeat(2, 1fr); gap: 20px; display: grid; }
.variation-card[data-v-04f56658] { cursor: pointer; border: 2px solid rgba(0, 0, 0, 0); border-radius: 20px; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); overflow: hidden; }
.variation-card[data-v-04f56658]:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.1) 0px 12px 24px; }
.variation-card.is-active[data-v-04f56658] { border-color: rgb(99, 102, 241); box-shadow: rgba(99, 102, 241, 0.2) 0px 8px 20px; }
.variation-preview[data-v-04f56658] { justify-content: center; align-items: center; height: 120px; display: flex; }
.mini-card[data-v-04f56658] { border-radius: 6px; flex-direction: column; gap: 4px; width: 60px; height: 40px; padding: 6px; display: flex; }
.mini-line[data-v-04f56658] { border-radius: 2px; height: 4px; }
.variation-info[data-v-04f56658] { background: rgb(255, 255, 255); justify-content: space-between; align-items: center; padding: 12px 16px; display: flex; }
.v-name[data-v-04f56658] { color: rgb(30, 41, 59); font-size: 13px; font-weight: 700; }
.v-colors[data-v-04f56658] { gap: 4px; display: flex; }
.v-dot[data-v-04f56658] { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; flex-shrink: 0; width: 12px; height: 12px; }
.modal-footer[data-v-04f56658] { border-top: 1px solid rgba(0, 0, 0, 0.05); justify-content: flex-end; gap: 16px; padding: 24px 32px; display: flex; }
.btn-cancel[data-v-04f56658] { color: rgb(100, 116, 139); cursor: pointer; background: rgb(255, 255, 255); border: 1px solid rgb(226, 232, 240); border-radius: 14px; padding: 12px 24px; font-weight: 700; transition: 0.2s; }
.btn-cancel[data-v-04f56658]:hover { color: rgb(30, 41, 59); background: rgb(248, 250, 252); }
.btn-apply[data-v-04f56658] { background: var(--magic-gradient); color: var(--magic-text-on-accent); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 14px; align-items: center; gap: 8px; padding: 12px 32px; font-weight: 800; transition: 0.2s; display: flex; box-shadow: rgba(0, 122, 255, 0.2) 0px 8px 16px; }
.btn-apply[data-v-04f56658]:hover { filter: brightness(1.05); transform: translateY(-2px); box-shadow: rgba(0, 122, 255, 0.3) 0px 12px 20px; }
.is-dark[data-v-04f56658] { color: rgb(241, 245, 249); background: rgb(30, 34, 41); }
.is-dark .modal-header[data-v-04f56658], .is-dark .modal-footer[data-v-04f56658] { border-color: rgba(255, 255, 255, 0.05); }
.is-dark .title-group h3[data-v-04f56658] { color: rgb(255, 255, 255); }
.is-dark .controls-section[data-v-04f56658] { background: rgb(26, 29, 35); border-color: rgba(255, 255, 255, 0.05); }
.is-dark .seed-input-wrapper[data-v-04f56658] { background: rgb(44, 49, 58); border-color: rgba(255, 255, 255, 0.1); }
.is-dark .seed-input-wrapper input[data-v-04f56658] { color: rgb(255, 255, 255); }
.is-dark .tips-box[data-v-04f56658] { background: rgb(44, 49, 58); }
.is-dark .tips-box p[data-v-04f56658] { color: rgb(148, 163, 184); }
.is-dark .variation-info[data-v-04f56658] { background: rgb(44, 49, 58); }
.is-dark .v-name[data-v-04f56658] { color: rgb(255, 255, 255); }
.is-dark .btn-cancel[data-v-04f56658] { color: rgb(148, 163, 184); background: rgb(44, 49, 58); border-color: rgba(255, 255, 255, 0.1); }
.fade-enter-active[data-v-04f56658], .fade-leave-active[data-v-04f56658] { transition: opacity 0.3s; }
.fade-enter-from[data-v-04f56658], .fade-leave-to[data-v-04f56658] { opacity: 0; }
@media (max-width: 768px) {
  .magic-palette-overlay[data-v-04f56658] { padding: 20px; }
  .magic-palette-modal[data-v-04f56658] { border-radius: 20px; width: 100%; max-width: none; height: auto; max-height: 90vh; }
  .modal-header[data-v-04f56658] { padding: 12px 16px; }
  .magic-icon[data-v-04f56658] { width: 32px; height: 32px; font-size: 18px; }
  .title-group h3[data-v-04f56658] { font-size: 16px; }
  .modal-body[data-v-04f56658] { grid-template-columns: 1fr; height: auto; max-height: calc(-120px + 90vh); overflow-y: auto; }
  .controls-section[data-v-04f56658] { background: rgb(248, 250, 252); padding: 16px; }
  .tips-box[data-v-04f56658] { display: none; }
  .variations-section[data-v-04f56658] { padding: 16px; }
  .variations-grid[data-v-04f56658] { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .variation-card[data-v-04f56658] { height: auto; display: block; }
  .variation-preview[data-v-04f56658] { width: 100%; height: 80px; }
  .variation-info[data-v-04f56658] { padding: 8px; }
  .v-name[data-v-04f56658] { font-size: 12px; }
  .v-dot[data-v-04f56658] { width: 8px; height: 8px; }
  .modal-footer[data-v-04f56658] { padding: 12px 16px; }
  .btn-cancel[data-v-04f56658] { display: none; }
}
.video-modal-header[data-v-f1d53886] { border-bottom: 1px solid var(--border-color); justify-content: space-between; align-items: center; padding: 15px 20px; display: flex; }
.video-modal-header h3[data-v-f1d53886] { color: var(--color-primary); margin: 0px; font-size: 1.1rem; }
.close-btn[data-v-f1d53886] { background: var(--bg-input); cursor: pointer; width: 32px; height: 32px; color: var(--text-secondary); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; transition: 0.2s; display: flex; }
.close-btn[data-v-f1d53886]:hover { color: rgb(255, 255, 255); background: rgb(255, 71, 87); transform: rotate(90deg); }
.video-wrapper[data-v-f1d53886] { background: rgb(0, 0, 0); width: 100%; padding-top: 56.25%; position: relative; }
.video-wrapper iframe[data-v-f1d53886] { width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
.video-modal-footer[data-v-f1d53886] { text-align: center; color: var(--text-placeholder); background: var(--bg-section); padding: 15px; font-size: 0.9rem; }
@keyframes fadeIn-f1d53886 { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes modalIn-f1d53886 { 
  0% { opacity: 0; transform: scale(0.9) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.beta-shield-overlay[data-v-311317dd] { z-index: 8000; background: rgba(15, 15, 18, 0.9); justify-content: center; align-items: center; width: 100%; height: 100%; padding: 20px; display: flex; position: fixed; top: 0px; left: 0px; }
.beta-shield-container[data-v-311317dd] { background: var(--bg-editor,#fff); border: 1px solid var(--border-color,#ffffff1a); text-align: center; border-radius: 24px; width: 100%; max-width: 420px; padding: 40px 30px; animation: 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running slideUp-311317dd; box-shadow: rgba(0, 0, 0, 0.4) 0px 20px 60px; }
@keyframes slideUp-311317dd { 
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.beta-icon[data-v-311317dd] { color: var(--color-primary,#007aff); filter: drop-shadow(rgba(0, 122, 255, 0.3) 0px 0px 15px); margin-bottom: 20px; font-size: 4rem; }
h2[data-v-311317dd] { letter-spacing: -0.02em; margin: 0px 0px 15px; font-size: 1.5rem; font-weight: 800; }
.beta-content[data-v-311317dd] { margin-bottom: 30px; }
.placeholder-text[data-v-311317dd] { color: var(--color-primary); margin-bottom: 10px; font-size: 1.1rem; font-weight: 700; }
.hint-text[data-v-311317dd] { color: var(--text-secondary); opacity: 0.8; font-size: 0.85rem; line-height: 1.6; }
.password-section[data-v-311317dd] { flex-direction: column; gap: 12px; margin-bottom: 25px; display: flex; }
.beta-input[data-v-311317dd] { border: 1px solid var(--border-color); background: var(--bg-input,#f5f5f7); width: 100%; color: var(--text-primary); text-align: center; border-radius: 12px; padding: 14px 18px; font-size: 1rem; transition: 0.2s; }
.beta-input[data-v-311317dd]:focus { border-color: var(--color-primary); outline: none; box-shadow: rgba(0, 122, 255, 0.1) 0px 0px 0px 4px; }
.btn-block[data-v-311317dd] { cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 12px; justify-content: center; align-items: center; gap: 8px; width: 100%; padding: 14px; font-size: 1rem; font-weight: 600; transition: 0.2s; display: flex; }
.btn-primary[data-v-311317dd] { background: var(--color-primary,#007aff); color: rgb(255, 255, 255); }
.btn-primary[data-v-311317dd]:hover { filter: brightness(1.1); transform: translateY(-2px); }
.divider[data-v-311317dd] { color: var(--text-placeholder); align-items: center; margin: 20px 0px; font-size: 0.8rem; display: flex; }
.divider[data-v-311317dd]::before, .divider[data-v-311317dd]::after { content: ""; background: var(--border-color); flex: 1 1 0%; height: 1px; margin: 0px 15px; }
.export-section[data-v-311317dd] { text-align: left; background: var(--bg-section,#f9f9fb); border: 1px dashed var(--border-color); border-radius: 16px; margin-bottom: 20px; padding: 15px; }
.export-hint[data-v-311317dd] { color: var(--text-secondary); margin-bottom: 12px; font-size: 0.75rem; line-height: 1.4; }
.btn-outline[data-v-311317dd] { border: 1px solid var(--border-color); color: var(--text-primary); background: 0px 0px; }
.btn-outline[data-v-311317dd]:hover:not(:disabled) { background: var(--bg-input); border-color: var(--text-secondary); }
.btn-outline[data-v-311317dd]:disabled { opacity: 0.5; cursor: not-allowed; }
.beta-footer[data-v-311317dd] { margin-top: 10px; }
.back-link[data-v-311317dd] { color: var(--color-primary); opacity: 0.8; font-size: 0.85rem; text-decoration: none; transition: opacity 0.2s; }
.back-link[data-v-311317dd]:hover { opacity: 1; text-decoration: underline; }
.fade-enter-active[data-v-311317dd], .fade-leave-active[data-v-311317dd] { transition: opacity 0.3s; }
.fade-enter-from[data-v-311317dd], .fade-leave-to[data-v-311317dd] { opacity: 0; }
.system-shield-overlay[data-v-567b085f] { backdrop-filter: blur(8px); z-index: 100000; color: rgb(201, 209, 217); background: rgba(13, 17, 23, 0.8); justify-content: center; align-items: center; width: 100vw; height: 100vh; padding: 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; display: flex; position: fixed; top: 0px; left: 0px; }
.shield-card[data-v-567b085f] { background: rgb(28, 31, 38); border: 1px solid rgb(48, 54, 61); border-radius: 12px; width: 100%; max-width: 540px; animation: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0s 1 normal none running modal-pop-567b085f; box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 24px; }
@keyframes modal-pop-567b085f { 
  0% { opacity: 0; transform: scale(0.95); }
  100% { opacity: 1; transform: scale(1); }
}
.shield-content[data-v-567b085f] { padding: 32px; }
.shield-title[data-v-567b085f] { color: rgb(255, 77, 77); margin: 0px 0px 20px; font-size: 1.5rem; font-weight: 600; }
.shield-description[data-v-567b085f] { color: rgb(177, 186, 196); margin-bottom: 24px; font-size: 0.95rem; line-height: 1.6; }
.shield-description p[data-v-567b085f] { margin: 0px 0px 12px; }
.warning-text[data-v-567b085f] { color: rgb(255, 77, 77); font-weight: 600; }
.error-details[data-v-567b085f] { border: 1px solid rgb(48, 54, 61); border-radius: 6px; margin-bottom: 32px; overflow: hidden; }
.error-details summary[data-v-567b085f] { cursor: pointer; user-select: none; background: rgb(33, 38, 45); outline: none; padding: 8px 12px; font-size: 0.85rem; font-weight: 600; }
.error-details summary[data-v-567b085f]:hover { background: rgb(48, 54, 61); }
.error-box[data-v-567b085f] { background: rgb(13, 17, 23); max-height: 150px; padding: 12px; overflow-y: auto; }
.error-box code[data-v-567b085f] { color: rgb(230, 237, 243); white-space: pre-wrap; word-break: break-all; font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.8rem; }
.action-footer[data-v-567b085f] { flex-direction: column; gap: 20px; display: flex; }
.secondary-actions[data-v-567b085f] { gap: 16px; display: flex; }
.text-btn[data-v-567b085f] { color: rgb(139, 148, 158); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 0px; font-size: 0.85rem; text-decoration: underline; }
.text-btn[data-v-567b085f]:hover { color: rgb(201, 209, 217); }
.main-actions[data-v-567b085f] { justify-content: flex-end; gap: 12px; display: flex; }
.btn-backup[data-v-567b085f], .btn-reset[data-v-567b085f] { cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; padding: 10px 20px; font-size: 0.95rem; font-weight: 600; transition: filter 0.2s; }
.btn-backup[data-v-567b085f] { color: rgb(255, 255, 255); background: rgb(110, 118, 129); }
.btn-reset[data-v-567b085f] { color: rgb(255, 255, 255); background: rgb(255, 77, 77); }
.btn-backup[data-v-567b085f]:hover, .btn-reset[data-v-567b085f]:hover { filter: brightness(1.1); }
.btn-backup[data-v-567b085f]:disabled { opacity: 0.6; cursor: not-allowed; }
.progress-bar-container[data-v-567b085f] { margin-top: 24px; }
.progress-text[data-v-567b085f] { color: rgb(139, 148, 158); text-align: center; margin-bottom: 8px; font-size: 0.8rem; }
.progress-track[data-v-567b085f] { background: rgb(48, 54, 61); border-radius: 2px; height: 4px; overflow: hidden; }
.progress-fill[data-v-567b085f] { background: rgb(35, 134, 54); height: 100%; transition: width 0.3s; }
.fade-enter-active[data-v-567b085f], .fade-leave-active[data-v-567b085f] { transition: opacity 0.3s; }
.fade-enter-from[data-v-567b085f], .fade-leave-to[data-v-567b085f] { opacity: 0; }
.large-graph-modal[data-v-e7c50c45] { background: var(--modal-header-bg,#1c1c1e); border: 1px solid var(--modal-border,#ffffff1f); border-radius: 12px; flex-direction: column; width: 95vw; max-width: 1300px; height: 85vh; max-height: 900px; display: flex; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.5) 0px 12px 36px; }
.rel-modal-header[data-v-e7c50c45] { background: var(--modal-header-bg,#1c1c1e); border-bottom: 1px solid var(--modal-border,#ffffff1f); justify-content: space-between; align-items: center; padding: 12px 20px; display: flex; }
.header-left[data-v-e7c50c45] { align-items: center; gap: 10px; display: flex; }
.logo-icon[data-v-e7c50c45] { color: var(--color-primary,#007aff); background: rgba(0, 122, 255, 0.15); border-radius: 8px; justify-content: center; align-items: center; padding: 8px; display: flex; }
.header-left h3[data-v-e7c50c45] { color: rgb(255, 255, 255); margin: 0px; font-size: 0.95rem; font-weight: 600; }
.header-center[data-v-e7c50c45] { align-items: center; gap: 15px; display: flex; }
.tool-group[data-v-e7c50c45] { border: 1px solid var(--modal-border,#ffffff14); background: rgba(255, 255, 255, 0.05); border-radius: 8px; align-items: center; padding: 2px; display: flex; }
.tool-btn[data-v-e7c50c45] { color: var(--modal-text-secondary,#a0a0a0); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; align-items: center; gap: 6px; padding: 6px 12px; font-size: 0.78rem; font-weight: 600; transition: 0.2s; display: flex; }
.tool-btn[data-v-e7c50c45]:hover { color: rgb(255, 255, 255); }
.tool-btn.active[data-v-e7c50c45] { background: var(--color-primary,#007aff); color: rgb(255, 255, 255); }
.action-btn[data-v-e7c50c45] { color: var(--modal-text-secondary,#a0a0a0); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; justify-content: center; align-items: center; width: 28px; height: 28px; transition: 0.2s; display: flex; }
.action-btn[data-v-e7c50c45]:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.08); }
.zoom-badge[data-v-e7c50c45] { color: var(--modal-text-muted,#707070); text-align: center; min-width: 36px; font-family: monospace; font-size: 0.76rem; }
.divider[data-v-e7c50c45] { background: var(--modal-border,#ffffff1f); width: 1px; height: 18px; }
.header-right .btn-primary[data-v-e7c50c45] { background: var(--color-primary,#007aff); color: rgb(255, 255, 255); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; align-items: center; gap: 6px; padding: 8px 16px; font-size: 0.8rem; font-weight: 700; transition: 0.2s; display: flex; box-shadow: rgba(0, 122, 255, 0.25) 0px 4px 12px; }
.header-right .btn-primary[data-v-e7c50c45]:hover { filter: brightness(1.15); }
.rel-modal-body[data-v-e7c50c45] { background: rgb(18, 18, 20); flex: 1 1 0%; display: flex; overflow: hidden; }
.rel-modal-leftbar[data-v-e7c50c45] { background: var(--modal-sidebar-bg,#18181a); border-right: 1px solid var(--modal-border,#ffffff1f); flex-direction: column; flex-shrink: 0; gap: 20px; width: 240px; padding: 16px; display: flex; }
.leftbar-section h4[data-v-e7c50c45] { color: var(--modal-text-muted,#707070); text-transform: uppercase; letter-spacing: 0.5px; margin: 0px 0px 10px; font-size: 0.72rem; font-weight: 700; }
.btn-default[data-v-e7c50c45] { color: var(--modal-text-primary,#e2e8f0); border: 1px solid var(--modal-border,#ffffff1f); background: rgba(255, 255, 255, 0.04); }
.btn-default[data-v-e7c50c45]:hover { background: rgba(255, 255, 255, 0.08); }
.add-btn[data-v-e7c50c45] { cursor: pointer; border-radius: 6px; justify-content: center; align-items: center; gap: 6px; width: 100%; padding: 10px; font-size: 0.8rem; font-weight: 600; transition: 0.2s; display: flex; border: 1px dashed rgba(255, 255, 255, 0.2) !important; }
.add-btn[data-v-e7c50c45]:hover { color: rgb(255, 255, 255); background: rgba(0, 122, 255, 0.06); border-color: var(--color-primary,#007aff) !important; }
.guide-list[data-v-e7c50c45] { color: var(--modal-text-secondary,#a0a0a0); margin: 0px; padding: 0px 0px 0px 14px; font-size: 0.74rem; line-height: 1.6; }
.guide-list li[data-v-e7c50c45] { margin-bottom: 8px; }
.connect-banner[data-v-e7c50c45] { color: rgb(255, 149, 0); background: rgba(255, 149, 0, 0.1); border: 1px solid rgba(255, 149, 0, 0.25); border-radius: 8px; align-items: center; gap: 8px; margin-top: auto; padding: 10px 12px; font-size: 0.76rem; font-weight: 600; display: flex; }
.animate-pulse[data-v-e7c50c45] { animation: 2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running pulse-e7c50c45; }
@keyframes pulse-e7c50c45 { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.rel-modal-canvas-viewport[data-v-e7c50c45] { background: var(--modal-canvas-viewport-bg,#0d0d0f); cursor: grab; flex: 1 1 0%; justify-content: center; align-items: center; display: flex; position: relative; overflow: hidden; }
.rel-modal-canvas-viewport.is-panning[data-v-e7c50c45] { cursor: grabbing; }
.rel-modal-canvas-inner[data-v-e7c50c45] { transform-origin: 0px 0px; border: 1px dashed var(--modal-border,#ffffff1f); background: var(--modal-canvas-inner-bg,#111113); border-radius: 12px; min-width: 900px; min-height: 800px; position: relative; box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 30px; }
.rel-canvas-grid[data-v-e7c50c45] { pointer-events: none; z-index: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.1) 1.2px, rgba(0, 0, 0, 0) 1.2px); background-size: 24px 24px; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
.canvas-svg-element[data-v-e7c50c45] { z-index: 3; pointer-events: none; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; overflow: visible; }
.svg-edge-group[data-v-e7c50c45] { cursor: pointer; pointer-events: auto; }
.svg-edge-group:hover .rel-line[data-v-e7c50c45] { stroke-width: 4px; }
.svg-edge-group.is-selected .rel-line[data-v-e7c50c45] { stroke-width: 4px; stroke: var(--color-primary,#007aff) !important; }
.canvas-nodes-container[data-v-e7c50c45] { z-index: 2; flex-direction: column; align-items: center; gap: 80px; min-width: 800px; padding: 100px 50px; display: flex; position: relative; }
.canvas-row[data-v-e7c50c45] { flex-direction: column; align-items: center; width: 100%; display: flex; position: relative; }
.canvas-row-date[data-v-e7c50c45] { color: var(--color-primary,#007aff); z-index: 2; background: rgba(0, 122, 255, 0.12); border: 1px solid rgba(0, 122, 255, 0.2); border-radius: 20px; margin-bottom: 15px; padding: 3px 10px; font-size: 0.72rem; font-weight: 700; }
.canvas-row-nodes[data-v-e7c50c45] { flex-direction: row; justify-content: center; align-items: center; width: 100%; min-height: 80px; display: flex; position: relative; }
.canvas-node[data-v-e7c50c45] { user-select: none; justify-content: center; transition: transform 0.2s cubic-bezier(0.25, 0.8, 0.25, 1); display: flex; position: absolute; left: 50%; }
.node-content-box[data-v-e7c50c45] { text-align: center; cursor: grab; box-sizing: border-box; background: rgb(28, 28, 30); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; flex-direction: column; justify-content: center; align-items: center; min-width: 120px; max-width: 200px; padding: 12px 16px; display: flex; position: relative; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px; }
.canvas-node.is-selected .node-content-box[data-v-e7c50c45] { border-color: var(--color-primary,#007aff); box-shadow: rgba(0, 122, 255, 0.3) 0px 0px 0px 3px, rgba(0, 0, 0, 0.4) 0px 4px 16px; }
.canvas-node.is-connecting-src .node-content-box[data-v-e7c50c45] { border-color: rgb(255, 149, 0); animation: 1.5s ease 0s infinite normal none running linkingPulse; box-shadow: rgba(255, 149, 0, 0.3) 0px 0px 0px 3px; }
.canvas-node.is-dragging .node-content-box[data-v-e7c50c45] { cursor: grabbing; transform: scale(1.05); }
.timeline-dot[data-v-e7c50c45] { z-index: 2; background: rgb(28, 28, 30); border: 3px solid; border-radius: 50%; width: 12px; height: 12px; position: absolute; top: -6px; left: 50%; transform: translate(-50%); }
.timeline-time[data-v-e7c50c45] { color: rgb(255, 255, 255); margin-bottom: 4px; font-size: 0.85em; font-weight: 700; }
.timeline-content[data-v-e7c50c45] { color: var(--modal-text-secondary,#a0a0a0); font-size: 1em; }
.quick-link-ring[data-v-e7c50c45] { pointer-events: none; border: 2px dashed rgb(255, 149, 0); border-radius: 12px; position: absolute; inset: -4px; }
.rel-modal-inspector[data-v-e7c50c45] { background: var(--modal-sidebar-bg,#18181a); border-left: 1px solid var(--modal-border,#ffffff1f); flex-shrink: 0; width: 280px; }
.rel-inspector-panel[data-v-e7c50c45] { flex-direction: column; height: 100%; display: flex; }
.panel-close-btn[data-v-e7c50c45] { color: var(--modal-text-secondary,#a0a0a0); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; align-items: center; margin-left: auto; padding: 4px; display: flex; }
.panel-close-btn[data-v-e7c50c45]:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.08); }
.panel-body[data-v-e7c50c45] { flex: 1 1 0%; padding: 16px; overflow-y: auto; }
.form-group-modal[data-v-e7c50c45] { margin-bottom: 16px; }
.form-group-modal label[data-v-e7c50c45] { color: var(--modal-text-secondary,#a0a0a0); margin-bottom: 6px; font-size: 0.78rem; font-weight: 600; display: block; }
.form-group-modal input[type="text"][data-v-e7c50c45], .form-group-modal textarea[data-v-e7c50c45], .form-group-modal select[data-v-e7c50c45] { border: 1px solid var(--modal-border,#ffffff1f); color: rgb(255, 255, 255); box-sizing: border-box; background: rgba(255, 255, 255, 0.03); border-radius: 6px; outline: none; width: 100%; padding: 6px 10px; font-size: 0.85rem; }
.form-group-modal select[data-v-e7c50c45] { cursor: pointer; }
.offset-label-row[data-v-e7c50c45] { justify-content: space-between; align-items: center; margin-bottom: 4px; display: flex; }
.val-badge[data-v-e7c50c45] { background: var(--color-primary,#007aff); color: rgb(255, 255, 255); border-radius: 4px; padding: 1px 6px; font-family: monospace; font-size: 0.72rem; }
.btn-tabs[data-v-e7c50c45] { border: 1px solid var(--modal-border,#ffffff1a); background: rgba(255, 255, 255, 0.04); border-radius: 6px; padding: 2px; display: flex; }
.tab-btn[data-v-e7c50c45] { color: var(--modal-text-secondary,#a0a0a0); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; flex: 1 1 0%; padding: 4px; font-size: 0.74rem; font-weight: 700; transition: 0.2s; }
.tab-btn.active[data-v-e7c50c45] { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.08); }
.modal-sep[data-v-e7c50c45] { border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-right-style: none; border-bottom-style: none; border-left-style: none; border-right-color: currentcolor; border-bottom-color: currentcolor; border-left-color: currentcolor; border-image: initial; border-top: 1px solid var(--modal-border,#ffffff1f); margin: 15px 0px; }
.actions-box[data-v-e7c50c45] { margin-top: 25px; }
.btn-danger[data-v-e7c50c45] { color: rgb(255, 255, 255); cursor: pointer; background: linear-gradient(135deg, rgb(255, 77, 79), rgb(224, 36, 36)); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; justify-content: center; align-items: center; gap: 6px; width: 100%; padding: 10px; font-size: 0.8rem; font-weight: 700; display: flex; }
.btn-danger[data-v-e7c50c45]:hover { filter: brightness(1.1); }
.label-reset-row[data-v-e7c50c45] { justify-content: space-between; align-items: center; margin-bottom: 6px; display: flex; }
.reset-icon-btn[data-v-e7c50c45] { cursor: pointer; color: var(--modal-text-secondary,#a0a0a0); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; align-items: center; margin-left: auto; padding: 0px 4px; font-size: 0.9rem; transition: 0.2s; display: inline-flex; }
.reset-icon-btn[data-v-e7c50c45]:hover { color: var(--color-primary,#007aff); transform: rotate(-90deg); }
.fade-scale-enter-active[data-v-e7c50c45], .fade-scale-leave-active[data-v-e7c50c45] { transition: opacity 0.2s, transform 0.2s; }
.fade-scale-enter-from[data-v-e7c50c45], .fade-scale-leave-to[data-v-e7c50c45] { opacity: 0; transform: scale(0.95); }
.floating-toggle-btn[data-v-e7c50c45] { backdrop-filter: blur(8px); width: 20px; height: 44px; color: var(--modal-text-secondary); cursor: pointer; z-index: 1100; justify-content: center; align-items: center; padding: 0px; font-size: 1.1rem; transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1); display: flex; position: absolute; top: 50%; transform: translateY(-50%); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; background: var(--modal-header-bg) !important; border: 1px solid var(--modal-border) !important; }
.floating-toggle-btn[data-v-e7c50c45]:hover { color: rgb(255, 255, 255); background: var(--color-primary,#007aff) !important; border-color: var(--color-primary,#007aff) !important; }
.floating-toggle-btn.left-toggle[data-v-e7c50c45] { border-radius: 0px 8px 8px 0px; left: 0px; border-left-width: medium !important; border-left-style: none !important; border-left-color: currentcolor !important; }
.floating-toggle-btn.right-toggle[data-v-e7c50c45] { border-radius: 8px 0px 0px 8px; right: 0px; border-right-width: medium !important; border-right-style: none !important; border-right-color: currentcolor !important; }
.rel-modal-leftbar[data-v-e7c50c45] { transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.rel-modal-leftbar.collapsed[data-v-e7c50c45] { opacity: 0 !important; border-right-width: medium !important; border-right-style: none !important; border-right-color: currentcolor !important; width: 0px !important; padding: 0px !important; overflow: hidden !important; }
.rel-modal-inspector[data-v-e7c50c45] { transition: 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important; }
.rel-modal-inspector.collapsed[data-v-e7c50c45] { opacity: 0 !important; border-left-width: medium !important; border-left-style: none !important; border-left-color: currentcolor !important; width: 0px !important; overflow: hidden !important; }
@media (max-width: 768px) {
  .rel-modal-header[data-v-e7c50c45] { height: 56px !important; padding: 0px 10px !important; }
  .header-left h3[data-v-e7c50c45] { display: none !important; }
  .header-center[data-v-e7c50c45] { flex: 1 1 0%; min-width: 0px; justify-content: flex-start !important; gap: 8px !important; padding: 3px 6px !important; overflow-x: auto !important; }
  .header-center[data-v-e7c50c45]::-webkit-scrollbar { display: none; }
  .header-right[data-v-e7c50c45] { flex-shrink: 0; margin-left: 8px; }
  .tool-group[data-v-e7c50c45] { flex-shrink: 0; }
  .divider[data-v-e7c50c45] { flex-shrink: 0; margin: 0px 4px !important; }
  .rel-modal-leftbar[data-v-e7c50c45] { z-index: 1200 !important; width: 240px !important; height: calc(100% - 56px) !important; position: absolute !important; top: 56px !important; left: 0px !important; box-shadow: rgba(0, 0, 0, 0.15) 8px 0px 24px !important; }
  .rel-modal-inspector[data-v-e7c50c45] { z-index: 1200 !important; width: 300px !important; height: calc(100% - 56px) !important; position: absolute !important; top: 56px !important; right: 0px !important; box-shadow: rgba(0, 0, 0, 0.15) -8px 0px 24px !important; }
  .floating-toggle-btn.left-toggle.panel-open[data-v-e7c50c45] { left: 240px; }
  .floating-toggle-btn.right-toggle.panel-open[data-v-e7c50c45] { right: 300px; }
}
@keyframes modal-bg-in-71928ee4 { 
  0% { background-color: rgba(0, 0, 0, 0); }
  100% { background-color: rgba(0, 0, 0, 0.35); }
}
@keyframes modal-bg-out-71928ee4 { 
  0% { background-color: rgba(0, 0, 0, 0.35); }
  100% { background-color: rgba(0, 0, 0, 0); }
}
.dashboard-tabs[data-v-71928ee4] { scrollbar-width: none; border-bottom: 1px solid var(--border-color,#ffffff14); flex-wrap: nowrap; gap: 4px; margin-bottom: 16px; padding: 0px 24px; display: flex; overflow-x: auto; }
.dashboard-tabs[data-v-71928ee4]::-webkit-scrollbar { display: none; }
.dashboard-tab[data-v-71928ee4] { white-space: nowrap; color: var(--text-muted,#94a3b8); cursor: pointer; background: 0px 0px; border-width: medium medium 2px; border-style: none none solid; border-color: currentcolor currentcolor rgba(0, 0, 0, 0); border-image: initial; flex-shrink: 0; justify-content: center; align-items: center; padding: 10px 18px; font-size: 0.85rem; font-weight: 500; transition: 0.2s; display: inline-flex; }
.dashboard-tab[data-v-71928ee4]:hover { color: var(--text-primary,#e2e8f0); }
.dashboard-tab.active[data-v-71928ee4] { color: rgb(0, 122, 255); border-bottom-color: rgb(0, 122, 255); }
.account-mgmt-section[data-v-71928ee4] { flex-direction: column; gap: 16px; max-height: 70vh; padding: 0px 24px 24px; display: flex; overflow-y: auto; }
.mgmt-card[data-v-71928ee4] { background: var(--bg-section,#ffffff08); border: 1px solid var(--border-color,#ffffff0f); border-radius: 12px; padding: 18px; }
.mgmt-card-danger[data-v-71928ee4] { background: rgba(255, 77, 79, 0.04); border-color: rgba(255, 77, 79, 0.2); }
.mgmt-card-header[data-v-71928ee4] { align-items: center; gap: 10px; margin-bottom: 12px; display: flex; }
.mgmt-card-header h4[data-v-71928ee4] { color: var(--text-primary,#e2e8f0); flex: 1 1 0%; margin: 0px; font-size: 0.95rem; font-weight: 600; }
.mgmt-icon[data-v-71928ee4] { width: 18px; height: 18px; color: var(--color-primary,#007aff); flex-shrink: 0; }
.mgmt-desc[data-v-71928ee4] { color: var(--text-muted,#94a3b8); margin: 0px 0px 12px; font-size: 0.8rem; line-height: 1.5; }
.mgmt-form[data-v-71928ee4] { flex-direction: column; gap: 10px; display: flex; }
.mgmt-field label[data-v-71928ee4] { color: var(--text-muted,#94a3b8); margin-bottom: 4px; font-size: 0.78rem; font-weight: 500; display: block; }
.mgmt-field input[data-v-71928ee4], .mgmt-input[data-v-71928ee4] { border: 1px solid var(--border-color,#ffffff1a); background: var(--bg-primary,#0003); width: 100%; color: var(--text-primary,#e2e8f0); box-sizing: border-box; border-radius: 8px; padding: 8px 12px; font-size: 0.85rem; }
.mgmt-field input[data-v-71928ee4]:focus, .mgmt-input[data-v-71928ee4]:focus { border-color: var(--color-primary,#007aff); outline: none; }
.mgmt-input-row[data-v-71928ee4] { align-items: center; gap: 10px; display: flex; }
.mgmt-input-row .mgmt-input[data-v-71928ee4] { flex: 1 1 0%; }
.btn-mgmt[data-v-71928ee4] { cursor: pointer; white-space: nowrap; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; padding: 8px 16px; font-size: 0.82rem; font-weight: 600; transition: 0.2s; }
.btn-mgmt[data-v-71928ee4]:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-mgmt-primary[data-v-71928ee4] { background: var(--color-primary,#007aff); color: rgb(255, 255, 255); }
.btn-mgmt-primary[data-v-71928ee4]:hover:not(:disabled) { filter: brightness(1.1); }
.btn-mgmt-danger[data-v-71928ee4] { color: rgb(255, 255, 255); background: rgb(255, 77, 79); }
.mgmt-row[data-v-71928ee4] { align-items: stretch; gap: 12px; display: flex; }
.mgmt-card-half[data-v-71928ee4] { flex: 1 1 0%; min-width: 0px; }
@media (max-width: 640px) {
  .mgmt-row[data-v-71928ee4] { flex-direction: column; }
}
.redeem-fade-enter-active[data-v-71928ee4] { transition: opacity 0.25s, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.redeem-fade-leave-active[data-v-71928ee4] { transition: opacity 0.18s, transform 0.18s; }
.redeem-fade-enter-from[data-v-71928ee4] { opacity: 0; }
.redeem-fade-enter-from .redeem-popup[data-v-71928ee4] { opacity: 0; transform: scale(0.92) translateY(12px); }
.redeem-fade-leave-to[data-v-71928ee4] { opacity: 0; }
.redeem-fade-leave-to .redeem-popup[data-v-71928ee4] { opacity: 0; transform: scale(0.95); }
.redeem-popup[data-v-71928ee4] { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s; }
.redeem-popup-overlay[data-v-71928ee4] { z-index: 10800; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; display: flex; position: fixed; inset: 0px; }
.redeem-popup[data-v-71928ee4] { background: var(--bg-card,#1e1e2e); border: 1px solid var(--border-color,#ffffff1a); text-align: center; border-radius: 16px; width: 90%; max-width: 360px; padding: 28px 24px; }
.redeem-popup-icon-ring[data-v-71928ee4] { background: color-mix(in srgb, var(--accent,gold) 15%, transparent); border-radius: 50%; justify-content: center; align-items: center; width: 56px; height: 56px; margin: 0px auto 14px; display: flex; }
.redeem-popup-icon[data-v-71928ee4] { color: var(--accent,gold); font-size: 28px; }
.redeem-popup-title[data-v-71928ee4] { color: var(--text-primary,#e2e8f0); margin: 0px 0px 10px; font-size: 1.1rem; font-weight: 700; }
.redeem-popup-rewards[data-v-71928ee4] { flex-direction: column; gap: 6px; margin-bottom: 10px; display: flex; }
.redeem-popup-reward-item[data-v-71928ee4] { color: var(--text-primary,#e2e8f0); justify-content: center; align-items: center; gap: 8px; font-size: 0.85rem; display: flex; }
.redeem-popup-message[data-v-71928ee4] { color: var(--text-muted,#94a3b8); white-space: pre-line; margin: 0px 0px 14px; font-size: 0.8rem; }
.btn-redeem-ok[data-v-71928ee4] { color: rgb(255, 255, 255); cursor: pointer; background: var(--accent,#4f8cff); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; padding: 8px 28px; font-size: 0.85rem; font-weight: 600; }
.btn-redeem-ok[data-v-71928ee4]:hover:not(:disabled) { filter: brightness(1.1); }
.btn-redeem-ok[data-v-71928ee4]:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-cancel-pay[data-v-71928ee4] { font-size: 0.8rem; background: var(--text-muted,#94a3b8) !important; color: rgb(255, 255, 255) !important; }
.btn-mgmt-danger[data-v-71928ee4]:hover:not(:disabled) { filter: brightness(1.1); }
.btn-mgmt-sm[data-v-71928ee4] { padding: 5px 10px; font-size: 0.75rem; }
.mgmt-loading[data-v-71928ee4], .mgmt-empty[data-v-71928ee4] { text-align: center; color: var(--text-muted,#94a3b8); padding: 16px; font-size: 0.82rem; }
.device-list[data-v-71928ee4] { flex-direction: column; gap: 8px; display: flex; }
.device-item[data-v-71928ee4] { background: rgb(255, 255, 255); border: 2px solid rgb(229, 231, 235); border-radius: 10px; align-items: center; gap: 12px; padding: 12px 14px; transition: 0.2s; display: flex; }
.device-item.current[data-v-71928ee4] { background: rgb(240, 240, 255); border-color: rgb(99, 102, 241); box-shadow: rgba(99, 102, 241, 0.1) 0px 2px 8px; }
.device-item[data-v-71928ee4]:not(.current):hover { background: rgb(249, 250, 251); border-color: rgb(209, 213, 219); }
.device-icon-wrap[data-v-71928ee4] { background: rgb(243, 244, 246); border-radius: 8px; flex-shrink: 0; justify-content: center; align-items: center; width: 36px; height: 36px; display: flex; position: relative; }
.device-svg-icon[data-v-71928ee4] { color: rgb(107, 114, 128); width: 20px; height: 20px; }
.device-online-dot[data-v-71928ee4] { background: rgb(34, 197, 94); border: 2px solid rgb(255, 255, 255); border-radius: 50%; width: 10px; height: 10px; position: absolute; bottom: -1px; right: -1px; }
.device-info[data-v-71928ee4] { flex-direction: column; flex: 1 1 0%; gap: 3px; min-width: 0px; display: flex; }
.device-name-row[data-v-71928ee4] { align-items: center; gap: 8px; display: flex; }
.device-name[data-v-71928ee4] { color: rgb(17, 24, 39); white-space: nowrap; text-overflow: ellipsis; font-size: 0.85rem; font-weight: 600; overflow: hidden; }
.device-badge-current[data-v-71928ee4] { color: rgb(255, 255, 255); background: rgb(99, 102, 241); border-radius: 4px; flex-shrink: 0; padding: 2px 8px; font-size: 0.65rem; font-weight: 600; }
.device-badge-online[data-v-71928ee4] { color: rgb(22, 163, 74); background: rgb(220, 252, 231); border-radius: 4px; flex-shrink: 0; padding: 2px 8px; font-size: 0.65rem; font-weight: 600; }
.device-meta[data-v-71928ee4] { color: rgb(107, 114, 128); font-size: 0.72rem; }
.btn-device-note[data-v-71928ee4] { cursor: pointer; opacity: 0.4; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex-shrink: 0; align-items: center; padding: 2px; transition: opacity 0.2s; display: flex; }
.btn-device-note[data-v-71928ee4]:hover { opacity: 1; }
.btn-device-note svg[data-v-71928ee4] { color: rgb(107, 114, 128); width: 14px; height: 14px; }
.device-note-edit[data-v-71928ee4] { align-items: center; gap: 6px; margin-top: 4px; display: flex; }
.device-note-input[data-v-71928ee4] { color: rgb(17, 24, 39); background: rgb(255, 255, 255); border: 1.5px solid rgb(209, 213, 219); border-radius: 6px; outline: none; flex: 1 1 0%; min-width: 0px; padding: 4px 8px; font-size: 0.78rem; }
.device-note-input[data-v-71928ee4]:focus { border-color: rgb(99, 102, 241); }
.btn-device-note-save[data-v-71928ee4], .btn-device-note-cancel[data-v-71928ee4] { cursor: pointer; border: 1.5px solid; border-radius: 6px; flex-shrink: 0; padding: 4px 10px; font-size: 0.72rem; font-weight: 600; transition: 0.2s; }
.btn-device-note-save[data-v-71928ee4] { color: rgb(255, 255, 255); background: rgb(99, 102, 241); border-color: rgb(99, 102, 241); }
.btn-device-note-save[data-v-71928ee4]:hover { background: rgb(79, 70, 229); }
.btn-device-note-cancel[data-v-71928ee4] { color: rgb(107, 114, 128); background: 0px 0px; border-color: rgb(209, 213, 219); }
.btn-device-note-cancel[data-v-71928ee4]:hover { background: rgb(243, 244, 246); }
.stats-section[data-v-71928ee4] { flex-direction: column; gap: 20px; max-height: 70vh; padding: 0px 24px 24px; display: flex; overflow-y: auto; }
.stats-avatar-row[data-v-71928ee4] { border-bottom: 1px solid rgba(0, 122, 255, 0.1); align-items: center; gap: 16px; margin-bottom: 6px; padding-bottom: 14px; display: flex; }
.avatar-wrapper[data-v-71928ee4] { cursor: pointer; background: rgb(0, 122, 255); border-radius: 50%; flex-shrink: 0; width: 64px; height: 64px; position: relative; overflow: hidden; box-shadow: rgba(0, 122, 255, 0.3) 0px 4px 12px; }
.avatar-wrapper .user-avatar[data-v-71928ee4] { object-fit: cover; width: 100%; height: 100%; }
.avatar-placeholder[data-v-71928ee4] { color: rgb(255, 255, 255); justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 1.5rem; font-weight: 600; display: flex; }
.avatar-overlay[data-v-71928ee4] { opacity: 0; background: rgba(0, 0, 0, 0.5); justify-content: center; align-items: center; width: 100%; height: 100%; transition: opacity 0.2s; display: flex; position: absolute; top: 0px; left: 0px; }
.avatar-wrapper:hover .avatar-overlay[data-v-71928ee4] { opacity: 1; }
.avatar-overlay svg[data-v-71928ee4] { color: rgb(255, 255, 255); width: 24px; height: 24px; }
.avatar-info[data-v-71928ee4] { flex-direction: column; gap: 4px; display: flex; }
.user-uid-label[data-v-71928ee4] { color: var(--text-muted,#94a3b8); text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7rem; }
.user-uid-value[data-v-71928ee4] { color: var(--text-title,#1d1d1f); cursor: pointer; font-family: "SF Mono", Monaco, monospace; font-size: 1.2rem; font-weight: 600; transition: color 0.2s; }
.user-uid-value[data-v-71928ee4]:hover { color: var(--accent-brand,#007aff); }
.stats-profile-card[data-v-71928ee4] { background: linear-gradient(135deg, rgba(0, 122, 255, 0.08), rgba(0, 122, 255, 0.04)); border: 1px solid rgba(0, 122, 255, 0.15); border-radius: 12px; flex-direction: column; gap: 10px; padding: 16px; display: flex; }
.stats-profile-row[data-v-71928ee4] { justify-content: space-between; align-items: center; display: flex; }
.stats-label[data-v-71928ee4] { color: var(--text-muted,#94a3b8); font-size: 0.8rem; }
.stats-value[data-v-71928ee4] { color: var(--text-primary,#e2e8f0); font-size: 0.85rem; font-weight: 500; }
.tier-main-row[data-v-71928ee4] { flex-direction: row; justify-content: space-between; align-items: center; gap: 8px; }
.tier-main-right[data-v-71928ee4] { align-items: center; gap: 8px; display: flex; }
.tier-expiry-tag[data-v-71928ee4] { color: var(--text-muted,#94a3b8); background: rgba(0, 122, 255, 0.08); border-radius: 10px; margin-top: -4px; padding: 3px 10px; font-size: 0.75rem; line-height: 1.4; }
.tier-expiry-tag.tier-expiring[data-v-71928ee4] { color: rgb(239, 68, 68); background: rgba(239, 68, 68, 0.1); }
.stats-code[data-v-71928ee4] { color: rgb(0, 122, 255); background: rgba(0, 122, 255, 0.1); border-radius: 4px; padding: 2px 8px; font-family: monospace; font-size: 0.8rem; }
.stats-grid[data-v-71928ee4] { grid-template-columns: repeat(4, 1fr); gap: 10px; display: grid; }
.stat-card[data-v-71928ee4] { background: var(--bg-section,#ffffff08); border: 1px solid var(--border-color,#ffffff0f); text-align: center; border-radius: 10px; padding: 14px 10px; }
.stat-number[data-v-71928ee4] { color: var(--text-primary,#e2e8f0); font-size: 1.4rem; font-weight: 700; line-height: 1.2; }
.stat-label[data-v-71928ee4] { color: var(--text-muted,#94a3b8); margin-top: 4px; font-size: 0.72rem; }
.stats-chart-section[data-v-71928ee4] { background: var(--bg-section,#ffffff08); border: 1px solid var(--border-color,#ffffff0f); border-radius: 12px; padding: 16px; }
.stats-section-title[data-v-71928ee4] { color: var(--text-primary,#e2e8f0); margin: 0px 0px 14px; font-size: 0.9rem; font-weight: 600; }
.hourly-chart[data-v-71928ee4] { align-items: flex-end; gap: 3px; height: 100px; display: flex; }
.hourly-bar-wrapper[data-v-71928ee4] { flex-direction: column; flex: 1 1 0%; justify-content: flex-end; align-items: center; height: 100%; display: flex; }
.hourly-bar[data-v-71928ee4] { background: linear-gradient(rgba(0, 122, 255, 0.4), rgb(0, 122, 255)); border-radius: 3px 3px 0px 0px; width: 100%; min-height: 2px; transition: height 0.4s; }
.hourly-bar.peak[data-v-71928ee4] { background: linear-gradient(rgb(251, 191, 36), rgb(245, 158, 11)); }
.hourly-label[data-v-71928ee4] { color: var(--text-muted,#64748b); white-space: nowrap; margin-top: 4px; font-size: 0.6rem; }
.stats-milestones-section[data-v-71928ee4] { background: var(--bg-section,#ffffff08); border: 1px solid var(--border-color,#ffffff0f); border-radius: 12px; padding: 16px; }
.milestones-coming-soon[data-v-71928ee4] { flex-direction: column; justify-content: center; align-items: center; gap: 12px; padding: 40px 20px; display: flex; }
.coming-soon-text[data-v-71928ee4] { color: var(--text-primary,#e2e8f0); margin: 0px; font-size: 1.1rem; font-weight: 600; }
.coming-soon-desc[data-v-71928ee4] { color: var(--text-muted,#64748b); margin: 0px; font-size: 0.82rem; }
.milestone-icon[data-v-71928ee4] { font-size: 1.1rem; }
.milestone-text[data-v-71928ee4] { font-weight: 500; }
.milestone-check[data-v-71928ee4] { color: rgb(82, 196, 26); margin-left: auto; font-weight: 700; }
.stats-codes-section[data-v-71928ee4] { background: var(--bg-section,#ffffff08); border: 1px solid var(--border-color,#ffffff0f); border-radius: 12px; padding: 16px; }
.used-codes-list[data-v-71928ee4] { flex-direction: column; gap: 6px; display: flex; }
.used-code-card[data-v-71928ee4] { border: 1px solid var(--border-color,#ffffff0a); background: rgba(255, 255, 255, 0.02); border-radius: 8px; align-items: center; gap: 10px; padding: 8px 12px; display: flex; }
.used-code-text[data-v-71928ee4] { color: rgb(0, 122, 255); flex-shrink: 0; font-family: monospace; font-size: 0.8rem; }
.used-code-type[data-v-71928ee4] { border-radius: 4px; flex-shrink: 0; padding: 2px 8px; font-size: 0.7rem; font-weight: 500; }
.code-type-special[data-v-71928ee4] { color: rgb(245, 158, 11); background: rgba(245, 158, 11, 0.15); }
.code-type-normal[data-v-71928ee4] { color: rgb(0, 122, 255); background: rgba(0, 122, 255, 0.1); }
.code-type-custom[data-v-71928ee4] { color: rgb(77, 163, 255); background: rgba(0, 122, 255, 0.12); }
.used-code-time[data-v-71928ee4] { color: var(--text-muted,#64748b); margin-left: auto; font-size: 0.72rem; }
@media (max-width: 600px) {
  .stats-grid[data-v-71928ee4] { grid-template-columns: repeat(2, 1fr); }
  .hourly-label[data-v-71928ee4] { display: none; }
  .hourly-label[data-v-71928ee4]:nth-child(3n+1) { display: inline; }
}
.dashboard-layout[data-v-71928ee4] { flex-direction: column; gap: 20px; display: flex; }
.dashboard-side-panel[data-v-71928ee4] { width: 100%; }
.dashboard-slots-panel[data-v-71928ee4] { width: 100%; min-width: 0px; }
.auth-loading[data-v-71928ee4] { flex-direction: column; justify-content: center; align-items: center; gap: 16px; padding: 80px 20px; display: flex; }
.auth-loading-spinner[data-v-71928ee4] { border-width: 3px; border-style: solid; border-color: rgb(115, 255, 242) rgba(255, 255, 255, 0.1) rgba(255, 255, 255, 0.1); border-image: initial; border-radius: 50%; width: 32px; height: 32px; animation: 0.8s linear 0s infinite normal none running auth-spin-71928ee4; }
@keyframes auth-spin-71928ee4 { 
  100% { transform: rotate(360deg); }
}
.auth-loading-text[data-v-71928ee4] { color: rgb(148, 163, 184); font-size: 13px; }
.code-hint-icon[data-v-71928ee4] { color: rgba(255, 255, 255, 0.4); cursor: pointer; vertical-align: middle; background: rgba(255, 255, 255, 0.1); border-radius: 50%; justify-content: center; align-items: center; width: 16px; height: 16px; margin-left: 4px; font-size: 10px; font-weight: 700; transition: background 0.2s, color 0.2s; display: inline-flex; }
.code-hint-icon[data-v-71928ee4]:hover { color: rgb(115, 255, 242); background: rgba(0, 122, 255, 0.3); }
.code-hint-overlay[data-v-71928ee4] { z-index: 99999; position: fixed; inset: 0px; }
.code-hint-card[data-v-71928ee4] { color: rgb(226, 232, 240); background: rgb(30, 41, 59); border: 1px solid rgba(115, 255, 242, 0.25); border-radius: 12px; padding: 16px 20px; font-size: 13px; line-height: 1.7; position: relative; box-shadow: rgba(0, 0, 0, 0.5) 0px 8px 32px, rgba(115, 255, 242, 0.08) 0px 0px 0px 1px; }
.code-hint-card p[data-v-71928ee4] { margin: 0px 0px 6px; }
.code-hint-card p[data-v-71928ee4]:last-child { margin-bottom: 0px; }
.code-hint-card a[data-v-71928ee4] { color: rgb(115, 255, 242); text-underline-offset: 2px; text-decoration: underline; }
.code-hint-card a[data-v-71928ee4]:hover { color: rgb(255, 255, 255); }
.code-hint-card-close[data-v-71928ee4] { color: rgb(100, 116, 139); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; padding: 2px; font-size: 18px; line-height: 1; transition: color 0.2s; position: absolute; top: 8px; right: 12px; }
.code-hint-card-close[data-v-71928ee4]:hover { color: rgb(255, 255, 255); }
.code-hint-fade-enter-active[data-v-71928ee4], .code-hint-fade-leave-active[data-v-71928ee4] { transition: opacity 0.18s; }
.code-hint-fade-enter-from[data-v-71928ee4], .code-hint-fade-leave-to[data-v-71928ee4] { opacity: 0; }
.fade-enter-active[data-v-71928ee4], .fade-leave-active[data-v-71928ee4] { transition: opacity 0.2s; }
.fade-enter-from[data-v-71928ee4], .fade-leave-to[data-v-71928ee4] { opacity: 0; }
.auth-form-panel[data-v-71928ee4] { padding-top: 8px; }
@keyframes modalScaleIn-71928ee4 { 
  0% { opacity: 0; transform: scale(0.96) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.close-btn[data-v-71928ee4] { cursor: pointer; color: var(--text-muted); transform-origin: 50% center; z-index: 10; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; padding: 6px; transition: 0.2s; display: flex; position: absolute; top: 12px; right: 12px; }
.close-btn[data-v-71928ee4]:hover { background: var(--bg-quota); color: var(--text-title); transform: rotate(90deg); }
.close-icon[data-v-71928ee4] { width: 14px; height: 14px; }
.tab-btn-tier[data-v-71928ee4] { color: rgb(0, 122, 255) !important; }
.tab-btn-tier.active[data-v-71928ee4] { color: rgb(77, 163, 255) !important; }
.tier-compare-container[data-v-71928ee4] { max-height: 420px; overflow-y: auto; padding: 12px 4px !important; }
.tier-grid[data-v-71928ee4] { grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; display: grid; }
.tier-card[data-v-71928ee4] { text-align: center; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 14px 10px; transition: transform 0.2s, border-color 0.2s; position: relative; }
.tier-card[data-v-71928ee4]:hover { border-color: rgba(255, 255, 255, 0.15); transform: translateY(-2px); }
.tier-card-highlight[data-v-71928ee4] { background: rgba(0, 122, 255, 0.06); border-color: rgba(0, 122, 255, 0.5); }
.tier-card-pro[data-v-71928ee4] { background: rgba(250, 173, 20, 0.04); border-color: rgba(250, 173, 20, 0.4); }
.tier-badge-tag[data-v-71928ee4] { color: rgb(255, 255, 255); background: rgb(0, 122, 255); border-radius: 8px; padding: 1px 10px; font-size: 0.6rem; font-weight: 600; position: absolute; top: -8px; left: 50%; transform: translate(-50%); }
.tier-badge-pro[data-v-71928ee4] { background: linear-gradient(135deg, rgb(250, 173, 20), rgb(212, 136, 6)); }
.tier-name[data-v-71928ee4] { color: rgb(255, 255, 255); margin-bottom: 2px; font-size: 1.1rem; font-weight: 700; }
.tier-desc[data-v-71928ee4] { color: rgb(142, 142, 147); margin-bottom: 10px; font-size: 0.7rem; }
.tier-features[data-v-71928ee4] { text-align: left; margin: 0px; padding: 0px; list-style: none; }
.tier-features li[data-v-71928ee4] { color: rgb(229, 229, 234); padding: 3px 0px 3px 14px; font-size: 0.7rem; position: relative; }
.tier-features li[data-v-71928ee4]::before { content: "✓"; color: rgb(48, 209, 88); font-size: 0.65rem; position: absolute; left: 0px; }
.tier-profile-card[data-v-71928ee4] { margin-bottom: 14px; }
.tier-value-accent[data-v-71928ee4] { font-weight: 700 !important; }
.tier-color-basic[data-v-71928ee4] { color: var(--text-body); }
.tier-color-lite[data-v-71928ee4] { color: rgb(0, 122, 255); }
.tier-color-core[data-v-71928ee4] { color: rgb(77, 163, 255); }
.tier-color-pro[data-v-71928ee4] { color: rgb(250, 173, 20); }
.tier-color-custom[data-v-71928ee4] { color: rgb(0, 122, 255); }
.tier-color-trial[data-v-71928ee4] { color: rgb(52, 199, 89); }
.tier-expiring[data-v-71928ee4] { color: rgb(255, 69, 58) !important; }
.tier-compare-full[data-v-71928ee4] { max-height: 480px; padding: 8px 0px; overflow-y: auto; }
.tier-table-wrap[data-v-71928ee4] { overflow-x: auto; }
.tier-table[data-v-71928ee4] { border-collapse: collapse; width: 100%; color: var(--text-body,#3a3a3c); font-size: 0.75rem; }
.tier-table th[data-v-71928ee4], .tier-table td[data-v-71928ee4] { text-align: center; border-bottom: 1px solid var(--border-card); color: var(--text-body,#3a3a3c); padding: 9px 10px; }
.tier-th-feature[data-v-71928ee4] { color: var(--text-title); min-width: 200px; font-size: 0.7rem; font-weight: 600; text-align: left !important; }
.tier-th-tier[data-v-71928ee4] { color: var(--text-title); min-width: 80px; font-weight: 700; }
.tier-th-tier small[data-v-71928ee4] { color: var(--text-muted); font-size: 0.6rem; font-weight: 400; }
.tier-th-highlight[data-v-71928ee4] { background: rgba(0, 122, 255, 0.08); border-radius: 8px 8px 0px 0px; }
.tier-th-current[data-v-71928ee4] { background: rgba(0, 122, 255, 0.12); border-bottom: 2px solid rgb(0, 122, 255); border-radius: 8px 8px 0px 0px; }
.tier-th-selected[data-v-71928ee4] { background: rgba(255, 149, 0, 0.12); border-bottom: 2px solid rgb(255, 149, 0); border-radius: 8px 8px 0px 0px; }
.tier-th-trial[data-v-71928ee4] { background: rgba(255, 107, 53, 0.08); border-radius: 8px 8px 0px 0px; }
.tier-th-pro[data-v-71928ee4] { background: rgba(250, 173, 20, 0.06); border-radius: 8px 8px 0px 0px; }
.tier-table td[data-v-71928ee4]:first-child { text-align: left; color: var(--text-title); }
.tier-table tbody tr[data-v-71928ee4]:hover { background: var(--bg-sub-panel); }
.tier-section-row td[data-v-71928ee4] { text-transform: uppercase; letter-spacing: 0.5px; font-size: 0.7rem; font-weight: 700; text-align: left !important; color: rgb(0, 122, 255) !important; background: 0px 0px !important; border-bottom: 1px solid rgba(0, 122, 255, 0.15) !important; padding-top: 14px !important; }
.tier-yes[data-v-71928ee4] { color: rgb(48, 209, 88); font-weight: 700; }
.tier-no[data-v-71928ee4] { color: var(--text-subtle); }
.tier-cell-hl[data-v-71928ee4] { color: rgb(77, 163, 255); background: rgba(0, 122, 255, 0.06); font-weight: 600; }
.tier-cell-trial[data-v-71928ee4] { color: rgb(255, 140, 66); background: rgba(255, 107, 53, 0.06); font-weight: 600; }
.tier-cell-pro[data-v-71928ee4] { color: rgb(250, 173, 20); background: rgba(250, 173, 20, 0.05); font-weight: 600; }
.tier-note[data-v-71928ee4] { text-align: center; color: var(--text-muted); margin-top: 14px; font-size: 0.72rem; }
.tier-note strong[data-v-71928ee4] { color: rgb(0, 122, 255); }
.auth-tabs[data-v-71928ee4] { background: var(--bg-quota); border: 1px solid var(--border-tab); border-radius: 9px; margin-bottom: 24px; padding: 2px; display: flex; position: relative; }
.tab-btn[data-v-71928ee4] { color: var(--text-body); opacity: 0.6; cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 7px; outline: none; flex: 1 1 0%; padding: 8px 14px; font-size: 0.88rem; font-weight: 500; transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1); }
.tab-btn.active[data-v-71928ee4] { background: var(--bg-tab-active); color: var(--text-title); box-shadow: var(--shadow-tab-active); }
.tab-btn[data-v-71928ee4]:hover:not(.active) { color: var(--text-title); }
.slots-section-header[data-v-71928ee4] { margin-bottom: 10px; }
.slots-section-header .section-subtitle[data-v-71928ee4] { color: var(--text-body); opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; margin: 0px; font-size: 0.78rem; font-weight: 600; }
.form-container[data-v-71928ee4] { flex-direction: column; gap: 14px; animation: 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal both running fadeSlideUp-71928ee4; display: flex; }
@keyframes fadeSlideUp-71928ee4 { 
  0% { opacity: 0; transform: translateY(6px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.form-title[data-v-71928ee4] { color: var(--text-title); letter-spacing: -0.4px; margin: 0px; font-size: 1.3rem; font-weight: 600; }
.coming-soon-text[data-v-71928ee4] { letter-spacing: 1px; background: linear-gradient(90deg, rgb(0, 122, 255), rgb(115, 255, 242), rgb(0, 122, 255)) 0px 0px / 200% 100% text; -webkit-text-fill-color: transparent; user-select: none; margin: -2px 0px 0px; font-size: 0.72rem; font-weight: 500; animation: 3s linear 0s infinite normal none running comingSoonFlow-71928ee4; }
@keyframes comingSoonFlow-71928ee4 { 
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}
.form-subtitle[data-v-71928ee4] { color: var(--text-body); margin: -8px 0px 4px; font-size: 0.85rem; line-height: 1.5; }
.text-success[data-v-71928ee4] { font-weight: 500; color: rgb(52, 199, 89) !important; }
.input-row[data-v-71928ee4] { gap: 12px; display: flex; }
.input-half[data-v-71928ee4] { flex: 1 1 0%; min-width: 0px; }
.auth-section .input-group[data-v-71928ee4] { height: auto !important; box-shadow: none !important; background-color: rgba(0, 0, 0, 0) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; border-radius: 0px !important; flex-direction: column !important; align-items: stretch !important; gap: 6px !important; padding: 0px !important; display: flex !important; overflow: visible !important; }
.input-group label[data-v-71928ee4] { color: var(--text-body); opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.78rem; font-weight: 600; }
.input-group input[data-v-71928ee4] { background: var(--bg-input); border: 1px solid var(--border-input); color: var(--text-title); box-sizing: border-box; border-radius: 8px; outline: none; width: 100%; min-height: 40px; padding: 11px 14px; font-size: 0.95rem; line-height: 1.4; transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: rgba(0, 0, 0, 0.01) 0px 1px 2px; }
.input-group input[data-v-71928ee4]::placeholder { color: var(--text-subtle); opacity: 0.5; }
.input-group input[data-v-71928ee4]:focus { border-color: var(--accent-brand); box-shadow: 0 0 0 3px var(--accent-glow); background: var(--bg-tab-active); }
.invitation-input-row[data-v-71928ee4] { flex-direction: column; gap: 6px; display: flex; }
.invitation-input-row input[data-v-71928ee4] { background: var(--bg-input); border: 1px solid var(--border-input); color: var(--text-title); box-sizing: border-box; border-radius: 8px; outline: none; width: 100%; min-height: 40px; padding: 11px 14px; font-size: 0.95rem; line-height: 1.4; transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: rgba(0, 0, 0, 0.01) 0px 1px 2px; }
.invitation-input-row input[data-v-71928ee4]:focus { border-color: var(--accent-brand); box-shadow: 0 0 0 3px var(--accent-glow); background: var(--bg-tab-active); }
.invitation-input-row input[data-v-71928ee4]::placeholder { color: var(--text-subtle); opacity: 0.5; }
.btn-mystery[data-v-71928ee4] { letter-spacing: 0.3px; color: rgb(255, 255, 255); cursor: pointer; user-select: none; text-align: center; background: linear-gradient(135deg, rgb(0, 122, 255), rgb(0, 210, 196)); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; justify-content: center; align-items: center; padding: 10px 16px; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: 0.2s; display: inline-flex; box-shadow: rgba(0, 122, 255, 0.2) 0px 4px 12px; }
.btn-mystery[data-v-71928ee4]:hover { color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(0, 106, 230), rgb(0, 191, 165)); transform: translateY(-0.5px); box-shadow: rgba(0, 122, 255, 0.3) 0px 6px 16px; }
.btn-mystery[data-v-71928ee4]:active { transform: scale(0.98); }
.password-input-wrapper[data-v-71928ee4] { align-items: center; display: flex; position: relative; }
.password-input-wrapper input[data-v-71928ee4] { padding-right: 42px; }
.password-input-wrapper input[data-v-71928ee4]::-webkit-credentials-auto-fill-button { display: none !important; }
.password-toggle[data-v-71928ee4] { cursor: pointer; color: var(--text-subtle); opacity: 0.6; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; justify-content: center; align-items: center; padding: 4px; transition: opacity 0.2s; display: flex; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); }
.password-toggle[data-v-71928ee4]:hover { opacity: 1; }
.password-toggle svg[data-v-71928ee4] { width: 18px; height: 18px; }
.remember-me-row[data-v-71928ee4] { align-items: center; gap: 12px; margin-bottom: 16px; display: flex; }
.remember-checkbox-label[data-v-71928ee4] { cursor: pointer; color: var(--text-title); white-space: nowrap; align-items: center; gap: 8px; font-size: 0.9rem; display: flex; }
.remember-checkbox-label input[type="checkbox"][data-v-71928ee4] { cursor: pointer; width: 16px; height: 16px; accent-color: var(--accent-brand,#007aff); }
.remember-me-row .remember-select[data-v-71928ee4] { flex: 1 1 0%; margin-bottom: 0px; }
.remember-select[data-v-71928ee4] { background-attachment: ; background-origin: ; background-clip: ; background-color: ; border: 1px solid var(--border-input); color: var(--text-title); box-sizing: border-box; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; background-size: 16px; border-radius: 8px; outline: none; width: 100%; min-height: 40px; padding: 11px 36px 11px 14px; font-size: 0.95rem; line-height: 1.4; transition: 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: rgba(0, 0, 0, 0.01) 0px 1px 2px; }
.remember-select[data-v-71928ee4]:focus { border-color: var(--accent-brand); box-shadow: 0 0 0 3px var(--accent-glow); background-color: var(--bg-tab-active); }
.remember-select option[data-v-71928ee4] { background: var(--bg-editor,#1a1a2e); color: var(--text-title,#e2e8f0); }
.password-strength[data-v-71928ee4] { margin-top: 8px; }
.strength-bars[data-v-71928ee4] { gap: 4px; margin-bottom: 6px; display: flex; }
.strength-bar[data-v-71928ee4] { background: var(--border-color,#ffffff1a); border-radius: 2px; flex: 1 1 0%; height: 4px; transition: background 0.2s; }
.strength-bar.active.weak[data-v-71928ee4] { background: rgb(255, 77, 79); }
.strength-bar.active.medium[data-v-71928ee4] { background: rgb(250, 173, 20); }
.strength-bar.active.strong[data-v-71928ee4] { background: rgb(82, 196, 26); }
.strength-text[data-v-71928ee4] { margin-bottom: 6px; font-size: 0.72rem; font-weight: 500; display: block; }
.strength-text.level-0[data-v-71928ee4] { color: var(--text-muted,#94a3b8); }
.strength-text.level-1[data-v-71928ee4] { color: rgb(255, 77, 79); }
.strength-text.level-2[data-v-71928ee4] { color: rgb(250, 173, 20); }
.strength-text.level-3[data-v-71928ee4] { color: rgb(82, 196, 26); }
.strength-hints[data-v-71928ee4] { flex-wrap: wrap; gap: 6px; font-size: 0.7rem; display: flex; }
.hint-item[data-v-71928ee4] { color: var(--text-muted,#64748b); background: rgba(255, 255, 255, 0.04); border-radius: 4px; padding: 2px 6px; transition: 0.2s; }
.hint-item.met[data-v-71928ee4] { color: rgb(82, 196, 26); background: rgba(82, 196, 26, 0.1); }
.strength-warning[data-v-71928ee4] { color: rgb(255, 77, 79); margin-top: 6px; font-size: 0.72rem; display: block; }
.password-mismatch-hint[data-v-71928ee4] { color: rgb(255, 77, 79); margin-top: 4px; font-size: 0.72rem; }
.turnstile-container[data-v-71928ee4] { flex-direction: column; justify-content: center; align-items: center; min-height: 65px; margin: 4px 0px; display: flex; }
.turnstile-shared[data-v-71928ee4] { margin-top: 12px; }
.turnstile-manual-trigger[data-v-71928ee4] { flex-direction: column; align-items: center; gap: 8px; padding: 12px 0px; display: flex; }
.turnstile-manual-trigger .btn[data-v-71928ee4] { border-radius: 6px; padding: 6px 16px; font-size: 0.8rem; transition: 0.2s; }
.turnstile-manual-trigger .btn[data-v-71928ee4]:hover { transform: translateY(-1px); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; }
.turnstile-manual-hint[data-v-71928ee4] { color: var(--text-secondary,#6b7280); opacity: 0.8; font-size: 0.72rem; }
.btn[data-v-71928ee4] { cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; outline: none; justify-content: center; align-items: center; font-family: inherit; display: inline-flex; }
.btn-submit[data-v-71928ee4] { background: var(--accent-brand); box-shadow: 0 4px 10px var(--accent-glow); border-radius: 8px; padding: 11px 18px; font-size: 0.92rem; font-weight: 600; transition: 0.2s; color: rgb(255, 255, 255) !important; }
.btn-submit[data-v-71928ee4]:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 6px 14px var(--accent-glow); transform: translateY(-0.5px); }
.btn-submit[data-v-71928ee4]:active:not(:disabled) { transform: scale(0.985); }
.btn-submit[data-v-71928ee4]:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn-reg[data-v-71928ee4] { background: linear-gradient(135deg, rgb(0, 122, 255), rgb(0, 85, 210)); }
.btn-reg[data-v-71928ee4]:hover:not(:disabled) { background: linear-gradient(135deg, rgb(0, 132, 255), rgb(0, 102, 242)); }
.btn-text-link[data-v-71928ee4] { color: var(--accent-brand); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; align-self: center; margin-top: 10px; font-size: 0.8rem; font-weight: 500; transition: color 0.2s; }
.btn-text-link[data-v-71928ee4]:hover { color: var(--accent-hover); text-decoration: underline; }
.dashboard-header-card[data-v-71928ee4] { background: var(--bg-sub-panel); border: 1px solid var(--border-card); backdrop-filter: blur(8px); border-radius: 12px; flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 12px; margin-bottom: 14px; padding: 14px 16px; display: flex; }
.header-main[data-v-71928ee4] { align-items: flex-start; gap: 12px; display: flex; }
.user-avatar-wrapper[data-v-71928ee4] { position: relative; }
.user-avatar[data-v-71928ee4] { background: var(--accent-glow); color: var(--accent-brand); width: 38px; height: 38px; box-shadow: 0 0 10px var(--accent-glow); border-radius: 50%; justify-content: center; align-items: center; display: flex; overflow: hidden; }
.avatar-icon[data-v-71928ee4] { width: 18px; height: 18px; }
.avatar-img[data-v-71928ee4] { object-fit: cover; width: 100%; height: 100%; }
.active-dot-pulse[data-v-71928ee4] { border: 2px solid var(--bg-panel); background: rgb(52, 199, 89); border-radius: 50%; width: 8px; height: 8px; animation: 1.8s ease 0s infinite normal none running dotPulse-71928ee4; position: absolute; bottom: 0px; right: 0px; box-shadow: rgba(52, 199, 89, 0.4) 0px 0px; }
@keyframes dotPulse-71928ee4 { 
  0% { box-shadow: rgba(52, 199, 89, 0.7) 0px 0px; }
  70% { box-shadow: rgba(52, 199, 89, 0) 0px 0px 0px 6px; }
  100% { box-shadow: rgba(52, 199, 89, 0) 0px 0px; }
}
.user-meta[data-v-71928ee4] { flex: 1 1 0%; min-width: 0px; overflow: hidden; }
.user-email-row[data-v-71928ee4] { align-items: center; gap: 8px; display: flex; }
.user-email[data-v-71928ee4] { color: var(--text-title); text-overflow: ellipsis; white-space: nowrap; max-width: 160px; margin: 0px; font-size: 0.9rem; font-weight: 600; overflow: hidden; }
.user-badge[data-v-71928ee4] { border-radius: 4px; padding: 2px 6px; font-size: 0.65rem; font-weight: 600; }
.badge-normal[data-v-71928ee4] { color: var(--text-body); opacity: 0.8; background: rgba(142, 142, 147, 0.12); border: 1px solid rgba(142, 142, 147, 0.2); }
.badge-special[data-v-71928ee4] { color: rgb(0, 122, 255); background: rgba(0, 122, 255, 0.12); border: 1px solid rgba(0, 122, 255, 0.25); }
.badge-custom[data-v-71928ee4] { color: rgb(88, 86, 214); background: rgba(88, 86, 214, 0.12); border: 1px solid rgba(88, 86, 214, 0.25); }
.user-status-text[data-v-71928ee4] { color: var(--text-body); opacity: 0.7; margin: 3px 0px 0px; font-size: 0.72rem; }
.user-tier-expire[data-v-71928ee4] { color: rgb(82, 196, 26); background: rgba(82, 196, 26, 0.1); border-radius: 4px; margin-top: 4px; padding: 2px 8px; font-size: 0.68rem; display: inline-block; }
.user-tier-expire.tier-expiring-soon[data-v-71928ee4] { color: rgb(255, 77, 79); background: rgba(255, 77, 79, 0.1); animation: 2s ease-in-out 0s infinite normal none running pulse-expire-71928ee4; }
@keyframes pulse-expire-71928ee4 { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}
.feature-locked-hint[data-v-71928ee4] { color: rgb(107, 114, 128); text-align: center; border: 1px dashed rgb(209, 213, 219); border-radius: 6px; margin: 4px 0px; padding: 8px; font-size: 0.72rem; }
.btn-logout-modern[data-v-71928ee4] { color: rgb(255, 59, 48); cursor: pointer; background: 0px 0px; border: 1px solid rgba(255, 59, 48, 0.25); border-radius: 8px; justify-content: center; align-items: center; width: 100%; padding: 7px 12px; font-size: 0.78rem; font-weight: 600; transition: 0.2s; display: flex; }
.btn-logout-modern[data-v-71928ee4]:hover { background: rgb(255, 59, 48); box-shadow: rgba(255, 59, 48, 0.2) 0px 4px 10px; color: rgb(255, 255, 255) !important; }
.quota-card-modern[data-v-71928ee4] { background: var(--bg-sub-panel); border: 1px solid var(--border-card); border-radius: 12px; margin-bottom: 20px; padding: 12px 16px; }
.sync-limit-card[data-v-71928ee4] { margin-top: -8px; padding: 10px 16px; }
.quota-labels[data-v-71928ee4] { color: var(--text-body); opacity: 0.75; justify-content: space-between; margin-bottom: 6px; font-size: 0.78rem; font-weight: 500; display: flex; }
.quota-title[data-v-71928ee4] { align-items: center; gap: 6px; font-weight: 500; display: inline-flex; }
.sdm-trigger-btn[data-v-71928ee4] { cursor: pointer; width: 22px; height: 22px; color: var(--text-secondary,#9ca3af); vertical-align: middle; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; justify-content: center; align-items: center; transition: background 0.15s, color 0.15s; display: inline-flex; }
.sdm-trigger-btn[data-v-71928ee4]:hover { background: var(--color-primary-bg,#eff6ff); color: var(--color-primary,#3b82f6); }
.quota-fraction-modern[data-v-71928ee4] { color: var(--text-title); font-family: monospace; font-size: 0.8rem; font-weight: 600; }
.quota-separator[data-v-71928ee4] { color: var(--text-muted); opacity: 0.5; margin: 0px 1px; }
.quota-bar-bg-modern[data-v-71928ee4] { background: var(--bg-quota); border-radius: 3px; height: 6px; overflow: hidden; }
.quota-bar-fill-modern[data-v-71928ee4] { background: var(--accent-brand); border-radius: 3px; height: 100%; transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
.quota-bar-fill-modern.warning[data-v-71928ee4] { background: rgb(255, 149, 0); }
.quota-bar-fill-modern.full[data-v-71928ee4] { background: rgb(255, 59, 48); }
.quota-breakdown[data-v-71928ee4] { color: var(--text-muted); gap: 12px; margin-top: 6px; font-size: 0.68rem; display: flex; }
.quota-breakdown .breakdown-item[data-v-71928ee4] { align-items: center; gap: 3px; display: inline-flex; }
.quota-breakdown .breakdown-item.subscribed[data-v-71928ee4] { color: rgb(34, 211, 238); font-weight: 600; }
.storage-subs-list[data-v-71928ee4] { flex-direction: column; gap: 4px; margin-top: 6px; display: flex; }
.storage-sub-item[data-v-71928ee4] { background: rgba(34, 211, 238, 0.06); border: 1px solid rgba(34, 211, 238, 0.15); border-radius: 6px; justify-content: space-between; align-items: center; padding: 5px 10px; font-size: 0.72rem; display: flex; }
.storage-sub-item.expired[data-v-71928ee4] { opacity: 0.6; background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.15); }
.storage-sub-item .sub-size[data-v-71928ee4] { color: rgb(34, 211, 238); font-weight: 700; }
.storage-sub-item.expired .sub-size[data-v-71928ee4] { color: rgb(239, 68, 68); }
.storage-sub-item .sub-status.active[data-v-71928ee4] { color: rgb(74, 222, 128); }
.storage-sub-item .sub-status.expired[data-v-71928ee4] { color: rgb(239, 68, 68); }
.storage-sub-item .sub-expires[data-v-71928ee4] { color: rgb(107, 114, 128); font-size: 0.65rem; }
.btn-cleanup-assets[data-v-71928ee4] { color: rgb(5, 150, 105); cursor: pointer; background: rgba(16, 185, 129, 0.1); border: 1.5px solid rgba(16, 185, 129, 0.25); border-radius: 8px; width: 100%; margin-top: 8px; padding: 8px 14px; font-size: 0.72rem; font-weight: 600; transition: 0.2s; }
.btn-cleanup-assets[data-v-71928ee4]:hover { background: rgba(16, 185, 129, 0.18); border-color: rgba(16, 185, 129, 0.45); box-shadow: rgba(16, 185, 129, 0.15) 0px 2px 8px; }
.cleanup-modal[data-v-71928ee4] { --text-title: #1d1d1f; --text-body: #3a3a3c; --text-muted: #6e6e73; --bg-panel: #fff; --bg-sub-panel: #f2f2f7; --border-card: #0000001a; --shadow-modal: 0 20px 50px #00000026; --accent-brand: #007aff; --bg-quota: #0000000d; --border-tab: #00000014; --bg-tab-active: #ffffffe6; --shadow-tab-active: 0 2px 8px #00000014; --border-input: #0000001a; --bg-input: #00000008; background: var(--bg-panel); box-shadow: var(--shadow-modal); border: 1.5px solid var(--border-card); border-radius: 18px; flex-direction: column; width: 90%; max-width: 520px; max-height: 70vh; padding: 30px; animation: 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running modalScaleIn-71928ee4; display: flex; position: relative; overflow: hidden; }
.cleanup-header[data-v-71928ee4] { border-bottom: 1.5px solid var(--border-card,#e5e7eb); flex-direction: column; gap: 12px; margin-bottom: 16px; padding: 0px 0px 16px; display: flex; }
.cleanup-header h3[data-v-71928ee4] { color: var(--text-title,#1f2937); flex: 1 1 0%; margin: 0px; font-size: 1.05rem; font-weight: 600; }
.cleanup-header .close-btn[data-v-71928ee4] { color: var(--text-muted,#6b7280); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex-shrink: 0; padding: 0px; font-size: 1.5rem; line-height: 1; transition: color 0.2s; }
.cleanup-header .close-btn[data-v-71928ee4]:hover { color: var(--text-title,#111827); }
.cleanup-body[data-v-71928ee4] { flex: 1 1 0%; padding: 16px 0px 0px; overflow-y: auto; }
.cleanup-loading[data-v-71928ee4] { text-align: center; color: var(--text-muted,#9ca3af); padding: 40px; font-size: 0.85rem; }
.cleanup-hint[data-v-71928ee4] { color: rgb(107, 114, 128); margin-bottom: 12px; padding: 0px 4px; font-size: 0.75rem; }
.cleanup-empty[data-v-71928ee4] { text-align: center; color: rgb(107, 114, 128); padding: 30px 0px; font-size: 0.85rem; }
.btn-clear-all[data-v-71928ee4] { color: rgb(239, 68, 68); cursor: pointer; background: 0px 0px; border: 2px solid rgb(252, 165, 165); border-radius: 6px; padding: 4px 12px; font-size: 0.8rem; font-weight: 600; transition: 0.2s; }
.btn-clear-all[data-v-71928ee4]:hover { color: rgb(220, 38, 38); background: rgb(254, 226, 226); border-color: rgb(239, 68, 68); }
.cleanup-summary[data-v-71928ee4] { color: var(--text-muted,#6b7280); border-bottom: 1.5px solid var(--border-card,#e5e7eb); justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; font-size: 0.78rem; display: flex; }
.cleanup-list[data-v-71928ee4] { flex-direction: column; gap: 10px; display: flex; }
.cleanup-item[data-v-71928ee4] { cursor: default; background: rgb(255, 255, 255); border: 2px solid rgb(209, 213, 219); border-radius: 10px; align-items: center; gap: 12px; padding: 14px 16px; transition: 0.2s; display: flex; box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 4px; }
.cleanup-item[data-v-71928ee4]:hover { background: rgb(249, 250, 251); border-color: rgb(99, 102, 241); box-shadow: rgba(99, 102, 241, 0.12) 0px 4px 12px; }
.cleanup-item.unreferenced[data-v-71928ee4] { background: rgb(254, 242, 242); border-color: rgb(239, 68, 68); box-shadow: rgba(239, 68, 68, 0.1) 0px 1px 4px; }
.cleanup-item.unreferenced[data-v-71928ee4]:hover { border-color: rgb(220, 38, 38); box-shadow: rgba(239, 68, 68, 0.15) 0px 4px 12px; }
.cleanup-thumb[data-v-71928ee4] { object-fit: cover; background: rgb(243, 244, 246); border: 1px solid rgb(229, 231, 235); border-radius: 8px; flex-shrink: 0; width: 48px; height: 48px; }
.cleanup-info[data-v-71928ee4] { flex: 1 1 0%; min-width: 0px; }
.cleanup-name[data-v-71928ee4] { color: var(--text-title,#1f2937); white-space: nowrap; text-overflow: ellipsis; letter-spacing: 0.02em; font-family: "SF Mono", Menlo, Monaco, monospace; font-size: 0.82rem; font-weight: 600; overflow: hidden; }
.cleanup-meta[data-v-71928ee4] { color: var(--text-muted,#6b7280); align-items: center; gap: 8px; margin-top: 6px; font-size: 0.75rem; display: flex; }
.cleanup-tag[data-v-71928ee4] { letter-spacing: 0.02em; border-radius: 6px; padding: 4px 12px; font-size: 0.7rem; font-weight: 600; display: inline-block; }
.ref-tag[data-v-71928ee4] { color: rgb(29, 78, 216); background: rgb(219, 234, 254); border: 1px solid rgb(147, 197, 253); }
.unref-tag[data-v-71928ee4] { color: rgb(185, 28, 28); background: rgb(254, 226, 226); border: 1px solid rgb(252, 165, 165); }
.btn-cleanup-delete[data-v-71928ee4] { color: rgb(220, 38, 38); cursor: pointer; background: rgb(254, 226, 226); border: 2px solid rgb(252, 165, 165); border-radius: 8px; flex-shrink: 0; padding: 8px 16px; font-size: 0.75rem; font-weight: 600; transition: 0.2s; }
.btn-cleanup-delete[data-v-71928ee4]:hover:not(:disabled) { color: rgb(185, 28, 28); background: rgb(254, 202, 202); border-color: rgb(239, 68, 68); box-shadow: rgba(239, 68, 68, 0.2) 0px 4px 12px; }
.btn-cleanup-delete[data-v-71928ee4]:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn-cleanup-restore[data-v-71928ee4] { color: rgb(5, 150, 105); cursor: pointer; background: rgb(209, 250, 229); border: 2px solid rgb(110, 231, 183); border-radius: 8px; flex-shrink: 0; padding: 8px 16px; font-size: 0.75rem; font-weight: 600; transition: 0.2s; }
.btn-cleanup-restore[data-v-71928ee4]:hover:not(:disabled) { color: rgb(4, 120, 87); background: rgb(167, 243, 208); border-color: rgb(52, 211, 153); box-shadow: rgba(52, 211, 153, 0.2) 0px 4px 12px; }
.btn-cleanup-restore[data-v-71928ee4]:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.restore-picker-overlay[data-v-71928ee4] { background: var(--bg-modal-overlay,#0009); z-index: 999999; backdrop-filter: blur(5px); justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: fixed; top: 0px; left: 0px; }
.restore-picker-container[data-v-71928ee4] { background: var(--bg-editor,#fff); box-shadow: 0 10px 40px var(--shadow-heavy,#00000026); border: 1px solid var(--border-color,#e8e8e8); border-radius: 16px; width: 90%; max-width: 440px; padding: 25px; animation: 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running restorePickerIn-71928ee4; }
.restore-picker-container h3[data-v-71928ee4] { color: var(--text-primary); margin-top: 0px; margin-bottom: 12px; font-size: 1.25rem; font-weight: 700; }
.restore-picker-desc[data-v-71928ee4] { color: var(--text-secondary,#888); margin: 0px 0px 16px; font-size: 0.9rem; line-height: 1.6; }
.restore-picker-empty-hint[data-v-71928ee4] { text-align: center; color: var(--text-secondary,#888); padding: 12px; font-size: 0.85rem; }
.restore-slot-grid[data-v-71928ee4] { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 8px; margin-bottom: 20px; display: grid; }
.restore-slot-btn[data-v-71928ee4] { border: 2px solid var(--border-color,#e8e8e8); background: var(--bg-section,#f3f3f3); cursor: pointer; border-radius: 10px; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; transition: 0.2s; display: flex; }
.restore-slot-btn.is-occupied[data-v-71928ee4] { opacity: 0.4; cursor: not-allowed; background: var(--bg-section,#f9f9f9); }
.restore-slot-btn.is-empty[data-v-71928ee4]:not(.is-selected):hover { border-color: var(--color-primary,#007aff); background: color-mix(in srgb, var(--color-primary,#007aff), transparent 92%); }
.restore-slot-btn.is-selected[data-v-71928ee4] { border-color: var(--color-primary,#007aff); background: color-mix(in srgb, var(--color-primary,#007aff), transparent 88%); box-shadow: 0 2px 8px color-mix(in srgb, var(--color-primary,#007aff), transparent 75%); }
.restore-slot-num[data-v-71928ee4] { color: var(--text-primary); font-size: 0.95rem; font-weight: 700; }
.restore-slot-status[data-v-71928ee4] { color: var(--text-secondary,#888); white-space: nowrap; text-overflow: ellipsis; max-width: 80px; font-size: 0.7rem; overflow: hidden; }
.restore-slot-btn.is-selected .restore-slot-status[data-v-71928ee4] { color: var(--color-primary,#007aff); font-weight: 600; }
.restore-slot-btn.is-occupied .restore-slot-status[data-v-71928ee4] { color: var(--text-secondary,#aaa); }
.restore-picker-actions[data-v-71928ee4] { justify-content: flex-end; gap: 12px; margin-top: 8px; display: flex; }
.restore-picker-btn[data-v-71928ee4] { cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 10px; width: auto; min-width: 90px; padding: 10px 20px; font-size: 0.95rem; font-weight: 600; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); }
.restore-picker-btn[data-v-71928ee4]:hover { filter: brightness(1.05); transform: translateY(-1px); }
.restore-picker-btn[data-v-71928ee4]:active { filter: brightness(0.95); transform: scale(0.96); }
.restore-picker-btn[data-v-71928ee4]:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; transform: none; }
.restore-picker-btn-default[data-v-71928ee4] { background: var(--bg-section,#f3f3f3); color: var(--text-primary,#333); border: 1px solid var(--border-color) !important; }
.restore-picker-btn-primary[data-v-71928ee4] { background: linear-gradient(135deg, var(--color-primary,#007aff), color-mix(in srgb, var(--color-primary,#007aff), black 20%)); color: rgb(255, 255, 255); box-shadow: 0 4px 12px color-mix(in srgb, var(--color-primary,#007aff), transparent 80%); }
@keyframes restorePickerIn-71928ee4 { 
  0% { opacity: 0; transform: scale(0.96) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.slots-section-modern .section-subtitle[data-v-71928ee4] { color: var(--text-body); opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; margin: 0px 0px 10px; font-size: 0.78rem; font-weight: 600; }
.slots-list-modern[data-v-71928ee4] { flex-direction: column; gap: 10px; max-height: 250px; padding-right: 4px; display: flex; overflow-y: auto; }
.slots-list-modern[data-v-71928ee4]::-webkit-scrollbar { width: 4px; }
.slots-list-modern[data-v-71928ee4]::-webkit-scrollbar-thumb { background: var(--border-input); border-radius: 2px; }
.slot-card-modern[data-v-71928ee4] { background: var(--bg-card); border: 1px solid var(--border-card); border-radius: 12px; flex-direction: column; gap: 10px; padding: 12px 14px; transition: 0.25s cubic-bezier(0.16, 1, 0.3, 1); display: flex; position: relative; }
.slot-card-modern[data-v-71928ee4]:hover { border-color: var(--border-card-hover); background: var(--bg-sub-panel); transform: translateY(-0.5px); }
.slot-card-modern.is-bound[data-v-71928ee4] { background: rgba(0, 122, 255, 0.03); border-color: rgba(0, 122, 255, 0.4); box-shadow: rgba(0, 122, 255, 0.05) 0px 4px 16px; }
.slot-card-modern.is-locked[data-v-71928ee4] { background: rgba(255, 59, 48, 0.01); border-color: rgba(255, 59, 48, 0.25); }
.slot-number-badge-modern[data-v-71928ee4] { color: var(--text-body); opacity: 0.65; background: var(--bg-quota); border-radius: 4px; padding: 1px 6px; font-family: monospace; font-size: 0.68rem; font-weight: 700; position: absolute; top: 12px; right: 12px; }
.slot-empty-info-modern[data-v-71928ee4] { flex-direction: column; gap: 3px; display: flex; }
.empty-text-modern[data-v-71928ee4] { color: var(--text-body); opacity: 0.7; font-size: 0.9rem; font-weight: 600; }
.empty-sub-modern[data-v-71928ee4] { color: var(--text-body); opacity: 0.75; font-size: 0.78rem; line-height: 1.4; }
.slot-details-modern[data-v-71928ee4] { flex-direction: column; gap: 4px; display: flex; }
.slot-name-row-modern[data-v-71928ee4] { flex-wrap: wrap; align-items: center; gap: 8px; display: flex; }
.slot-name-modern[data-v-71928ee4] { color: var(--text-title); font-size: 0.95rem; font-weight: 600; }
.btn-icon-rename-modern[data-v-71928ee4] { width: 18px; height: 18px; color: var(--text-muted); cursor: pointer; opacity: 0.5; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; justify-content: center; align-items: center; padding: 2px; transition: 0.2s; display: inline-flex; }
.btn-icon-rename-modern[data-v-71928ee4]:hover { opacity: 1; background: var(--bg-quota); color: var(--accent-brand); }
.slot-rename-inline[data-v-71928ee4] { flex: 1 1 0%; align-items: center; gap: 4px; display: flex; }
.slot-rename-input[data-v-71928ee4] { border: 1px solid var(--accent-brand); background: var(--bg-card); min-width: 0px; color: var(--text-title); border-radius: 4px; outline: none; flex: 1 1 0%; padding: 3px 6px; font-size: 0.85rem; font-weight: 500; }
.btn-rename-confirm-modern[data-v-71928ee4] { background: var(--accent-brand) !important; color: rgb(255, 255, 255) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; padding: 3px 8px !important; font-size: 0.65rem !important; }
.btn-rename-cancel-modern[data-v-71928ee4] { background: var(--bg-quota) !important; color: var(--text-body) !important; border-width: medium !important; border-style: none !important; border-color: currentcolor !important; border-image: initial !important; padding: 3px 8px !important; font-size: 0.65rem !important; }
.sync-badge-modern[data-v-71928ee4] { color: rgb(52, 199, 89); background: rgba(52, 199, 89, 0.12); border: 1px solid rgba(52, 199, 89, 0.2); border-radius: 4px; align-items: center; gap: 3px; padding: 1px 6px; font-size: 0.62rem; font-weight: 600; display: inline-flex; }
.sync-icon[data-v-71928ee4] { transform-box: fill-box; transform-origin: 50% center; flex-shrink: 0; width: 8px; height: 8px; display: block; }
.sync-check-icon[data-v-71928ee4] { flex-shrink: 0; width: 9px; height: 9px; animation: 2s ease-in-out 0s infinite normal none running sync-pulse-71928ee4; display: block; }
@keyframes sync-pulse-71928ee4 { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.locked-badge-modern[data-v-71928ee4] { color: rgb(255, 59, 48); background: rgba(255, 59, 48, 0.1); border: 1px solid rgba(255, 59, 48, 0.2); border-radius: 4px; align-items: center; gap: 3px; padding: 1px 6px; font-size: 0.62rem; font-weight: 600; display: inline-flex; }
.slot-meta-row-modern[data-v-71928ee4] { color: var(--text-body); opacity: 0.8; align-items: center; gap: 5px; font-size: 0.75rem; display: flex; }
.slot-size-detail[data-v-71928ee4] { opacity: 0.6; font-size: 0.65rem; }
.dot-modern[data-v-71928ee4] { opacity: 0.4; }
.slot-actions-modern[data-v-71928ee4] { flex-wrap: wrap; gap: 6px; margin-top: 2px; display: flex; }
.btn-modern[data-v-71928ee4] { cursor: pointer; border: 1px solid rgba(0, 0, 0, 0); border-radius: 6px; outline: none; justify-content: center; align-items: center; padding: 5px 10px; font-size: 0.72rem; font-weight: 600; transition: 0.2s; display: inline-flex; }
.btn-slot-modern[data-v-71928ee4] { min-height: 26px; }
.btn-bind-modern[data-v-71928ee4] { background: var(--accent-brand); box-shadow: 0 2px 6px var(--accent-glow); color: rgb(255, 255, 255) !important; }
.btn-bind-modern[data-v-71928ee4]:hover { background: var(--accent-hover); box-shadow: 0 4px 10px var(--accent-glow); }
.btn-unbind-modern[data-v-71928ee4] { color: rgb(255, 59, 48); background: 0px 0px; border-color: rgba(255, 59, 48, 0.25); }
.btn-unbind-modern[data-v-71928ee4]:hover { background: rgb(255, 59, 48); box-shadow: rgba(255, 59, 48, 0.2) 0px 4px 10px; color: rgb(255, 255, 255) !important; }
.btn-download-modern[data-v-71928ee4] { color: var(--accent-brand); background: 0px 0px; border-color: rgba(0, 122, 255, 0.25); }
.btn-download-modern[data-v-71928ee4]:hover { background: var(--accent-brand); box-shadow: 0 4px 10px var(--accent-glow); color: rgb(255, 255, 255) !important; }
.btn-bind-overwrite-modern[data-v-71928ee4] { color: rgb(255, 149, 0); background: 0px 0px; border-color: rgba(255, 149, 0, 0.25); }
.btn-bind-overwrite-modern[data-v-71928ee4]:hover { background: rgb(255, 149, 0); box-shadow: rgba(255, 149, 0, 0.2) 0px 4px 10px; color: rgb(255, 255, 255) !important; }
.btn-clear-modern[data-v-71928ee4] { background: var(--bg-quota); color: var(--text-body); opacity: 0.7; border-color: var(--border-input); margin-left: auto; }
.btn-clear-modern[data-v-71928ee4]:hover { color: rgb(255, 59, 48); background: rgba(255, 59, 48, 0.08); border-color: rgba(255, 59, 48, 0.15); }
.btn-history-modern[data-v-71928ee4] { color: rgb(0, 122, 255); background: rgba(0, 122, 255, 0.08); border-color: rgba(0, 122, 255, 0.2); }
.btn-history-modern[data-v-71928ee4]:hover { background: rgba(99, 102, 241, 0.15); border-color: rgba(99, 102, 241, 0.3); }
.btn-storage-modern[data-v-71928ee4] { color: rgb(16, 185, 129); background: rgba(16, 185, 129, 0.08); border-color: rgba(16, 185, 129, 0.2); }
.btn-storage-modern[data-v-71928ee4]:hover { background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.3); }
.btn-danger-force-modern[data-v-71928ee4] { color: rgb(255, 59, 48); background: rgba(255, 59, 48, 0.08); border: 1px solid rgba(255, 59, 48, 0.2); width: 100%; }
.btn-danger-force-modern[data-v-71928ee4]:hover { background: rgb(255, 59, 48); box-shadow: rgba(255, 59, 48, 0.2) 0px 4px 10px; color: rgb(255, 255, 255) !important; }
.animate-spin[data-v-71928ee4] { transform-origin: 50% center; animation: 1s linear 0s infinite normal none running spin-71928ee4; }
@keyframes spin-71928ee4 { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.special-invitation-section-modern[data-v-71928ee4], .upgrade-section-modern[data-v-71928ee4] { border-top: 1px solid var(--border-card); margin-top: 24px; padding-top: 20px; }
.upgrade-desc-modern[data-v-71928ee4] { color: var(--text-body); opacity: 0.7; margin: 4px 0px 12px; font-size: 0.8rem; line-height: 1.5; }
.upgrade-input-row[data-v-71928ee4] { gap: 8px; display: flex; }
.upgrade-input[data-v-71928ee4] { background: var(--bg-input); border: 1px solid var(--border-input); color: var(--text-title); box-sizing: border-box; letter-spacing: 0.5px; border-radius: 8px; outline: none; flex: 1 1 0%; min-height: 40px; padding: 10px 14px; font-family: monospace; font-size: 0.9rem; transition: 0.2s; }
.upgrade-input[data-v-71928ee4]:focus { border-color: var(--accent-brand); box-shadow: 0 0 0 3px var(--accent-glow); }
.upgrade-input[data-v-71928ee4]:disabled { opacity: 0.5; }
.btn-upgrade-modern[data-v-71928ee4] { white-space: nowrap; min-height: 40px; padding: 10px 18px; }
.btn-upgrade-modern[data-v-71928ee4]:disabled { opacity: 0.5; cursor: not-allowed; }
.afdian-upgrade-btn[data-v-71928ee4] { color: rgb(0, 122, 255); cursor: pointer; background: rgba(0, 122, 255, 0.08); border: 1px solid rgba(0, 122, 255, 0.15); border-radius: 8px; align-items: center; width: fit-content; padding: 1px 6px; font-size: 0.62rem; font-weight: 500; line-height: 1.4; text-decoration: none; transition: 0.2s; display: inline-flex; }
.afdian-upgrade-btn[data-v-71928ee4]:hover { background: rgba(0, 122, 255, 0.15); border-color: rgba(0, 122, 255, 0.35); }
.afdian-upgrade-btn-inline[data-v-71928ee4] { color: rgb(0, 122, 255); cursor: pointer; background: rgba(0, 122, 255, 0.08); border: 1px solid rgba(0, 122, 255, 0.15); border-radius: 12px; align-items: center; padding: 2px 10px; font-size: 0.7rem; font-weight: 500; text-decoration: none; transition: 0.2s; display: inline-flex; }
.afdian-upgrade-btn-inline[data-v-71928ee4]:hover { background: rgba(0, 122, 255, 0.15); border-color: rgba(0, 122, 255, 0.35); }
.btn-trial-activate[data-v-71928ee4] { color: rgb(255, 255, 255); cursor: pointer; background: linear-gradient(135deg, rgb(255, 107, 53) 0%, rgb(255, 140, 66) 100%); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; justify-content: center; align-items: center; width: fit-content; margin-top: 8px; padding: 6px 14px; font-size: 0.78rem; font-weight: 600; transition: 0.2s; display: inline-flex; }
.btn-trial-activate[data-v-71928ee4]:hover { transform: translateY(-1px); box-shadow: rgba(255, 107, 53, 0.4) 0px 4px 12px; }
.btn-trial-activate[data-v-71928ee4]:active { transform: translateY(0px); }
.btn-my-benefits[data-v-71928ee4] { border: 1px solid var(--color-primary); color: var(--color-primary); cursor: pointer; vertical-align: middle; background: 0px 0px; border-radius: 6px; align-items: center; gap: 4px; margin-left: 8px; padding: 3px 10px; font-size: 11px; font-weight: 500; transition: 0.2s; display: inline-flex; }
.btn-my-benefits[data-v-71928ee4]:hover { background: var(--color-primary); color: rgb(255, 255, 255); }
.badge-trial[data-v-71928ee4] { color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(255, 107, 53) 0%, rgb(255, 140, 66) 100%); }
.afdian-hint-bar[data-v-71928ee4] { background: var(--bg-input); border: 1px dashed var(--border-color); color: var(--text-secondary); border-radius: 10px; align-items: center; gap: 8px; margin-top: 12px; padding: 12px 16px; font-size: 0.82rem; display: flex; }
.afdian-hint-bar a[data-v-71928ee4] { color: rgb(0, 122, 255); font-weight: 500; text-decoration: none; transition: color 0.2s; }
.afdian-hint-bar a[data-v-71928ee4]:hover { color: rgb(0, 86, 204); text-decoration: underline; }
.user-badge-subtitle[data-v-71928ee4] { color: var(--text-body); opacity: 0.6; margin-top: 2px; font-size: 0.7rem; font-style: italic; }
.section-title-row-modern[data-v-71928ee4] { justify-content: space-between; align-items: center; margin-bottom: 6px; display: flex; }
.section-subtitle-modern[data-v-71928ee4] { color: var(--text-title); margin: 0px; font-size: 0.85rem; font-weight: 600; }
.btn-refresh-modern[data-v-71928ee4] { cursor: pointer; color: var(--text-muted); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; justify-content: center; align-items: center; padding: 6px; transition: 0.2s; display: flex; }
.btn-refresh-modern[data-v-71928ee4]:hover { background: var(--bg-quota); color: var(--accent-brand); }
.refresh-icon-modern[data-v-71928ee4] { transform-origin: 50% center; width: 13px; height: 13px; transition: transform 0.3s; }
.btn-refresh-modern:hover .refresh-icon-modern[data-v-71928ee4] { transform: rotate(180deg); }
.special-desc-modern[data-v-71928ee4] { color: var(--text-body); opacity: 0.8; margin: 0px 0px 14px; font-size: 0.75rem; line-height: 1.4; }
.invite-generation-action-modern[data-v-71928ee4] { margin-bottom: 14px; display: flex; }
.btn-generate-code-modern[data-v-71928ee4] { background: var(--accent-brand); width: 100%; box-shadow: 0 4px 10px var(--accent-glow); border-radius: 8px; padding: 9px; font-weight: 600; color: rgb(255, 255, 255) !important; }
.btn-generate-code-modern[data-v-71928ee4]:hover:not(:disabled) { background: var(--accent-hover); box-shadow: 0 6px 14px var(--accent-glow); transform: translateY(-0.5px); }
.btn-generate-code-modern[data-v-71928ee4]:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; }
.generated-codes-list-modern[data-v-71928ee4] { flex-direction: column; gap: 8px; max-height: 160px; padding-right: 4px; display: flex; overflow-y: auto; }
.generated-codes-list-modern[data-v-71928ee4]::-webkit-scrollbar { width: 4px; }
.generated-codes-list-modern[data-v-71928ee4]::-webkit-scrollbar-thumb { background: var(--border-input); border-radius: 2px; }
.generated-code-card-modern[data-v-71928ee4] { background: var(--bg-sub-panel); border: 1px solid var(--border-card); border-radius: 8px; flex-direction: column; gap: 5px; padding: 10px 12px; transition: 0.2s; display: flex; }
.generated-code-card-modern[data-v-71928ee4]:hover { border-color: var(--border-card-hover); background: rgba(255, 255, 255, 0.02); }
.code-header-modern[data-v-71928ee4] { justify-content: space-between; align-items: center; display: flex; }
.code-text-modern[data-v-71928ee4] { color: var(--accent-brand); cursor: pointer; background: var(--bg-quota); border: 1px dashed rgba(0, 122, 255, 0.2); border-radius: 4px; padding: 2px 6px; font-family: monospace; font-size: 0.98rem; font-weight: 700; transition: 0.2s; }
.code-text-modern[data-v-71928ee4]:hover { background: var(--accent-glow); opacity: 0.9; }
.code-status-modern[data-v-71928ee4] { color: rgb(52, 199, 89); background: rgba(52, 199, 89, 0.1); border: 1px solid rgba(52, 199, 89, 0.15); border-radius: 10px; padding: 1px 6px; font-size: 0.68rem; font-weight: 600; }
.code-status-modern.used[data-v-71928ee4] { color: var(--text-muted); background: rgba(142, 142, 147, 0.1); border-color: rgba(142, 142, 147, 0.15); }
.code-meta-modern[data-v-71928ee4] { color: var(--text-body); opacity: 0.7; font-size: 0.68rem; }
.empty-codes-placeholder-modern[data-v-71928ee4] { text-align: center; color: var(--text-body); opacity: 0.7; border: 1px dashed var(--border-card); background: var(--bg-sub-panel); border-radius: 8px; padding: 16px; font-size: 0.78rem; }
.user-nickname-row[data-v-71928ee4] { align-items: center; gap: 8px; display: flex; }
.nickname-display-group[data-v-71928ee4] { align-items: center; gap: 6px; display: flex; }
.user-nickname[data-v-71928ee4] { color: var(--text-title); text-overflow: ellipsis; white-space: nowrap; max-width: 160px; font-size: 1rem; font-weight: 600; overflow: hidden; }
.btn-edit-nickname[data-v-71928ee4] { cursor: pointer; color: var(--text-muted); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; justify-content: center; align-items: center; padding: 2px; transition: 0.2s; display: flex; }
.btn-edit-nickname[data-v-71928ee4]:hover { background: var(--bg-quota); color: var(--accent-brand); }
.nickname-edit-group[data-v-71928ee4] { align-items: center; gap: 4px; display: flex; }
.nickname-input[data-v-71928ee4] { background: var(--bg-input); border: 1px solid var(--border-input); color: var(--text-title); box-sizing: border-box; border-radius: 6px; outline: none; width: 110px; padding: 2px 6px; font-size: 0.85rem; }
.nickname-input[data-v-71928ee4]:focus { border-color: var(--accent-brand); box-shadow: 0 0 0 2px var(--accent-glow); }
.btn-save-nickname[data-v-71928ee4], .btn-cancel-nickname[data-v-71928ee4] { cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; justify-content: center; align-items: center; padding: 3px; transition: 0.2s; display: flex; }
.btn-save-nickname[data-v-71928ee4]:hover { background: rgba(52, 199, 89, 0.1); }
.btn-cancel-nickname[data-v-71928ee4]:hover { background: rgba(255, 59, 48, 0.1); }
.user-badge-status-row[data-v-71928ee4] { flex-wrap: nowrap; align-items: center; gap: 6px; margin-top: 6px; display: flex; }
.user-email-text[data-v-71928ee4] { color: var(--text-muted); text-overflow: ellipsis; white-space: nowrap; max-width: 100%; margin-top: 2px; font-size: 0.72rem; display: block; overflow: hidden; }
.user-uid-text[data-v-71928ee4] { color: var(--text-dim,#64748b); letter-spacing: 0.5px; margin-top: 1px; font-family: monospace; font-size: 0.68rem; }
.user-badge[data-v-71928ee4], .user-status-text[data-v-71928ee4] { white-space: nowrap; }
.cloud-agreement-checkbox[data-v-71928ee4] { cursor: pointer; color: var(--text-muted); align-items: center; gap: 8px; margin-top: 12px; font-size: 0.82rem; display: flex; }
.cloud-agreement-checkbox input[type="checkbox"][data-v-71928ee4] { width: 16px; height: 16px; accent-color: var(--accent-brand); cursor: pointer; }
.cloud-agreement-checkbox a[data-v-71928ee4] { color: var(--accent-brand); text-decoration: none; }
.cloud-agreement-checkbox a[data-v-71928ee4]:hover { text-decoration: underline; }
.cloud-agreement-checkbox input[type="checkbox"][data-v-71928ee4]:disabled { opacity: 0.5; cursor: not-allowed; }
.terms-badge[data-v-71928ee4] { color: rgb(255, 255, 255); vertical-align: super; letter-spacing: 0.5px; background: linear-gradient(135deg, rgb(255, 107, 107), rgb(255, 71, 87)); border-radius: 4px; margin-left: 4px; padding: 1px 5px; font-size: 0.6rem; font-weight: 700; line-height: 1.2; animation: 2s ease-in-out 0s infinite normal none running terms-badge-pulse-71928ee4; display: inline-block; }
@keyframes terms-badge-pulse-71928ee4 { 
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.terms-view-hint[data-v-71928ee4] { color: var(--color-warning,#f0a020); margin: 4px 0px 0px 24px; font-size: 0.75rem; }
.cloud-terms-overlay[data-v-71928ee4] { z-index: 10600; background: rgba(0, 0, 0, 0.35); justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; position: fixed; top: 0px; left: 0px; }
.cloud-terms-modal[data-v-71928ee4] { --text-title: #1d1d1f; --text-body: #3a3a3c; --text-muted: #6e6e73; --bg-panel: #ffffffeb; --border-card: #00000014; --shadow-modal: 0 20px 50px #00000014, inset 0 1px 0 #ffffff80; background: var(--bg-panel); box-shadow: var(--shadow-modal); border: 1px solid var(--border-card); border-radius: 18px; flex-direction: column; width: 90%; max-width: 520px; max-height: 70vh; padding: 30px; animation: 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running modalScaleIn-71928ee4; display: flex; position: relative; overflow: hidden; }
.cloud-terms-header[data-v-71928ee4] { border-bottom: 1px solid var(--border-card); align-items: center; gap: 12px; margin-bottom: 20px; padding: 0px 0px 20px; display: flex; }
.cloud-terms-header h3[data-v-71928ee4] { color: var(--text-title); flex: 1 1 0%; margin: 0px; font-size: 1.1rem; font-weight: 600; }
.cloud-terms-header .close-btn[data-v-71928ee4] { color: var(--text-muted); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; flex-shrink: 0; padding: 0px; font-size: 1.5rem; line-height: 1; }
.cloud-terms-header .close-btn[data-v-71928ee4]:hover { color: var(--text-title); }
.cloud-terms-body[data-v-71928ee4] { color: var(--text-body); flex: 1 1 0%; padding: 0px; font-size: 0.85rem; line-height: 1.7; overflow-y: auto; }
.cloud-terms-body p[data-v-71928ee4] { margin: 0px 0px 14px; }
.cloud-terms-body strong[data-v-71928ee4] { color: var(--text-title); margin-bottom: 4px; font-size: 0.88rem; display: block; }
.cloud-terms-version[data-v-71928ee4] { color: var(--accent-brand); background: var(--accent-glow,#007aff1a); border-radius: 10px; padding: 2px 8px; font-size: 0.75rem; font-weight: 500; }
.inbox-unread-badge[data-v-71928ee4] { color: rgb(255, 255, 255); background: rgb(255, 59, 48); border-radius: 8px; justify-content: center; align-items: center; min-width: 16px; height: 16px; margin-left: 4px; padding: 0px 4px; font-size: 10px; font-weight: 700; line-height: 1; display: inline-flex; }
.inbox-section[data-v-71928ee4] { padding: 16px 0px; }
.inbox-toolbar[data-v-71928ee4] { align-items: center; margin-bottom: 12px; display: flex; }
.inbox-folder-tabs[data-v-71928ee4] { background: var(--bg-secondary,#ffffff0a); border-radius: 10px; gap: 4px; padding: 3px; display: flex; }
.inbox-folder-btn[data-v-71928ee4] { color: var(--text-muted,#94a3b8); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; align-items: center; gap: 4px; padding: 6px 14px; font-size: 12px; font-weight: 500; transition: 0.2s; display: inline-flex; }
.inbox-folder-btn.active[data-v-71928ee4] { background: var(--bg-card,#1e293b); color: var(--text-primary,#e2e8f0); box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px; }
.inbox-folder-badge[data-v-71928ee4] { color: rgb(255, 255, 255); background: rgb(255, 59, 48); border-radius: 7px; justify-content: center; align-items: center; min-width: 14px; height: 14px; padding: 0px 3px; font-size: 9px; font-weight: 700; display: inline-flex; }
.inbox-loading[data-v-71928ee4], .inbox-empty[data-v-71928ee4] { color: var(--text-muted,#64748b); flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 48px 0px; font-size: 13px; display: flex; }
.inbox-list[data-v-71928ee4] { flex-direction: column; gap: 2px; display: flex; }
.inbox-item[data-v-71928ee4] { cursor: pointer; border-radius: 10px; align-items: flex-start; gap: 10px; padding: 12px 14px; transition: background 0.15s; display: flex; }
.inbox-item[data-v-71928ee4]:hover { background: var(--bg-secondary,#ffffff08); }
.inbox-item.unread[data-v-71928ee4] { background: var(--bg-secondary,#ffffff0a); }
.inbox-item-left[data-v-71928ee4] { flex-shrink: 0; padding-top: 6px; }
.inbox-sender-dot[data-v-71928ee4] { background: var(--color-primary,#007aff); border-radius: 50%; width: 8px; height: 8px; }
.inbox-dot-read[data-v-71928ee4] { background: var(--text-dim,#475569); }
.inbox-item-body[data-v-71928ee4] { flex: 1 1 0%; min-width: 0px; }
.inbox-item-header[data-v-71928ee4] { justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 2px; display: flex; }
.inbox-sender[data-v-71928ee4] { color: var(--text-primary,#e2e8f0); font-size: 12px; font-weight: 600; }
.inbox-time[data-v-71928ee4] { color: var(--text-dim,#64748b); flex-shrink: 0; font-size: 11px; }
.inbox-title[data-v-71928ee4] { color: var(--text-primary,#e2e8f0); white-space: nowrap; text-overflow: ellipsis; margin-bottom: 2px; font-size: 13px; font-weight: 500; overflow: hidden; }
.inbox-item.unread .inbox-title[data-v-71928ee4] { font-weight: 700; }
.inbox-preview[data-v-71928ee4] { color: var(--text-muted,#94a3b8); white-space: nowrap; text-overflow: ellipsis; font-size: 12px; line-height: 1.4; overflow: hidden; }
.inbox-item-actions[data-v-71928ee4] { opacity: 0; flex-shrink: 0; gap: 4px; transition: opacity 0.15s; display: flex; }
.inbox-item:hover .inbox-item-actions[data-v-71928ee4] { opacity: 1; }
.inbox-action-btn[data-v-71928ee4] { width: 28px; height: 28px; color: var(--text-muted,#94a3b8); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; justify-content: center; align-items: center; transition: 0.15s; display: flex; }
.inbox-action-btn[data-v-71928ee4]:hover { background: var(--bg-tertiary,#ffffff14); color: var(--text-primary,#e2e8f0); }
.inbox-action-btn.starred[data-v-71928ee4] { color: rgb(245, 158, 11); }
.inbox-action-btn.inbox-action-danger[data-v-71928ee4]:hover { color: rgb(255, 59, 48); }
.inbox-pagination[data-v-71928ee4] { justify-content: center; align-items: center; gap: 12px; padding: 16px 0px; display: flex; }
.inbox-page-btn[data-v-71928ee4] { border: 1px solid var(--border-color,#ffffff1a); color: var(--text-secondary,#cbd5e1); cursor: pointer; background: 0px 0px; border-radius: 8px; padding: 6px 16px; font-size: 12px; transition: 0.15s; }
.inbox-page-btn[data-v-71928ee4]:hover:not(:disabled) { background: var(--bg-secondary,#ffffff0a); }
.inbox-page-btn[data-v-71928ee4]:disabled { opacity: 0.3; cursor: not-allowed; }
.inbox-page-info[data-v-71928ee4] { color: var(--text-muted,#94a3b8); font-size: 12px; }
.inbox-detail-overlay[data-v-71928ee4] { z-index: 12000; background: rgba(0, 0, 0, 0.6); justify-content: center; align-items: center; padding: 16px; display: flex; position: fixed; inset: 0px; }
.inbox-detail-card[data-v-71928ee4] { background: var(--bg-primary,#1a1a2e); overscroll-behavior: contain; border: 1px solid var(--border-color,#ffffff14); border-radius: 16px; flex-direction: column; width: 520px; max-width: 100%; height: 420px; max-height: min(80vh, -32px + 100dvh); display: flex; box-shadow: rgba(0, 0, 0, 0.4) 0px 20px 60px; }
.inbox-detail-header[data-v-71928ee4] { border-bottom: 1px solid var(--border-color,#ffffff0f); flex-shrink: 0; justify-content: space-between; align-items: flex-start; padding: 20px 20px 12px; display: flex; }
.inbox-detail-sender[data-v-71928ee4] { color: var(--color-primary,#007aff); margin-bottom: 4px; font-size: 12px; font-weight: 600; }
.inbox-detail-title[data-v-71928ee4] { color: var(--text-primary,#e2e8f0); margin-bottom: 4px; font-size: 16px; font-weight: 700; }
.inbox-detail-time[data-v-71928ee4] { color: var(--text-dim,#64748b); font-size: 11px; }
.inbox-detail-content[data-v-71928ee4] { color: var(--text-secondary,#cbd5e1); word-break: break-word; flex: 1 1 0%; padding: 16px 20px 24px; font-size: 14px; line-height: 1.7; overflow-y: auto; }
.inbox-detail-content img[data-v-71928ee4] { border-radius: 8px; max-width: 100%; }
@media (max-width: 640px) {
  .inbox-item-actions[data-v-71928ee4] { opacity: 1; }
}
.world-sync-section[data-v-71928ee4] { padding: 16px; }
.world-sync-status-card[data-v-71928ee4] { padding: 12px 0px; }
.world-sync-status-row[data-v-71928ee4] { border-bottom: 1px solid var(--border-color,#0000000f); justify-content: space-between; align-items: center; padding: 8px 0px; display: flex; }
.world-sync-status-row[data-v-71928ee4]:last-of-type { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.world-sync-label[data-v-71928ee4] { color: var(--text-secondary); font-size: 0.85rem; }
.world-sync-value[data-v-71928ee4] { color: var(--text-body); font-size: 0.85rem; font-weight: 600; }
.world-sync-value.status-idle[data-v-71928ee4] { color: var(--text-secondary); }
.world-sync-value.status-syncing[data-v-71928ee4] { color: rgb(0, 122, 255); }
.world-sync-value.status-success[data-v-71928ee4] { color: rgb(52, 199, 89); }
.world-sync-value.status-error[data-v-71928ee4] { color: rgb(255, 59, 48); }
.world-sync-error[data-v-71928ee4] { color: rgb(255, 59, 48); background: rgba(255, 59, 48, 0.08); border-radius: 8px; align-items: flex-start; gap: 6px; margin-top: 8px; padding: 8px 10px; font-size: 0.8rem; display: flex; }
.world-sync-actions[data-v-71928ee4] { gap: 8px; margin-top: 12px; display: flex; }
.world-overview-grid[data-v-71928ee4] { grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 8px 0px; display: grid; }
.world-stat-card[data-v-71928ee4] { text-align: center; background: var(--bg-sub-panel,#00000005); border: 1px solid var(--border-color,#0000000f); border-radius: 10px; padding: 14px 8px; }
.world-stat-number[data-v-71928ee4] { color: var(--text-title,#1c1c1e); font-size: 1.6rem; font-weight: 700; line-height: 1.2; }
.world-stat-label[data-v-71928ee4] { color: var(--text-secondary); margin-top: 4px; font-size: 0.75rem; }
.world-stat-limit[data-v-71928ee4] { color: var(--color-primary,#007aff); margin-top: 2px; font-size: 0.7rem; }
.world-empty-hint[data-v-71928ee4] { text-align: center; color: var(--text-secondary); padding: 24px 16px; font-size: 0.9rem; }
.world-empty-sub[data-v-71928ee4] { color: var(--text-tertiary,#999); margin-top: 6px; font-size: 0.8rem; }
.world-list[data-v-71928ee4] { flex-direction: column; gap: 10px; padding: 8px 0px; display: flex; }
.world-list-item[data-v-71928ee4] { background: var(--bg-sub-panel,#00000005); border: 1px solid var(--border-color,#0000000f); border-radius: 10px; gap: 12px; padding: 12px; transition: border-color 0.15s; display: flex; }
.world-list-item[data-v-71928ee4]:hover { border-color: var(--border-card-hover,#0000001f); }
.world-list-cover[data-v-71928ee4] { background-image: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-position: 50% center; background-size: cover; border-radius: 8px; flex-shrink: 0; justify-content: center; align-items: center; width: 56px; height: 56px; display: flex; }
.world-list-info[data-v-71928ee4] { flex: 1 1 0%; min-width: 0px; }
.world-list-name[data-v-71928ee4] { color: var(--text-title,#1c1c1e); margin-bottom: 2px; font-size: 0.9rem; font-weight: 600; }
.world-list-meta[data-v-71928ee4] { margin-bottom: 4px; }
.world-list-desc[data-v-71928ee4] { color: var(--text-tertiary,#999); font-size: 0.78rem; }
.world-list-stats[data-v-71928ee4] { color: var(--text-secondary); gap: 12px; font-size: 0.75rem; display: flex; }
.world-limits-table[data-v-71928ee4] { padding: 8px 0px; }
.world-limit-row[data-v-71928ee4] { border-bottom: 1px solid var(--border-color,#0000000f); justify-content: space-between; align-items: center; padding: 10px 0px; display: flex; }
.world-limit-row[data-v-71928ee4]:last-child { border-bottom-width: medium; border-bottom-style: none; border-bottom-color: currentcolor; }
.world-limit-feature[data-v-71928ee4] { color: var(--text-body); font-size: 0.85rem; }
.world-limit-value[data-v-71928ee4] { color: var(--text-title,#1c1c1e); font-size: 0.85rem; font-weight: 600; }
.world-limit-yes[data-v-71928ee4] { color: rgb(52, 199, 89); }
.world-limit-no[data-v-71928ee4] { color: var(--text-tertiary,#999); }
@media (max-width: 640px) {
  .world-overview-grid[data-v-71928ee4] { grid-template-columns: repeat(2, 1fr); }
}
.dark-mode .tier-table { color: rgb(229, 229, 234); }
.dark-mode .tier-table th, .dark-mode .tier-table td { color: rgb(229, 229, 234); border-bottom-color: rgba(255, 255, 255, 0.08); }
.dark-mode .tier-th-feature, .dark-mode .tier-th-tier { color: rgb(255, 255, 255); }
.dark-mode .tier-th-tier small { color: rgb(152, 152, 158); }
.dark-mode .tier-table td:first-child { color: rgb(255, 255, 255); }
@media (max-width: 768px) {
  .dark-mode .tier-th-feature, .dark-mode .tier-table td:first-child { background: rgba(28, 28, 30, 0.95); }
}
.dark-mode .tier-table tbody tr:hover { background: rgba(255, 255, 255, 0.024); }
.dark-mode .tier-section-row td { color: rgb(77, 163, 255) !important; border-bottom-color: rgba(77, 163, 255, 0.2) !important; }
.dark-mode .tier-yes { color: rgb(48, 209, 88); }
.dark-mode .tier-no { color: rgb(99, 99, 102); }
.dark-mode .tier-cell-hl { color: rgb(77, 163, 255); background: rgba(77, 163, 255, 0.08); }
.dark-mode .tier-cell-pro { color: rgb(250, 173, 20); background: rgba(250, 173, 20, 0.06); }
.dark-mode .tier-note { color: rgb(152, 152, 158); }
.dark-mode .tier-note strong { color: rgb(77, 163, 255); }
.dark-mode .tier-card { background: rgba(255, 255, 255, 0.03); border-color: rgba(255, 255, 255, 0.08); }
.dark-mode .tier-card:hover { border-color: rgba(255, 255, 255, 0.15); }
.dark-mode .tier-name { color: rgb(255, 255, 255); }
.dark-mode .tier-desc { color: rgb(142, 142, 147); }
.dark-mode .tier-features li { color: rgb(229, 229, 234); }
.dark-mode .tier-features li::before { color: rgb(48, 209, 88); }
.dark-mode .tier-color-basic { color: rgb(229, 229, 234); }
.dark-mode .tier-color-core { color: rgb(77, 163, 255); }
.dark-mode .tier-color-pro { color: rgb(250, 173, 20); }
.dark-mode .tier-color-trial { color: rgb(48, 209, 88); }
.dark-mode .tier-profile-card { background: linear-gradient(135deg, rgba(10, 132, 255, 0.08), rgba(10, 132, 255, 0.04)); border-color: rgba(10, 132, 255, 0.15); }
.dark-mode .tier-value-accent { color: rgb(77, 163, 255) !important; }
.dark-mode .tier-expiry-tag { color: rgb(148, 163, 184); background: rgba(10, 132, 255, 0.1); }
.dark-mode .tier-expiry-tag.tier-expiring { color: rgb(248, 113, 113); background: rgba(239, 68, 68, 0.12); }
.dark-mode .device-item { background: rgba(44, 44, 46, 0.6); border-color: rgba(255, 255, 255, 0.1); }
.dark-mode .device-item.current { background: rgba(99, 102, 241, 0.12); border-color: rgb(129, 140, 248); box-shadow: rgba(99, 102, 241, 0.15) 0px 2px 8px; }
.dark-mode .device-item:not(.current):hover { background: rgba(55, 55, 60, 0.7); border-color: rgba(255, 255, 255, 0.18); }
.dark-mode .device-icon-wrap { background: rgba(255, 255, 255, 0.06); }
.dark-mode .device-online-dot { border-color: rgba(44, 44, 46, 0.8); }
.dark-mode .device-name { color: rgb(255, 255, 255); }
.dark-mode .device-badge-current { color: rgb(255, 255, 255); background: rgb(129, 140, 248); }
.dark-mode .device-badge-online { color: rgb(74, 222, 128); background: rgba(34, 197, 94, 0.2); }
.dark-mode .device-meta, .dark-mode .device-svg-icon, .dark-mode .btn-device-note svg { color: rgb(152, 152, 158); }
.dark-mode .device-note-input { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); }
.dark-mode .device-note-input:focus { border-color: rgb(129, 140, 248); }
.dark-mode .btn-device-note-save { background: rgb(129, 140, 248); border-color: rgb(129, 140, 248); }
.dark-mode .btn-device-note-save:hover { background: rgb(99, 102, 241); }
.dark-mode .btn-device-note-cancel { color: rgb(152, 152, 158); border-color: rgba(255, 255, 255, 0.15); }
.dark-mode .btn-device-note-cancel:hover { background: rgba(255, 255, 255, 0.06); }
.dark-mode .stats-avatar-row { border-color: rgba(0, 122, 255, 0.15); }
.dark-mode .user-uid-label { color: rgb(152, 152, 158); }
.dark-mode .user-uid-value { color: rgb(255, 255, 255); }
.dark-mode .user-uid-value:hover { color: rgb(0, 122, 255); }
.dark-mode .cloud-terms-overlay { background: rgba(0, 0, 0, 0.6); }
.dark-mode .cloud-terms-modal { --text-title: #fff; --text-body: #e5e5ea; --text-muted: #98989e; --bg-panel: #1c1c1eeb; --border-card: #ffffff14; --shadow-modal: 0 20px 50px #0006, inset 0 1px 0 #ffffff0d; --accent-brand: #0a84ff; --accent-glow: #0a84ff26; }
.dark-mode .btn-cleanup-assets { color: rgb(48, 209, 88); background: rgba(48, 209, 88, 0.1); border: 1.5px solid rgba(48, 209, 88, 0.25); }
.dark-mode .btn-cleanup-assets:hover { background: rgba(48, 209, 88, 0.18); border-color: rgba(48, 209, 88, 0.45); box-shadow: rgba(48, 209, 88, 0.15) 0px 2px 8px; }
.dark-mode .cleanup-modal { --text-title: #fff; --text-body: #e5e5ea; --text-muted: #98989e; --bg-panel: #1c1c1ed9; --bg-sub-panel: #2c2c2e99; --border-card: #ffffff1a; --shadow-modal: 0 20px 50px #0006, inset 0 1px 0 #ffffff0d; --accent-brand: #0a84ff; --bg-quota: #ffffff0f; --border-tab: #ffffff14; --bg-tab-active: #ffffff1a; --shadow-tab-active: 0 2px 8px #0000004d; --border-input: #ffffff1a; --bg-input: #ffffff08; }
.dark-mode .cleanup-item { background: rgba(44, 44, 46, 0.6); border-color: rgba(255, 255, 255, 0.15); box-shadow: rgba(0, 0, 0, 0.25) 0px 1px 4px; }
.dark-mode .cleanup-item:hover { background: rgba(55, 55, 60, 0.7); border-color: rgb(129, 140, 248); box-shadow: rgba(129, 140, 248, 0.18) 0px 4px 12px; }
.dark-mode .cleanup-item.unreferenced { background: rgba(239, 68, 68, 0.1); border-color: rgb(239, 68, 68); box-shadow: rgba(239, 68, 68, 0.12) 0px 1px 4px; }
.dark-mode .cleanup-item.unreferenced:hover { border-color: rgb(248, 113, 113); box-shadow: rgba(239, 68, 68, 0.2) 0px 4px 12px; }
.dark-mode .ref-tag { color: rgb(96, 165, 250); background: rgba(59, 130, 246, 0.2); border-color: rgba(59, 130, 246, 0.3); }
.dark-mode .unref-tag { color: rgb(248, 113, 113); background: rgba(239, 68, 68, 0.2); border-color: rgba(239, 68, 68, 0.3); }
.dark-mode .btn-cleanup-delete { color: rgb(248, 113, 113); background: rgba(239, 68, 68, 0.15); border: 2px solid rgba(239, 68, 68, 0.3); }
.dark-mode .btn-cleanup-delete:hover:not(:disabled) { background: rgba(255, 69, 58, 0.2); border-color: rgba(255, 69, 58, 0.45); box-shadow: rgba(255, 69, 58, 0.15) 0px 2px 6px; }
.dark-mode .btn-cleanup-restore { color: rgb(52, 211, 153); background: rgba(52, 211, 153, 0.15); border: 2px solid rgba(52, 211, 153, 0.3); }
.dark-mode .btn-cleanup-restore:hover:not(:disabled) { background: rgba(52, 211, 153, 0.2); border-color: rgba(52, 211, 153, 0.45); box-shadow: rgba(52, 211, 153, 0.15) 0px 2px 6px; }
.dark-mode .feature-locked-hint { color: rgb(152, 152, 158); border-color: rgba(255, 255, 255, 0.15); }
.dark-mode .cleanup-hint, .dark-mode .cleanup-empty { color: rgb(152, 152, 158); }
.dark-mode .btn-clear-all { color: rgb(248, 113, 113); border-color: rgba(239, 68, 68, 0.3); }
.dark-mode .btn-clear-all:hover { color: rgb(248, 113, 113); background: rgba(239, 68, 68, 0.15); border-color: rgb(239, 68, 68); }
.dark-mode .cleanup-loading { color: rgb(152, 152, 158); }
.dark-mode .cleanup-summary { color: rgb(152, 152, 158); border-bottom-color: rgba(255, 255, 255, 0.08); }
.dark-mode .cleanup-header h3 { color: rgb(255, 255, 255); }
.dark-mode .cleanup-header .close-btn { color: rgb(152, 152, 158); }
.dark-mode .cleanup-header .close-btn:hover, .dark-mode .cleanup-name { color: rgb(255, 255, 255); }
.dark-mode .cleanup-meta { color: rgb(152, 152, 158); }
.dark-mode .cleanup-thumb { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
.calc-panel { background: var(--bg-layer-2,#ffffff08); border: 1px solid var(--border-color,#ffffff14); border-radius: 8px; margin-bottom: 16px; padding: 12px; font-size: 0.85rem; }
.calc-row { align-items: center; gap: 8px; margin-bottom: 10px; display: flex; }
.calc-row label { white-space: nowrap; }
.calc-select, .calc-input { height: 32px; padding: 0px 8px; font-size: 0.85rem; line-height: normal; }
.calc-select { width: 110px; }
.calc-input { text-align: center; width: 80px; }
.calc-result { background: var(--bg-layer-3,#0003); color: var(--text-primary); border-radius: 6px; padding: 10px; line-height: 1.4; }
.ezpay-card { background: linear-gradient(135deg, rgba(0, 122, 255, 0.04), rgba(0, 122, 255, 0.01)); border-color: rgba(0, 122, 255, 0.18); }
.ezpay-inline { border-top: 1px solid var(--border-color,#ffffff14); margin-top: 14px; padding-top: 14px; }
.ezpay-content-area { gap: 16px; display: flex; }
.ezpay-benefits-side { flex: 0 0 35%; min-width: 0px; }
.ezpay-skus-side { flex: 1 1 0%; min-width: 0px; }
@media (max-width: 600px) {
  .ezpay-content-area { flex-direction: column; }
  .ezpay-benefits-side { flex: 0 0 auto; }
  .ezpay-sku-card, .ezpay-sku-right { flex-direction: column; align-items: stretch; gap: 8px; }
  .ezpay-buy-btn { width: 100%; }
  .ezpay-sku-card:hover { transform: translateY(-2px); }
  .ezpay-badge { top: -8px; transform: none; }
}
.ezpay-plan-tabs { border-bottom: 1px solid var(--border-color,#ffffff14); gap: 0px; margin-bottom: 16px; display: flex; }
.ezpay-tab { color: var(--text-secondary,#94a3b8); cursor: pointer; background: 0px 0px; border-width: medium medium 2px; border-style: none none solid; border-color: currentcolor currentcolor rgba(0, 0, 0, 0); border-image: initial; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 10px 16px; font-size: 0.9rem; font-weight: 500; transition: 0.2s; display: flex; }
.ezpay-tab-sub { opacity: 0.7; font-size: 0.72rem; font-weight: 400; }
.ezpay-tab.active { color: var(--color-primary,#007aff); border-bottom-color: var(--color-primary,#007aff); font-weight: 700; }
.ezpay-tab:not(.active):hover { color: var(--color-primary,#007aff); }
.ezpay-sku-grid { flex-direction: column; gap: 10px; margin-bottom: 16px; display: flex; }
.ezpay-sku-card { background: var(--bg-section,#ffffff08); border: 1px solid var(--border-color,#ffffff14); text-align: left; cursor: pointer; border-radius: 12px; flex-direction: row; flex: 0 0 auto; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; transition: 0.2s; display: flex; position: relative; }
.ezpay-sku-card:hover { border-color: var(--color-primary,#007aff); background: rgba(0, 122, 255, 0.06); transform: translate(4px); }
.ezpay-sku-card.popular { border-color: var(--color-primary,#007aff); box-shadow: 0 0 0 1px var(--color-primary,#007aff), 0 2px 8px #007aff26; }
.ezpay-badge { color: rgb(255, 255, 255); background: rgb(245, 158, 11); border-radius: 10px; padding: 2px 10px; font-size: 0.65rem; font-weight: 700; line-height: 1.4; position: absolute; top: 50%; right: -4px; transform: translateY(-50%); }
.ezpay-sku-period { color: var(--text-primary,#e2e8f0); font-size: 0.88rem; font-weight: 600; }
.ezpay-sku-desc { color: var(--text-muted,#94a3b8); margin-top: 2px; font-size: 0.75rem; line-height: 1.4; }
.ezpay-sku-info { flex: 1 1 0%; min-width: 0px; }
.ezpay-sku-right { flex-shrink: 0; align-items: center; gap: 12px; display: flex; }
.ezpay-tier-desc { background: var(--bg-secondary,#ffffff08); border: 1px solid var(--border-color,#ffffff14); border-radius: 10px; margin-bottom: 12px; padding: 14px 16px; }
.ezpay-tier-desc-title { color: var(--text-primary,#e2e8f0); margin-bottom: 8px; font-size: 0.95rem; font-weight: 700; }
.ezpay-tier-desc-text { color: var(--text-secondary,#cbd5e1); font-size: 0.8rem; line-height: 1.6; }
.ezpay-tier-desc-text small { color: var(--text-muted,#94a3b8); font-size: 0.72rem; }
.ezpay-link { color: var(--accent,#6366f1); text-decoration: underline; }
.ezpay-link:hover { opacity: 0.8; }
.ezpay-sku-price { align-items: baseline; gap: 6px; display: flex; }
.ezpay-price-current { color: var(--color-primary,#007aff); font-size: 1.1rem; font-weight: 700; }
.ezpay-price-original { color: var(--text-muted,#94a3b8); font-size: 0.72rem; text-decoration: line-through; }
.ezpay-discount-tag { color: rgb(245, 158, 11); background: rgba(245, 158, 11, 0.1); border-radius: 6px; padding: 2px 8px; font-size: 0.7rem; font-weight: 600; }
.ezpay-buy-btn { white-space: nowrap; width: auto; margin-top: 0px; padding: 6px 16px; font-size: 0.78rem; }
.ezpay-sku-card.sku-disabled { opacity: 0.55; cursor: not-allowed; }
.ezpay-sku-card.sku-disabled:hover { border-color: var(--border-color,#ffffff14); background: var(--bg-section,#ffffff08); transform: none; }
.ezpay-sku-disabled-hint { color: rgb(245, 158, 11); margin-top: 4px; font-size: 0.7rem; font-weight: 500; }
.lifetime-pro-modal { background: var(--bg-panel,#fff); text-align: center; border-radius: 16px; width: 90%; max-width: 420px; padding: 28px 24px 20px; box-shadow: rgba(0, 0, 0, 0.3) 0px 20px 60px; }
.lifetime-pro-modal-icon { margin-bottom: 12px; font-size: 2.5rem; }
.lifetime-pro-modal-text { color: var(--text-primary,#1e293b); margin-bottom: 20px; font-size: 0.92rem; line-height: 1.7; }
.lifetime-pro-modal-actions { justify-content: center; gap: 10px; display: flex; }
.btn-lifetime-pro-afdian { border: 1px solid var(--border-color,#0000001a); color: var(--text-secondary,#64748b); cursor: pointer; background: 0px 0px; border-radius: 8px; padding: 8px 20px; font-size: 0.85rem; transition: 0.2s; }
.btn-lifetime-pro-afdian:hover { background: var(--bg-section,#00000008); }
.btn-lifetime-pro-cancel { color: rgb(255, 255, 255); cursor: pointer; background: rgb(0, 122, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; padding: 8px 20px; font-size: 0.85rem; font-weight: 600; transition: 0.2s; }
.btn-lifetime-pro-cancel:hover { background: rgb(0, 86, 204); }
.ezpay-empty, .ezpay-loading { color: var(--text-muted,#94a3b8); justify-content: center; align-items: center; gap: 8px; padding: 16px 0px; font-size: 0.82rem; display: flex; }
.ezpay-orders-section { margin-top: 4px; }
.ezpay-order-list { flex-direction: column; gap: 8px; max-height: 280px; display: flex; overflow-y: auto; }
.ezpay-order-card { background: var(--bg-secondary,#ffffff08); border: 1px solid var(--border-color,#ffffff14); border-radius: 10px; padding: 10px 12px; }
.ezpay-order-top { justify-content: space-between; align-items: center; margin-bottom: 4px; display: flex; }
.ezpay-order-name { color: var(--text-primary,#e2e8f0); font-size: 0.85rem; font-weight: 600; }
.ezpay-order-status { border-radius: 6px; padding: 2px 8px; font-size: 0.7rem; font-weight: 600; }
.ezpay-order-status.pending { color: rgb(245, 158, 11); background: rgba(245, 158, 11, 0.1); }
.ezpay-order-status.paid { color: rgb(34, 197, 94); background: rgba(34, 197, 94, 0.1); }
.ezpay-order-status.expired, .ezpay-order-status.cancelled { color: var(--text-muted,#94a3b8); background: rgba(148, 163, 184, 0.1); }
.ezpay-order-info { color: var(--text-secondary,#cbd5e1); justify-content: space-between; align-items: center; margin-bottom: 2px; font-size: 0.78rem; display: flex; }
.ezpay-order-date { color: var(--text-muted,#94a3b8); font-size: 0.72rem; }
.ezpay-order-no { color: var(--text-muted,#94a3b8); font-family: monospace; font-size: 0.68rem; }
.ezpay-order-support-hint { border: 1px solid var(--border-color,#ffffff0f); color: var(--text-muted,#94a3b8); background: rgba(255, 255, 255, 0.03); border-radius: 8px; margin-top: 12px; padding: 10px 12px; font-size: 0.72rem; line-height: 1.6; }
.ezpay-alipay-notice { color: rgb(245, 158, 11); margin: 0px 0px 10px; font-size: 0.75rem; font-weight: 500; }
.ezpay-payment-popup { text-align: center; min-width: 300px; position: relative; }
.ezpay-close-btn { cursor: pointer; width: 24px; height: 24px; color: var(--text-muted,#94a3b8); z-index: 2; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; justify-content: center; align-items: center; padding: 2px; transition: 0.15s; display: flex; position: absolute; top: 8px; right: 8px; }
.ezpay-close-btn:hover { color: var(--text-primary,#e2e8f0); background: rgba(255, 255, 255, 0.08); }
.ezpay-qr-wrapper { background: rgb(255, 255, 255); border-radius: 12px; justify-content: center; align-items: center; width: 200px; height: 200px; margin: 8px auto 14px; display: flex; overflow: hidden; }
.ezpay-qr-canvas { justify-content: center; align-items: center; width: 200px; height: 200px; display: flex; }
.ezpay-qr-canvas img, .ezpay-qr-canvas canvas { width: 100% !important; height: 100% !important; }
.ezpay-qr-img { object-fit: contain; width: 100%; height: 100%; }
.ezpay-mobile-link { text-align: center; color: var(--accent,#6366f1); margin-bottom: 10px; font-size: 0.85rem; text-decoration: underline; display: block; }
.ezpay-mobile-link:hover { opacity: 0.8; }
.ezpay-countdown { color: var(--color-primary,#007aff); background: rgba(0, 122, 255, 0.08); border-radius: 20px; align-items: center; gap: 6px; margin-bottom: 12px; padding: 5px 14px; font-size: 0.85rem; font-weight: 600; display: inline-flex; }
.ezpay-countdown.urgent { color: rgb(255, 69, 58); background: rgba(255, 69, 58, 0.1); }
@keyframes modalScaleIn-ec6b0d49 { 
  0% { opacity: 0; transform: scale(0.95) translateY(15px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.modal-header[data-v-ec6b0d49] { align-items: center; gap: 15px; margin-bottom: 15px; display: flex; }
.conflict-icon-wrapper[data-v-ec6b0d49] { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.3); border-radius: 50%; justify-content: center; align-items: center; width: 42px; height: 42px; display: flex; }
.conflict-icon[data-v-ec6b0d49] { color: rgb(239, 68, 68); width: 24px; height: 24px; }
.modal-header h3[data-v-ec6b0d49] { letter-spacing: -0.02em; margin: 0px; font-size: 1.4rem; font-weight: 700; }
.conflict-desc[data-v-ec6b0d49] { color: var(--text-secondary,#b3b3b3); margin-bottom: 25px; font-size: 0.95rem; line-height: 1.6; }
.conflict-cards[data-v-ec6b0d49] { grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; display: grid; }
.conflict-card[data-v-ec6b0d49] { cursor: pointer; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; flex-direction: column; padding: 22px; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); display: flex; position: relative; }
.conflict-card[data-v-ec6b0d49]:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 24px; }
.local-card[data-v-ec6b0d49]:hover { border-color: rgba(99, 102, 241, 0.4); box-shadow: rgba(99, 102, 241, 0.15) 0px 8px 24px; }
.cloud-card[data-v-ec6b0d49]:hover { border-color: rgba(147, 51, 234, 0.4); box-shadow: rgba(147, 51, 234, 0.15) 0px 8px 24px; }
.card-badge[data-v-ec6b0d49] { color: rgb(129, 140, 248); background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 6px; align-self: flex-start; margin-bottom: 12px; padding: 3px 8px; font-size: 0.75rem; font-weight: 600; }
.cloud-badge[data-v-ec6b0d49] { color: rgb(192, 132, 252); background: rgba(147, 51, 234, 0.15); border: 1px solid rgba(147, 51, 234, 0.3); }
.conflict-card h4[data-v-ec6b0d49] { margin: 0px 0px 8px; font-size: 1.15rem; font-weight: 600; }
.card-desc[data-v-ec6b0d49] { color: var(--text-secondary,#b3b3b3); flex-grow: 1; margin-bottom: 15px; font-size: 0.85rem; line-height: 1.5; }
.card-details[data-v-ec6b0d49] { color: rgba(255, 255, 255, 0.6); background: rgba(0, 0, 0, 0.2); border-radius: 8px; flex-direction: column; gap: 4px; margin-bottom: 20px; padding: 10px 14px; font-family: monospace; font-size: 0.8rem; display: flex; }
.card-action-btn[data-v-ec6b0d49] { text-align: center; cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; width: 100%; padding: 10px; font-size: 0.85rem; font-weight: 600; transition: 0.2s; }
.btn-primary[data-v-ec6b0d49] { color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(99, 102, 241), rgb(79, 70, 229)); }
.btn-default[data-v-ec6b0d49] { color: rgb(255, 255, 255); background: linear-gradient(135deg, rgb(168, 85, 247), rgb(147, 51, 234)); }
.modal-actions[data-v-ec6b0d49] { justify-content: center; margin-top: 15px; display: flex; }
.btn-cancel[data-v-ec6b0d49] { color: var(--text-secondary,#b3b3b3); cursor: pointer; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 8px 25px; font-size: 0.9rem; font-weight: 600; transition: 0.2s; }
.btn-cancel[data-v-ec6b0d49]:hover { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.1); }
.modal-header[data-v-4cf89f5d] { border-bottom: 1px solid var(--border-color,#e5e7eb); flex-shrink: 0; align-items: center; gap: 12px; padding: 24px 24px 16px; display: flex; }
.modal-header h3[data-v-4cf89f5d] { flex: 1 1 0%; min-width: 0px; }
.modal-close[data-v-4cf89f5d] { width: 32px; height: 32px; color: var(--text-muted,#6b7280); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; flex-shrink: 0; justify-content: center; align-items: center; transition: 0.2s; display: flex; }
.modal-close[data-v-4cf89f5d]:hover { background: var(--bg-hover,#f3f4f6); color: var(--text-primary,#111827); }
.modal-close svg[data-v-4cf89f5d] { width: 18px; height: 18px; }
.header-icon-wrapper[data-v-4cf89f5d] { background: var(--color-primary-light,#6366f11a); width: 40px; height: 40px; color: var(--color-primary,#6366f1); border-radius: 12px; justify-content: center; align-items: center; display: flex; }
.tabs-container[data-v-4cf89f5d] { border-bottom: 1px solid var(--border-color,#e5e7eb); flex-shrink: 0; padding: 0px 24px; display: flex; }
.tab-body[data-v-4cf89f5d] { flex: 1 1 0%; min-height: 0px; overflow-y: auto; }
.tab-btn[data-v-4cf89f5d] { cursor: pointer; color: var(--text-muted,#6b7280); background: 0px 0px; border-width: medium medium 2px; border-style: none none solid; border-color: currentcolor currentcolor rgba(0, 0, 0, 0); border-image: initial; padding: 12px 16px; font-size: 14px; font-weight: 600; transition: 0.2s; }
.tab-btn.active[data-v-4cf89f5d] { color: var(--color-primary,#6366f1); border-bottom-color: var(--color-primary,#6366f1); }
.tab-btn[data-v-4cf89f5d]:hover:not(.active) { color: var(--text-primary,#374151); }
.btn-primary[data-v-4cf89f5d] { background: var(--color-primary,#6366f1); color: rgb(255, 255, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; }
.btn-primary[data-v-4cf89f5d]:hover:not(:disabled) { background: var(--color-primary-dark,#4f46e5); }
.btn-delete[data-v-4cf89f5d] { color: rgb(239, 68, 68); background: rgba(239, 68, 68, 0.1); border-radius: 6px; padding: 6px; transition: 0.2s; }
.btn-delete[data-v-4cf89f5d]:hover { background: rgba(239, 68, 68, 0.2); }
.btn-icon[data-v-4cf89f5d] { cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; flex-shrink: 0; justify-content: center; align-items: center; width: 28px; height: 28px; display: inline-flex; }
.btn-icon svg[data-v-4cf89f5d] { width: 16px; height: 16px; }
.btn-restore[data-v-4cf89f5d] { color: var(--color-primary,#6366f1); background: rgba(99, 102, 241, 0.1); border-radius: 6px; padding: 6px; transition: 0.2s; }
.btn-restore[data-v-4cf89f5d]:hover { background: rgba(99, 102, 241, 0.2); }
.checkpoint-name-row[data-v-4cf89f5d] { align-items: center; gap: 8px; padding: 0px 24px 12px; display: flex; }
.checkpoint-name-input[data-v-4cf89f5d] { border: 1.5px solid var(--border-color,#d1d5db); background: var(--bg-input,#fff); color: var(--text-primary,#111827); border-radius: 8px; outline: none; flex: 1 1 0%; min-width: 0px; padding: 6px 12px; font-size: 13px; }
.checkpoint-name-input[data-v-4cf89f5d]:focus { border-color: var(--color-primary,#6366f1); }
.checkpoint-name-hint[data-v-4cf89f5d] { color: var(--text-muted,#9ca3af); white-space: nowrap; font-size: 11px; }
.checkpoint-badge[data-v-4cf89f5d] { color: rgb(4, 120, 87) !important; background: rgba(16, 185, 129, 0.15) !important; border: 1px solid rgba(16, 185, 129, 0.3) !important; }
.header-icon[data-v-4cf89f5d] { width: 22px; height: 22px; }
.modal-header h3[data-v-4cf89f5d] { color: var(--text-primary,#111827); margin: 0px; font-size: 18px; font-weight: 600; }
.permission-block[data-v-4cf89f5d] { text-align: center; padding: 40px 24px; }
.permission-block .lock-icon[data-v-4cf89f5d] { width: 48px; height: 48px; color: var(--text-muted,#9ca3af); margin-bottom: 16px; }
.permission-title[data-v-4cf89f5d] { color: var(--text-primary,#111827); margin: 0px 0px 8px; font-size: 16px; font-weight: 600; }
.permission-desc[data-v-4cf89f5d] { color: var(--text-muted,#6b7280); margin: 0px; font-size: 13px; line-height: 1.6; }
.history-toggle-row[data-v-4cf89f5d] { border-bottom: 1px solid var(--border-color,#e5e7eb); justify-content: space-between; align-items: center; gap: 12px; padding: 16px 24px; display: flex; }
.toggle-info[data-v-4cf89f5d] { flex-direction: column; flex: 1 1 0%; gap: 2px; min-width: 0px; display: flex; }
.toggle-label[data-v-4cf89f5d] { color: var(--text-primary,#111827); font-size: 14px; font-weight: 500; }
.toggle-desc[data-v-4cf89f5d] { color: var(--text-muted,#6b7280); font-size: 12px; }
.switch[data-v-4cf89f5d] { flex-shrink: 0; width: 44px; height: 24px; display: inline-block; position: relative; }
.switch input[data-v-4cf89f5d] { opacity: 0; width: 0px; height: 0px; }
.slider[data-v-4cf89f5d] { cursor: pointer; background: var(--bg-tertiary,#d1d5db); border-radius: 24px; transition: 0.3s; position: absolute; inset: 0px; }
.slider[data-v-4cf89f5d]::before { content: ""; background: rgb(255, 255, 255); border-radius: 50%; width: 18px; height: 18px; transition: 0.3s; position: absolute; bottom: 3px; left: 3px; }
.switch input:checked + .slider[data-v-4cf89f5d] { background: var(--color-primary,#6366f1); }
.switch input:checked + .slider[data-v-4cf89f5d]::before { transform: translate(20px); }
.history-list-section[data-v-4cf89f5d] { max-height: 300px; padding: 16px 24px; overflow-y: auto; }
.loading-state[data-v-4cf89f5d], .empty-state[data-v-4cf89f5d] { color: var(--text-muted,#9ca3af); flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 32px 0px; display: flex; }
.loading-state .iconify[data-v-4cf89f5d], .empty-state .iconify[data-v-4cf89f5d] { font-size: 28px; }
.empty-hint[data-v-4cf89f5d] { color: var(--text-dim,#9ca3af); font-size: 12px; }
.spin[data-v-4cf89f5d] { animation: 1s linear 0s infinite normal none running spin-4cf89f5d; }
@keyframes spin-4cf89f5d { 
  100% { transform: rotate(360deg); }
}
.history-list[data-v-4cf89f5d] { flex-direction: column; gap: 6px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.history-item[data-v-4cf89f5d] { cursor: pointer; border: 1.5px solid var(--border-color,#e5e7eb); background: var(--bg-primary,#fff); border-radius: 10px; justify-content: space-between; align-items: center; padding: 12px 14px; transition: 0.2s; display: flex; }
.history-item[data-v-4cf89f5d]:hover { background: var(--bg-hover,#f9fafb); border-color: var(--color-primary,#6366f1); box-shadow: rgba(99, 102, 241, 0.1) 0px 2px 8px; }
.history-item.active[data-v-4cf89f5d] { background: var(--color-primary-light,#6366f114); border-color: var(--color-primary,#6366f1); box-shadow: rgba(99, 102, 241, 0.15) 0px 2px 12px; }
.history-detail-bar[data-v-4cf89f5d] { background: var(--bg-primary,#fff); border-top: 1.5px solid var(--border-color,#e5e7eb); flex-wrap: wrap; flex-shrink: 0; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding: 12px 24px; display: flex; }
.detail-stats[data-v-4cf89f5d] { color: var(--text-muted,#6b7280); align-items: center; gap: 6px; font-size: 12px; display: flex; }
.detail-dot[data-v-4cf89f5d] { color: var(--text-muted,#d1d5db); }
.detail-actions[data-v-4cf89f5d] { align-items: center; gap: 8px; display: flex; }
.btn-pin[data-v-4cf89f5d] { color: rgb(16, 185, 129); background: rgba(16, 185, 129, 0.1); border: 1.5px solid rgba(16, 185, 129, 0.3); }
.btn-pin[data-v-4cf89f5d]:hover:not(:disabled) { background: rgba(16, 185, 129, 0.2); }
.btn-pin[data-v-4cf89f5d]:disabled { opacity: 0.5; cursor: not-allowed; }
.item-info[data-v-4cf89f5d] { align-items: center; gap: 8px; display: flex; }
.revision-badge[data-v-4cf89f5d] { color: rgb(67, 56, 202); background: rgba(99, 102, 241, 0.12); border-radius: 6px; padding: 3px 10px; font-size: 13px; font-weight: 600; display: inline-block; }
.item-size[data-v-4cf89f5d] { color: var(--text-muted,#9ca3af); font-size: 11px; }
.item-time[data-v-4cf89f5d] { color: var(--text-muted,#6b7280); font-size: 12px; }
.btn[data-v-4cf89f5d] { cursor: pointer; white-space: nowrap; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; flex-shrink: 0; align-items: center; gap: 4px; width: auto; padding: 8px 16px; font-size: 13px; font-weight: 500; transition: 0.2s; display: inline-flex; }
.btn-sm[data-v-4cf89f5d] { padding: 6px 14px; font-size: 12px; }
.btn-cancel[data-v-4cf89f5d] { background: var(--bg-tertiary,#f3f4f6); color: var(--text-secondary,#374151); }
.btn-cancel[data-v-4cf89f5d]:hover { background: var(--bg-hover,#e5e7eb); }
.btn-rollback[data-v-4cf89f5d] { background: var(--color-primary,#6366f1); color: rgb(255, 255, 255); }
.btn-rollback[data-v-4cf89f5d]:hover:not(:disabled) { background: var(--color-primary-dark,#4f46e5); }
.btn-rollback[data-v-4cf89f5d]:disabled { opacity: 0.5; cursor: not-allowed; }
.encryption-badge[data-v-4cf89f5d] { color: rgb(239, 68, 68); background: rgba(239, 68, 68, 0.1); border-radius: 4px; align-items: center; gap: 3px; padding: 2px 8px; font-size: 11px; font-weight: 500; display: inline-flex; }
.encryption-badge.encrypted[data-v-4cf89f5d] { color: rgb(16, 185, 129); background: rgba(16, 185, 129, 0.1); }
.encryption-badge .iconify[data-v-4cf89f5d] { font-size: 13px; }
.ab-intro[data-v-4cf89f5d] { padding: 8px 0px 12px; }
.ab-intro-text[data-v-4cf89f5d] { color: var(--color-secondary-text,#888); font-size: 0.82rem; line-height: 1.5; }
.ab-slot-card[data-v-4cf89f5d] { border: 1px solid var(--border-color,#e5e7eb); border-radius: 10px; margin-bottom: 10px; overflow: hidden; }
.ab-slot-header[data-v-4cf89f5d] { background: var(--bg-secondary,#f9fafb); justify-content: space-between; align-items: center; padding: 10px 14px; display: flex; }
.ab-slot-title[data-v-4cf89f5d] { align-items: center; gap: 8px; display: flex; }
.ab-slot-name[data-v-4cf89f5d] { color: var(--color-primary-text,#333); font-size: 0.88rem; font-weight: 600; }
.ab-slot-empty[data-v-4cf89f5d] { background: var(--bg-muted,#f0f0f0); color: var(--color-secondary-text,#888); border-radius: 4px; padding: 1px 6px; font-size: 0.7rem; }
.ab-slot-body[data-v-4cf89f5d] { flex-direction: column; gap: 8px; padding: 10px 14px; display: flex; }
.ab-slot-disabled[data-v-4cf89f5d] { justify-content: space-between; align-items: center; padding: 10px 14px; display: flex; }
.ab-slot-disabled-text[data-v-4cf89f5d] { color: var(--color-secondary-text,#999); font-size: 0.82rem; }
.ab-slot-actions[data-v-4cf89f5d] { justify-content: flex-end; padding-top: 4px; display: flex; }
.ab-delete-btn[data-v-4cf89f5d] { color: rgb(255, 59, 48); cursor: pointer; background: 0px 0px; border: 1px solid rgba(255, 59, 48, 0.3); border-radius: 6px; padding: 4px 10px; font-size: 0.75rem; transition: 0.15s; }
.ab-delete-btn[data-v-4cf89f5d]:hover { background: rgba(255, 59, 48, 0.08); }
.ab-enable-btn[data-v-4cf89f5d] { color: var(--color-primary,#007aff); cursor: pointer; background: 0px 0px; border: 1px solid rgba(0, 122, 255, 0.3); border-radius: 6px; padding: 4px 12px; font-size: 0.78rem; font-weight: 500; transition: 0.15s; }
.ab-enable-btn[data-v-4cf89f5d]:hover { background: rgba(0, 122, 255, 0.08); }
.ab-setting-row[data-v-4cf89f5d] { justify-content: space-between; align-items: center; gap: 12px; display: flex; }
.ab-label[data-v-4cf89f5d] { color: var(--color-primary-text,#333); white-space: nowrap; font-size: 0.82rem; }
.ab-select[data-v-4cf89f5d] { border: 1px solid var(--border-color,#e5e7eb); background: var(--bg-primary,#fff); max-width: 180px; color: var(--color-primary-text,#333); border-radius: 8px; outline: none; flex: 1 1 0%; padding: 6px 10px; font-size: 0.82rem; }
.ab-select[data-v-4cf89f5d]:focus { border-color: var(--color-primary,#007aff); }
.ab-last-backup[data-v-4cf89f5d] { color: var(--color-secondary-text,#888); opacity: 0.7; padding: 2px 0px 0px; font-size: 0.78rem; }
@keyframes modalScaleIn-e040aba5 { 
  0% { opacity: 0; transform: scale(0.95) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.modal-header[data-v-e040aba5] { border-bottom: 1px solid var(--border-card); align-items: center; gap: 12px; margin-bottom: 20px; padding: 0px 0px 20px; display: flex; }
.modal-header h3[data-v-e040aba5] { color: var(--text-title); margin: 0px; font-size: 1.15rem; font-weight: 600; }
.version-tag[data-v-e040aba5] { color: var(--accent-brand); background: var(--accent-glow); border-radius: 10px; padding: 2px 8px; font-size: 0.7rem; font-weight: 500; }
.modal-body[data-v-e040aba5] { flex: 1 1 0%; margin-bottom: 20px; padding: 0px; overflow-y: auto; }
.agreement-content[data-v-e040aba5] { color: var(--text-body); font-size: 0.85rem; line-height: 1.7; }
.agreement-content p[data-v-e040aba5] { margin: 0px 0px 14px; }
.agreement-content strong[data-v-e040aba5] { color: var(--text-title); margin-bottom: 4px; font-size: 0.88rem; display: block; }
.agreement-content ul[data-v-e040aba5] { margin: 8px 0px 14px; padding-left: 20px; }
.agreement-content li[data-v-e040aba5] { margin-bottom: 6px; font-size: 0.83rem; }
.agreement-content li strong[data-v-e040aba5] { margin-bottom: 0px; font-size: 0.83rem; display: inline; }
.modal-footer[data-v-e040aba5] { border-top: 1px solid var(--border-card); flex-direction: column; gap: 16px; padding: 20px 0px 0px; display: flex; }
.agree-checkbox[data-v-e040aba5] { cursor: pointer; color: var(--text-body); align-items: center; gap: 10px; font-size: 0.85rem; display: flex; }
.agree-checkbox input[type="checkbox"][data-v-e040aba5] { width: 18px; height: 18px; accent-color: var(--accent-brand); cursor: pointer; }
.btn-confirm[data-v-e040aba5] { background: var(--accent-brand); color: rgb(255, 255, 255); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 10px; width: 100%; padding: 12px; font-size: 0.9rem; font-weight: 600; transition: 0.2s; }
.btn-confirm[data-v-e040aba5]:hover:not(:disabled) { background: var(--accent-hover,#06c); transform: translateY(-1px); box-shadow: rgba(0, 122, 255, 0.3) 0px 4px 12px; }
.btn-confirm[data-v-e040aba5]:disabled { opacity: 0.5; cursor: not-allowed; }
.dark-mode .user-agreement-modal-overlay { background: rgba(0, 0, 0, 0.6); }
.dark-mode .user-agreement-modal-container { --text-title: #fff; --text-body: #e5e5ea; --text-muted: #98989e; --bg-panel: #1c1c1eb8; --bg-input: #ffffff08; --border-input: #ffffff1a; --border-card: #ffffff14; --shadow-modal: 0 20px 50px #0006, inset 0 1px 0 #ffffff0d; --accent-brand: #0a84ff; --accent-hover: #409cff; --accent-glow: #0a84ff26; }
.modal-header[data-v-08a050f6] { border-bottom: 1px solid var(--border-color,#ffffff0f); align-items: center; gap: 12px; padding: 24px 24px 16px; display: flex; }
.header-icon-wrapper[data-v-08a050f6] { color: rgb(16, 185, 129); background: rgba(16, 185, 129, 0.15); border-radius: 12px; flex-shrink: 0; justify-content: center; align-items: center; width: 40px; height: 40px; display: flex; }
.header-icon[data-v-08a050f6] { width: 22px; height: 22px; }
.modal-header h3[data-v-08a050f6] { color: var(--text-primary,#e2e8f0); margin: 0px; font-size: 18px; font-weight: 600; }
.header-sub[data-v-08a050f6] { color: var(--text-muted,#94a3b8); margin-left: auto; font-size: 12px; }
.overview-section[data-v-08a050f6] { border-bottom: 1px solid var(--border-color,#ffffff0f); padding: 16px 24px; }
.overview-row[data-v-08a050f6] { grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; display: grid; }
.overview-item[data-v-08a050f6] { flex-direction: column; gap: 2px; display: flex; }
.overview-label[data-v-08a050f6] { color: var(--text-muted,#94a3b8); font-size: 11px; }
.overview-value[data-v-08a050f6] { color: var(--text-primary,#e2e8f0); font-size: 16px; font-weight: 600; }
.overview-value.highlight[data-v-08a050f6] { color: rgb(16, 185, 129); }
.batch-actions[data-v-08a050f6] { gap: 8px; display: flex; }
.btn-batch[data-v-08a050f6] { color: rgb(129, 140, 248); cursor: pointer; background: rgba(99, 102, 241, 0.15); border: 1px solid rgba(99, 102, 241, 0.3); border-radius: 8px; align-items: center; gap: 6px; padding: 8px 14px; font-size: 12px; transition: 0.2s; display: inline-flex; }
.btn-batch[data-v-08a050f6]:hover:not(:disabled) { background: rgba(99, 102, 241, 0.25); }
.btn-batch[data-v-08a050f6]:disabled { opacity: 0.5; cursor: not-allowed; }
.assets-list-section[data-v-08a050f6] { max-height: 400px; padding: 16px 24px; overflow-y: auto; }
.loading-state[data-v-08a050f6], .empty-state[data-v-08a050f6] { color: var(--text-muted,#64748b); flex-direction: column; justify-content: center; align-items: center; gap: 8px; padding: 32px 0px; display: flex; }
.loading-state .iconify[data-v-08a050f6], .empty-state .iconify[data-v-08a050f6] { font-size: 28px; }
.empty-hint[data-v-08a050f6] { color: var(--text-dim,#475569); font-size: 12px; }
.spin[data-v-08a050f6] { animation: 1s linear 0s infinite normal none running spin-08a050f6; }
@keyframes spin-08a050f6 { 
  100% { transform: rotate(360deg); }
}
.assets-list[data-v-08a050f6] { flex-direction: column; gap: 8px; margin: 0px; padding: 0px; list-style: none; display: flex; }
.asset-item[data-v-08a050f6] { background: var(--bg-secondary,#ffffff05); border: 1px solid var(--border-color,#ffffff0a); border-radius: 10px; align-items: center; gap: 12px; padding: 10px; transition: border-color 0.2s; display: flex; }
.asset-item[data-v-08a050f6]:hover { border-color: rgba(99, 102, 241, 0.2); }
.asset-thumb[data-v-08a050f6] { background: var(--bg-tertiary,#374151); cursor: pointer; border-radius: 8px; flex-shrink: 0; width: 56px; height: 56px; overflow: hidden; }
.asset-thumb img[data-v-08a050f6] { object-fit: cover; width: 100%; height: 100%; }
.asset-info[data-v-08a050f6] { flex-direction: column; flex: 1 1 0%; gap: 4px; min-width: 0px; display: flex; }
.asset-info-row[data-v-08a050f6] { align-items: center; gap: 8px; display: flex; }
.asset-size[data-v-08a050f6] { color: var(--text-primary,#e2e8f0); font-size: 13px; font-weight: 600; }
.asset-hash[data-v-08a050f6] { color: var(--text-dim,#64748b); font-family: monospace; font-size: 11px; }
.asset-refs[data-v-08a050f6] { flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; display: flex; }
.refs-label[data-v-08a050f6] { color: var(--text-muted,#94a3b8); }
.ref-tag[data-v-08a050f6] { color: rgb(165, 180, 252); background: rgba(99, 102, 241, 0.1); border-radius: 4px; padding: 2px 6px; }
.ref-more[data-v-08a050f6] { color: var(--text-muted,#94a3b8); }
.ref-orphan[data-v-08a050f6] { color: rgb(245, 158, 11); font-style: italic; }
.asset-actions[data-v-08a050f6] { flex-shrink: 0; gap: 6px; display: flex; }
.btn[data-v-08a050f6] { cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; align-items: center; gap: 4px; padding: 6px 12px; font-size: 12px; font-weight: 500; transition: 0.2s; display: inline-flex; }
.btn-compress[data-v-08a050f6] { color: rgb(16, 185, 129); background: rgba(16, 185, 129, 0.15); }
.btn-compress[data-v-08a050f6]:hover:not(:disabled) { background: rgba(16, 185, 129, 0.25); }
.btn-compress[data-v-08a050f6]:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-delete[data-v-08a050f6] { color: rgb(239, 68, 68); background: rgba(239, 68, 68, 0.15); padding: 6px 8px; }
.btn-delete[data-v-08a050f6]:hover:not(:disabled) { background: rgba(239, 68, 68, 0.25); }
.compress-section[data-v-08a050f6] { padding: 16px 24px; }
.compress-header[data-v-08a050f6] { flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; display: flex; }
.btn-back[data-v-08a050f6] { background: var(--bg-tertiary,#374151); color: var(--text-secondary,#cbd5e1); cursor: pointer; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; align-items: center; gap: 4px; padding: 6px 10px; font-size: 12px; display: inline-flex; }
.compress-stats[data-v-08a050f6] { align-items: center; gap: 12px; display: flex; }
.stat-block[data-v-08a050f6] { background: var(--bg-secondary,#ffffff08); border-radius: 8px; flex-direction: column; align-items: center; gap: 2px; min-width: 80px; padding: 6px 12px; display: flex; }
.stat-block.stat-empty[data-v-08a050f6] { opacity: 0.5; }
.stat-label[data-v-08a050f6] { color: var(--text-muted,#94a3b8); font-size: 10px; }
.stat-value[data-v-08a050f6] { color: var(--text-primary,#e2e8f0); font-size: 14px; font-weight: 600; }
.stat-value.highlight[data-v-08a050f6] { color: rgb(16, 185, 129); }
.stat-dim[data-v-08a050f6] { color: var(--text-dim,#64748b); font-size: 10px; }
.stat-arrow[data-v-08a050f6] { color: var(--text-muted,#94a3b8); font-size: 16px; }
.quality-slider-section[data-v-08a050f6] { background: var(--bg-secondary,#ffffff05); border-radius: 10px; margin-bottom: 16px; padding: 14px; }
.slider-header[data-v-08a050f6] { justify-content: space-between; align-items: center; margin-bottom: 8px; display: flex; }
.slider-label[data-v-08a050f6] { color: var(--text-primary,#e2e8f0); font-size: 13px; font-weight: 500; }
.slider-value[data-v-08a050f6] { color: rgb(16, 185, 129); font-size: 14px; font-weight: 600; }
.quality-slider[data-v-08a050f6] { appearance: none; background: var(--bg-tertiary,#374151); border-radius: 3px; outline: none; width: 100%; height: 6px; }
.quality-slider[data-v-08a050f6]::-webkit-slider-thumb { appearance: none; cursor: pointer; background: rgb(16, 185, 129); border: 2px solid rgb(255, 255, 255); border-radius: 50%; width: 18px; height: 18px; }
.slider-marks[data-v-08a050f6] { color: var(--text-dim,#64748b); justify-content: space-between; margin-top: 6px; font-size: 10px; display: flex; }
.btn-recompress[data-v-08a050f6] { color: rgb(129, 140, 248); cursor: pointer; background: rgba(99, 102, 241, 0.15); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; justify-content: center; width: 100%; margin-top: 10px; padding: 8px; font-size: 12px; }
.btn-recompress[data-v-08a050f6]:hover:not(:disabled) { background: rgba(99, 102, 241, 0.25); }
.btn-recompress[data-v-08a050f6]:disabled { opacity: 0.5; cursor: not-allowed; }
.compare-section[data-v-08a050f6] { margin-bottom: 16px; }
.compare-container[data-v-08a050f6] { aspect-ratio: 16 / 10; background: var(--bg-tertiary,#000); user-select: none; touch-action: none; cursor: ew-resize; border-radius: 10px; width: 100%; position: relative; overflow: hidden; }
.compare-img[data-v-08a050f6] { object-fit: contain; pointer-events: none; -webkit-user-drag: none; width: 100%; height: 100%; position: absolute; top: 0px; left: 0px; }
.compare-overlay[data-v-08a050f6] { z-index: 2; }
.compare-line[data-v-08a050f6] { z-index: 3; pointer-events: none; background: rgb(255, 255, 255); width: 3px; position: absolute; top: 0px; bottom: 0px; transform: translate(-1.5px); }
.compare-handle[data-v-08a050f6] { color: rgb(51, 51, 51); pointer-events: none; background: rgb(255, 255, 255); border-radius: 50%; justify-content: center; align-items: center; width: 32px; height: 32px; display: flex; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 10px; }
.compare-tag[data-v-08a050f6] { color: rgb(255, 255, 255); z-index: 4; pointer-events: none; background: rgba(0, 0, 0, 0.6); border-radius: 4px; padding: 3px 8px; font-size: 11px; position: absolute; top: 8px; }
.compare-tag-left[data-v-08a050f6] { left: 8px; }
.compare-tag-right[data-v-08a050f6] { right: 8px; }
.compress-actions[data-v-08a050f6] { justify-content: center; gap: 12px; padding: 12px 0px 0px; display: flex; }
.modal-actions[data-v-08a050f6] { justify-content: flex-end; gap: 12px; padding: 16px 24px 24px; display: flex; }
.btn-cancel[data-v-08a050f6] { background: var(--bg-tertiary,#374151); color: var(--text-secondary,#cbd5e1); justify-content: center; min-width: 100px; padding: 10px 28px; font-size: 13px; }
.btn-cancel[data-v-08a050f6]:hover { background: var(--bg-hover,#4b5563); }
.btn-keep[data-v-08a050f6] { color: rgb(255, 255, 255); background: rgb(16, 185, 129); justify-content: center; min-width: 100px; padding: 10px 28px; font-size: 13px; }
.btn-keep[data-v-08a050f6]:hover:not(:disabled) { background: rgb(5, 150, 105); }
.btn-keep[data-v-08a050f6]:disabled { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 640px) {
  .overview-row[data-v-08a050f6] { grid-template-columns: repeat(2, 1fr); }
  .asset-item[data-v-08a050f6] { flex-wrap: wrap; }
  .asset-actions[data-v-08a050f6] { justify-content: flex-end; width: 100%; }
  .compress-header[data-v-08a050f6] { flex-direction: column; align-items: flex-start; }
  .compress-stats[data-v-08a050f6] { flex-wrap: wrap; width: 100%; }
  .stat-block[data-v-08a050f6] { flex: 1 1 0%; min-width: 60px; }
}
.sdm-overlay[data-v-a51ac510] { z-index: 12000; backdrop-filter: blur(2px); background: rgba(0, 0, 0, 0.45); justify-content: center; align-items: center; display: flex; position: fixed; inset: 0px; }
.sdm-container[data-v-a51ac510] { background: var(--bg-card,#fff); border-radius: 16px; width: 480px; max-width: 95vw; max-height: 85vh; padding: 0px; overflow-y: auto; box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 60px; }
.sdm-header[data-v-a51ac510] { border-bottom: 1px solid var(--border-color,#e5e7eb); align-items: center; gap: 10px; padding: 20px 24px 12px; display: flex; }
.sdm-header-icon[data-v-a51ac510] { background: var(--color-primary-bg,#eff6ff); width: 36px; height: 36px; color: var(--color-primary,#3b82f6); border-radius: 10px; justify-content: center; align-items: center; display: flex; }
.sdm-header h3[data-v-a51ac510] { flex: 1 1 0%; margin: 0px; font-size: 16px; font-weight: 700; }
.sdm-close[data-v-a51ac510] { cursor: pointer; width: 32px; height: 32px; color: var(--text-secondary,#9ca3af); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; justify-content: center; align-items: center; font-size: 20px; display: flex; }
.sdm-close[data-v-a51ac510]:hover { background: var(--bg-secondary,#f1f5f9); }
.sdm-chart-section[data-v-a51ac510] { align-items: center; gap: 24px; padding: 24px 24px 16px; display: flex; }
.sdm-donut-wrapper[data-v-a51ac510] { flex-shrink: 0; width: 160px; height: 160px; position: relative; }
.sdm-donut[data-v-a51ac510] { width: 100%; height: 100%; }
.sdm-segment[data-v-a51ac510] { transition: stroke-dasharray 0.6s, stroke-dashoffset 0.6s; }
.sdm-donut-center[data-v-a51ac510] { flex-direction: column; justify-content: center; align-items: center; display: flex; position: absolute; inset: 0px; }
.sdm-donut-pct[data-v-a51ac510] { font-size: 28px; font-weight: 800; line-height: 1; }
.sdm-donut-label[data-v-a51ac510] { color: var(--text-secondary,#9ca3af); margin-top: 2px; font-size: 12px; }
.sdm-legend[data-v-a51ac510] { flex-direction: column; flex: 1 1 0%; gap: 10px; display: flex; }
.sdm-legend-item[data-v-a51ac510] { align-items: center; gap: 8px; font-size: 13px; display: flex; }
.sdm-dot[data-v-a51ac510] { border-radius: 50%; flex-shrink: 0; width: 10px; height: 10px; }
.sdm-legend-label[data-v-a51ac510] { color: var(--text-secondary,#6b7280); flex: 1 1 0%; }
.sdm-legend-value[data-v-a51ac510] { font-variant-numeric: tabular-nums; font-weight: 600; }
.sdm-legend-pct[data-v-a51ac510] { color: var(--text-secondary,#9ca3af); text-align: right; width: 36px; font-size: 12px; }
.sdm-quota-bar[data-v-a51ac510] { padding: 0px 24px 16px; }
.sdm-quota-info[data-v-a51ac510] { color: var(--text-secondary,#9ca3af); margin-bottom: 6px; font-size: 12px; }
.sdm-bar-bg[data-v-a51ac510] { background: var(--bg-secondary,#f1f5f9); border-radius: 4px; height: 8px; display: flex; overflow: hidden; }
.sdm-bar-canvas[data-v-a51ac510] { background: rgb(59, 130, 246); height: 100%; transition: width 0.4s; }
.sdm-bar-world[data-v-a51ac510] { background: rgb(139, 92, 246); height: 100%; transition: width 0.4s; }
.sdm-details[data-v-a51ac510] { flex-direction: column; gap: 16px; padding: 0px 24px 24px; display: flex; }
.sdm-detail-title[data-v-a51ac510] { color: var(--text-primary,#1f2937); align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; font-weight: 600; display: flex; }
.sdm-empty[data-v-a51ac510] { color: var(--text-secondary,#9ca3af); padding: 8px 0px; font-size: 13px; }
.sdm-detail-row[data-v-a51ac510] { background: var(--bg-secondary,#f8fafc); border-radius: 10px; justify-content: space-between; align-items: center; margin-bottom: 6px; padding: 10px 12px; transition: background 0.15s; display: flex; }
.sdm-clickable[data-v-a51ac510] { cursor: pointer; }
.sdm-clickable[data-v-a51ac510]:hover { background: var(--color-primary-bg,#eff6ff); }
.sdm-empty-slot[data-v-a51ac510] { opacity: 0.5; }
.sdm-r2-row[data-v-a51ac510] { border: 1px dashed var(--border-color,#e5e7eb); background: 0px 0px; }
.sdm-detail-name[data-v-a51ac510] { align-items: center; gap: 8px; min-width: 0px; font-size: 13px; font-weight: 500; display: flex; }
.sdm-detail-name span[data-v-a51ac510] { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }
.sdm-name-stack[data-v-a51ac510] { flex-direction: column; gap: 1px; min-width: 0px; display: flex; }
.sdm-sub-info[data-v-a51ac510] { color: var(--text-tertiary,#9ca3af); white-space: nowrap; text-overflow: ellipsis; font-size: 11px; font-weight: 400; overflow: hidden; }
.sdm-slot-badge[data-v-a51ac510] { background: var(--color-primary-bg,#eff6ff); color: var(--color-primary,#3b82f6); border-radius: 4px; flex-shrink: 0; padding: 1px 5px; font-size: 10px; font-weight: 600; }
.sdm-detail-size[data-v-a51ac510] { font-variant-numeric: tabular-nums; flex-shrink: 0; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; display: flex; }
.sdm-arrow[data-v-a51ac510] { opacity: 0.3; transition: opacity 0.15s; }
.sdm-clickable:hover .sdm-arrow[data-v-a51ac510] { opacity: 0.7; }
.fade-enter-active[data-v-a51ac510], .fade-leave-active[data-v-a51ac510] { transition: opacity 0.2s; }
.fade-enter-from[data-v-a51ac510], .fade-leave-to[data-v-a51ac510] { opacity: 0; }
.ucp-color-wheel-container[data-v-4b98fb42] { aspect-ratio: 1 / 1; justify-content: center; align-items: center; width: 100%; padding: 10px; display: flex; }
.ucp-hue-ring[data-v-4b98fb42] { cursor: pointer; border-radius: 50%; width: 160px; height: 160px; position: relative; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px; }
.hue-ring-gradient[data-v-4b98fb42] { background: conic-gradient(red, rgb(255, 255, 0), rgb(0, 255, 0), rgb(0, 255, 255), rgb(0, 0, 255), rgb(255, 0, 255), red); border-radius: 50%; position: absolute; inset: 0px; mask: radial-gradient(rgba(0, 0, 0, 0) 55%, rgb(0, 0, 0) 56%); }
.hue-ring-overlay[data-v-4b98fb42] { pointer-events: none; border-radius: 50%; position: absolute; inset: 0px; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px inset; }
.hue-cursor[data-v-4b98fb42] { pointer-events: none; z-index: 10; will-change: transform; border: 3px solid rgb(255, 255, 255); border-radius: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); position: absolute; top: 50%; left: 50%; box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px; }
.hue-cursor.is-dragging[data-v-4b98fb42] { transition: none !important; }
.ucp-sv-box-inner[data-v-4b98fb42] { cursor: crosshair; background-color: red; border-radius: 12px; width: 90px; height: 90px; position: absolute; top: 50%; left: 50%; overflow: hidden; transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px; }
.sv-white[data-v-4b98fb42] { background: linear-gradient(90deg, rgb(255, 255, 255), rgba(255, 255, 255, 0)); position: absolute; inset: 0px; }
.sv-black[data-v-4b98fb42] { background: linear-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0)); position: absolute; inset: 0px; }
.sv-cursor[data-v-4b98fb42] { pointer-events: none; z-index: 5; will-change: left, top; border: 2px solid rgb(255, 255, 255); border-radius: 50%; width: 14px; height: 14px; transition: left 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), top 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), border-color 0.25s; position: absolute; transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px; }
.sv-cursor.is-dragging[data-v-4b98fb42] { transition: none !important; }
.ucp-inputs[data-v-f0e0a9e4] { flex-direction: column; flex: 1 1 0%; gap: 8px; display: flex; }
.ucp-format-header[data-v-f0e0a9e4] { justify-content: space-between; align-items: center; margin-bottom: 0px; display: flex; }
.ucp-format-toggle[data-v-f0e0a9e4] { color: rgb(0, 122, 255); cursor: pointer; text-transform: uppercase; align-items: center; gap: 4px; min-width: 40px; padding: 0px; font-size: 11px; font-weight: 800; display: flex; }
.ucp-inline-hex[data-v-f0e0a9e4] { flex: 1 1 0%; max-width: 100px; margin: 0px 4px; }
.ucp-inline-hex input[data-v-f0e0a9e4] { border: 1px solid var(--ucp-border,#0000001a); background: var(--ucp-input-bg,#0000000d); width: 100%; color: var(--ucp-text-main,#111); text-align: center; border-radius: 8px; outline: none; padding: 4px 10px; font-family: "SF Mono", Menlo, monospace; font-size: 13px; font-weight: 700; transition: 0.2s; }
.ucp-inline-hex input[data-v-f0e0a9e4]:focus { background: color-mix(in srgb, var(--focus-color,#fff), transparent 92%); border-color: rgb(0, 122, 255); box-shadow: rgba(0, 122, 255, 0.1) 0px 0px 0px 3px; }
.ucp-inline-inputs[data-v-f0e0a9e4] { min-width: 0px; margin-left: 4px; display: flex; }
.ucp-inline-multi[data-v-f0e0a9e4] { gap: 4px; width: 100%; max-width: 110px; display: flex; }
.ucp-inline-multi input[data-v-f0e0a9e4] { border: 1px solid var(--ucp-border,#0000001a); background: var(--ucp-input-bg,#0000000d); min-width: 0px; color: var(--ucp-text-main,#111); text-align: center; border-radius: 6px; outline: none; flex: 1 1 0%; padding: 4px; font-family: "SF Mono", Menlo, monospace; font-size: 11px; font-weight: 700; transition: 0.2s; }
.ucp-inline-multi input[data-v-f0e0a9e4]:focus { background: var(--ucp-bg,#fff); border-color: rgb(0, 122, 255); flex: 1.5 1 0%; }
.ucp-input-group input[data-v-f0e0a9e4] { border: 1px solid var(--ucp-border,#0000001a); background: var(--ucp-input-bg,#0000000d); width: 100%; color: var(--ucp-text-main,#111); border-radius: 10px; outline: none; padding: 8px 12px; font-family: "SF Mono", Menlo, monospace; font-size: 14px; font-weight: 600; transition: 0.2s; }
.ucp-input-group input[data-v-f0e0a9e4]:focus { background: var(--ucp-bg,#fff); border-color: rgb(0, 122, 255); box-shadow: rgba(0, 122, 255, 0.1) 0px 0px 0px 3px; }
.multi-channel-inputs[data-v-f0e0a9e4] { gap: 8px; display: flex; }
.channel-field[data-v-f0e0a9e4] { flex: 1 1 0%; align-items: center; display: flex; position: relative; }
.channel-label[data-v-f0e0a9e4] { color: rgb(0, 122, 255); opacity: 0.6; pointer-events: none; font-size: 9px; font-weight: 900; position: absolute; left: 10px; }
.channel-field input[data-v-f0e0a9e4] { text-align: center; padding-left: 20px !important; font-size: 13px !important; }
input[data-v-f0e0a9e4]::-webkit-outer-spin-button { appearance: none; margin: 0px; }
input[data-v-f0e0a9e4]::-webkit-inner-spin-button { appearance: none; margin: 0px; }
input[type="number"][data-v-f0e0a9e4] { appearance: textfield; }
.ucp-section-header[data-v-af22ed25] { cursor: pointer; user-select: none; background: 0px 0px; border-radius: 12px; align-items: center; gap: 8px; margin: 4px -4px; padding: 8px 10px; transition: 0.2s; display: flex; }
.ucp-section-header[data-v-af22ed25]:hover { background: var(--ucp-input-bg,#0000000d); }
.ucp-section-header .section-icon[data-v-af22ed25] { color: rgb(0, 122, 255); font-size: 16px; }
.ucp-section-header .section-title[data-v-af22ed25] { color: var(--ucp-text-sub,#666); text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; font-weight: 800; }
.ucp-section-header .spacer[data-v-af22ed25] { flex: 1 1 0%; }
.ucp-section-header .chevron[data-v-af22ed25] { color: var(--ucp-text-sub,#666); font-size: 18px; transition: transform 0.2s; }
.ucp-section-header.is-collapsed[data-v-af22ed25] { opacity: 0.7; }
.ucp-section-header[data-v-af22ed25]:active { transform: scale(0.98); }
@media (max-width: 767px) {
  .ucp-section-header[data-v-af22ed25] { margin: 4px 0px !important; padding: 8px 0px !important; }
}
.wcag-wrapper[data-v-af22ed25] { margin-top: 4px; }
.wcag-advice-container[data-v-af22ed25] { background: var(--ucp-input-bg,#0000000d); border: 1px solid var(--ucp-border,#0000001a); border-radius: 14px; align-items: stretch; min-height: 72px; padding: 10px; display: flex; }
@media (max-width: 767px) {
  .wcag-advice-container[data-v-af22ed25] { min-height: 64px; padding: 6px 8px; }
}
.wcag-divider[data-v-af22ed25] { background: var(--ucp-border,#0000001a); align-self: center; width: 1px; height: 30px; margin: 0px 8px; }
.wcag-side[data-v-af22ed25] { flex-direction: column; flex: 1 1 0%; justify-content: center; display: flex; }
.wcag-label-row[data-v-af22ed25] { align-items: center; gap: 6px; margin-bottom: 2px; display: flex; }
.bg-indicator[data-v-af22ed25] { border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; flex-shrink: 0; width: 12px; height: 12px; }
.bg-indicator.white[data-v-af22ed25] { background: rgb(255, 255, 255); }
.bg-indicator.black[data-v-af22ed25] { background: rgb(0, 0, 0); }
.wcag-val[data-v-af22ed25] { color: var(--ucp-text-main,#111); font-variant-numeric: tabular-nums; min-width: 45px; font-size: 13px; font-weight: 800; display: inline-block; }
.wcag-icon[data-v-af22ed25] { color: rgb(255, 255, 255); background: rgb(255, 152, 0); border-radius: 50%; justify-content: center; align-items: center; width: 16px; height: 16px; margin-left: auto; font-size: 10px; font-weight: 700; display: flex; }
.pass .wcag-icon[data-v-af22ed25] { background: rgb(76, 175, 80); }
.wcag-hint-min[data-v-af22ed25] { color: var(--ucp-text-sub,#666); margin-top: 2px; font-size: 10px; font-weight: 600; }
.wcag-fix-wrapper[data-v-af22ed25] { align-items: center; height: 28px; display: flex; }
.wcag-fix-min[data-v-af22ed25] { cursor: pointer; background: rgba(0, 122, 255, 0.1); border-radius: 8px; align-items: center; gap: 6px; width: fit-content; padding: 4px 8px; transition: 0.2s; display: flex; }
.wcag-fix-min[data-v-af22ed25]:hover { background: rgba(0, 122, 255, 0.2); transform: translateY(-1px); }
.wcag-fix-min span[data-v-af22ed25] { color: rgb(0, 122, 255); font-size: 10px; font-weight: 800; }
.fix-dot[data-v-af22ed25] { border-radius: 50%; width: 8px; height: 8px; }
.bg-img-warning[data-v-af22ed25] { color: rgb(255, 152, 0); opacity: 0.8; margin-left: 2px; font-size: 14px; }
.ucp-harmony-section[data-v-a71a55ff] { margin-bottom: 5px; }
.harmony-grid[data-v-a71a55ff] { grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 4px 0px; display: grid; }
.harmony-item[data-v-a71a55ff] { flex-direction: column; gap: 4px; display: flex; }
.harmony-header[data-v-a71a55ff] { justify-content: space-between; align-items: center; display: flex; }
.harmony-title[data-v-a71a55ff] { color: var(--ucp-text-sub,#666); opacity: 0.8; font-size: 10px; font-weight: 700; }
.harmony-swatches[data-v-a71a55ff] { gap: 4px; display: flex; }
.ucp-swatch[data-v-a71a55ff] { cursor: pointer; border-radius: 6px; flex-shrink: 0; width: 24px; height: 24px; transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; }
.ucp-swatch[data-v-a71a55ff]:hover { transform: scale(1.15) rotate(5deg); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; }
.ucp-palette-sidebar[data-v-afae7958] { border-left: 1px solid var(--ucp-border,#0000001a); box-sizing: border-box; flex-direction: column; width: 180px; min-height: 0px; padding: 0px 12px; display: flex; overflow: hidden; }
.palette-sidebar-header[data-v-afae7958] { border-bottom: 1px solid var(--ucp-border,#0000001a); justify-content: space-between; align-items: center; margin-bottom: 8px; padding: 8px 0px 6px; display: flex; }
.palette-title[data-v-afae7958] { color: var(--ucp-text-sub,#666); text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; font-weight: 800; }
.palette-header-actions[data-v-afae7958] { align-items: center; gap: 4px; display: flex; }
.palette-count[data-v-afae7958] { display: none; }
.sidebar-section[data-v-afae7958] { padding: 4px 0px; }
.section-header-compact[data-v-afae7958] { cursor: pointer; border-radius: 6px; align-items: center; gap: 6px; padding: 6px 4px; transition: background 0.2s; display: flex; }
.section-header-compact[data-v-afae7958]:hover { background: var(--ucp-input-bg,#0000000d); }
.section-header-compact .iconify[data-v-afae7958] { color: var(--ucp-text-sub,#666); font-size: 14px; }
.section-title-compact[data-v-afae7958] { color: var(--ucp-text-main,#111); flex: 1 1 0%; font-size: 11px; font-weight: 700; }
.section-count-compact[data-v-afae7958] { background: var(--ucp-input-bg,#0000000d); color: var(--ucp-text-sub,#666); border-radius: 4px; padding: 1px 4px; font-size: 9px; }
.fav-list-compact[data-v-afae7958] { padding: 4px; }
.fav-grid-compact[data-v-afae7958] { flex-wrap: wrap; gap: 6px; display: flex; }
.no-data-hint[data-v-afae7958] { color: var(--ucp-text-sub,#666); text-align: center; opacity: 0.6; padding: 8px 0px; font-size: 10px; }
.sidebar-divider[data-v-afae7958] { background: var(--ucp-border,#0000001a); opacity: 0.5; height: 1px; margin: 8px 0px; }
.fav-star-overlay[data-v-afae7958] { color: rgb(255, 77, 79); pointer-events: none; justify-content: center; align-items: center; font-size: 10px; display: flex; position: absolute; inset: 0px; }
.palette-collapse-btn[data-v-afae7958] { cursor: pointer; width: 20px; height: 20px; color: var(--ucp-text-sub,#666); background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; justify-content: center; align-items: center; transition: 0.2s; display: flex; }
.palette-create-container[data-v-afae7958] { background: var(--ucp-input-bg,#00000008); border: 1px solid var(--ucp-border,#0000000d); box-sizing: border-box; border-radius: 12px; width: 100%; margin-bottom: 8px; padding: 8px; }
.create-label[data-v-afae7958] { color: rgb(0, 122, 255); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; font-size: 10px; font-weight: 800; }
.palette-create-compact[data-v-afae7958] { flex-wrap: nowrap; align-items: center; gap: 6px; display: flex; }
.palette-input-compact[data-v-afae7958] { border: 1px solid var(--ucp-border,#0000001a); width: 0px; min-width: 0px; color: var(--ucp-text-main,#111); box-sizing: border-box; background: rgb(255, 255, 255); border-radius: 8px; outline: none; flex: 1 1 0%; padding: 6px 8px; font-size: 11px; transition: 0.2s; }
.palette-input-compact[data-v-afae7958]:focus { border-color: rgb(0, 122, 255); box-shadow: rgba(0, 122, 255, 0.1) 0px 0px 0px 3px; }
:root.dark-mode .palette-input-compact[data-v-afae7958] { background: rgba(255, 255, 255, 0.05); }
.palette-create-btn-compact[data-v-afae7958] { color: rgb(255, 255, 255); cursor: pointer; background: rgb(0, 122, 255); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 8px; flex-shrink: 0; justify-content: center; align-items: center; width: 28px; height: 28px; font-size: 14px; transition: 0.2s; display: flex; }
.palette-create-btn-compact[data-v-afae7958]:hover:not(:disabled) { background: rgb(0, 86, 179); transform: translateY(-1px); }
.palette-create-btn-compact[data-v-afae7958]:disabled { opacity: 0.5; filter: grayscale(); cursor: not-allowed; }
.palette-list-compact[data-v-afae7958] { flex-direction: column; flex: 1 1 0%; gap: 6px; padding-right: 4px; display: flex; overflow-y: auto; }
.palette-list-compact[data-v-afae7958]::-webkit-scrollbar { width: 4px; }
.palette-list-compact[data-v-afae7958]::-webkit-scrollbar-track { background: 0px 0px; }
.palette-list-compact[data-v-afae7958]::-webkit-scrollbar-thumb { background: var(--ucp-border,#0000001a); border-radius: 2px; }
.palette-item-compact[data-v-afae7958] { background: var(--ucp-input-bg,#0000000d); border: 1px solid var(--ucp-border,#0000001a); cursor: pointer; border-radius: 8px; padding: 8px; }
.palette-item-compact.selected[data-v-afae7958] { background: rgba(0, 122, 255, 0.05); border-color: rgb(0, 122, 255); }
.palette-header-compact[data-v-afae7958] { justify-content: space-between; align-items: center; display: flex; }
.palette-name-compact[data-v-afae7958] { color: var(--ucp-text-main,#111); text-overflow: ellipsis; white-space: nowrap; flex: 1 1 0%; font-size: 11px; font-weight: 600; overflow: hidden; }
.palette-rename-input[data-v-afae7958] { background: rgb(255, 255, 255); border: 1px solid rgb(0, 122, 255); border-radius: 4px; outline: none; flex: 1 1 0%; width: 100%; padding: 2px 4px; font-size: 11px; font-weight: 600; }
:root.dark-mode .palette-rename-input[data-v-afae7958] { color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.1); }
.palette-item-actions[data-v-afae7958] { gap: 2px; display: flex; }
.palette-action-btn[data-v-afae7958] { color: var(--ucp-text-sub,#666); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 4px; justify-content: center; align-items: center; width: 20px; height: 20px; font-size: 12px; transition: 0.2s; display: flex; }
.palette-action-btn[data-v-afae7958]:hover { color: rgb(0, 122, 255); background: rgba(0, 122, 255, 0.1); }
.palette-action-btn.delete[data-v-afae7958] { color: rgb(255, 152, 0); }
.palette-action-btn.delete[data-v-afae7958]:hover { color: rgb(239, 108, 0); background: rgba(255, 152, 0, 0.1); }
.no-palette-empty[data-v-afae7958] { opacity: 0.4; flex-direction: column; flex: 1 1 0%; justify-content: center; align-items: center; gap: 8px; padding: 20px 0px; display: flex; }
.empty-icon[data-v-afae7958] { font-size: 32px; }
.empty-text[data-v-afae7958] { font-size: 11px; font-weight: 600; }
.palette-colors-compact[data-v-afae7958] { flex-wrap: wrap; gap: 4px; padding-top: 6px; display: flex; }
.palette-color-mini[data-v-afae7958] { cursor: pointer; border-radius: 6px; width: 30px; height: 30px; position: relative; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; }
.palette-color-remove-mini[data-v-afae7958] { color: rgb(255, 255, 255); opacity: 0; background: rgba(0, 0, 0, 0.5); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; width: 14px; height: 14px; font-size: 8px; transition: opacity 0.2s; display: flex; position: absolute; top: -4px; right: -4px; }
.palette-color-remove-mini.is-confirming[data-v-afae7958] { opacity: 1; background: rgb(255, 77, 79); transform: scale(1.2); }
.palette-color-mini.confirm-delete[data-v-afae7958] { box-shadow: rgb(255, 77, 79) 0px 0px 0px 2px; }
.palette-add-current-mini[data-v-afae7958] { color: rgb(0, 122, 255); cursor: pointer; background: rgba(0, 122, 255, 0.05); border: 1px dashed rgb(0, 122, 255); border-radius: 5px; justify-content: center; align-items: center; width: 24px; height: 24px; font-size: 10px; display: flex; }
.ucp-preview-hero[data-v-b3ed1a07] { overscroll-behavior: contain; background: var(--ucp-input-bg,#0000000a); border: 1px solid var(--ucp-border,#00000014); will-change: height; border-radius: 12px; flex-direction: column; justify-content: flex-start; align-items: center; width: 100%; height: 120px; margin-bottom: 20px; padding: 10px 0px; transition: height 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.1); display: flex; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 10px inset; }
.ucp-preview-hero[data-v-b3ed1a07]::-webkit-scrollbar { width: 4px; }
.ucp-preview-hero[data-v-b3ed1a07]::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 10px; }
.ucp-preview-hero.is-expanded[data-v-b3ed1a07] { height: 195px; }
@media (max-width: 767px) {
  .ucp-preview-hero[data-v-b3ed1a07] { height: 160px; margin-bottom: 12px; }
  .ucp-preview-hero.is-expanded[data-v-b3ed1a07] { height: 220px; }
}
.item-preview-sandbox[data-v-b3ed1a07] { background: 0px 0px; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; }
.mini-canvas-wrapper[data-v-b3ed1a07] { pointer-events: none; background: 0px 0px; flex-shrink: 0; width: 600px; }
.preview-item-mirror[data-v-b3ed1a07] { background: 0px 0px; width: 100%; }
[data-v-b3ed1a07] .sandbox-env { box-shadow: none !important; background: 0px 0px !important; padding: 0px !important; }
.page-preview-outer[data-v-b3ed1a07], .page-preview-container[data-v-b3ed1a07] { justify-content: center; align-items: center; width: 100%; height: 100%; display: flex; }
.page-mini-content[data-v-b3ed1a07] { border-radius: 8px; flex-direction: column; gap: 8px; width: 70px; height: 95px; padding: 8px; display: flex; box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 25px; }
.mini-header[data-v-b3ed1a07] { border-radius: 2px; height: 14px; }
.mini-items[data-v-b3ed1a07] { flex-direction: column; flex: 1 1 0%; gap: 6px; display: flex; }
.mini-item[data-v-b3ed1a07] { background: rgba(0, 0, 0, 0.1); border-radius: 3px; height: 14px; }
[data-v-b3ed1a07] .preview-card-title, [data-v-b3ed1a07] h1, [data-v-b3ed1a07] h2 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap !important; line-height: 1.35 !important; }
[data-v-b3ed1a07] .preview-card-content, [data-v-b3ed1a07] p { -webkit-line-clamp: 3; -webkit-box-orient: vertical; display: -webkit-box; overflow: hidden; line-height: 1.4 !important; }
.ucp-panel[data-v-be422351] { --ucp-bg: #ffffffe0; --ucp-border: #00000014; --ucp-text-main: #111; --ucp-text-sub: #666; --ucp-input-bg: #0000000a; --ucp-shadow: 0 20px 50px #00000026; }
:root.dark-mode .ucp-panel[data-v-be422351] { --ucp-bg: #1e222ae6; --ucp-border: #ffffff1a; --ucp-text-main: #eee; --ucp-text-sub: #aaa; --ucp-input-bg: #ffffff0f; --ucp-shadow: 0 20px 50px #0006; }
.ucp-overlay[data-v-be422351] { z-index: 9999; background: rgba(0, 0, 0, 0.05); justify-content: center; align-items: flex-end; display: flex; position: fixed; inset: 0px; }
@media (min-width: 768px) {
  .ucp-overlay[data-v-be422351] { align-items: center; }
}
.ucp-overlay[data-v-be422351] { z-index: 99999; background: 0px 0px; transition: opacity 0.3s; position: fixed; inset: 0px; }
.ucp-overlay.is-pinned[data-v-be422351] { pointer-events: none; background: 0px 0px; }
.ucp-panel[data-v-be422351] { background: var(--ucp-bg,#fff); border: 1px solid var(--ucp-border,#0000001a); z-index: 100000; pointer-events: auto; will-change: transform, top, left, box-shadow; border-radius: 24px 24px 0px 0px; flex-direction: column; padding: 10px; transition: 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.2s; animation: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.1) 0s 1 normal none running ucp-slide-up-be422351; display: flex; position: absolute; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 40px; }
@keyframes ucp-slide-up-be422351 { 
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0px) scale(1); }
}
.ucp-panel.is-dragging[data-v-be422351] { cursor: move; transition: none !important; }
@media (min-width: 768px) {
  .ucp-panel[data-v-be422351] { border: 1px solid var(--ucp-border,#0000001a); border-radius: 20px; flex-direction: row; gap: 12px; max-width: 1000px; }
}
.ucp-main-panel[data-v-be422351] { flex-direction: column; flex: 1 1 0%; min-width: 0px; max-height: 80vh; padding-right: 4px; display: flex; overflow: hidden auto; }
.ucp-main-panel[data-v-be422351]::-webkit-scrollbar { width: 4px; }
.ucp-main-panel[data-v-be422351]::-webkit-scrollbar-track { background: 0px 0px; }
.ucp-main-panel[data-v-be422351]::-webkit-scrollbar-thumb { background: var(--ucp-border); border-radius: 2px; }
.ucp-header[data-v-be422351] { justify-content: space-between; align-items: center; margin-bottom: 8px; display: flex; }
.header-title[data-v-be422351] { color: var(--ucp-text-main); white-space: nowrap; flex-shrink: 0; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; display: flex; }
.title-icon[data-v-be422351] { color: rgb(0, 122, 255); flex-shrink: 0; font-size: 18px; }
.ucp-fav-btn[data-v-be422351], .ucp-palette-toggle-btn[data-v-be422351], .ucp-pin-btn[data-v-be422351], .ucp-close-btn[data-v-be422351] { background: var(--ucp-input-bg); cursor: pointer; width: 28px; height: 28px; color: var(--ucp-text-main); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; transition: 0.2s; display: flex; }
.ucp-fav-btn[data-v-be422351]:hover, .ucp-palette-toggle-btn[data-v-be422351]:hover, .ucp-pin-btn[data-v-be422351]:hover, .ucp-close-btn[data-v-be422351]:hover { color: rgb(0, 122, 255); background: rgba(0, 122, 255, 0.1); }
.ucp-palette-toggle-btn.active[data-v-be422351] { color: rgb(0, 122, 255); background: rgba(0, 122, 255, 0.2); }
.ucp-fav-btn.active[data-v-be422351] { color: rgb(255, 64, 129); background: rgba(255, 64, 129, 0.1); }
.ucp-pin-btn.active[data-v-be422351] { color: rgb(255, 255, 255); background: rgb(0, 122, 255); }
.header-title[data-v-be422351] { cursor: move; position: relative; }
.drag-handle-hint[data-v-be422351] { opacity: 0; color: var(--ucp-text-sub); margin-left: 4px; font-size: 14px; transition: opacity 0.2s; }
.header-title:hover .drag-handle-hint[data-v-be422351] { opacity: 0.5; }
.ucp-mode-toggle-btn[data-v-be422351] { background: var(--ucp-input-bg); cursor: pointer; width: 28px; height: 28px; color: var(--ucp-text-main); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; transition: 0.2s; display: flex; }
.ucp-mode-toggle-btn[data-v-be422351]:hover { color: rgb(0, 122, 255); background: rgba(0, 122, 255, 0.1); }
.ucp-main-interaction[data-v-be422351] { flex-direction: column; margin-bottom: 6px; display: flex; }
.ucp-order-hero-header[data-v-be422351] { order: 1; }
.ucp-order-hero-content[data-v-be422351] { order: 2; }
.ucp-order-picker[data-v-be422351] { order: 3; }
.ucp-order-inputs[data-v-be422351] { order: 4; }
.ucp-order-wcag[data-v-be422351] { order: 5; }
@media (max-width: 767px) {
  .ucp-order-inputs[data-v-be422351] { order: 3; margin: 4px 0px !important; }
  .ucp-order-wcag[data-v-be422351] { order: 4; }
  .ucp-order-picker[data-v-be422351] { order: 5; margin-top: 12px; }
}
.ucp-controls-v2[data-v-be422351] { flex-direction: column; gap: 4px; margin-bottom: 8px; display: flex; }
.ucp-top-row[data-v-be422351] { align-items: center; gap: 4px; display: flex; }
.ucp-preview-block[data-v-be422351] { align-items: center; gap: 10px; display: flex; }
.ucp-preview-swatch[data-v-be422351] { background-color: var(--ucp-current-hex); cursor: copy; border-radius: 10px; width: 40px; height: 40px; transition: transform 0.2s; position: relative; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; }
.ucp-preview-swatch[data-v-be422351]:hover { transform: scale(1.05); }
.copy-overlay[data-v-be422351] { color: rgb(255, 255, 255); background: rgba(0, 0, 0, 0.6); border-radius: 10px; justify-content: center; align-items: center; font-size: 10px; font-weight: 700; animation: 0.2s ease 0s 1 normal none running fadeIn-be422351; display: flex; position: absolute; inset: 0px; }
.ucp-eyedropper-btn[data-v-be422351] { background: var(--ucp-input-bg); cursor: pointer; width: 32px; height: 40px; color: var(--ucp-text-main); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 10px; transition: 0.2s; }
.ucp-eyedropper-btn[data-v-be422351]:hover { color: rgb(0, 122, 255); background: rgba(0, 122, 255, 0.1); }
.ucp-section-label[data-v-be422351] { color: var(--ucp-text-sub); text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; margin-bottom: 6px; font-size: 10px; font-weight: 800; }
.ucp-history[data-v-be422351] { margin-top: 8px; margin-bottom: 12px; }
.ucp-history-grid[data-v-be422351], .ucp-colors-grid[data-v-be422351] { flex-wrap: wrap; gap: 10px; display: flex; }
.ucp-swatch[data-v-be422351], .color-swatch[data-v-be422351] { cursor: pointer; border-radius: 8px; flex-shrink: 0; width: 32px; height: 32px; transition: 0.2s; box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px inset; }
.ucp-swatch[data-v-be422351]:hover, .color-swatch[data-v-be422351]:hover { transform: scale(1.1) translateY(-2px); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; }
.color-card[data-v-be422351] { position: relative; }
.color-fav-mini[data-v-be422351] { color: rgb(255, 255, 255); cursor: pointer; z-index: 2; background: rgb(255, 77, 79); border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 50%; justify-content: center; align-items: center; width: 16px; height: 16px; font-size: 10px; display: flex; position: absolute; top: -4px; right: -4px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; }
@keyframes fadeIn-be422351 { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@media (max-width: 767px) {
  .ucp-panel[data-v-be422351] { border-bottom-width: medium !important; border-bottom-style: none !important; border-bottom-color: currentcolor !important; border-left-width: medium !important; border-left-style: none !important; border-left-color: currentcolor !important; border-right-width: medium !important; border-right-style: none !important; border-right-color: currentcolor !important; border-radius: 20px 20px 0px 0px !important; width: 100% !important; max-width: 100vw !important; max-height: 55vh !important; padding: 12px 16px 30px !important; position: fixed !important; inset: auto 0px 0px !important; transform: translateY(0px) scale(1) !important; }
  .ucp-main-panel[data-v-be422351] { max-height: 100% !important; overflow-y: auto !important; }
  .hidden-on-mobile[data-v-be422351] { display: none !important; }
  .ucp-history-grid[data-v-be422351] { flex-wrap: nowrap; padding-bottom: 4px; overflow-x: auto; }
  .ucp-history-grid[data-v-be422351]::-webkit-scrollbar { height: 0px; }
  .ucp-section-header[data-v-be422351] { margin: 4px 0px !important; padding: 8px 0px !important; }
}
.ucp-section-header[data-v-be422351] { cursor: pointer; user-select: none; background: 0px 0px; border-radius: 12px; align-items: center; gap: 8px; margin: 4px -4px; padding: 8px 10px; transition: 0.2s; display: flex; }
.ucp-section-header[data-v-be422351]:hover { background: var(--ucp-input-bg,#0000000d); }
.ucp-section-header .section-icon[data-v-be422351] { color: rgb(0, 122, 255); font-size: 16px; }
.ucp-section-header .section-title[data-v-be422351] { color: var(--ucp-text-sub,#666); text-transform: uppercase; letter-spacing: 0.5px; font-size: 11px; font-weight: 800; }
.ucp-section-header .spacer[data-v-be422351] { flex: 1 1 0%; }
.ucp-section-header .chevron[data-v-be422351] { color: var(--ucp-text-sub,#666); font-size: 18px; transition: transform 0.2s; }
.ucp-section-header.is-collapsed[data-v-be422351] { opacity: 0.7; }
.ucp-section-header[data-v-be422351]:active { transform: scale(0.98); }
.ucp-fold-enter-active[data-v-be422351], .ucp-fold-leave-active[data-v-be422351] { opacity: 1; max-height: 250px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; }
.ucp-fold-enter-from[data-v-be422351], .ucp-fold-leave-to[data-v-be422351] { opacity: 0; max-height: 0px; margin-top: 0px !important; margin-bottom: 0px !important; }
.icon-picker-tabs[data-v-39eb7188] { background: var(--bg-inset); border-radius: 8px; gap: 10px; margin-bottom: 15px; padding: 4px; display: flex; }
.picker-tab-btn[data-v-39eb7188] { color: var(--text-secondary); cursor: pointer; background: 0px 0px; border-width: medium; border-style: none; border-color: currentcolor; border-image: initial; border-radius: 6px; flex: 1 1 0%; justify-content: center; align-items: center; gap: 6px; padding: 8px; font-size: 0.85rem; font-weight: 600; transition: 0.2s; display: flex; }
.picker-tab-btn[data-v-39eb7188]:hover { background: rgba(0, 0, 0, 0.05); }
.picker-tab-btn.active[data-v-39eb7188] { background: var(--bg-card); color: var(--color-primary); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px; }
.copyright-notice-banner[data-v-39eb7188] { color: rgb(168, 93, 0); background: rgb(255, 248, 225); border: 1px solid rgb(255, 224, 130); border-radius: 6px; align-items: center; gap: 6px; margin-bottom: 15px; padding: 8px 12px; font-size: 0.75rem; display: flex; }
.dark-mode .copyright-notice-banner[data-v-39eb7188] { color: rgb(255, 213, 79); background: rgb(51, 43, 0); border-color: rgb(85, 68, 0); }
:host-context(.dark-mode) .copyright-notice-banner[data-v-39eb7188] { color: rgb(255, 213, 79); background: rgb(51, 43, 0); border-color: rgb(85, 68, 0); }
.debug-hud-panel[data-v-2dc5dd2c] { z-index: 999999; color: rgba(255, 255, 255, 0.85); pointer-events: none; user-select: none; background: rgba(18, 18, 18, 0.72); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; width: 220px; padding: 14px 16px; font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, Courier, monospace; font-size: 11px; line-height: 1.5; transition: 0.3s; position: fixed; top: 16px; left: 16px; box-shadow: rgba(0, 0, 0, 0.24) 0px 8px 32px; }
.debug-hud-panel[data-v-2dc5dd2c]:not(.dark-mode) { color: rgba(15, 23, 42, 0.85); background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(15, 23, 42, 0.08); box-shadow: rgba(15, 23, 42, 0.08) 0px 8px 32px; }
.hud-header[data-v-2dc5dd2c] { border-bottom: 1px solid rgba(255, 255, 255, 0.08); align-items: center; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; display: flex; }
.debug-hud-panel:not(.dark-mode) .hud-header[data-v-2dc5dd2c] { border-bottom: 1px solid rgba(15, 23, 42, 0.08); }
.hud-indicator[data-v-2dc5dd2c] { border-radius: 50%; width: 8px; height: 8px; transition: background-color 0.3s; box-shadow: 0px 0px 8px; }
.hud-indicator.fps-excellent[data-v-2dc5dd2c] { color: rgba(16, 185, 129, 0.4); background-color: rgb(16, 185, 129); }
.hud-indicator.fps-warning[data-v-2dc5dd2c] { color: rgba(245, 158, 11, 0.4); background-color: rgb(245, 158, 11); }
.hud-indicator.fps-danger[data-v-2dc5dd2c] { color: rgba(239, 68, 68, 0.4); background-color: rgb(239, 68, 68); animation: 1s ease 0s infinite alternate none running pulse-2dc5dd2c; }
.hud-title[data-v-2dc5dd2c] { letter-spacing: 0.05em; opacity: 0.9; font-weight: 700; }
.hud-body[data-v-2dc5dd2c] { flex-direction: column; gap: 6px; display: flex; }
.hud-row[data-v-2dc5dd2c] { justify-content: space-between; align-items: center; display: flex; }
.hud-label[data-v-2dc5dd2c] { opacity: 0.55; font-weight: 500; }
.hud-val[data-v-2dc5dd2c] { opacity: 0.95; font-weight: 600; }
.font-mono[data-v-2dc5dd2c] { font-family: inherit; }
.hud-val.fps-excellent[data-v-2dc5dd2c] { color: rgb(52, 211, 153); }
.debug-hud-panel:not(.dark-mode) .hud-val.fps-excellent[data-v-2dc5dd2c] { color: rgb(5, 150, 105); }
.hud-val.fps-warning[data-v-2dc5dd2c] { color: rgb(251, 191, 36); }
.debug-hud-panel:not(.dark-mode) .hud-val.fps-warning[data-v-2dc5dd2c] { color: rgb(217, 119, 6); }
.hud-val.fps-danger[data-v-2dc5dd2c] { color: rgb(248, 113, 113); }
.debug-hud-panel:not(.dark-mode) .hud-val.fps-danger[data-v-2dc5dd2c] { color: rgb(220, 38, 38); }
@keyframes pulse-2dc5dd2c { 
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}
.driver-active .driver-overlay, .driver-active * { pointer-events: none; }
.driver-active .driver-active-element, .driver-active .driver-active-element *, .driver-popover, .driver-popover * { pointer-events: auto; }
@keyframes animate-fade-in { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
.driver-fade .driver-overlay { animation: 0.2s ease-in-out 0s 1 normal none running animate-fade-in; }
.driver-fade .driver-popover { animation: 0.2s ease 0s 1 normal none running animate-fade-in; }
.driver-popover { color-scheme: unset; forced-color-adjust: unset; math-depth: unset; position-anchor: unset; text-size-adjust: unset; appearance: unset; font: unset; font-palette: unset; font-synthesis: unset; position-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; place-content: unset; place-items: unset; place-self: unset; alignment-baseline: unset; anchor-name: unset; anchor-scope: unset; animation-composition: unset; animation: unset; animation-trigger: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background-attachment: unset; background-blend-mode: unset; background-clip: unset; background-image: unset; background-origin: unset; background-position: unset; background-repeat: unset; background-size: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-shape: unset; border-start-end-radius: unset; border-start-start-radius: unset; bottom: unset; box-decoration-break: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-animation: unset; caret-color: unset; caret-shape: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; rule-break: unset; rule: unset; rule-inset: unset; rule-visibility-items: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; corner-shape: unset; corner-block-end-shape: unset; corner-block-start-shape: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cursor: unset; cx: unset; cy: unset; d: unset; display: unset; dominant-baseline: unset; dynamic-range-limit: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; interactivity: unset; interest-delay: unset; interpolate-size: unset; isolation: unset; left: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; list-style: unset; margin-block: unset; margin-inline: unset; marker: unset; mask: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-block: unset; overflow-clip-margin: unset; overflow-inline: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; print-color-adjust: unset; quotes: unset; r: unset; reading-flow: unset; reading-order: unset; resize: unset; rotate: unset; ruby-align: unset; ruby-position: unset; rule-overlap: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-initial-target: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-marker-group: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-target-group: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-autospace: unset; text-box: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-justify: unset; text-overflow: unset; text-shadow: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; text-wrap: unset; timeline-scope: unset; timeline-trigger: unset; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; trigger-scope: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-group: unset; view-transition-name: unset; view-transition-scope: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; white-space-collapse: unset; widows: unset; width: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; box-sizing: border-box; color: rgb(45, 45, 45); margin: 0px; padding: 15px; border-radius: 5px; min-width: 250px; max-width: 300px; box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 10px; z-index: 1000000000; position: fixed; top: 0px; right: 0px; background-color: rgb(255, 255, 255); }
.driver-popover * { font-family: "Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif; }
.driver-popover-title { font: 700 19px / 1.5 sans-serif; display: block; position: relative; zoom: 1; margin: 0px; }
.driver-popover-close-btn { color-scheme: unset; forced-color-adjust: unset; math-depth: unset; position-anchor: unset; text-size-adjust: unset; appearance: unset; font-family: unset; font-feature-settings: unset; font-kerning: unset; font-language-override: unset; font-optical-sizing: unset; font-palette: unset; font-size-adjust: unset; font-stretch: unset; font-style: unset; font-synthesis: unset; font-variant: unset; font-variation-settings: unset; position-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; zoom: unset; accent-color: unset; place-content: unset; place-items: unset; place-self: unset; alignment-baseline: unset; anchor-name: unset; anchor-scope: unset; animation-composition: unset; animation: unset; animation-trigger: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background: unset; background-blend-mode: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border: unset; border-radius: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-shape: unset; border-start-end-radius: unset; border-start-start-radius: unset; bottom: unset; box-decoration-break: unset; box-shadow: unset; box-sizing: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-animation: unset; caret-color: unset; caret-shape: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; rule-break: unset; rule: unset; rule-inset: unset; rule-visibility-items: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; corner-shape: unset; corner-block-end-shape: unset; corner-block-start-shape: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cx: unset; cy: unset; d: unset; display: unset; dominant-baseline: unset; dynamic-range-limit: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; interactivity: unset; interest-delay: unset; interpolate-size: unset; isolation: unset; left: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; line-height: unset; list-style: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline: unset; outline-offset: unset; overflow-anchor: unset; overflow-block: unset; overflow-clip-margin: unset; overflow-inline: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; print-color-adjust: unset; quotes: unset; r: unset; reading-flow: unset; reading-order: unset; resize: unset; rotate: unset; ruby-align: unset; ruby-position: unset; rule-overlap: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-initial-target: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-marker-group: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-target-group: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align-last: unset; text-anchor: unset; text-autospace: unset; text-box: unset; text-combine-upright: unset; text-decoration: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-justify: unset; text-overflow: unset; text-shadow: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; text-wrap: unset; timeline-scope: unset; timeline-trigger: unset; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; translate: unset; trigger-scope: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-group: unset; view-transition-name: unset; view-transition-scope: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; white-space-collapse: unset; widows: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; position: absolute; top: 0px; right: 0px; width: 32px; height: 28px; cursor: pointer; font-size: 18px; font-weight: 500; color: rgb(210, 210, 210); z-index: 1; text-align: center; transition: color 0.2s; }
.driver-popover-close-btn:hover { color: rgb(45, 45, 45); }
.driver-popover-title[style*="block"] + .driver-popover-description { margin-top: 5px; }
.driver-popover-description { margin-bottom: 0px; font: 400 14px / 1.5 sans-serif; zoom: 1; }
.driver-popover-footer { margin-top: 15px; text-align: right; zoom: 1; display: flex; align-items: center; justify-content: space-between; }
.driver-popover-progress-text { font-size: 13px; font-weight: 400; color: rgb(162, 162, 162); zoom: 1; }
.driver-popover-footer button { color-scheme: unset; forced-color-adjust: unset; math-depth: unset; position: unset; position-anchor: unset; text-size-adjust: unset; appearance: unset; font-palette: unset; font-synthesis: unset; position-area: unset; text-orientation: unset; text-rendering: unset; text-spacing-trim: unset; -webkit-font-smoothing: unset; -webkit-locale: unset; -webkit-text-orientation: unset; -webkit-writing-mode: unset; writing-mode: unset; accent-color: unset; place-content: unset; place-items: unset; place-self: unset; alignment-baseline: unset; anchor-name: unset; anchor-scope: unset; animation-composition: unset; animation: unset; animation-trigger: unset; app-region: unset; aspect-ratio: unset; backdrop-filter: unset; backface-visibility: unset; background-attachment: unset; background-blend-mode: unset; background-clip: unset; background-image: unset; background-origin: unset; background-position: unset; background-repeat: unset; background-size: unset; baseline-shift: unset; baseline-source: unset; block-size: unset; border-block: unset; border-collapse: unset; border-end-end-radius: unset; border-end-start-radius: unset; border-inline: unset; border-shape: unset; border-start-end-radius: unset; border-start-start-radius: unset; inset: unset; box-decoration-break: unset; box-shadow: unset; break-after: unset; break-before: unset; break-inside: unset; buffered-rendering: unset; caption-side: unset; caret-animation: unset; caret-color: unset; caret-shape: unset; clear: unset; clip: unset; clip-path: unset; clip-rule: unset; color-interpolation: unset; color-interpolation-filters: unset; color-rendering: unset; columns: unset; column-fill: unset; gap: unset; rule-break: unset; rule: unset; rule-inset: unset; rule-visibility-items: unset; column-span: unset; contain: unset; contain-intrinsic-block-size: unset; contain-intrinsic-size: unset; contain-intrinsic-inline-size: unset; container: unset; content: unset; content-visibility: unset; corner-shape: unset; corner-block-end-shape: unset; corner-block-start-shape: unset; counter-increment: unset; counter-reset: unset; counter-set: unset; cx: unset; cy: unset; d: unset; dominant-baseline: unset; dynamic-range-limit: unset; empty-cells: unset; field-sizing: unset; fill: unset; fill-opacity: unset; fill-rule: unset; filter: unset; flex: unset; flex-flow: unset; float: unset; flood-color: unset; flood-opacity: unset; grid: unset; grid-area: unset; height: unset; hyphenate-character: unset; hyphenate-limit-chars: unset; hyphens: unset; image-orientation: unset; image-rendering: unset; initial-letter: unset; inline-size: unset; inset-block: unset; inset-inline: unset; interactivity: unset; interest-delay: unset; interpolate-size: unset; isolation: unset; letter-spacing: unset; lighting-color: unset; line-break: unset; list-style: unset; margin-block: unset; margin: unset; margin-inline: unset; marker: unset; mask: unset; mask-type: unset; math-shift: unset; math-style: unset; max-block-size: unset; max-height: unset; max-inline-size: unset; max-width: unset; min-block-size: unset; min-height: unset; min-inline-size: unset; min-width: unset; mix-blend-mode: unset; object-fit: unset; object-position: unset; object-view-box: unset; offset: unset; opacity: unset; order: unset; orphans: unset; outline-offset: unset; overflow-anchor: unset; overflow-block: unset; overflow-clip-margin: unset; overflow-inline: unset; overflow-wrap: unset; overflow: unset; overlay: unset; overscroll-behavior-block: unset; overscroll-behavior-inline: unset; overscroll-behavior: unset; padding-block: unset; padding-inline: unset; page: unset; page-orientation: unset; paint-order: unset; perspective: unset; perspective-origin: unset; pointer-events: unset; position-try: unset; position-visibility: unset; print-color-adjust: unset; quotes: unset; r: unset; reading-flow: unset; reading-order: unset; resize: unset; rotate: unset; ruby-align: unset; ruby-position: unset; rule-overlap: unset; rx: unset; ry: unset; scale: unset; scroll-behavior: unset; scroll-initial-target: unset; scroll-margin-block: unset; scroll-margin: unset; scroll-margin-inline: unset; scroll-marker-group: unset; scroll-padding-block: unset; scroll-padding: unset; scroll-padding-inline: unset; scroll-snap-align: unset; scroll-snap-stop: unset; scroll-snap-type: unset; scroll-target-group: unset; scroll-timeline: unset; scrollbar-color: unset; scrollbar-gutter: unset; scrollbar-width: unset; shape-image-threshold: unset; shape-margin: unset; shape-outside: unset; shape-rendering: unset; size: unset; speak: unset; stop-color: unset; stop-opacity: unset; stroke: unset; stroke-dasharray: unset; stroke-dashoffset: unset; stroke-linecap: unset; stroke-linejoin: unset; stroke-miterlimit: unset; stroke-opacity: unset; stroke-width: unset; tab-size: unset; table-layout: unset; text-align: unset; text-align-last: unset; text-anchor: unset; text-autospace: unset; text-box: unset; text-combine-upright: unset; text-decoration-skip-ink: unset; text-emphasis: unset; text-emphasis-position: unset; text-indent: unset; text-justify: unset; text-overflow: unset; text-transform: unset; text-underline-offset: unset; text-underline-position: unset; text-wrap: unset; timeline-scope: unset; timeline-trigger: unset; touch-action: unset; transform: unset; transform-box: unset; transform-origin: unset; transform-style: unset; transition: unset; translate: unset; trigger-scope: unset; user-select: unset; vector-effect: unset; vertical-align: unset; view-timeline: unset; view-transition-class: unset; view-transition-group: unset; view-transition-name: unset; view-transition-scope: unset; visibility: unset; border-spacing: unset; -webkit-box-align: unset; -webkit-box-decoration-break: unset; -webkit-box-direction: unset; -webkit-box-flex: unset; -webkit-box-ordinal-group: unset; -webkit-box-orient: unset; -webkit-box-pack: unset; -webkit-box-reflect: unset; -webkit-line-break: unset; -webkit-line-clamp: unset; -webkit-mask-box-image: unset; -webkit-rtl-ordering: unset; -webkit-ruby-position: unset; -webkit-tap-highlight-color: unset; -webkit-text-combine: unset; -webkit-text-decorations-in-effect: unset; -webkit-text-fill-color: unset; -webkit-text-security: unset; -webkit-text-stroke: unset; -webkit-user-drag: unset; white-space-collapse: unset; widows: unset; width: unset; will-change: unset; word-break: unset; word-spacing: unset; x: unset; y: unset; z-index: unset; display: inline-block; box-sizing: border-box; padding: 3px 7px; text-decoration: none; text-shadow: rgb(255, 255, 255) 1px 1px 0px; background-color: rgb(255, 255, 255); color: rgb(45, 45, 45); font: 12px / 1.3 sans-serif; cursor: pointer; outline: 0px; zoom: 1; border: 1px solid rgb(204, 204, 204); border-radius: 3px; }
.driver-popover-footer .driver-popover-btn-disabled { opacity: 0.5; pointer-events: none; }
:not(body):has(> .driver-active-element) { overflow: hidden !important; }
.driver-popover-footer button:hover { background-color: rgb(247, 247, 247); }
.driver-popover-navigation-btns { display: flex; flex-grow: 1; justify-content: flex-end; }
.driver-popover-navigation-btns button + button { margin-left: 4px; }
.driver-popover-arrow { content: ""; position: absolute; border: 5px solid rgb(255, 255, 255); }
.driver-popover-arrow-side-over { display: none; }
.driver-popover-arrow-side-left { left: 100%; border-right-color: transparent; border-bottom-color: transparent; border-top-color: transparent; }
.driver-popover-arrow-side-right { right: 100%; border-left-color: transparent; border-bottom-color: transparent; border-top-color: transparent; }
.driver-popover-arrow-side-top { top: 100%; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; }
.driver-popover-arrow-side-bottom { bottom: 100%; border-left-color: transparent; border-top-color: transparent; border-right-color: transparent; }
.driver-popover-arrow-side-center { display: none; }
.driver-popover-arrow-side-left.driver-popover-arrow-align-start, .driver-popover-arrow-side-right.driver-popover-arrow-align-start { top: 15px; }
.driver-popover-arrow-side-top.driver-popover-arrow-align-start, .driver-popover-arrow-side-bottom.driver-popover-arrow-align-start { left: 15px; }
.driver-popover-arrow-align-end.driver-popover-arrow-side-left, .driver-popover-arrow-align-end.driver-popover-arrow-side-right { bottom: 15px; }
.driver-popover-arrow-side-top.driver-popover-arrow-align-end, .driver-popover-arrow-side-bottom.driver-popover-arrow-align-end { right: 15px; }
.driver-popover-arrow-side-left.driver-popover-arrow-align-center, .driver-popover-arrow-side-right.driver-popover-arrow-align-center { top: 50%; margin-top: -5px; }
.driver-popover-arrow-side-top.driver-popover-arrow-align-center, .driver-popover-arrow-side-bottom.driver-popover-arrow-align-center { left: 50%; margin-left: -5px; }
.driver-popover-arrow-none { display: none; }

body {
    font-family: "Fusion Pixel 12px Mono latin";
    font-weight: normal;
}

/* Global Link Beautification */
a:not(.btn) {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease, background-color 0.2s ease, border-bottom-color 0.2s ease;
    border-bottom: 1px dashed transparent;
}

a:not(.btn):hover {
    color: var(--color-primary-hover, #006ae6);
    border-bottom-color: var(--color-primary-hover, #006ae6);
    background: var(--color-primary-bg);
    border-radius: 2px;
}

a:not(.btn):active {
    opacity: 0.8;
}

#app {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Fix Bubble Editor Clipping - Refined for performance */
.preview-items-container:has(.is-editing-wrapper) {
  overflow: visible !important;
}

/* 当开启标题悬浮时，提高特异性优先级以压制子组件 scoped style 里的 display: block !important，隐藏本地标题 */
div.preview-item-wrapper.has-title-floating h3.preview-card-title,
div.preview-item-wrapper.has-title-floating .preview-card-title,
div.preview-item-wrapper.has-title-floating .collage-title-container,
div.preview-item-wrapper.has-title-floating .grid-title-container,
div.preview-item-wrapper.has-title-floating .todo-title,
div.preview-item-wrapper.has-title-floating .rpg-title,
div.preview-item-wrapper.has-title-floating .qr-title,
div.preview-item-wrapper.has-title-floating .crossword-title,
div.preview-item-wrapper.has-title-floating .ticket-title,
div.preview-item-wrapper.has-title-floating .showcase-info h3,
div.preview-item-wrapper.has-title-floating [data-item-key="title"] {
  display: none !important;
}

.app-container {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
}

body.tutorial-active .app-header,
body.tutorial-active .app-header * {
  pointer-events: none !important;
  touch-action: none !important;
  user-select: none !important;
}
body.tutorial-active .app-container,
body.tutorial-active .app-header,
body.tutorial-active .inspector-panel,
body.tutorial-active .layer-panel,
body.tutorial-active #system-broadcast-container {
  transition: none !important;
}
.driver-popover {
  z-index: 2147483647 !important;
}
#driver-highlight-element {
  z-index: 2147483645 !important;
}
body.tutorial-active .app-header button {
  opacity: 0.3 !important;
  transition: opacity 0.3s;
}
.driver-popover {
  z-index: 2147483647 !important;
}
#driver-highlight-element {
  z-index: 2147483647 !important;
}
.driver-popover {
  background-color: var(--bg-card);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.driver-popover-title {
  font-weight: 800;
  color: var(--color-primary);
}
.driver-popover-description {
  color: var(--text-secondary);
  line-height: 1.5;
}
.driver-popover-btn {
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
  text-shadow: none;
  border-radius: 6px;
}
.driver-popover-next-btn {
  background: var(--color-primary);
  color: white;
  border: none;
}
.driver-popover-next-btn:hover {
  background: var(--color-primary-hover);
}
.html-mode-only {
  display: none !important;
}
.inspector-panel.html-mode-active .html-mode-only {
  display: block !important;
}
.inspector-panel.html-mode-active div.html-mode-only[style*="display: flex"],
.inspector-panel.html-mode-active .html-mode-only.color-control-row {
  display: flex !important;
}

/* Advanced Mode Hiding */
.inspector-panel.simple-mode .advanced-setting {
  display: none !important;
}

/* Spoiler Interaction */
.spoiler-blur {
  filter: blur(10px);
  user-select: none;
  cursor: pointer;
  transition: filter 0.3s ease;
  position: relative;
}

.spoiler-blur:hover {
  filter: blur(5px);
}

.spoiler-blur.revealed,
.spoiler-blur.is-editing-rich-text {
  filter: none !important;
  user-select: text;
  cursor: text;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.3);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.6);
}
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
}
:root {
  --g-font-align: center;
  --g-font-offset-y: 0px;
  
  /* Core Backgrounds */
  --bg-editor: #f5f7fa;        /* Panels (Sidebar, Tabs) */
  --bg-preview-pane: #eef2f7;  /* Canvas background */
  --bg-preview-page: #ffffff;  /* Actual letter page back */
  --bg-card: #ffffff;          /* Card/Item background */
  --bg-primary: var(--bg-card);
  --bg-input: #ffffff;         /* Better legibility for inputs */
  --bg-section: #fdfdfd;       /* Fieldset sections */
  --bg-inset: #f0f2f5;
  --bg-hover: #f1f5f9;
  --bg-subtle: #f8fafc;
  --bg-active: #e0e7ff;
  --bg-secondary: var(--bg-section);
  
  /* Borders & Shadows */
  --border-color: #e1e8f0;
  --border-light: #e2e8f0;
  --border-input: #d1d5db;
  --border-dashed: #cbd5e0;
  --shadow-light: rgba(0, 0, 0, 0.05);
  --shadow-medium: rgba(0, 0, 0, 0.1);

  /* Text */
  --text-primary: #1a1c23;
  --text-secondary: #64748b;
  --text-label: #475569;
  --text-tertiary: #94a3b8;
  --text-placeholder: #94a3b8;
  --text-muted: var(--text-secondary);
  --text-on-primary: #ffffff;
  --text-action: #007aff;
  
  /* Brand Colors */
  --color-primary: #007aff;
  --color-primary-hover: #006ae6;
  --color-primary-text: var(--color-primary);
  --color-primary-bg: rgba(0, 122, 255, 0.05);
  --color-danger: #ff4757;
  --color-danger-hover: #e03c48;
  --color-secondary: #007aff;
  --color-secondary-hover: #636366;
  
  /* Dimensions & Stats */
  --header-height: 55px;
  --transition-speed: 0.3s;
  --transition-short: 0.2s;
  --layer-panel-width: 280px;
  --inspector-panel-width: 380px;
  --inspector-ui-opacity: 1;
  --preview-gap: 20px;
  
  /* Component Defaults */
  --g-theme-primary: var(--color-primary);
  --g-theme-accent: var(--text-action);
  --g-theme-background: var(--bg-preview-page);
  --g-theme-text: var(--text-primary);
  --g-comp-bg-color: var(--bg-card);
  --g-comp-text-color: var(--text-primary);
  --g-comp-opacity: 1;
  --g-comp-border-radius: 12px;
  --g-comp-text-align: left;
  --g-comp-line-height: 1.5;
  --g-comp-letter-spacing: 0px;
  --g-comp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --g-comp-title-font-family: var(--g-comp-font-family);
  --g-comp-title-font-weight: 700;
  --g-comp-title-font-style: normal;
  --g-comp-title-font-size: 1.1em;
  --g-comp-content-font-size: 0.95em;
  --g-comp-text-stroke: 0px transparent;
  --g-comp-padding: 15px;
  --g-border-width: 1px;
  --g-border-color: transparent;
  --g-border-shadow-offset: 4px;
  --g-border-shadow-color: #000;
  
  /* Overlays */
  --bg-modal-overlay: rgba(0, 0, 0, 0.4);
  --bg-image-thumb: #f1f5f9;
  --bg-image-upload-hover: #eef5ff;
  
  /* Rich Text Editor Toolbars */
  --rt-toolbar-bg: #ffffff;
  --rt-toolbar-text: #333333;
  --rt-toolbar-border: #e0e0e0;
  --rt-toolbar-btn-hover: #f0f0f0;
  --rt-toolbar-btn-active: #e6f7ff;
  
}

html.dark-mode {
  /* Core Backgrounds */
  --bg-editor: #1a1c22;        /* Panels */
  --bg-preview-pane: #0f1115;  /* Deeper canvas background */
  --bg-preview-page: #1a1c22;  /* Page background */
  --bg-card: #23272f;          /* Card background */
  --bg-primary: var(--bg-card);
  --bg-input: #1a1c22;
  --bg-section: #1a1c22;
  --bg-inset: #0f1115;
  --bg-hover: #2d313a;
  --bg-subtle: #1a1c22;
  --bg-active: #1e293b;
  
  /* Borders & Shadows */
  --border-color: #2d313a;
  --border-light: #2d313a;
  --border-input: #3a3f4b;
  --border-dashed: #4a5568;
  --shadow-light: rgba(0, 0, 0, 0.3);
  --shadow-medium: rgba(0, 0, 0, 0.5);
  
  /* Text */
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --text-label: #cbd5e0;
  --text-tertiary: #64748b;
  --text-placeholder: #64748b;
  --text-on-primary: #ffffff;
  --text-action: #3498db;
  
  /* Brand Tweaks (Dark Mode) */
  --color-primary: #3b82f6;
  --color-primary-hover: #2563eb;
  --color-primary-text: var(--color-primary);
  --bg-modal-overlay: rgba(0, 0, 0, 0.7);
  --bg-image-thumb: #2d313a;
  --bg-image-upload-hover: #1e293b;

  /* Rich Text Editor Toolbars (Dark Mode) */
  --rt-toolbar-bg: #2d313a;
  --rt-toolbar-text: #f8fafc;
  --rt-toolbar-border: #4a5568;
  --rt-toolbar-btn-hover: #3d4452;
  --rt-toolbar-btn-active: #1e293b;
  
  /* Theme mapping */
  --g-theme-accent: var(--text-action);
  --g-theme-background: var(--bg-preview-page);
  --g-theme-text: var(--text-primary);
  --g-comp-bg-color: var(--bg-card);
  --g-comp-text-color: var(--text-primary);
  
}
* {
  box-sizing: border-box;
}
img {
  content-visibility: auto;
  contain-intrinsic-size: 1px;
}
html,
body {
  height: 100%;
  height: var(--app-height, 100vh);
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: fixed;
  width: 100%;
}
body {
  font-family: var(
    --g-comp-font-family,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif
  );
  background-color: var(--bg-preview-pane);
  color: var(--text-primary);
  transition:
    background-color var(--transition-speed) ease,
    color var(--transition-speed) ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision !important;
}
#system-broadcast-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  pointer-events: auto;
}
#storage-warning-banner,
#page-limit-warning-banner {
  display: block; /* Managed by v-if in Vue */
  position: static;
  top: auto;
  z-index: auto;
  box-shadow: none;
}

body.storage-warning .app-header,
body.page-limit-warning .app-header,
body.has-global-banners .app-header {
  top: calc(var(--system-broadcast-height, 0px) + var(--global-banners-height, 0px));
}

/* Container should not use top offset if it uses padding-top for header */
body.storage-warning .app-container,
body.page-limit-warning .app-container,
body.has-global-banners .app-container {
  top: 0 !important;
}

body.storage-warning .layer-panel,
body.storage-warning .inspector-panel,
body.storage-warning .resizer,
body.page-limit-warning .layer-panel,
body.page-limit-warning .inspector-panel,
body.has-global-banners .layer-panel,
body.has-global-banners .inspector-panel {
  top: calc(var(--header-height) + var(--system-broadcast-height, 0px) + var(--global-banners-height, 0px));
  height: calc(100vh - var(--header-height) - var(--system-broadcast-height, 0px) - var(--global-banners-height, 0px));
}
.app-header {
  width: 100%;
  height: var(--header-height);
  background: var(--bg-editor);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  position: fixed;
  top: var(--system-broadcast-height, 0px);
  left: 0;
  z-index: 100;
  box-shadow: 0 2px 8px var(--shadow-light);
  transition: background-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.header-actions-wrapper {
  display: flex;
  align-items: center;
  gap: 15px;
}
.app-header-title {
  font-size: 1.25rem;
  font-weight: 700;
  cursor: default;
  display: flex;
  align-items: center;
  color: var(--text-primary);
}
.app-logo {
  height: 62px;
  width: auto;
  display: block;
}
.theme-switch-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}/* ====== Panels & Layout ====== */
.app-container {
  display: flex;
  height: 100dvh;
  padding-top: calc(var(--header-height) + var(--system-broadcast-height, 0px) + var(--global-banners-height, 0px));
  position: relative;
  top: 0;
  transition: padding-top var(--transition-speed) ease;
}

/* 切换面板时的全局优化：禁用高开销的指针事件与选择，防止卡顿 */
.is-panel-transitioning .preview-panel,
.is-panel-transitioning .preview-canvas-area {
  pointer-events: none !important;
  user-select: none !important;
}

.resizer-left, .resizer {
  width: 8px;
  margin: 0 -4px;
  height: calc(100dvh - var(--header-height) - var(--system-broadcast-height, 0px) - var(--global-banners-height, 0px));
  cursor: col-resize;
  z-index: 101; /* Above panels */
  transition: background 0.2s, height var(--transition-speed) ease;
  background: transparent;
  flex-shrink: 0;
  position: relative;
}

.resizer-left:hover, .resizer:hover, body.is-resizing-panel .resizer, body.is-resizing-panel .resizer-left {
  background: var(--color-primary);
  opacity: 0.3;
}

body.is-resizing-panel {
  cursor: col-resize;
  user-select: none;
}

body.is-resizing-panel .layer-panel, 
body.is-resizing-panel .inspector-panel {
  transition: none !important;
}

/* ====== Broadcast & Banner pushdown ====== */
body.has-broadcast .app-header,
body.has-global-banners .app-header {
  top: calc(var(--system-broadcast-height, 0px) + var(--global-banners-height, 0px)) !important;
}
/* 
  Tutorial Mode:
  When the tutorial is active, banners are hidden via v-if in App.vue.
  This allows the layout to naturally revert to its standard fixed state.
*/
body.driverjs-active {
  overflow: hidden !important;
  /* Ensure the body doesn't jump if Driver.js changes its position */
  position: static !important;
}

/* 
  Since banners are unmounted during tutorial, 
  the standard AppHeader and AppContainer rules will work perfectly.
  No complex overrides needed anymore.
*/

.layer-panel,
.inspector-panel {
  background: var(--bg-editor);
  height: calc(
    100dvh - var(--header-height) - var(--system-broadcast-height, 0px)
  ) !important;
  padding-bottom: env(safe-area-inset-bottom);
  overflow-y: auto;
  flex-shrink: 0;
  transition: height var(--transition-speed) ease, top var(--transition-speed) ease, width var(--transition-speed) ease, opacity var(--transition-speed) ease, transform var(--transition-speed) ease;
  position: relative;
  contain: layout style;
}
.layer-panel {
  width: var(--layer-panel-width);
  border-right: 1px solid var(--border-color);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.panel-header-tabs-container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 15px;
  gap: 10px;
  background: var(--bg-editor);
  border-bottom: 1px solid var(--border-color);
  flex-shrink: 0;
}
.panel-header-tab {
  flex: 1;
  min-width: 60px;
  padding: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.panel-header-tab.active {
  background: var(--bg-image-upload-hover);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
}
.layer-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0 15px 10px 15px;
}
.module-library-container {
  flex-shrink: 0;
  background-color: var(--bg-section);
  border-top: 1px solid var(--border-color);
  padding: 10px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: 10;
}
.library-tabs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
  gap: 5px;
  margin-bottom: 10px;
  padding-bottom: 5px;
}
.selected-sub-tabs {
  display: flex;
  gap: 5px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 2px;
}
.selected-sub-tab-btn {
  flex: 1;
  padding: 8px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 0.2s, background-color 0.2s, border-bottom-color 0.2s;
  border-radius: 6px 6px 0 0;
}
.selected-sub-tab-btn:hover {
  background-color: var(--bg-input);
  color: var(--text-primary);
}
.selected-sub-tab-btn.active {
  color: var(--color-primary-text);
  border-bottom-color: var(--color-primary);
  background-color: var(--bg-editor);
}
.inspector-sub-content {
  animation: fadeIn 0.2s ease;
}
@media (max-width: 360px) {
  .library-tabs {
    gap: 3px;
  }
  .lib-tab {
    font-size: 0.75rem;
    padding: 4px 2px;
  }
}
.library-tabs::-webkit-scrollbar {
  display: none;
}
.lib-tab {
  background: transparent;
  border: none;
  padding: 4px 8px;
  font-size: 0.8rem;
  color: var(--text-secondary);
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
  font-weight: 600;
}
.lib-tab:hover {
  background-color: var(--bg-input);
}
.lib-tab.active {
  background-color: var(--bg-image-upload-hover);
  color: var(--color-primary-text);
}
.social-images-grid {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  display: grid;
}
.library-grid {
  display: none;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  animation: fadeIn 0.2s ease;
  min-height: 128px;
  align-content: start;
}
.library-grid.active {
  display: grid;
}
.lib-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background-color: var(--bg-editor);
  border: 1px solid var(--border-input);
  border-radius: 8px;
  padding: 8px 4px;
  cursor: pointer;
  color: var(--text-primary);
  transition: color 0.2s, background-color 0.2s, transform 0.2s;
  height: 60px;
}
.lib-btn:hover {
  border-color: var(--color-primary);
  background-color: var(--bg-input);
  transform: translateY(-2px);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.lib-btn .iconify {
  font-size: 1.4rem;
  color: var(--text-secondary);
}
.lib-btn:hover .iconify {
  color: var(--color-primary-text);
}
.lib-btn span:last-child {
  font-size: 0.75rem;
}
.inspector-panel {
  width: var(--inspector-panel-width);
  min-width: 350px;
  max-width: 60vw;
  border-left: 1px solid var(--border-color);
  padding: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: var(--inspector-ui-opacity, 1);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
}
.inspector-scroll-container {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden !important;
  padding: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 100%;
  overscroll-behavior: contain;
  will-change: scroll-position;
  overscroll-behavior: contain;
}

/* 移动端 GPU 渲染性能优化：强制为卡片和表单块开启合成层加速，消灭 Webkit 滚动白块 */
.editor-section,
.editor-item,
.history-item,
.theme-preset-grid {
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000;
}
.inspector-tab-content {
  display: none;
  padding: 20px;
  padding-bottom: 80px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
}
.history-item,
.export-option p {
  word-break: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  min-width: 0;
}
.inspector-footer {
  flex-shrink: 0;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  background: var(--bg-section);
  border-top: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.03);
  transition: padding 0.2s ease;
}
.inspector-footer span {
  font-size: 0.9rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 6px;
}
.global-sub-tabs {
  display: flex;
  padding: 10px 15px 0;
  gap: 10px;
  background: var(--bg-editor);
  position: static;
  top: 0;
  z-index: 20;
}
.sub-tab-btn {
  flex: 1;
  text-align: center;
  padding: 8px;
  font-size: 0.85rem;
  border: 1px solid var(--border-input);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  background: var(--bg-input);
  cursor: pointer;
  color: var(--text-secondary);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
}
.sub-tab-btn.active {
  background: var(--bg-editor);
  color: var(--color-primary-text);
  font-weight: bold;
  border-top: 2px solid var(--color-primary);
  margin-bottom: -1px;
  z-index: 21;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.02);
}
.global-sub-content {
  display: none;
  border-top: 1px solid var(--border-input);
  padding-top: 20px;
}
.global-sub-content.active {
  display: block;
  animation: fadeIn 0.2s ease;
}
.inspector-panel.simple-mode .advanced-setting {
  display: none !important;
}
.inspector-panel.simple-mode .editor-section {
  padding-bottom: 10px;
}
.inspector-panel .input-group {
  max-width: 100%;
}
.inspector-tabs {
  display: flex;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border-color);
}
.inspector-tab-btn {
  flex: 1;
  padding: 12px 10px;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 2px solid transparent;
  transition: color var(--transition-short), background-color var(--transition-short), border-bottom-color var(--transition-short);
}
.inspector-tab-btn:hover {
  background-color: var(--bg-input);
}
.inspector-tab-btn.active {
  color: var(--color-primary-text);
  border-bottom-color: var(--color-primary);
}
.inspector-tab-content {
  display: none;
  padding: 25px;
  overflow-y: auto;
  flex-grow: 1;
}
.inspector-tab-content.active {
  display: block;
}
.resizer,
.resizer-left {
  width: 5px;
  height: calc(
    100vh - var(--header-height) - var(--system-broadcast-height, 0px)
  );
  background: var(--border-color);
  cursor: col-resize;
  z-index: 50;
  flex-shrink: 0;
  position: relative;
  transition: background-color 0.2s ease;
}
.resizer:hover,
.resizer-left:hover,
.resizer.active,
.resizer-left.active {
  background: var(--color-primary);
}
body.is-resizing-panel .layer-panel,
body.is-resizing-panel .inspector-panel,
body.is-resizing-panel .preview-wrapper {
  transition: none !important;
}
.preview-panel {
  flex-grow: 1;
  height: calc(100dvh - var(--header-height));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-preview-pane);
  min-width: 0;
  position: relative;
}
.preview-canvas-area {
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  touch-action: pan-y;
  will-change: scroll-position;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 20px;
  position: relative;
  background-image: radial-gradient(var(--border-dashed) 1px, transparent 1px);
  background-size: 24px 24px;
}
.workspace-tabs-container {
  width: 100%;
  height: 42px;
  background: var(--bg-editor);
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: flex-end;
  padding: 0 15px;
  gap: 4px;
  overflow-x: auto;
  flex-shrink: 0;
  z-index: 150;
  position: sticky;
  top: 0;
  scrollbar-width: none;
}
.workspace-tabs-container::-webkit-scrollbar {
  display: none;
}
.workspace-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  font-size: 0.85rem;
  color: var(--text-secondary);
  cursor: pointer;
  flex: 0 0 auto;
  min-width: 120px;
  max-width: 200px;
  height: 34px;
  transition: background-color 0.2s, border-color 0.2s, box-shadow 0.2s;
  user-select: none;
  position: relative;
  white-space: nowrap;
}
.workspace-tab.active {
  background: var(--bg-preview-pane);
  color: var(--color-primary);
  font-weight: bold;
  border-bottom: 1px solid var(--bg-preview-pane);
  margin-bottom: -1px;
  z-index: 5;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.02);
}
.tab-rename-input {
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  background: var(--bg-input);
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 2px 6px;
  width: 100px;
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
}
.workspace-tab .tab-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-grow: 1;
}
.workspace-tab .tab-close {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  opacity: 0.6;
}
.workspace-tab .tab-close:hover {
  background: rgba(255, 59, 48, 0.1);
  color: var(--color-danger);
  opacity: 1;
}
.workspace-add-btn {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  margin-bottom: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  border-radius: 6px;
}
.workspace-add-btn:hover {
  background: var(--bg-input);
  color: var(--color-primary);
}
.res-page-card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 120px;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.res-page-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-2px);
}
.res-page-info {
  flex-grow: 1;
}
.res-page-name {
  font-weight: bold;
  font-size: 0.95rem;
  margin-bottom: 5px;
  color: var(--text-primary);
}
.res-page-meta {
  font-size: 0.75rem;
  color: var(--text-secondary);
}
.res-page-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  border-top: 1px solid var(--border-color);
  padding-top: 10px;
}
.preview-wrapper {
  width: 100%;
  position: relative;
  transform-origin: top center;
  font-size: calc(16px * var(--g-comp-scale, 1));
  transition:
    width 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    font-size 0.3s ease;
  flex-shrink: 0;
}
body.layout-desktop .preview-items-container {
  gap: calc(var(--preview-gap) * var(--g-comp-scale, 1));
}
.panel-header {
  font-size: 1.1rem;
  font-weight: 700;
  padding-bottom: 10px;
  margin-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.back-to-global-btn {
  font-size: 0.9rem;
  font-weight: normal;
  color: var(--text-action);
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px 8px;
}
.back-to-global-btn:hover {
  text-decoration: underline;
}
.layer-item-container {
  margin-bottom: 5px;
}
.layer-list .layer-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color var(--transition-short),
    border-color var(--transition-short);
  background-color: var(--bg-section);
  border: 1px solid var(--border-color);
  margin-bottom: 4px;
}
.layer-list .layer-item:hover {
  background-color: var(--bg-input);
  border-color: var(--text-secondary);
}
.layer-list .layer-item.selected {
  background-color: var(--bg-image-upload-hover);
  border-color: var(--color-primary);
  font-weight: 600;
  border-left-width: 4px;
  padding-left: 7px;
}
html.dark-mode .layer-list .layer-item.selected {
  background-color: rgba(52, 152, 219, 0.15);
  border-color: #5dade2;
  color: #ffffff;
}
html.dark-mode .preview-item-wrapper.selected,
html.dark-mode .preview-header.selected {
  outline: 2px solid #5dade2;
  box-shadow: 0 0 15px rgba(93, 173, 226, 0.3);
}
.layer-list .layer-item .layer-icon {
  font-size: 1.1em;
  color: var(--text-secondary);
}
.layer-list .layer-item .layer-name {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 4px;
}
.layer-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}
.layer-actions .btn-icon {
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 1.1rem;
  background: none;
  border: none;
  color: var(--text-secondary);
}
.layer-actions .btn-icon:hover {
  background: var(--border-color);
}
.layer-item.is-hidden .layer-name,
.layer-item.is-hidden .layer-icon {
  opacity: 0.5;
}
.layer-item.is-hidden .layer-name {
  text-decoration: line-through;
}
.inspector-state {
  display: none;
}
.inspector-state.active {
  display: block;
  animation: fadeIn 0.3s ease;
}
.inspector-placeholder {
  text-align: center;
  color: var(--text-placeholder);
  padding: 40px 10px;
  font-style: italic;
}
.inspector-placeholder .iconify {
  font-size: 2rem;
  margin-bottom: 10px;
}
.preview-item-wrapper.selected,
.preview-header.selected {
  outline: 2px solid var(--color-primary);
  z-index: 999; /* Boosted to ensure selection outline is on top of all module contents */
  pointer-events: none; /* Let clicks pass through if needed, though this is the wrapper */
}
.preview-item-wrapper.is-hidden {
  display: none;
}
body.export-mode .preview-panel {
  justify-content: flex-start;
}
body.export-mode .mobile-edit-pencil {
  display: none !important;
}
.preview-wrapper {
  width: 100%;
  flex-shrink: 0;
  min-height: fit-content;
  border-radius: 20px;
  box-shadow: 0 4px 16px var(--shadow-medium);
  padding: 20px;
  padding-bottom: 40px;
  position: relative;
  overflow: visible;
  font-family: var(--active-card-font-family);
  /* 优化：只对必要的排版/缩放属性进行平滑过渡，消除 transition: all 产生的高频回流冲突 */
  transition:
    width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    max-width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 移动端专属：强制开启光栅化缩放隔离，禁用过渡动画，使用 GPU 合成图层高速拉伸 */
html.is-mobile .preview-wrapper {
  transition: none !important;
  contain: layout paint;
  transform-style: flat;
}
body.mobile-export-preview-mode .preview-panel {
  justify-content: center;
  align-items: flex-start;
}
body.mobile-export-preview-mode .preview-wrapper {
  width: 500px !important;
  max-width: none !important;
  margin: 0 auto !important;
  transform: scale(calc((100vw - 40px) / 500)) !important;
  transform-origin: top center !important;
  left: auto !important;
  position: relative !important;
}
.preview-wrapper.is-drag-over {
  outline: 4px dashed var(--color-primary);
  outline-offset: 5px;
  background-color: rgba(0, 122, 255, 0.05);
  transform: scale(1.02);
}
.preview-overlay {
  display: none;
}
.preview-header,
.preview-items-container {
  position: relative;
  z-index: 2;
  word-wrap: break-word;
  overflow-wrap: break-word;
  width: 100%;
  box-sizing: border-box;
}
[data-state-key],
[data-item-key],
[data-separator-text-key],
.tag-pill span[data-tag-id] {
  position: relative;
}
[data-state-key]:hover,
[data-item-key]:hover,
[data-separator-text-key]:hover,
.tag-pill span[data-tag-id]:hover {
  outline: 1px dashed var(--color-primary);
  cursor: text;
}
[contenteditable="true"] {
  outline: 2px solid var(--color-primary);
  box-shadow: 0 0 8px rgba(0, 122, 255, 0.5);
  background-color: rgba(0, 122, 255, 0.1);
  border-radius: 4px;
}
.btn {
  display: inline-block;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition:
    background-color var(--transition-short) ease,
    transform var(--transition-short) ease,
    box-shadow var(--transition-short) ease;
  text-align: center;
  width: 100%;
  color: var(--text-on-primary);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.btn-primary {
  background: var(--color-primary);
}
.btn-success {
  background: #34c759;
  color: white;
}
.btn-success:hover:not(:disabled) {
  background: #28a745;
  box-shadow: 0 4px 8px rgba(52, 199, 89, 0.3);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  box-shadow: 0 4px 8px rgba(0, 122, 255, 0.3);
}
.btn-secondary {
  background: var(--color-secondary);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-secondary-hover);
  box-shadow: 0 4px 8px rgba(142, 142, 147, 0.3);
}
.btn-danger {
  background: var(--color-danger);
}
.btn-danger:hover:not(:disabled) {
  background: var(--color-danger-hover);
  box-shadow: 0 4px 8px rgba(255, 71, 87, 0.3);
}
.btn-default {
  background-color: var(--bg-input);
  border: 1px solid var(--border-input);
  color: var(--text-secondary);
}
.btn-default:hover:not(:disabled) {
  background-color: var(--border-color);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.btn:active:not(:disabled) {
  transform: scale(0.98);
}
.btn:disabled {
  background: #999;
  cursor: not-allowed;
  opacity: 0.6;
}
.btn-small {
  padding: 6px 10px;
  font-size: 0.9rem;
}
.btn-icon {
  width: auto;
  padding: 6px 10px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.editor-section {
  width: 100%;
  background: var(--bg-editor);
  border: 1px solid rgba(128, 128, 128, 0.1);
  border-radius: 14px;
  padding: 0;
  margin: 0;
  margin-bottom: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
}
.editor-section:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  border-color: var(--color-primary);
}
fieldset.editor-section {
  min-width: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
}
.editor-section legend {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: rgba(128, 128, 128, 0.03);
  border-bottom: 1px solid rgba(128, 128, 128, 0.08);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--text-primary);
  cursor: pointer;
  box-sizing: border-box;
  float: none;
  border-left: 4px solid var(--color-primary);
  transition: background-color 0.2s, border-left-color 0.2s;
}
.editor-section legend:hover {
  background: rgba(0, 122, 255, 0.05);
  color: var(--color-primary);
}
.editor-section legend:hover {
  background: var(--bg-input);
}
.editor-section legend::after {
  content: "▼";
  font-size: 0.7rem;
  color: var(--text-secondary);
  transform: rotate(0deg);
  transition: transform 0.2s ease;
}
.editor-section.collapsed legend::after {
  transform: rotate(-90deg);
}
.editor-section.collapsed legend {
  border-bottom-color: transparent;
}
.editor-section.collapsed .section-content {
  display: none;
}
.editor-section .section-content {
  padding: 16px;
  background: var(--bg-card);
}
.advanced-toggle-label {
  font-size: 0.85rem;
  font-weight: normal;
  color: var(--text-action);
}
.advanced-setting {
  display: block;
  animation: fadeIn 0.3s ease;
}
.tab-btn.advanced-setting {
  display: inline-flex;
}
.inspector-panel.simple-mode .advanced-setting {
  display: none !important;
}
.tab-content:not(.active),
.global-sub-content:not(.active) {
  display: none !important;
}
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.section-header h4 {
  margin: 0;
}
.form-group {
  margin-bottom: 15px;
}
.form-group label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-label);
}
.form-group input[type="text"],
.form-group input[type="number"],
.form-group input[type="file"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  background-color: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 8px;
  color: var(--text-primary);
  transition: border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 100%;
  overflow-wrap: break-word;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
}
.form-group input[type="text"]:hover,
.form-group textarea:hover,
.form-group select:hover {
  border-color: rgba(128, 128, 128, 0.3);
  background-color: var(--bg-input);
}
.form-group input[type="text"]:focus,
.form-group input[type="number"]:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2);
}
.form-group textarea {
  min-height: 80px;
  resize: vertical;
}
.input-group {
  display: flex;
  align-items: stretch;
  gap: 0;
  background-color: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.04);
  height: 40px;
}
.input-group:hover {
  border-color: rgba(128, 128, 128, 0.3);
}
.input-group:focus-within {
  background-color: var(--bg-editor);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
}
.input-group .btn-small {
  width: 36px !important;
  height: 100% !important;
  border: none !important;
  border-radius: 0 !important;
  border-left: 1px solid rgba(128, 128, 128, 0.2) !important;
  background-color: transparent !important;
  color: var(--text-secondary);
  margin: 0 !important;
  box-shadow: none !important;
}
.input-group .btn-small:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: var(--color-primary);
}
.input-group.simple:focus-within {
  box-shadow: none;
}
.input-group input[type="range"] {
  flex-grow: 1;
  height: 6px;
  cursor: pointer;
  min-width: 100px;
  margin: 0 12px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border-dashed);
  border-radius: 3px;
  outline: none;
}
.input-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: var(--color-primary);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.stepper-group {
  display: flex;
  align-items: center;
  gap: 5px;
}
.stepper-group input[type="range"] {
  flex-grow: 1;
}
.btn-stepper {
  display: flex;
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 1rem;
  border-radius: 50%;
  background-color: var(--bg-editor);
  border: 1px solid var(--border-input);
  color: var(--text-primary);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.2s;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.btn-stepper:hover {
  background-color: var(--color-primary) !important;
  color: white !important;
  border-color: var(--color-primary);
}
.btn-stepper:active {
  background: var(--bg-image-upload-hover);
  transform: scale(0.9);
}
@media (max-width: 1024px) {
  .btn-stepper {
    display: flex !important;
  }
  .input-group.simple input[type="range"] {
    margin: 0 8px;
  }
}
.radio-group {
  display: flex;
  background: var(--bg-input);
  padding: 3px;
  border-radius: 8px;
  border: 1px solid var(--border-input);
  gap: 2px;
  width: 100%;
  box-sizing: border-box;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
}
/* 全局强制 radio-group.wrap 使用 grid 布局 */
.radio-group.wrap,
.inspector-panel .radio-group.wrap,
.form-group .radio-group.wrap,
.layout-floating-mode .radio-group.wrap,
.layout-floating-mode .inspector-panel .radio-group.wrap {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)) !important;
  gap: 4px !important;
  flex-wrap: initial !important;
  flex-direction: initial !important;
  justify-content: initial !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* 全局强制 radio-group.wrap label 使用文本换行 */
.radio-group.wrap label,
.inspector-panel .radio-group.wrap label,
.form-group .radio-group.wrap label,
.layout-floating-mode .radio-group.wrap label,
.layout-floating-mode .inspector-panel .radio-group.wrap label {
  white-space: normal !important;
  word-break: break-word !important;
  min-height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: none !important;
}

/* dense 版本 */
.radio-group.wrap.dense,
.inspector-panel .radio-group.wrap.dense,
.layout-floating-mode .radio-group.wrap.dense {
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)) !important;
}
.radio-group label {
  flex: 1;
  text-align: center;
  padding: 7px 4px;
  margin: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid transparent;
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
}
.radio-group input[type="radio"] {
  display: none;
}
.radio-group label:has(input:checked) {
  background: var(--bg-card);
  color: var(--color-primary-text);
  font-weight: 600;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
  border-color: rgba(0, 0, 0, 0.05);
}
.radio-group label:not(:has(input:checked)):hover {
  background: rgba(0, 0, 0, 0.03);
  color: var(--text-primary);
}
.radio-group.wrap {
  flex-wrap: wrap;
}
.color-control-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-start;
  min-width: 0;
}
.color-control-group {
  flex: 1;
  min-width: 150px;
  min-width: 0;
}
.color-control-row {
  flex-direction: column !important;
  gap: 12px !important;
}
.color-control-group {
  width: 100% !important;
  flex: none !important;
}
.input-group.simple {
  width: 100%;
  box-sizing: border-box;
}
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  cursor: pointer;
}
.border-apply-to-list .checkbox-group {
  padding-left: 20px;
}
.border-apply-to-list .checkbox-group.is-parent {
  padding-left: 0;
}
.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
  cursor: pointer;
  margin: 0;
}
.apply-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 5px;
}
.apply-tag-item {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--bg-input);
  color: var(--text-secondary);
  border: 1px solid var(--border-input);
  transition: color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1), border-color 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  user-select: none;
  flex-grow: 1;
  text-align: center;
  min-width: 60px;
}
.apply-tag-item:hover {
  background: var(--bg-image-thumb);
}
.apply-tag-item input[type="checkbox"] {
  display: none;
}
.apply-tag-item:has(input:checked) {
  background: var(--bg-image-upload-hover);
  color: var(--color-primary-text);
  border-color: var(--color-primary);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
hr.separator {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 20px 0;
}
.tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 15px;
  overflow-x: auto;
  white-space: nowrap;
  flex-wrap: nowrap;
  overscroll-behavior: contain;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar {
  display: none;
}
.tab-btn {
  flex: 0 0 auto;
  padding: 8px 12px;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text-secondary);
  font-weight: 600;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tab-btn.active {
  color: var(--text-primary);
  border-bottom-color: var(--color-primary);
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
.gradient-controls {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}
.gradient-angle-control {
  grid-column: 1 / -1;
}
.preview-header {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 30px 15px;
  text-align: center;
  border-radius: 16px;
  transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
  overflow-wrap: break-word;
  overflow: visible;
  position: relative;
}
.preview-header.layout-card {
  display: flex;
  gap: 20px;
  text-align: left;
}
.preview-header.layout-card .info-left-col {
  flex: 0 0 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.preview-header.layout-card .info-right-col {
  flex: 1;
}
.preview-header.layout-card #preview-nickname {
  text-align: center;
  margin-top: 8px;
}
.preview-header.layout-card #preview-subtitle {
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 8px;
}
.preview-header.layout-card .tags-container {
  justify-content: flex-start;
  margin-top: 12px;
}
#preview-avatar-wrapper {
  position: relative;
}
#preview-avatar {
  width: 90px;
  height: 90px;
  border: 4px solid var(--bg-preview-page);
  box-shadow: 0 4px 12px var(--shadow-light);
  object-fit: cover;
  background-color: #fff;
  transition: box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
  cursor: pointer;
  position: relative;
  z-index: 5;
}
#preview-avatar-wrapper {
  position: relative;
  display: inline-block;
  line-height: 0;
  transition: box-shadow var(--transition-speed) ease, border-color var(--transition-speed) ease;
  z-index: 20;
}
#avatar-status-badge {
  position: absolute;
  bottom: 5%;
  right: 5%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  z-index: 10;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}
#avatar-status-badge.badge-red-dot {
  background-color: #ff3b30;
  color: white;
  font-size: 10px;
  font-weight: bold;
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  width: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 10px;
  text-shadow: none;
}
.inspector-panel .radio-group {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
  gap: 5px;
}
.inspector-panel .radio-group.wrap {
  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
}
.layout-floating-mode .inspector-panel .radio-group.wrap {
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr)) !important;
  display: grid !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  box-sizing: border-box !important;
  flex-direction: initial !important;
  justify-content: initial !important;
}
.layout-floating-mode .inspector-panel .radio-group.wrap label {
  white-space: normal !important;
  word-break: break-word !important;
  min-width: 50px !important;
  max-width: none !important;
}
.layout-options-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(65px, 1fr)) !important;
  gap: 4px !important;
  width: 100% !important;
}
.layout-options-grid label {
  white-space: normal !important;
  word-break: break-word !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.layout-floating-mode .layout-options-grid {
  grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)) !important;
}
/* 强制覆盖 scoped 样式 - 使用最高特异性选择器 */
div[data-v-2f3fd83c].radio-group.wrap.layout-options-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)) !important;
  gap: 4px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
div[data-v-2f3fd83c].radio-group.wrap.layout-options-grid > label {
  white-space: normal !important;
  word-break: break-word !important;
  min-height: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 55px !important;
  max-width: none !important;
  flex: none !important;
}
.timeline-event-editor {
  display: flex;
  align-items: flex-start;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
}
.timeline-event-editor .card-drag-handle {
  width: 30px;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  background: var(--bg-section);
  border-right: 1px solid var(--border-color);
  flex-shrink: 0;
  color: var(--text-placeholder);
}
.timeline-event-editor .editor-card-content {
  flex-grow: 1;
  padding: 10px;
  min-width: 0;
}
.timeline-event-editor .card-delete-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 5px;
}
.unified-editor-item {
  display: flex;
  align-items: stretch;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 8px;
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.unified-editor-item:hover,
.unified-editor-item:focus-within {
  border-color: var(--border-input);
  background: var(--bg-editor);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.unified-drag-handle {
  width: 32px;
  background: rgba(0, 0, 0, 0.02);
  border-right: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--text-placeholder);
  flex-shrink: 0;
  font-size: 1.2rem;
  transition: color 0.2s;
}
.unified-editor-item:hover .unified-drag-handle {
  color: var(--text-secondary);
  background: rgba(0, 0, 0, 0.05);
}
.unified-drag-handle:active {
  cursor: grabbing;
}
.unified-content {
  flex-grow: 1;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.unified-content.column {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.unified-thumb {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--bg-image-thumb);
  border: 1px solid var(--border-input);
  overflow: hidden;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.unified-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.unified-thumb .iconify {
  color: #ccc;
  font-size: 20px;
}
.unified-delete-btn {
  width: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-left: 1px solid transparent;
  color: var(--text-placeholder);
  cursor: pointer;
  flex-shrink: 0;
  transition: color 0.2s, opacity 0.2s;
  font-size: 1.1rem;
}
.unified-editor-item:hover .unified-delete-btn {
  color: var(--text-secondary);
  border-left-color: var(--border-color);
}
.unified-delete-btn:hover {
  background-color: rgba(255, 59, 48, 0.1);
  color: var(--color-danger) !important;
}
.unified-content input[type="text"],
.unified-content textarea,
.unified-content select {
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  padding: 6px;
  border-radius: 4px;
  font-size: 0.9em;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.unified-content input[type="text"]:hover,
.unified-content textarea:hover {
  background: var(--bg-editor);
  border-color: var(--border-input);
}
.unified-content input[type="text"]:focus,
.unified-content textarea:focus {
  background: var(--bg-editor);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(0, 122, 255, 0.1);
  outline: none;
}
#preview-nickname {
  margin: 12px 0 5px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text-primary);
  transition: color var(--transition-speed) ease;
}
#preview-subtitle {
  margin: 0 0 8px;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-primary);
  opacity: 0.7;
  transition:
    color var(--transition-speed) ease,
    margin var(--transition-speed) ease;
}
#preview-bio {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--text-primary);
  opacity: 0.8;
  transition: color var(--transition-speed) ease;
  white-space: pre-wrap;
}
#preview-subtitle:empty,
#preview-bio:empty {
  display: none;
}
.tags-container {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.tag-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  gap: 6px;
  padding: 4px 12px;
  min-height: 28px;
  height: auto;
  line-height: normal;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 16px;
  transition: background-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease, transform var(--transition-speed) ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  cursor: grab;
  flex-shrink: 0;
  position: relative;
  overflow: visible;
}
.tag-pill > span:not(.icon-view-wrapper) {
  display: inline-block;
}
/* Legacy Mobile Pencil Styles Moved to PreviewCanvas.vue me-pencil-node */
/*.mobile-pencil-wrapper { ... }*/

/*.locked-mode .mobile-pencil-wrapper {
  display: none !important;
}*/


.editor-item {
  background: var(--bg-editor);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 15px;
  box-shadow: 0 2px 4px var(--shadow-light);
  transition: background-color var(--transition-speed) ease, border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}
.sortable-ghost {
  opacity: 0.2 !important;
  background: var(--bg-input) !important;
  border: 2px dashed var(--color-primary) !important;
  box-shadow: none !important;
  transform: scale(0.95);
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  border-radius: 12px;
}
.preview-item-wrapper.sortable-drag {
  opacity: 1 !important;
  background: var(--bg-card);
  transform: scale(1.05) !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25) !important;
  z-index: 10000 !important;
  cursor: grabbing;
  transition: none !important;
}
.preview-item-wrapper {
  -webkit-touch-callout: none;
  user-select: none;
}
/* Global inheritance for text stroke and fonts */
.preview-item-wrapper,
.item-inner-container,
.preview-header {
  -webkit-text-stroke: var(--g-comp-text-stroke);
  paint-order: stroke fill;
}
.preview-header {
  font-family: var(--g-comp-font-family) !important;
}
.preview-header #preview-nickname {
  font-family: var(--g-comp-title-font-family, var(--g-comp-font-family)) !important;
  font-weight: var(--g-comp-title-font-weight, 700) !important;
  font-style: var(--g-comp-title-font-style, normal) !important;
}
.editor-item.sortable-chosen {
  box-shadow: 0 4px 12px var(--shadow-medium);
  transform: scale(1.02);
}
.image-card-editor-content {
  display: flex;
  gap: 15px;
  align-items: flex-start;
}
.image-card-editor-thumb {
  flex-shrink: 0;
  width: 80px;
}
.image-card-editor-fields {
  flex-grow: 1;
}
.thumbnail-wrapper {
  position: relative;
  width: 100%;
  padding-top: 100%;
  background: var(--bg-image-thumb);
  border-radius: 6px;
  overflow: hidden;
  transition: border-color var(--transition-short) ease, box-shadow var(--transition-short) ease;
  min-height: 80px;
}
.thumbnail-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-short) ease;
}
.thumbnail-wrapper:hover {
  transform: scale(1.05);
}
.thumbnail-wrapper:hover img {
  transform: scale(1.05);
}
.thumbnail-actions {
  position: absolute;
  top: 3px;
  right: 3px;
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity var(--transition-short) ease;
}
.thumbnail-wrapper:hover .thumbnail-actions {
  opacity: 1;
}
.thumbnail-actions .btn {
  width: 24px;
  height: 24px;
  padding: 0;
  font-size: 0.8rem;
  line-height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
}
.thumbnail-actions .btn:hover {
  background: rgba(0, 0, 0, 0.8);
}
.editor-item-header {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: var(--bg-section);
  border-bottom: 1px solid var(--border-color);
  border-radius: 8px 8px 0 0;
  position: sticky;
  top: 0;
  z-index: 20;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}
.editor-item-title-input {
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  flex-grow: 1;
  padding: 10px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 1em;
  min-width: 0;
  overflow-wrap: break-word;
  border-radius: 4px;
}
.editor-item-title-input:not(span):hover {
  border-color: var(--border-input);
}
.editor-item-title-input:not(span):focus {
  outline: 1px solid var(--color-primary);
  background: var(--bg-input);
  border-color: var(--color-primary);
}
.item-actions {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  flex-shrink: 0;
}
.item-delete-btn {
  width: auto;
  padding: 6px 10px;
  font-size: 0.9rem;
  flex-shrink: 0;
}
.editor-item-content {
  padding: 15px;
}
.preview-items-container {
  margin-top: var(--preview-gap);
  display: flex;
  flex-wrap: wrap;
  gap: var(--preview-gap);
  width: 100%;
  align-items: flex-start;
  contain: layout style;
}
.preview-items-container.compact-mode {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 1px;
  column-gap: var(--preview-gap);
  row-gap: 0;
  align-items: start;
}
.preview-items-container.compact-mode .preview-item-wrapper {
  height: auto;
  width: auto !important;
  align-self: start;
}
.preview-items-container.locked-mode * {
  cursor: default !important;
  pointer-events: none !important;
}
#preview-items-container .empty-placeholder {
  text-align: center;
  padding: 50px 0;
  color: var(--text-placeholder);
  width: 100%;
}
.preview-item-wrapper {
  cursor: pointer;
  position: relative;
  z-index: 1;
  contain: layout style;
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  overflow: visible !important;
  transition:
    transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    margin 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s ease,
    border-radius 0.3s ease,
    box-shadow 0.3s ease !important;
  will-change: transform, margin;
}
::view-transition-group(*) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}
.preview-item-wrapper.sortable-drag {
  opacity: 1 !important;
}
.preview-item-wrapper.adding,
.preview-item-wrapper.removing {
  transition:
    opacity 0.4s,
    transform 0.4s;
}
.preview-item-wrapper.adding {
  animation: fadeInScale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.preview-item-wrapper.removing {
  animation: fadeOutScale 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.preview-card {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  view-transition-name: var(--card-transition-name);
  position: relative;
}
.preview-card-inner {
  backdrop-filter: var(--g-comp-backdrop-filter);
  -webkit-backdrop-filter: var(--g-comp-webkit-backdrop-filter);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  color: var(--card-text-color, var(--g-comp-text-color));
  border-radius: var(--g-comp-border-radius);
  box-shadow: none;
  border: var(--active-card-border, none);
  font-weight: var(--card-font-weight, normal);
  text-shadow: var(--active-card-text-shadow, none);
  padding: var(--g-comp-padding);
  word-wrap: break-word;
  transition: background-color var(--transition-short) ease, border-color var(--transition-short) ease;
  line-height: var(--g-comp-line-height);
  letter-spacing: var(--g-comp-letter-spacing, 0px);
}
.preview-card-inner::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--card-bg-combined, transparent);
  background-size: cover;
  background-position: center var(--card-bg-pos-y, 50%);
  background-repeat: no-repeat;
  opacity: var(--card-bg-opacity, 1);
  filter: var(--g-comp-bg-blur, none);
  transform: var(--g-comp-bg-transform, none);
  transition: filter 0.3s ease, opacity 0.3s ease;
}

/* Fix: Disable overlay for specialized styles that provide their own background */
/* Terminal is excluded because it uses ::before for its top bar decoration */
.preview-card-inner[data-card-style]:not([data-card-style="default"]):not(
    [data-card-style="quote"]
  ):not([data-card-style="terminal"])::before {
  display: none !important;
}

/* Ensure background pseudo-element is available for opacity control by default */
.preview-card-inner::before {
  display: block;
}
.preview-card-inner::after {
  content: none;
}
.preview-card-sticker {
  position: absolute;
  top: -10px;
  left: 50%;
  width: 80px;
  height: 25px;
  transform: translateX(-50%) rotate(-3deg);
  z-index: 10;
  pointer-events: none;
}
.preview-card-sticker.tape {
  background-color: rgba(255, 255, 245, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  width: 90px;
  height: 26px;
  top: -12px;
  opacity: 1;
  border-left: 2px dashed rgba(0, 0, 0, 0.1);
  border-right: 2px dashed rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(1px);
  transform: translateX(-50%) rotate(-2deg);
}
.preview-card-sticker.pushpin {
  width: 20px;
  height: 20px;
  top: -8px;
  background-color: #e74c3c;
  border-radius: 50%;
  border: 2px solid #c0392b;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%) rotate(10deg);
}
.preview-card-sticker.pushpin::before {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 6px;
  height: 6px;
  background: #bdc3c7;
}
.preview-card-sticker.pink-tape {
  background-color: rgba(255, 182, 193, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  width: 90px;
  height: 26px;
  top: -12px;
  opacity: 1;
  border-left: 2px dashed rgba(0, 0, 0, 0.1);
  border-right: 2px dashed rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(1px);
  transform: translateX(-50%) rotate(2deg);
}
.preview-card-sticker.black-tape {
  background-color: rgba(40, 40, 40, 0.85);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  width: 90px;
  height: 26px;
  top: -12px;
  opacity: 1;
  border-left: 2px dashed rgba(255, 255, 255, 0.2);
  border-right: 2px dashed rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(1px);
  transform: translateX(-50%) rotate(-1.5deg);
}
.preview-card-sticker.staple {
  width: 24px;
  height: 5px;
  top: 8px;
  left: 50%;
  background: linear-gradient(to bottom, #d4d4d4, #ffffff, #999999);
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  transform: translateX(-50%) rotate(-4deg);
}
.preview-card .preview-card-inner,
.music-card-preview,
.showcase-card,
.timeline-preview,
.progress-bar-preview,
.rpg-card-preview,
.social-card-preview,
.grid-preview-wrapper,
.preview-header,
.preview-items-container figure,
.todo-preview-container,
.calendar-preview,
.qa-preview,
.achievement-preview,
.letter-preview,
.ranking-preview,
.checklist-preview,
.relationship-preview,
.timer-preview,
.dialogue-preview-container,
.marquee-container {
  transition:
    transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
    box-shadow 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
  will-change: transform, box-shadow;
}
.music-card-preview,
.showcase-card,
.rpg-card-preview,
.timeline-preview,
.progress-bar-preview {
  backdrop-filter: var(--g-comp-backdrop-filter);
  -webkit-backdrop-filter: var(--g-comp-webkit-backdrop-filter);
}
.preview-card:hover .preview-card-inner,
.music-card-preview:hover,
.showcase-card:hover,
.timeline-preview:hover,
.progress-bar-preview:hover,
.rpg-card-preview:hover,
.social-card-preview:hover,
.grid-preview-wrapper:hover,
.preview-header:hover,
.preview-items-container figure:hover,
.todo-preview-container:hover,
.calendar-preview:hover,
.qa-preview:hover,
.achievement-preview:hover,
.letter-preview:hover,
.ranking-preview:hover,
.relationship-preview:hover,
.checklist-preview:hover,
.timer-preview:hover,
.dialogue-preview-container:hover,
.marquee-container:hover {
  transform: translateY(-5px) scale(1.01);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) !important;
  z-index: 100;
}
.preview-card-title,
.preview-card-content {
  position: relative;
  z-index: 2;
  margin: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  color: inherit;
}
.preview-card-title {
  font-size: var(--g-comp-title-font-size);
  font-weight: inherit;
  margin-bottom: 8px;
  display: flex;
  align-items: var(--g-font-align, center);
  gap: 8px;
  line-height: 1.2 !important; /* Fixed title line height to avoid layout shift from global slider */
}
.preview-card-title .iconify,
.tag-pill .iconify {
  font-size: 1.25em;
  flex-shrink: 0;
}
.preview-card-content {
  font-size: var(--g-comp-content-font-size);
  font-family: var(--g-comp-font-family);
  line-height: var(--g-comp-line-height, 1.5);
  letter-spacing: var(--g-comp-letter-spacing, 0px);
  white-space: pre-wrap;
  font-variant-ligatures: none;
  -webkit-font-variant-ligatures: none;
  width: 100% !important;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: none;
  padding-right: 0.5px;
  box-sizing: border-box;
}
.preview-card-content .tiptap,
.preview-card-content .ql-editor,
.letter-body .tiptap,
.dialogue-text,
.qa-content,
.tiptap-content-root .tiptap,
.preview-card-content .tiptap ul,
.preview-card-content .ql-editor ul,
.preview-card-content .tiptap ol,
.preview-card-content .ql-editor ol,
.preview-card-content .tiptap li,
.preview-card-content .ql-editor li,
.letter-body li,
.dialogue-text li,
.qa-content li {
  line-height: inherit;
  letter-spacing: inherit;
  white-space: pre-wrap !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* p 元素：只重置左右边距，上下边距由 Tiptap ParagraphSpacing 扩展的 inline style 控制 */
.preview-card-content .tiptap p,
.preview-card-content .ql-editor p,
.letter-body p,
.dialogue-text p,
.qa-content p {
  white-space: pre-wrap !important;
  padding: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.preview-card-content p,
.preview-card-content .tiptap p,
.ql-empty-p {
  margin: 0 !important;
  padding: 0 !important;
  white-space: pre-wrap !important;
  min-height: calc(var(--g-comp-line-height, 1.5) * 1em);
}
.preview-card-content strong,
.preview-card-content b {
  font-weight: bold;
}
.preview-card-content em,
.preview-card-content i {
  font-style: italic;
}
.ql-align-center {
  text-align: center;
}
.ql-align-right {
  text-align: right;
}
.ql-align-justify {
  text-align: justify;
}
.ql-indent-1 {
  padding-left: 2em;
}
.ql-indent-2 {
  padding-left: 4em;
}
.ql-indent-3 {
  padding-left: 6em;
}
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ul,
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ol {
  padding-left: 1.6em !important;
  margin: 0.8em 0 !important;
  display: block !important;
}

.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ul {
  list-style-type: disc !important;
}

.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ol {
  list-style-type: decimal !important;
}

.preview-card-inner:not(.is-editing-rich-text) .preview-card-content li {
  display: list-item !important;
  list-style-position: outside !important;
  margin-bottom: 4px !important;
}
/* Support for nested lists */
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ul ul {
  list-style-type: circle !important;
  margin: 4px 0 !important;
}

.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ul ul ul {
  list-style-type: square !important;
}
/* Global support for standard list markers inside .ql-editor (Tiptap output) */
.ql-editor ul, 
.ql-editor ol,
.tiptap ul,
.tiptap ol {
  padding-left: 1.6em !important;
  margin: 0.8em 0 !important;
  display: block !important;
  list-style-position: outside !important;
}

.ql-editor ul,
.tiptap ul {
  list-style-type: disc !important;
}

.ql-editor ol,
.tiptap ol {
  list-style-type: decimal !important;
}

.ql-editor li,
.tiptap li {
  display: list-item !important;
  list-style-position: outside !important;
  margin-bottom: 4px !important;
  list-style-type: inherit !important;
}

/* Deep override to prevent legacy suppression */
.preview-card-content ul li,
.preview-card-content ol li,
.letter-body ul li,
.letter-body ol li {
  display: list-item !important;
  list-style: inherit !important;
}

/* Support for nested lists */
.tiptap ul ul {
  list-style-type: circle !important;
  margin: 4px 0 !important;
}

.tiptap ul ul ul {
  list-style-type: square !important;
}
@media (max-width: 1024px) {
  .tag-pill span[data-tag-text-id],
  .tag-pill span[data-profile-tag-idx] {
    position: relative;
    top: 1.5px;
    display: inline-block;
  }
  .tag-pill .iconify,
  .tag-pill .custom-svg-icon {
    transform: translateY(0.5px);
  }
}
.tag-pill > span:not(.icon-view-wrapper) {
  display: inline-block !important;
  transform: none !important;
  margin: 0 !important;
  padding: 2px 0 !important;
  line-height: 1.4 !important;
}
.preview-card-title .iconify,
.preview-card-title .custom-svg-icon,
.tag-pill .iconify,
.tag-pill .custom-svg-icon {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0;
}
.tag-pill .iconify,
.tag-pill .custom-svg-icon {
  display: block !important;
  margin: 0 !important;
  font-size: 1.1em;
}
.preview-items-container figure {
  margin: 0;
  transition: transform 0.3s ease;
  vertical-align: top;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  background-color: transparent;
}
.img-wrapper {
  line-height: 0;
  overflow: hidden;
  flex-shrink: 0;
}
.preview-items-container figure.circle-style .img-wrapper,
.preview-items-container figure.circle-style .img-wrapper img {
  border-radius: 50% !important;
}
.preview-items-container figure.circle-style figcaption {
  text-align: center;
  margin-top: 10px;
}
.preview-items-container figure img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 8px 8px 0 0;
  max-width: 100%;
  transition: transform 0.3s ease;
}
.preview-items-container figure:not(:has(figcaption)) img {
  border-radius: 8px;
}
.preview-items-container figure:hover .img-wrapper img {
  transform: scale(1.05);
}
.preview-items-container figure figcaption {
  text-align: center;
  margin: 0;
  padding: 5px;
  overflow-wrap: break-word;
  color: var(--g-comp-text-color);
  position: relative;
  z-index: 2;
  width: 100%;
}
.preview-items-container figure figcaption > * {
  text-align: center;
  display: block;
}
.preview-items-container figure.polaroid-style {
    background: #fff;
    padding: 8px 8px 12px 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 0;
    height: auto !important;
    color: #333 !important
}

.preview-items-container figure.polaroid-style:hover {
    transform: scale(1.02) rotate(0deg);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    z-index: 10
}

.preview-items-container figure.polaroid-style .img-wrapper {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #eee;
    border: 1px solid rgba(0, 0, 0, 0.05)
}

.preview-items-container figure.polaroid-style img {
    border-radius: 0;
    height: 100% !important;
    object-fit: cover
}

.preview-items-container figure.polaroid-style figcaption {
    position: static;
    margin-top: 8px;
    width: 100%;
    text-align: center;
    font-family: "LXGW WenKai", "Comic Sans MS", cursive, sans-serif;
    color: #333 !important;
    font-size: 1rem;
    opacity: 0.9;
    background: transparent !important;
    padding: 0
}

.separator-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.separator-preview-line {
  flex-grow: 1;
  height: 1px;
  transition: none;
}
.spacer-preview {
  width: 100%;
  border: 1px dashed var(--border-dashed, #ccc);
  min-height: 20px;
  box-sizing: border-box;
}
body.export-mode .spacer-preview {
  border: none;
  min-height: 0;
}
.apply-global-border::before,
.apply-global-border::after {
  display: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}
.apply-global-border {
  border: 0px solid transparent !important;
  position: relative;
  z-index: 1;
  border-radius: var(--g-comp-border-radius);
}

.apply-global-border:not([data-border-style="pixel"]):not(
    [data-border-style="neo-brutalism"]
  ):not([data-border-style="double-offset"])::after {
  display: block;
  content: "";
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  border: var(--g-border-width) var(--g-border-style, solid)
    var(--g-border-color) !important;
  background-clip: border-box !important;
  box-sizing: border-box;
  border-radius: inherit;
}

/* Specific internal layouts that need to fill the border-box */
.apply-global-border > * {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

.preview-header.apply-global-border:not([data-border-style="pixel"]):not(
    [data-border-style="neo-brutalism"]
  ):not([data-border-style="double-offset"]) {
  border: 0px solid transparent !important;
}

.preview-header.apply-global-border:not([data-border-style="pixel"]):not(
    [data-border-style="neo-brutalism"]
  ):not([data-border-style="double-offset"])::after {
  display: block;
  border: var(--g-border-width) var(--g-border-style, solid)
    var(--g-border-color) !important;
}
.preview-header.apply-global-border {
  transform-style: flat;
}
.apply-global-border[data-border-style="pixel"] {
  border: none;
  box-shadow:
    var(--g-border-width) 0 0 0 var(--g-border-color),
    calc(-1 * var(--g-border-width)) 0 0 0 var(--g-border-color),
    0 var(--g-border-width) 0 0 var(--g-border-color),
    0 calc(-1 * var(--g-border-width)) 0 0 var(--g-border-color);
}
.apply-global-border.apply-global-shadow[data-border-style="pixel"] {
  box-shadow:
    var(--g-border-width) 0 0 0 var(--g-border-color),
    calc(-1 * var(--g-border-width)) 0 0 0 var(--g-border-color),
    0 var(--g-border-width) 0 0 var(--g-border-color),
    0 calc(-1 * var(--g-border-width)) 0 0 var(--g-border-color),
    var(--g-shadow-value) !important;
}
.apply-global-border[data-border-style="neo-brutalism"] {
  border: var(--g-border-width) solid var(--g-border-color);
  background-clip: border-box !important;
  box-shadow: var(--g-border-shadow-offset) var(--g-border-shadow-offset) 0 0
    var(--g-border-shadow-color);
}
.apply-global-border.apply-global-shadow[data-border-style="neo-brutalism"] {
  box-shadow:
    var(--g-border-shadow-offset) var(--g-border-shadow-offset) 0 0
      var(--g-border-shadow-color),
    var(--g-shadow-value) !important;
}
.apply-global-border[data-border-style="neo-brutalism"]::after {
  display: none !important;
}
.apply-global-border[data-border-style="double-offset"] {
  border: var(--g-border-width) solid var(--g-border-color) !important;
  background-clip: border-box !important;
  position: relative;
  z-index: 1;
}
.apply-global-border[data-border-style="double-offset"] > * {
  position: relative;
  z-index: 2; /* Ensure content is in front of shifted ::before */
}
.apply-global-border[data-border-style="double-offset"]::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: var(--g-border-width) solid var(--g-border-color);
  border-radius: inherit;
  transform: translate(
    var(--g-border-shadow-offset),
    var(--g-border-shadow-offset)
  );
  z-index: -1 !important;
  opacity: 0.6;
  pointer-events: none;
}
.apply-global-border[data-border-style="double-offset"]::after {
  display: none !important;
}

/* Prevent double-application when a module root also has apply-global-border class */
.apply-global-border .apply-global-border::before,
.apply-global-border .apply-global-border::after {
  content: none !important;
  display: none !important;
}
.apply-global-border .apply-global-border {
  border: none !important;
  box-shadow: none !important;
}
.apply-global-border[data-border-style="double-offset"] .info-left-col,
.apply-global-border[data-border-style="double-offset"]
  #preview-avatar-wrapper {
  position: relative;
  z-index: auto;
}
.apply-global-shadow {
  position: relative;
}
.apply-global-shadow::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: var(--g-shadow-value) !important;
  z-index: 0;
  pointer-events: none;
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: box-shadow 0.3s ease;
}
.preview-item-wrapper.apply-global-shadow:hover {
  z-index: 10;
}
#quick-add-menu {
  position: fixed;
  z-index: 10001;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  padding: 5px 0;
  min-width: 180px;
  display: none;
  animation: fadeIn 0.1s ease;
}
#quick-add-menu .menu-header {
  padding: 8px 12px;
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  background: var(--bg-input);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 4px;
}
#quick-add-menu li {
  padding: 8px 15px;
  cursor: pointer;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  transition: background 0.1s;
}
#quick-add-menu li:hover {
  background-color: var(--bg-image-upload-hover);
  color: var(--color-primary);
}
#quick-add-menu li.separator {
  padding: 0;
  margin: 4px 0;
  height: 1px;
  background: var(--border-color);
  cursor: default;
}
#quick-add-menu li.smart-suggestion {
  background: linear-gradient(
    90deg,
    var(--bg-card),
    var(--bg-image-upload-hover)
  );
  border-left: 3px solid var(--color-primary);
  font-weight: bold;
}
.layer-panel-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  position: relative;
}
.flyout-panel {
  position: absolute;
  left: 105%;
  bottom: 0;
  width: 200px;
  background: var(--bg-editor);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  padding: 10px;
  display: none;
  z-index: 1000;
  max-height: 400px;
  overflow-y: auto;
}
.flyout-panel.visible {
  display: block;
  animation: fadeIn 0.2s ease;
}
.flyout-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}
@media (max-width: 1024px) {
  .layer-panel-buttons {
    display: flex !important;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px;
    gap: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .layer-panel-buttons::-webkit-scrollbar {
    display: none;
  }
  .layer-panel-buttons .btn {
    flex: 0 0 auto;
    width: auto !important;
    padding: 10px 16px;
    min-width: 80px;
  }
  #show-more-modules-btn {
    display: none !important;
  }
  .flyout-panel {
    display: none !important;
  }
  .mobile-only-visible {
    display: inline-block !important;
  }
}
.music-card-preview {
  display: flex;
  gap: 15px;
  padding: 20px;
  background-color: var(--music-bg-color);
  border-radius: var(--music-radius);
  color: var(--music-text-color);
  position: relative;
  overflow: hidden;
  align-items: center;
  min-height: 140px;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.music-cover {
  width: 100px;
  height: 100px;
  flex-shrink: 0;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  align-self: center;
}
.music-card-preview {
  display: flex;
  align-items: center;
  text-align: center;
}
.music-card-preview[data-style="cd_player"] .music-info,
.music-card-preview[data-style="lockscreen"] .music-info,
.music-card-preview[data-style="streaming"] .music-info {
  align-items: center;
  text-align: center;
}
.music-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  height: 100%;
  gap: 12px;
  padding: 5px 0;
}
.music-header {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  margin-top: 8px;
}
.music-title {
  font-weight: 700;
  font-size: 1.2em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.music-artist {
  font-size: 0.85em;
  opacity: 0.7;
  margin-top: 4px;
}
.music-lyrics-container {
  flex: 0 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin: 5px 0;
  min-height: 45px;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );
  overflow: hidden;
}
.lyrics-line {
  font-size: 0.85em;
  opacity: 0.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.4;
  transition: color 0.3s ease, opacity 0.3s ease;
  margin: 4px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.music-lyrics-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 80px;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 15%,
    black 85%,
    transparent 100%
  );
}
.lyrics-line.active {
  opacity: 1;
  font-weight: bold;
  font-size: 0.95em;
  color: var(--music-accent-color);
  transform: scale(1.05);
  margin: 2px 0;
}
.music-bottom-area {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}
.music-progress-area {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.music-progress-bar {
  width: 100%;
  height: 4px;
  background-color: rgba(128, 128, 128, 0.2);
  border-radius: 2px;
  overflow: hidden;
}
.music-progress-fill {
  height: 100%;
  background-color: var(--music-accent-color);
  border-radius: 2px;
}
.music-time-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75em;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}
.music-controls {
  display: flex;
  gap: 25px;
  justify-content: center;
  align-items: center;
  font-size: 1.8em;
  opacity: 0.9;
  margin-top: 2px;
}
.vinyl-record,
.spool,
.cd-disc {
  animation: spin 8s linear infinite;
  animation-play-state: paused !important;
  transition: transform 0.5s ease;
}
.is-playing .vinyl-record,
.is-playing .spool,
.is-playing .cd-disc {
  animation-play-state: running !important;
}
.play-icon {
  transition:
    transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
    opacity 0.2s;
}
.music-controls:active .play-icon {
  transform: scale(0.9);
}
.tag-pill {
  transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.tag-pill:hover {
  transform: translateY(-1px) scale(1.05);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  filter: brightness(1.1);
}
.vinyl-tonearm {
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform: rotate(-35deg);
}
.is-playing .vinyl-tonearm {
  transform: rotate(-5deg);
}
.lyrics-line {
  font-size: 0.85em;
  opacity: 0.4;
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
  line-height: 1.4;
  transition: color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  margin: 4px 0;
  text-align: center;
}
.lyrics-line.active {
  opacity: 1 !important;
  font-weight: bold !important;
  transform: scale(1.08);
  color: var(--music-accent-color);
}
.music-lyrics-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 90px;
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    black 20%,
    black 80%,
    transparent 100%
  );
}
.music-card-cassette {
  font-family: "栗壳坚坚体", "LikeJianJianTi", "LikeJianJianTi Regular", cursive !important;
  background: linear-gradient(to bottom, #2a2a2a, #1a1a1a);
  color: #222;
  padding: 12px;
  display: flex;
  flex-direction: column;
  border-radius: 8px;
  position: relative;
  overflow: visible;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.music-card-cassette * {
  font-family: inherit !important;
}
.music-card-cassette::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #111;
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    0 0 0 2px #333;
  z-index: 2;
}
.music-card-cassette::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #111;
  box-shadow:
    inset 1px 1px 1px rgba(255, 255, 255, 0.1),
    0 0 0 2px #333;
  z-index: 2;
}
.cassette-body {
  background-color: #e3e0d1;
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0) 10%
  );
  border-radius: 4px;
  padding: 15px 10px;
  border: 1px solid #999;
  border-bottom: 12px solid #b0ad9e;
  position: relative;
  box-shadow:
    inset 0 0 10px rgba(0, 0, 0, 0.15),
    inset 2px 2px 0 rgba(255, 255, 255, 0.5);
}
.cassette-body::after,
.cassette-body::before {
  content: "";
  position: absolute;
  bottom: -8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #222;
  z-index: 5;
}
.cassette-body::before {
  left: 20px;
}
.cassette-body::after {
  right: 20px;
}
.cassette-header {
  background: #fffdf5;
  padding: 6px 10px;
  border-radius: 2px;
  margin-bottom: 12px;
  transform: rotate(-0.5deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #d4d4d4;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.03) 3px
  );
}
.cassette-header [data-item-key="songTitle"] {
  width: auto !important;
  min-width: 0 !important;
}
.cassette-spools {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  background: #222;
  padding: 8px;
  border-radius: 30px;
  margin-bottom: 5px;
  border: 2px solid #555;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
  position: relative;
}
.cassette-spools::before {
  content: "";
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  bottom: 0;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.spool {
  width: 36px;
  height: 36px;
  background:
    radial-gradient(circle, #eee 3px, transparent 4px),
    conic-gradient(
      #fff 0deg,
      #fff 45deg,
      #333 45deg,
      #333 90deg,
      #fff 90deg,
      #fff 135deg,
      #333 135deg,
      #333 180deg,
      #fff 180deg,
      #fff 225deg,
      #333 225deg,
      #333 270deg,
      #fff 270deg,
      #fff 315deg,
      #333 315deg,
      #333 360deg
    );
  border-radius: 50%;
  border: 4px solid #5c4033;
  animation: spin 4s linear infinite;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}
.cassette-tape-window {
  height: 4px;
  background: #3e2723;
  flex-grow: 1;
  margin: 0 5px;
  opacity: 0.8;
}
.music-card-MP3 {
  background: linear-gradient(145deg, #f0f0f0, #dcdcdc);
  border-radius: 18px;
  box-sizing: border-box;
  box-shadow:
    inset 2px 2px 5px rgba(255, 255, 255, 0.9),
    inset -2px -2px 5px rgba(0, 0, 0, 0.1),
    5px 5px 15px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #2b3836;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.15);
  font-family:
    "Fusion Pixel 12px Mono latin",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  overflow: hidden;
}
.MP3-screen {
  width: 100%;
  background-color: #c6d8d3;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.06) 1px, transparent 1px);
  background-size: 3px 3px;
  border: 2px solid #5f7a76;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 15px;
  display: flex;
  gap: 10px;
  overflow: hidden;
  box-shadow:
    inset 3px 3px 6px rgba(0, 0, 0, 0.25),
    inset -1px -1px 2px rgba(255, 255, 255, 0.3);
}
.MP3-cover {
  width: 50px;
  height: 50px;
  background: #ccc;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #333;
}
.MP3-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.MP3-info > div {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.MP3-click-wheel {
  width: 100px;
  height: 100px;
  background: #e6e6e6;
  border-radius: 50%;
  position: relative;
  border: 1px solid #bbb;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.MP3-center-btn {
  width: 45px;
  height: 45px;
  background: #ccc;
  border-radius: 50%;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.MP3-ctrl {
  position: absolute;
  color: #999;
  font-weight: bold;
  font-size: 12px;
}
.MP3-ctrl.top {
  top: 10px;
}
.MP3-ctrl.bottom {
  bottom: 10px;
}
.MP3-ctrl.left {
  left: 10px;
}
.MP3-ctrl.right {
  right: 10px;
}
.progress-bar-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.progress-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  color: var(--g-comp-text-color);
}
.progress-bar-label {
  font-weight: 600;
}
.progress-bar-value {
  opacity: 0.8;
}
.progress-bar-track {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition:
    width 0.5s ease,
    background-color 0.3s;
}
.progress-bar-preview.circular .progress-bar-label {
  font-size: 0.95em;
  opacity: 0.9;
}
.rpg-card-preview {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--g-comp-padding);
  box-sizing: border-box;
  background-color: var(--rpg-bg-color);
  color: var(--rpg-text-color);
  border-radius: var(--rpg-radius);
  position: relative;
  overflow: hidden;
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.rpg-title {
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 15px;
  z-index: 2;
  text-align: center;
}
.rpg-radar-container {
  width: 100%;
  max-width: 240px;
  aspect-ratio: 1 / 1;
  position: relative;
  z-index: 2;
}
.rpg-radar-container svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.rpg-card-preview[data-style="default"] .radar-grid {
  stroke: rgba(128, 128, 128, 0.3);
  stroke-width: 1;
  fill: none;
}
.rpg-card-preview[data-style="default"] .radar-axis {
  stroke: rgba(128, 128, 128, 0.3);
  stroke-width: 1;
}
.rpg-card-preview[data-style="default"] .radar-area {
  fill: var(--rpg-fill-color);
  stroke: var(--rpg-stroke-color);
  stroke-width: 2;
}
.rpg-card-preview[data-style="default"] .radar-label {
  font-size: 12px;
  fill: var(--rpg-text-color);
  font-weight: 600;
}
.rpg-card-preview[data-style="red"] {
  background-color: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff;
  overflow: visible;
  transform: rotate(-1deg);
}
.rpg-card-preview[data-style="red"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    #1a1a1a,
    #1a1a1a 10px,
    #222 10px,
    #222 20px
  );
  z-index: 0;
  opacity: 0.6;
  pointer-events: none;
}
.rpg-card-preview[data-style="red"] .rpg-title {
  font-family: "pingfangzhangyalinheifang", sans-serif;
  font-size: 1.8em;
  background: #ffffff;
  color: #000000;
  padding: 4px 15px;
  transform: skewX(-15deg) rotate(-2deg);
  box-shadow: 3px 3px 0 #d30d19;
  margin-bottom: 25px;
}
.rpg-card-preview[data-style="red"] .radar-grid {
  stroke: #666;
  stroke-width: 1;
  fill: none;
  stroke-dasharray: 4 2;
}
.rpg-card-preview[data-style="red"] .radar-axis {
  display: none;
}
.rpg-card-preview[data-style="red"] .radar-area {
  fill: rgba(211, 13, 25, 0.85);
  stroke: #ffffff;
  stroke-width: 3;
  stroke-linejoin: round;
}
.rpg-card-preview[data-style="red"] .radar-label {
  font-family: "pingfangzhangyalinheifang", sans-serif;
  font-size: 16px;
  fill: #ffffff;
  text-shadow: 2px 2px 0 #000;
}
.rpg-card-preview[data-style="blue"] {
  background: linear-gradient(160deg, #eefbfc 0%, #c4e9fa 100%);
  border: 1px solid rgba(255, 255, 255, 0.8);
  color: #002b4d;
  box-shadow: 0 8px 32px rgba(0, 183, 246, 0.25);
}
.rpg-card-preview[data-style="blue"]::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 280px;
  border: 1px solid rgba(0, 183, 246, 0.15);
  border-radius: 50%;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.rpg-card-preview[data-style="blue"] .rpg-title {
  font-family: sans-serif;
  font-weight: 300;
  letter-spacing: 2px;
  color: #0056b3;
  border-bottom: 2px solid #00b7f6;
  padding-bottom: 5px;
}
.rpg-card-preview[data-style="blue"] .radar-grid {
  stroke: rgba(0, 183, 246, 0.3);
  stroke-width: 1;
  fill: none;
}
.rpg-card-preview[data-style="blue"] .radar-area {
  fill: url(#blue-gradient);
  stroke: #00b7f6;
  stroke-width: 2;
  filter: drop-shadow(0 0 5px rgba(0, 183, 246, 0.5));
}
.rpg-card-preview[data-style="blue"] .radar-label {
  font-size: 12px;
  fill: #004080;
  font-weight: 700;
}
.timeline-preview {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.timeline-line {
  position: absolute;
  left: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  background-color: var(--border-color);
}
.timeline-event {
  position: relative;
  margin-bottom: 20px;
}
.timeline-event:last-child {
  margin-bottom: 0;
}
.timeline-dot {
  position: absolute;
  left: -26px;
  top: 4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--g-theme-accent, var(--text-action));
  background-color: var(--bg-preview-page);
}
.timeline-time {
  font-size: 0.8em;
  font-weight: 600;
  color: inherit;
  opacity: 0.7;
  margin-bottom: 4px;
}
.timeline-content {
  font-size: 0.95em;
  color: var(--g-comp-text-color);
}
.timeline-spacer-item {
  position: relative;
  width: 100%;
  pointer-events: none;
  z-index: 1;
}
.timeline-preview[data-layout="left"] .timeline-line {
  left: auto !important;
  right: var(--tl-line-right) !important;
}
.timeline-preview[data-layout="left"] .timeline-dot {
  left: auto !important;
  right: var(--tl-dot-offset-right) !important;
}
.timeline-preview[data-layout="double"] .timeline-line {
  left: 50% !important;
  transform: translateX(-50%);
}
.timeline-preview[data-layout="double"] .timeline-event {
  width: 50% !important;
  box-sizing: border-box;
}
.timeline-preview[data-layout="double"] .timeline-event.is-left {
  margin-left: 0 !important;
  margin-right: auto !important;
  text-align: right;
  padding-left: 0 !important;
  padding-right: var(--tl-double-pad) !important;
}
.timeline-preview[data-layout="double"] .timeline-event.is-right {
  margin-left: auto !important;
  margin-right: 0 !important;
  text-align: left;
  padding-right: 0 !important;
  padding-left: var(--tl-double-pad) !important;
}
.timeline-preview[data-layout="double"] .timeline-event.is-left .timeline-dot {
  left: auto !important;
  right: var(--tl-double-dot-offset) !important;
}
.timeline-preview[data-layout="double"] .timeline-event.is-right .timeline-dot {
  right: auto !important;
  left: var(--tl-double-dot-offset) !important;
}
.font-controls {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
  align-items: stretch;
}
.font-controls select {
  width: 100%;
}
.font-controls .buttons {
  display: flex;
  gap: 10px;
}
.font-controls .buttons .btn {
  flex-grow: 1;
  padding: 8px 12px;
  font-size: 13px;
  width: auto;
}
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-modal-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5000;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--transition-speed) ease,
    visibility 0s var(--transition-speed) ease;
  backdrop-filter: blur(5px);
  pointer-events: none;
  overscroll-behavior: contain;
}
.modal-overlay.visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  pointer-events: auto;
}
.modal-container {
  background: var(--bg-editor);
  border-radius: 16px;
  box-shadow: 0 10px 30px var(--shadow-medium);
  padding: 25px;
  width: 90%;
  max-width: 500px;
  border: 1px solid var(--border-color);
  transform: scale(0.95);
  opacity: 0;
  transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease;
  overscroll-behavior: contain;
}
.modal-overlay.visible .modal-container {
  transform: scale(1);
  opacity: 1;
}
.modal-container h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 1.25rem;
  color: var(--text-primary);
}

/* Vue Global Fade Transition (Used by Modals) */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease !important;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0 !important;
}

/* Modal Container specific transition inside fade */
.fade-enter-active .modal-container,
.fade-leave-active .modal-container {
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
}
.fade-enter-from .modal-container,
.fade-leave-to .modal-container {
  transform: scale(0.95) translateY(20px) !important;
}

#cropper-modal .modal-container {
  max-width: 720px;
}
.cropper-main-content {
  display: flex;
  gap: 15px;
  margin-bottom: 0;
}
.cropper-img-container {
  flex: 3;
  height: 320px;
  background: var(--bg-input);
  border-radius: 8px;
  overflow: hidden;
}
#cropper-preview-canvas {
  max-height: 180px !important;
}
.cropper-img-container img {
  max-width: 100%;
}
.cropper-sidebar {
  flex: 1;
  min-width: 180px;
  display: flex;
  flex-direction: column;
}
#filter-controls {
  border-top: 1px solid var(--border-color);
  padding-top: 15px;
}
#filter-sliders-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px 20px;
}
#filter-sliders-grid .form-group {
  margin-bottom: 0;
}
#filter-controls .form-group label {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  margin-bottom: 2px;
}
#filter-controls .form-group input[type="range"] {
  width: 100%;
}
.modal-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 15px;
}
.modal-actions .btn {
  width: auto;
  min-width: 100px;
}
#download-modal-content {
  text-align: center;
}
#download-modal-content img {
  max-width: 100%;
  max-height: 50vh;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  margin-bottom: 15px;
}
#download-modal-content a {
  display: block;
  background: var(--color-primary);
  color: white;
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 20px;
  transition: background-color var(--transition-short) ease;
}
#download-modal-content a:hover {
  background-color: var(--color-primary-hover);
}
.crop-ratios {
  margin-bottom: 15px;
}
.crop-ratios label {
  margin-right: 10px;
  font-size: 0.9rem;
  cursor: pointer;
}
.error-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--bg-editor);
  color: var(--text-primary);
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3);
  z-index: 2000;
  max-width: 90%;
  width: 450px;
  border: 1px solid var(--border-color);
}
.error-modal h3 {
  color: var(--color-danger);
  margin-top: 0;
}
.error-modal p {
  margin: 10px 0;
  font-size: 0.95rem;
}
.error-modal .btn {
  margin-top: 15px;
  float: right;
}
#loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.3s ease,
    visibility 0s 0.3s;
  pointer-events: none;
}
#loading-overlay.visible {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
  pointer-events: auto;
}
.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #f3f3f3;
  border-top: 4px solid var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 15px;
}
.toast-notification-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 2000000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.toast-notification {
  background-color: var(--bg-card);
  color: var(--text-primary);
  padding: 10px 16px;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-color);
  opacity: 0;
  transform: translateX(100%);
  animation:
    toast-in 0.5s forwards,
    toast-out 0.5s 4.5s forwards;
  font-size: 0.88rem;
  max-width: 320px;
  line-height: 1.5;
  word-break: break-word;
  white-space: normal;
  pointer-events: auto;
}
.toast-notification.success {
  border-left: 4px solid #2ecc71;
}
.toast-notification.error {
  border-left: 4px solid var(--color-danger);
}
.toast-notification.info {
  border-left: 4px solid var(--color-primary);
}
#icon-picker-modal .modal-container,
#texture-picker-modal .modal-container,
#font-manager-modal .modal-container,
#pixabay-search-modal .modal-container {
  max-width: 700px;
}
#icon-grid,
#texture-grid,
#pixabay-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
  gap: 10px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--border-input);
  border-radius: 8px;
  background: var(--bg-input);
}
#pixabay-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.pixabay-grid-item {
  position: relative;
  cursor: pointer;
  border-radius: 6px;
  overflow: hidden;
}
.pixabay-grid-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}
.pixabay-grid-item:hover img {
  transform: scale(1.1);
}
.pixabay-grid-item .photographer-info {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  padding: 4px 6px;
  font-size: 0.7rem;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#texture-grid {
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
}
.icon-grid-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  font-size: 1.5rem;
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color var(--transition-short);
  position: relative;
}
.icon-grid-item:hover,
.texture-grid-item:hover {
  background-color: var(--border-color);
}
.icon-grid-item .delete-custom-icon-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 0.7rem;
  line-height: 18px;
  border-radius: 50%;
  display: none;
}
.icon-grid-item:hover .delete-custom-icon-btn {
  display: flex;
}
.texture-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color var(--transition-short);
  padding: 5px;
}
.texture-preview {
  width: 100%;
  height: 80px;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  background-size: 20px;
}
.texture-name {
  font-size: 0.75rem;
  margin-top: 5px;
  color: var(--text-secondary);
  text-align: center;
}
#tag-manager-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  max-height: 300px;
  overflow-y: auto;
  padding: 2px;
  background: transparent;
  border: none;
  margin-bottom: 15px;
}
#font-manager-list,
#history-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 250px;
  overflow-y: auto;
  padding: 10px;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  background-color: var(--bg-input);
  margin-bottom: 15px;
}
#history-list {
  max-height: 300px;
}
.tag-manager-item,
.font-manager-item,
.history-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: var(--bg-section);
  padding: 8px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
}
.history-item {
  cursor: pointer;
  font-size: 0.9rem;
}
.history-item:hover {
  background-color: var(--bg-image-upload-hover);
}
.history-item.active {
  border-color: var(--color-primary);
  font-weight: bold;
}
.tag-manager-item .tag-drag-handle {
  cursor: grab;
  color: var(--text-placeholder);
  font-size: 1.5rem;
  padding: 0 8px;
}
.tag-manager-item .tag-icon-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 1.2rem;
  cursor: pointer;
}
.tag-manager-item .tag-text-input {
  flex-grow: 1;
  border: none;
  background: transparent;
  padding: 4px 6px;
  cursor: text;
}
.tag-manager-item .tag-delete-btn,
.font-manager-item .font-delete-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  cursor: pointer;
}
.font-manager-item-name {
  flex-grow: 1;
}
.empty-tag-list,
.empty-font-list,
.empty-history-list {
  text-align: center;
  color: var(--text-placeholder);
  padding: 20px 0;
}
.inset-controls {
  border: 1px solid var(--border-input);
  border-radius: 6px;
  padding: 15px;
  margin-top: 10px;
  background: var(--bg-input);
}
#help-modal .tab-content {
  max-height: 65vh;
  overflow-y: auto;
  padding: 15px;
}
.modal-container.sidebar-layout {
  max-width: 900px !important;
  height: auto !important;
  max-height: 85vh;
  min-height: 450px;
  display: flex !important;
  flex-direction: row !important;
  padding: 0 !important;
  overflow: hidden;
  transition: height 0.3s ease;
}
.modal-sidebar {
  width: 180px;
  background: var(--bg-section);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: 10px 0;
  overflow-y: auto;
}
.modal-sidebar .tab-btn {
  border-bottom: none !important;
  border-left: 4px solid transparent;
  text-align: left;
  padding: 12px 20px;
  width: 100%;
  border-radius: 0;
  font-size: 0.9rem;
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  white-space: nowrap;
}
#help-modal .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center;
  gap: 6px;
}
.modal-sidebar .tab-btn.active {
  background: var(--bg-image-upload-hover);
  border-left-color: var(--color-primary);
  color: var(--color-primary);
}
.modal-main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--bg-editor);
  overflow: hidden;
}
.modal-tab-container {
  flex: 0 1 auto;
  overflow-y: auto;
  padding: 25px 30px;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}
@media (max-width: 1024px) {
  .modal-container.sidebar-layout {
    flex-direction: column !important;
    height: 80vh !important;
    max-height: 80vh !important;
    width: 90% !important;
    max-width: 450px !important;
    border-radius: 16px !important;
    min-height: auto;
    overflow: hidden !important;
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    bottom: auto !important;
    margin: 0 !important;
  }
  .modal-main-content {
    flex: 1 1 0% !important;
    height: 100% !important;
    overflow: hidden !important;
    display: flex;
    flex-direction: column;
  }
  .modal-sidebar {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    padding: 0 10px;
    border-right: none;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-section);
    scrollbar-width: none;
    display: flex;
    flex-shrink: 0;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%
    );
    -webkit-mask-image: linear-gradient(
      to right,
      transparent 0%,
      black 5%,
      black 95%,
      transparent 100%
    );
  }
  .modal-sidebar::-webkit-scrollbar {
    display: none;
  }
  .modal-sidebar .tab-btn {
    border-left: none;
    border-bottom: 3px solid transparent !important;
    white-space: nowrap;
    padding: 12px 15px;
    width: auto !important;
    flex: 0 0 auto;
    font-size: 0.85rem;
    text-align: center;
  }
  .modal-sidebar .tab-btn.active {
    border-bottom-color: var(--color-primary) !important;
    font-weight: bold;
  }
  .modal-tab-container {
    padding: 20px 15px 40px 15px !important;
    overflow-y: auto !important;
    height: auto !important;
    flex: 1;
    overscroll-behavior: contain;
  }
  .tab-content.active {
    display: block !important;
    height: auto !important;
    max-height: none !important;
  }
  #help-modal .modal-actions {
    padding: 10px 20px !important;
  }
}
#help-thanks .thanks-item {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--border-color);
}
#help-thanks .thanks-item:last-child {
  border-bottom: none;
}
#help-thanks h4 {
  margin-top: 0;
  margin-bottom: 8px;
}
#help-thanks p {
  margin: 4px 0;
}
#help-thanks details {
  margin-top: 10px;
}
#help-thanks summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text-action);
}
#help-thanks pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background: var(--bg-input);
  padding: 10px;
  border-radius: 6px;
  font-size: 0.8rem;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
}
.palette-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(40px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.palette-color {
  width: 100%;
  padding-top: 100%;
  border-radius: 8px;
  cursor: pointer;
  border: 2px solid var(--border-color);
  transition: transform var(--transition-short);
  position: relative;
}
.palette-color:hover {
  transform: scale(1.1);
}
.color-tooltip {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.8rem;
  white-space: nowrap;
  box-shadow: var(--shadow-medium);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--transition-short);
}
.palette-color:hover .color-tooltip {
  opacity: 1;
  visibility: visible;
}
#color-context-menu {
  position: fixed;
  z-index: 10000;
  background: var(--bg-editor);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: var(--shadow-medium);
  padding: 5px;
  display: none;
  min-width: 180px;
}
#color-context-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#color-context-menu li {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9rem;
  text-shadow: none;
}
#color-context-menu li:hover {
  background: var(--bg-input);
}
#color-context-menu hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 4px 0;
}
#preview-context-menu {
  position: fixed;
  z-index: 10000;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  display: none;
  min-width: 160px;
  overflow: visible !important;
  padding: 5px;
  animation: fadeIn 0.1s ease;
}
#preview-context-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
#preview-context-menu li {
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-primary);
  text-shadow: none;
}
#preview-context-menu li:hover {
  background-color: var(--bg-input);
}
#preview-context-menu li {
  position: relative;
}
#preview-context-menu .submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -5px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  min-width: 140px;
  padding: 5px;
  z-index: 10001;
}
#preview-context-menu li:hover > .submenu {
  display: block;
  animation: fadeIn 0.1s ease;
}
#preview-context-menu li.has-submenu {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#preview-context-menu li.has-submenu::after {
  content: "?";
  color: var(--text-secondary);
  font-size: 0.8em;
  margin-left: 8px;
}
#preview-context-menu .submenu.flip-left {
  left: auto;
  right: 98%;
}
#preview-context-menu .submenu.flip-up {
  top: auto;
  bottom: -5px;
}
.vertical-rl .preview-card-inner {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  height: 320px;
  width: 100%;
  align-items: flex-start;
  overflow: hidden;
  padding: 20px 15px !important;
}
.vertical-rl .preview-card-title {
  max-width: none;
  max-height: 100%;
  margin-bottom: 0;
  margin-left: 12px;
}
.vertical-rl .preview-card-content {
  max-width: none;
  max-height: 100%;
  text-align: justify;
}
#qrcode-container {
  text-align: center;
  padding: 30px;
  background: #ffffff;
  border-radius: 8px;
  display: inline-block;
  margin: 10px 0;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
#qrcode-container canvas,
#qrcode-container img {
  background-color: #ffffff;
  padding: 10px;
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.tooltip-trigger {
  display: inline-block;
  margin-left: 8px;
  color: var(--text-secondary);
  cursor: help;
  position: relative;
}
#floating-tooltip {
  position: fixed;
  background-color: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: normal;
  white-space: normal;
  max-width: 250px;
  z-index: 10001;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  transform: translate(-50%, -100%);
}
.rich-text-editor-trigger {
  position: relative;
  border: 1px solid var(--border-input);
  border-radius: 6px;
  background-color: var(--bg-input);
  min-height: 80px;
  padding: 10px;
  transition: border-color var(--transition-short), box-shadow var(--transition-short);
}
.rich-text-editor-trigger:hover {
  border-color: var(--color-primary);
}
.rich-text-preview {
  font-size: 0.9em;
  color: var(--text-secondary);
  overflow: hidden;
  max-height: 120px;
  word-break: break-all;
}
.rich-text-preview > * {
  margin: 0 !important;
  padding: 0 !important;
}
.edit-content-btn {
  padding: 4px 10px;
  font-size: 0.85rem;
}
#rich-text-editor-modal .modal-container {
  max-width: 800px;
  display: flex;
  flex-direction: column;
}
#rich-text-editor-modal .modal-container h3 {
  order: 1;
}
#rich-text-editor-container {
  height: 35vh;
  margin-bottom: 15px;
  background-color: var(--bg-preview-page);
  order: 2;
  flex-grow: 1;
}
#rich-text-editor-modal .modal-actions {
  order: 3;
}
#rich-text-editor-container {
  display: flex;
  flex-direction: column;
}
#rich-text-editor-container .ql-toolbar {
  border-color: var(--border-color);
}
#rich-text-editor-container .ql-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
#rich-text-editor-container .ql-editor {
  color: var(--text-primary);
  flex-grow: 1;
}
#rich-text-editor-container .ql-toolbar .ql-picker-label,
#rich-text-editor-container .ql-toolbar .ql-stroke {
  color: var(--text-secondary) !important;
  stroke: var(--text-secondary) !important;
}
html.dark-mode #rich-text-editor-container .ql-picker-options {
  background-color: var(--bg-card);
  border-color: var(--border-color);
}
.export-option {
  border: 1px solid var(--border-color);
  padding: 15px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color var(--transition-short), border-color var(--transition-short);
}
.export-option:hover {
  background-color: var(--bg-input);
  border-color: var(--color-primary);
}
.export-option h4 {
  margin: 0 0 5px 0;
}
.export-option p {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-secondary);
}
#confirm-modal {
  z-index: 10000;
}
#image-source-modal .modal-container {
  max-width: 400px;
}
#image-source-modal .modal-actions {
  flex-direction: column;
  gap: 15px;
  margin-top: 25px;
}
#image-source-modal .btn {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
}
@keyframes toast-in {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes fadeOutScale {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.9);
  }
}
.preview-header {
  animation: fadeIn 0.4s ease forwards;
}
#mobile-layer-toggle,
#mobile-inspector-toggle {
  display: none;
}
.mobile-edit-pencil {
  display: none;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: -5px;
  right: -5px;
  width: 28px;
  height: 28px;
  background-color: var(--color-primary);
  color: white;
  border-radius: 50%;
  border: 2px solid var(--bg-preview-page);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  z-index: 2;
  cursor: pointer;
  opacity: 0.8;
  transition: opacity var(--transition-short), color var(--transition-short);
  font-size: 1rem;
}
@media (max-width: 1024px) {
  .app-header {
    position: fixed;
    top: auto !important;
    bottom: 0 !important;
    left: 0;
    width: 100%;
    height: calc(55px + env(safe-area-inset-bottom));
    padding: 0 15px;
    padding-bottom: env(safe-area-inset-bottom);
    border-bottom: none !important;
    border-top: 1px solid var(--border-color);
    background: var(--bg-editor);
    z-index: 300;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    transform: none !important;
  }
  /* Override all banner/warning pushdown rules for mobile bottom bar */
  body.has-broadcast .app-header,
  body.storage-warning .app-header,
  body.page-limit-warning .app-header,
  body.storage-warning.page-limit-warning .app-header {
    top: auto !important;
    bottom: 0 !important;
  }
  .app-header-title {
    display: none;
  }
  #mobile-layer-toggle,
  #mobile-inspector-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 12px !important;
  }
  .header-actions-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .theme-switch-wrapper {
    display: block !important;
  }
  #theme-toggle-btn {
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
    min-width: 40px;
  }
  .app-container {
    padding-top: calc(var(--system-broadcast-height, 0px) + var(--global-banners-height, 0px)) !important;
    padding-bottom: calc(55px + env(safe-area-inset-bottom));
    height: 100dvh;
    overflow: hidden;
  }
  .preview-panel {
    height: 100%;
    padding: 0 0 var(--mobile-inspector-height, 0px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-variant-ligatures: none;
    -webkit-font-variant-ligatures: none;
    letter-spacing: -0.015em !important;
  }
  /* Mobile: preview-canvas-area 不再是独立滚动容器，由 preview-panel 统一滚动 */
  .preview-canvas-area {
    overflow: visible !important;
    padding: 10px 0 !important;
    align-items: center !important;
  }
  body.export-mode .preview-panel {
    letter-spacing: normal !important;
  }
  .layer-panel {
    position: fixed;
    top: 0 !important;
    left: 0;
    height: calc(var(--app-height, 100vh) - 55px - env(safe-area-inset-bottom));
    bottom: calc(55px + env(safe-area-inset-bottom));
    width: 85%;
    max-width: 350px;
    transform: translateX(-100%);
    border-right: 1px solid var(--border-color);
    z-index: 200;
    transition: transform 0.3s ease-in-out;
    padding-bottom: 20px;
    background-color: var(--bg-editor) !important;
  }
  .layer-panel.is-open {
    transform: translateX(0);
  }
  .inspector-panel {
    position: fixed;
    top: auto;
    height: 50vh;
    max-height: calc(var(--app-height, 100vh) - 60px - env(safe-area-inset-bottom));
    bottom: calc(55px + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    width: 100%;
    max-width: none;
    transform: translateY(calc(100% + 60px + env(safe-area-inset-bottom)));
    border-left: none;
    border-top: 1px solid var(--border-color);
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
    z-index: 201;
    will-change: transform;
    transition: transform 0.3s ease, height 0.2s ease;
    padding-bottom: 0 !important;
    display: flex;
    flex-direction: column;
    touch-action: none;
    background-color: var(--bg-editor) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    contain: layout size style;
    isolation: isolate;
  }


  .inspector-panel.is-dragging {
    transition: none !important;
  }
  .inspector-tab-content .editor-item {
    content-visibility: auto;
    contain-intrinsic-size: 80px;
    contain: layout style;
  }
  .inspector-drag-handle-bar {
    width: 100%;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: grab;
    background: var(--bg-editor);
    border-bottom: 1px solid var(--border-color);
    border-radius: 20px 20px 0 0;
    touch-action: none;
  }
  .inspector-drag-indicator {
    width: 40px;
    height: 5px;
    background-color: var(--border-input);
    border-radius: 3px;
  }
  .inspector-panel.is-open {
    transform: translateY(0);
  }
  .inspector-scroll-container {
    flex: 1;
    overflow-y: auto;
    padding-bottom: 10px;
    overscroll-behavior: contain;
    will-change: scroll-position;
  }
  .inspector-footer {
    flex-shrink: 0;
    background: var(--bg-section);
    border-top: 1px solid var(--border-color);
    padding: 6px 15px calc(4px + env(safe-area-inset-bottom)) 15px !important;
    min-height: 38px;
  }
  .inspector-footer span {
    font-size: 0.8rem !important;
  }
  .mode-gear-control .seg-btn {
    padding: 3px 10px !important;
    font-size: 0.72rem !important;
  }
  body.panels-open::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100% - 55px - env(safe-area-inset-bottom));
    background: rgba(0, 0, 0, 0.05);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 199;
    pointer-events: auto;
    transition: opacity 0.3s ease;
  }
  .toast-notification-container {
    bottom: auto !important;
    top: 30px !important;
    left: 20px !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: 80vw;
    align-items: flex-start !important;
  }
  .toast-notification {
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    text-align: left;
    margin-bottom: 10px;
    transform: translateX(-120%);
    max-width: 85vw !important;
    animation:
      toast-in-left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards,
      toast-out-left 0.4s 4s forwards !important;
  }
  .mobile-edit-pencil {
    display: flex;
  }
  .resizer,
  .resizer-left {
    display: none;
  }
  #mobile-simulation-controls .for-mobile-only {
    display: block;
  }
  #mobile-simulation-controls .for-desktop-only {
    display: none;
  }
  .inspector-panel.is-dragging-slider {
    opacity: 0.3 !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    background-color: rgba(0, 0, 0, 0.2) !important;
    pointer-events: none;
  }
  /* 当编辑面板（Inspector）打开时，隐藏底栏  */
  body.inspector-open .app-header {
    display: none !important;
  }
  /* 编辑面板打开时，面板底部贴合屏幕底部 */
  body.inspector-open .inspector-panel.is-open {
    bottom: 0 !important;
  }
  /* Toast 容器需要在底栏、面板之上 */
  .toast-notification-container {
    z-index: 2000000 !important;
  }
}
@media (min-width: 1025px) {
  #mobile-simulation-controls .for-mobile-only {
    display: none;
  }
  #mobile-simulation-controls .for-desktop-only {
    display: block;
  }
  .inspector-panel .editor-section > legend {
    position: sticky;
    top: 0;
    z-index: 10;
  }
  html.dark-mode .inspector-panel .editor-section > legend {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  }
  .inspector-panel.is-dragging-slider {
    pointer-events: none;
  }
}
.music-card-vinyl {
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 25px;
}
.music-card-vinyl .music-info {
  text-align: center;
  gap: 5px;
}
.vinyl-player {
  position: relative;
  width: 120px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  flex-shrink: 0;
}
.vinyl-record {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #111;
  background-image: repeating-radial-gradient(
    circle at center,
    #333,
    #333 1px,
    #111 1px,
    #111 3px
  );
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 0 15px rgba(0, 0, 0, 0.5),
    inset 0 0 5px rgba(255, 255, 255, 0.1);
  animation: spin 8s linear infinite;
}
.vinyl-label {
  width: 45%;
  height: 45%;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid #555;
  background-color: #fff;
}
.vinyl-tonearm {
  position: absolute;
  top: -10px;
  right: -10px;
  width: 75px;
  height: 6px;
  background-color: #d1d5db;
  border-radius: 3px;
  transform-origin: 90% 50%;
  transform: rotate(-35deg);
  z-index: 20;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.2);
  pointer-events: none;
}
.vinyl-tonearm::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -3px;
  width: 14px;
  height: 12px;
  background-color: #374151;
  border-radius: 2px;
  transform: rotate(25deg);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.vinyl-tonearm::after {
  content: "";
  position: absolute;
  right: -6px;
  top: -6px;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle, #f3f4f6 40%, #9ca3af 100%);
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
@keyframes highlight {
  from {
    background-color: rgba(0, 122, 255, 0.2);
  }
  to {
    background-color: transparent;
  }
}
.highlight-animation {
  animation: highlight 1.5s ease-out;
}
@media (max-width: 768px) {
  #cropper-modal .modal-container {
    padding: 15px;
  }
  .cropper-main-content {
    gap: 10px;
  }
  .cropper-img-container {
    flex: 4;
  }
  .cropper-sidebar {
    flex: 1;
    min-width: 120px;
  }
  #filter-sliders-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}
.showcase-card {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--card-bg-color, var(--g-comp-bg-color));
  color: var(--card-text-color, var(--g-comp-text-color));
  border-radius: var(--g-comp-border-radius);
  padding: var(--g-comp-padding);
  transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
  text-align: left;
}
.showcase-cover {
  object-fit: cover;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}
.showcase-info {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 2;
  min-width: 0;
}
.showcase-meta {
  font-size: 0.85em;
  opacity: 0.7;
  margin-bottom: 5px;
}
.showcase-rating {
  color: #ffb400;
  font-size: 0.9em;
  margin: 5px 0;
  letter-spacing: 1px;
}
.showcase-comment {
  font-size: 0.95em;
  line-height: 1.6;
  margin: 10px 0;
  white-space: pre-wrap;
}
.showcase-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
  width: 100%;
}
.showcase-tag {
  font-size: 0.75em;
  padding: 3px 8px;
  border-radius: 4px;
  background-color: rgba(127, 127, 127, 0.1);
  border: 1px solid rgba(127, 127, 127, 0.1);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-block;
}
.showcase-card[data-style="magazine"] {
  overflow: visible;
  margin-bottom: 0px;
  position: relative;
  z-index: 2;
}
.showcase-card[data-style="magazine"][data-layout="horizontal"] {
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}
.showcase-card[data-style="magazine"] .showcase-cover {
  border-radius: 4px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  background-color: var(--card-bg-color, #fff);
}
.showcase-card[data-style="magazine"][data-layout="vertical"] .showcase-cover {
  width: calc(100% - 30px);
  height: 200px;
  margin-top: calc(-1 * var(--g-comp-padding) - 20px);
  margin-bottom: 15px;
  margin-left: auto;
  margin-right: auto;
  border-radius: 8px;
}
body.mobile-full-view-mode .preview-panel {
  padding: 20px 0 !important;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  justify-content: flex-start;
}
body.mobile-full-view-mode .preview-wrapper {
  width: 600px !important;
  max-width: none !important;
  transform-origin: top left !important;
  margin: 0 !important;
  -webkit-font-smoothing: subpixel-antialiased;
  position: relative;
  left: 0;
}
body.mobile-full-view-mode .mobile-edit-pencil {
  width: 32px;
  height: 32px;
  font-size: 1.1rem;
}
.preview-item-wrapper {
  overflow: visible !important;
  isolation: isolate;
}
.showcase-card[data-style="magazine"][data-layout="horizontal"]
  .showcase-cover {
  width: 100px;
  height: 140px;
  margin-top: calc(-1 * var(--g-comp-padding) - 15px);
  border-radius: 6px;
}
.showcase-card[data-style="magazine"] .showcase-comment {
  border-left: 3px solid var(--g-theme-accent, #007aff);
  padding-left: 12px;
  font-family: "Songti SC", "Noto Serif SC", serif;
  font-style: italic;
  background: linear-gradient(
    90deg,
    rgba(127, 127, 127, 0.05) 0%,
    rgba(127, 127, 127, 0) 100%
  );
  padding: 10px 12px;
  border-radius: 0 8px 8px 0;
}
.showcase-card[data-style="poster"] {
  color: #ffffff !important;
  border: none !important;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: var(--g-comp-border-radius);
  isolation: isolate;
  position: relative;
  background: var(--poster-bg, #222);
  padding: 25px;
  text-align: center;
}
.showcase-card[data-style="poster"]::before {
  display: none;
}
.showcase-card[data-style="poster"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0, 0, 0, 0.2) 100%
  );
  z-index: -1;
  pointer-events: none;
}
.showcase-card[data-style="poster"] .showcase-cover {
  width: 120px;
  height: 120px;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  align-self: center;
}
.showcase-card[data-style="poster"] .showcase-info {
  align-items: center;
  width: 100%;
  text-align: center;
}
.showcase-card[data-style="poster"] .showcase-info > * {
  text-align: center;
  width: 100%;
}
.showcase-card[data-style="poster"] .showcase-meta {
  opacity: 0.85;
  color: #f0f0f0;
}
.showcase-card[data-style="poster"] .showcase-tags {
  justify-content: center;
}
.showcase-card[data-style="poster"] .showcase-tag {
  background-color: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  backdrop-filter: blur(4px);
}
.showcase-card[data-style="book"] {
  flex-direction: row !important;
  align-items: flex-start !important;
  padding: 20px !important;
  overflow: hidden;
  position: relative;
  background-color: #fffdf9;
  font-family: "Songti SC", "Noto Serif SC", "SimSun", serif !important;
}
.showcase-card[data-style="book"]::after {
  content: "";
  position: absolute;
  top: 0;
  right: 25px;
  width: 30px;
  height: 55px;
  background-color: var(--accent-color, #c0392b);
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  z-index: 10;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.showcase-card[data-style="book"] .showcase-cover {
  width: 100px !important;
  height: 145px !important;
  object-fit: cover;
  border-left: 4px solid rgba(60, 60, 60, 0.15);
  border-radius: 3px 6px 6px 3px;
  box-shadow:
    inset 3px 0 6px rgba(0, 0, 0, 0.1),
    4px 5px 15px rgba(0, 0, 0, 0.15);
  flex-shrink: 0;
  margin-right: 20px;
  z-index: 2;
}
.showcase-card[data-style="book"] .showcase-info {
  flex: 1;
  z-index: 2;
  padding-top: 5px;
}
.showcase-card[data-style="book"] .preview-card-title {
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  font-weight: bold;
  letter-spacing: 1px;
}
.showcase-card[data-style="book"] .showcase-meta {
  font-style: italic;
  opacity: 0.8;
  font-size: 0.85em;
}
.showcase-card[data-style="book"] .showcase-rating {
  display: none;
}
.showcase-card.ticket-style {
  padding: 0 !important;
  flex-direction: row !important;
  background-color: var(--card-bg-color, #ffffff) !important;
  color: var(--card-text-color, #333);
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  --stub-width: 90px;
  -webkit-mask-image:
    radial-gradient(
      circle at calc(100% - var(--stub-width)) 0,
      transparent 8px,
      black 8.5px
    ),
    radial-gradient(
      circle at calc(100% - var(--stub-width)) 100%,
      transparent 8px,
      black 8.5px
    );
  mask-image:
    radial-gradient(
      circle at calc(100% - var(--stub-width)) 0,
      transparent 8px,
      black 8.5px
    ),
    radial-gradient(
      circle at calc(100% - var(--stub-width)) 100%,
      transparent 8px,
      black 8.5px
    );
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
.ticket-comment {
  font-size: 0.75rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
  padding-top: 6px;
  margin-top: auto;
  font-style: italic;
  opacity: 0.85;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ticket-left {
  flex: 1;
  padding: 15px 10px 15px 15px;
  display: flex;
  gap: 12px;
  min-width: 0;
}
.ticket-poster-area img {
  width: 70px;
  height: 100px;
  object-fit: cover;
  border-radius: 2px;
  filter: sepia(0.2) contrast(1.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.ticket-info-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: "Courier New", Courier, monospace;
  min-width: 0;
}
.ticket-header {
  font-size: 0.6rem;
  letter-spacing: 2px;
  opacity: 0.5;
  margin-bottom: 2px;
  font-weight: bold;
  text-transform: uppercase;
}
.ticket-title {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-meta {
  font-size: 0.75rem;
  opacity: 0.7;
  margin: 2px 0 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ticket-comment {
  font-size: 0.75rem;
  border-top: 1px dashed rgba(0, 0, 0, 0.15);
  padding-top: 6px;
  margin-top: auto;
  font-style: italic;
  opacity: 0.85;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.showcase-card.ticket-style .ticket-right {
  position: relative;
  overflow: hidden;
}
.showcase-card.ticket-style svg.real-barcode {
  transform: rotate(90deg);
  transform-origin: center center;
  width: 80px !important;
  height: 100% !important;
  display: block !important;
}
.ticket-barcode {
  display: none !important;
}
.preview-header[data-style="id-card-v"] svg.real-barcode {
  margin-top: auto;
  opacity: 0.8;
  mix-blend-mode: multiply;
}
.ticket-barcode-wrapper {
  width: 30px;
  height: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.showcase-card.ticket-style svg.real-barcode {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  width: 140px !important;
  height: 30px !important;
  opacity: 0.8;
  mix-blend-mode: multiply;
  display: block;
}
.ticket-barcode {
  display: none !important;
}
/* Consolidated with line 5415 */
.ticket-right {
  width: var(--stub-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  background-color: rgba(0, 0, 0, 0.03);
  position: relative;
  border-left: 2px dashed rgba(0, 0, 0, 0.15);
  gap: 8px;
}
.ticket-barcode {
  width: 24px;
  height: 90%;
  opacity: 0.75;
  background: repeating-linear-gradient(
    180deg,
    currentColor 0,
    currentColor 1px,
    transparent 1px,
    transparent 3px,
    currentColor 3px,
    currentColor 5px,
    transparent 5px,
    transparent 6px
  );
  filter: contrast(1.2);
}
.ticket-right-text-group {
  display: flex;
  flex-direction: row;
  gap: 4px;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.ticket-stub-title {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 0.6rem;
  letter-spacing: 3px;
  opacity: 0.3;
  font-weight: 900;
  position: static;
  transform: rotate(180deg);
  white-space: nowrap;
}
.ticket-stub-no {
  font-family: "Courier New", "Consolas", monospace;
  font-size: 0.65rem;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
  opacity: 0.6;
  white-space: nowrap;
  font-weight: bold;
  letter-spacing: 1px;
}
.preview-card-inner[data-card-style="grid"] {
  background-color: #ffffff !important;
  color: #333333 !important;
  background-image:
    linear-gradient(#e0e0e0 1px, transparent 1px),
    linear-gradient(90deg, #e0e0e0 1px, transparent 1px) !important;
  background-size: 24px 24px !important;
  background-position: -1px -1px !important;
  border-top: 2px solid #e53935 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  line-height: 24px !important;
  padding-top: 12px !important;
}
.preview-card-inner[data-card-style="grid"] .preview-card-title {
  color: #1a237e !important;
  font-weight: 700;
  background: #ffffff;
  display: inline-block;
  padding: 0 8px;
  margin-bottom: 12px;
  border-radius: 4px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.preview-card-inner[data-card-style="paper"] {
  background-color: #d2b48c !important;
  color: #3a2409 !important;
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.2) !important;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paperFiber'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paperFiber)' opacity='0.55'/%3E%3C/svg%3E"),
    radial-gradient(
      circle at 80% 20%,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(184, 134, 11, 0.1) 40%,
      rgba(139, 69, 19, 0.3) 100%
    ),
    radial-gradient(
      circle at 10% 90%,
      rgba(255, 255, 210, 0.3) 0%,
      rgba(184, 134, 11, 0.1) 50%,
      rgba(139, 69, 19, 0.2) 100%
    ) !important;
  background-size:
    150px 150px,
    cover,
    cover !important;
  background-blend-mode: multiply, overlay, normal !important;
  box-shadow:
    inset 0 0 50px rgba(80, 42, 4, 0.2),
    inset 0 0 0 1px rgba(80, 42, 4, 0.3) !important;
  border: 1px solid rgba(80, 42, 4, 0.1) !important;
}
.preview-card-inner[data-card-style="paper"] .preview-card-title {
  color: #4a2a0c !important;
  border-bottom: 1px solid rgba(74, 42, 12, 0.3);
  padding-bottom: 8px;
  font-weight: 700;
}
.preview-card-inner[data-card-style="terminal"] {
  background-color: rgba(26, 27, 38, var(--card-bg-opacity, 1)) !important;
  color: var(--card-text-color, #4af626) !important;
  font-family:
    "Fusion Pixel 12px Mono latin", "Consolas", "Monaco", monospace !important;
  font-size: 0.95em !important;
  letter-spacing: 1px;
  padding-top: 38px !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important;
  border: 1px solid #333 !important;
  text-shadow: 0 0 2px currentColor;
}
.preview-card-inner[data-card-style="browser"] {
  background-color: rgba(255, 255, 255, var(--card-bg-opacity, 1)) !important;
  padding: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
}
.preview-card-inner[data-card-style="browser"] .preview-card-content {
  padding: var(--g-comp-padding) !important;
  flex: 1;
}
.preview-card-inner[data-card-style="win95"] {
  background-color: rgba(192, 192, 192, var(--card-bg-opacity, 1)) !important;
  color: var(--card-text-color, #000000) !important;
  border: 2px solid #dfdfdf !important;
  box-shadow:
    inset 1px 1px 0 #ffffff,
    inset -1px -1px 0 #000000,
    inset -2px -2px 0 #808080,
    2px 2px 5px rgba(0, 0, 0, 0.3) !important;
  border-radius: 0 !important;
  padding: 2px !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.preview-card-inner[data-card-style="win95"] .win95-header {
  background: #000080;
  color: #ffffff;
  padding: 2px 4px;
  font-family: "Fusion Pixel 12px Mono latin", "Consolas", sans-serif;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
  white-space: nowrap;
}
.preview-card-inner[data-card-style="win95"] .win95-controls {
  display: flex;
  gap: 2px;
}
.preview-card-inner[data-card-style="win95"] .win95-btn {
  width: 16px;
  height: 14px;
  background: #c0c0c0;
  border: 1px solid #ffffff;
  border-right-color: #000000;
  border-bottom-color: #000000;
  box-shadow: inset -1px -1px 0 #808080;
  color: #000000;
  font-size: 10px;
  line-height: 12px;
  text-align: center;
  font-family: sans-serif;
  cursor: default;
}
.preview-card-inner[data-card-style="win95"] .preview-card-content {
  padding: 10px;
  font-family: "Fusion Pixel 12px Mono latin", "宋体", "SimSun", serif;
  line-height: 1.4;
  flex: 1;
}
.preview-card-inner[data-card-style="terminal"]::before {
  content: "● ● ●  Terminal";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  background: #24283b;
  border-bottom: 1px solid #111;
  color: #565f89;
  font-size: 10px;
  line-height: 28px;
  padding-left: 10px;
  font-family: sans-serif;
  white-space: pre;
  border-radius: 5px 5px 0 0;
  z-index: 10;
  pointer-events: none;
  letter-spacing: 2px;
  text-align: left;
}
.preview-card-inner[data-card-style="terminal"] .preview-card-title {
  font-weight: bold;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
  padding-bottom: 8px;
  margin-bottom: 10px;
}
.preview-card-inner[data-card-style="terminal"] .preview-card-title::before {
  content: "> ";
  opacity: 0.6;
}
.preview-card-inner[data-card-style="terminal"] .preview-card-content::after {
  content: "▋";
  animation: terminal-blink 1s step-end infinite;
  margin-left: 2px;
  opacity: 0.8;
}
@keyframes terminal-blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.showcase-card[data-style="steam"] {
  flex-direction: row !important;
  align-items: stretch !important;
  padding: 0 !important;
  background: linear-gradient(to bottom, #1b2838 0%, #1b2838 100%) !important;
  border: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) !important;
  min-height: 180px;
  height: auto !important;
  overflow: hidden;
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif !important;
  color: #c6d4df !important;
}
.showcase-card[data-style="steam"] .showcase-cover {
  width: 160px !important;
  min-width: 160px !important;
  height: 100% !important;
  object-fit: cover;
  border-radius: 0 !important;
  margin: 0 !important;
  border-right: 1px solid #000;
  background-color: #000;
}
.showcase-card[data-style="steam"] .showcase-info {
  flex-grow: 1;
  padding: 12px 15px;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.showcase-card[data-style="steam"] h3 {
  margin-bottom: 4px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 8px;
}
.showcase-card[data-style="steam"] h3 span {
  font-size: 1.3em;
  color: #ffffff !important;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.5);
  font-weight: normal;
}
.showcase-card[data-style="steam"] .showcase-rating {
  display: none;
}
.showcase-card[data-style="steam"] .showcase-comment {
  background-color: #16202d;
  border: 1px solid #45556c;
  padding: 0;
  margin: 10px 0;
  font-size: 0.9em;
  color: #acb2b8 !important;
  line-height: 1.5;
  font-style: normal !important;
  border-radius: 2px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}
.showcase-card[data-style="steam"][data-is-bad="true"] .showcase-comment {
  border-color: #583333;
}
.steam-review-header {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: rgba(0, 0, 0, 0.2);
  padding: 8px 10px;
  font-size: 1em;
  font-weight: normal;
  border-bottom: 1px solid #45556c;
  color: #66c0f4;
}
.steam-review-header.is-bad {
  color: #a34c26;
  background-color: rgba(40, 10, 10, 0.2);
  border-bottom-color: #583333;
}
.steam-review-header .iconify {
  font-size: 1.2em;
}
.steam-review-content {
  padding: 10px;
  white-space: pre-wrap;
}
.showcase-card[data-style="steam"] .showcase-cover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  border-radius: 0 !important;
  border: none;
}
.showcase-card[data-style="steam"] h3 span {
  color: #ffffff !important;
  font-size: 1.2em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.showcase-card[data-style="steam"] .showcase-meta {
  color: #8f98a0 !important;
  font-size: 0.85em;
}
.showcase-card[data-style="steam"] .showcase-rating {
  display: none;
}
.showcase-card[data-style="steam"] .showcase-tag {
  background-color: rgba(103, 193, 245, 0.2);
  color: #67c1f5;
  border: none;
  border-radius: 2px;
}
.preview-items-container figure.polaroid-style {
  background: #fff;
  padding: 8px 8px 12px 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 0;
  height: auto !important;
  color: #333 !important;
}
.preview-items-container figure.polaroid-style:hover {
  transform: scale(1.02) rotate(0deg);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  z-index: 10;
}
.preview-items-container figure.polaroid-style .img-wrapper {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #eee;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.preview-items-container figure.polaroid-style img {
  border-radius: 0;
  height: 100% !important;
  object-fit: cover;
}
.preview-items-container figure.polaroid-style figcaption {
  position: static;
  margin-top: 8px;
  width: 100%;
  text-align: center;
  font-family: "LXGW WenKai", "Comic Sans MS", cursive, sans-serif;
  color: #333 !important;
  font-size: 1rem;
  opacity: 0.9;
}
@media (max-width: 768px) {
  #cropper-modal .modal-container {
    width: 95% !important;
    max-width: 95% !important;
    height: auto !important;
    max-height: 90dvh !important;
    padding: 15px !important;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .cropper-main-content {
    flex-direction: column !important;
    gap: 15px !important;
    flex: 0 0 auto !important;
  }
  .cropper-img-container {
    height: 40vh !important;
    min-height: 200px;
    flex: none !important;
    width: 100%;
    margin: 0 auto;
  }
  .cropper-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 0 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  #cropper-preview-canvas {
    max-height: 120px !important;
    margin-bottom: 10px !important;
  }
  .crop-ratios.radio-group {
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 8px !important;
    margin-bottom: 10px !important;
  }
  .crop-ratios label {
    padding: 4px 8px;
    background: var(--bg-input);
    border-radius: 4px;
    margin: 0 !important;
  }
  #filter-controls {
    padding-top: 10px !important;
    margin-top: 10px !important;
    border-top: 1px dashed var(--border-color);
  }
  #filter-sliders-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 15px !important;
  }
  .modal-actions {
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 20px !important;
    padding-bottom: 10px;
  }
  .modal-actions > div {
    flex: 1 1 100% !important;
    display: flex !important;
    gap: 10px !important;
  }
  .modal-actions .btn {
    flex: 1 !important;
    justify-content: center;
    padding: 12px !important;
    font-size: 0.95rem;
  }
}
.preview-item-wrapper {
  background-color: transparent !important;
  overflow: visible !important;
  transition:
    transform 0.3s cubic-bezier(0.2, 0, 0.2, 1),
    border-radius 0.3s ease,
    box-shadow 0.3s ease !important;
}
.preview-item-wrapper {
  z-index: 1;
}
.preview-card-inner,
.music-card-preview,
.showcase-card,
.progress-bar-preview,
.timeline-preview,
.rpg-card-preview {
  z-index: 2;
  position: relative;
}
.social-card-preview {
  text-align: left !important;
  width: 100%;
  background-color: var(--card-bg-color, var(--g-comp-bg-color));
  color: var(--card-text-color, var(--g-comp-text-color));
  border-radius: var(--g-comp-border-radius);
  padding: var(--g-comp-padding);
  font-size: var(--g-comp-content-font-size);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.social-card-preview[data-style="moments"] {
  flex-direction: row;
  gap: 12px;
  align-items: flex-start;
}
.social-card-preview[data-style="moments"] .social-avatar {
  width: 42px;
  height: 42px;
  border-radius: 6px;
  flex-shrink: 0;
  background-color: #eee;
  background-size: cover;
  background-position: center;
}
.social-card-preview[data-style="moments"] .social-right-col {
  flex-grow: 1;
  min-width: 0;
}
.social-card-preview[data-style="moments"] .social-name {
  color: var(--accent-color, #576b95);
  font-weight: bold;
  font-size: 1.05em;
  margin-bottom: 4px;
  line-height: 1.2;
}
.social-card-preview[data-style="moments"] .social-content {
  margin-bottom: 8px;
  line-height: 1.5;
  white-space: pre-wrap;
}
.social-card-preview[data-style="moments"] .social-images-grid {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
  width: 100%;
  max-width: 300px;
}
.social-card-preview[data-style="moments"] .social-images-grid[data-count="1"] {
  grid-template-columns: 1fr;
  max-width: 200px;
}
.social-card-preview[data-style="moments"]
  .social-images-grid[data-count="1"]
  .social-img {
  max-height: 250px;
  object-fit: cover;
}
.social-card-preview[data-style="moments"] .social-images-grid[data-count="2"],
.social-card-preview[data-style="moments"] .social-images-grid[data-count="4"] {
  grid-template-columns: repeat(2, 1fr);
}
.social-card-preview[data-style="moments"] .social-images-grid[data-count="3"],
.social-card-preview[data-style="moments"] .social-images-grid[data-count="5"],
.social-card-preview[data-style="moments"] .social-images-grid[data-count="6"],
.social-card-preview[data-style="moments"] .social-images-grid[data-count="7"],
.social-card-preview[data-style="moments"] .social-images-grid[data-count="8"],
.social-card-preview[data-style="moments"] .social-images-grid[data-count="9"] {
  grid-template-columns: repeat(3, 1fr);
}
.social-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: #f0f0f0;
  cursor: pointer;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.social-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8em;
  color: inherit;
  opacity: 0.6;
  margin-bottom: 8px;
}
.social-comments-area {
  background-color: rgba(0, 0, 0, 0.05) !important;
  border-radius: 4px;
  padding: 6px 10px;
  position: relative;
  margin-top: 5px;
  font-size: 0.9em;
}
.social-card-preview[data-style="moments"] .social-comments-area::before {
  content: "";
  position: absolute;
  top: -6px;
  left: 12px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid rgba(0, 0, 0, 0.05) !important;
}
.social-likes {
  color: var(--accent-color, #576b95);
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  padding-bottom: 4px;
  display: flex;
  align-items: flex-start;
  gap: 5px;
}
.social-likes .iconify {
  transform: translateY(2px);
}
.social-card-preview[data-style="feed"] {
  gap: 8px;
}
.social-card-preview[data-style="feed"] .social-header {
  display: flex;
  gap: 10px;
  align-items: center;
}
.social-card-preview[data-style="feed"] .social-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #eee;
  background-size: cover;
  background-position: center;
}
.social-card-preview[data-style="feed"] .social-name-col {
  display: flex;
  flex-direction: column;
}
.social-card-preview[data-style="feed"] .social-name {
  font-weight: bold;
  font-size: 1.1em;
}
.social-card-preview[data-style="feed"] .social-handle {
  font-size: 0.9em;
  opacity: 0.6;
  font-weight: normal;
}
.social-card-preview[data-style="feed"] .social-images-grid {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: grid;
  gap: 2px;
  margin-top: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  aspect-ratio: auto;
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
}
.social-card-preview[data-style="feed"] .social-images-grid[data-count="1"] {
  grid-template-columns: 1fr;
}
.social-card-preview[data-style="feed"] .social-images-grid[data-count="2"] {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  aspect-ratio: 2/1;
}
.social-card-preview[data-style="feed"] .social-images-grid[data-count="3"] {
  grid-template-columns: 1.2fr minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
  aspect-ratio: 16/9;
}
.social-card-preview[data-style="feed"]
  .social-images-grid[data-count="3"]
  .social-img:nth-child(1) {
  grid-row: 1 / 3;
  grid-column: 1;
  height: 100%;
}
.social-card-preview[data-style="feed"]
  .social-images-grid[data-count="3"]
  .social-img:nth-child(2) {
  grid-row: 1;
  grid-column: 2;
}
.social-card-preview[data-style="feed"]
  .social-images-grid[data-count="3"]
  .social-img:nth-child(3) {
  grid-row: 2;
  grid-column: 2;
}
.social-card-preview[data-style="feed"] .social-images-grid[data-count="4"] {
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 1/1;
}
.social-card-preview[data-style="feed"] .social-images-grid[data-count="5"],
.social-card-preview[data-style="feed"] .social-images-grid[data-count="6"],
.social-card-preview[data-style="feed"] .social-images-grid[data-count="7"],
.social-card-preview[data-style="feed"] .social-images-grid[data-count="8"],
.social-card-preview[data-style="feed"] .social-images-grid[data-count="9"] {
  grid-template-columns: repeat(3, 1fr);
  aspect-ratio: auto;
}
.social-card-preview[data-style="feed"] .social-footer-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  color: inherit;
  opacity: 0.65;
  font-size: 0.9em;
}
.social-card-preview[data-style="feed"] .stat-item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.social-card-preview[data-style="instagram"] {
  background: #ffffff !important;
  border: 1px solid #dbdbdb;
  padding: 0 !important;
  gap: 0 !important;
}
.social-card-preview[data-style="instagram"] .social-header {
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.social-card-preview[data-style="instagram"] .social-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
.social-card-preview[data-style="instagram"] .social-name {
  font-size: 0.9rem !important;
  font-weight: 600;
  margin-left: 10px;
  color: #262626 !important;
}
.social-card-preview[data-style="instagram"] .social-images-grid {
  border-radius: 0;
  border: none;
  margin: 0;
  width: 100% !important;
  aspect-ratio: auto;
  gap: 1px;
  background: #fff;
}
.social-ins-actions {
  padding: 10px 12px 0 12px;
  display: flex;
  justify-content: space-between;
  font-size: 1.5rem;
  color: #262626;
}
.social-ins-likes {
  padding: 0 12px;
  margin-top: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  color: #262626;
}
.social-ins-content {
  padding: 6px 12px 12px 12px;
  font-size: 0.9rem;
  line-height: 1.4;
}
.inspector-social-img-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  margin-top: 5px;
}
.inspector-social-img-item {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 4px;
  overflow: hidden;
  background: #eee;
  border: 1px solid var(--border-color);
  cursor: grab;
}
.inspector-social-img-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.inspector-social-img-item .delete-btn {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  padding: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inspector-social-img-item:hover .delete-btn {
  display: flex;
}
.inspector-social-comment-item {
  background: var(--bg-input);
  padding: 8px;
  border-radius: 4px;
  margin-bottom: 5px;
  border: 1px solid var(--border-color);
}
#mobile-theme-fab {
  display: none;
  position: fixed;
  top: 85px;
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 900;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  font-size: 1.2rem;
}
html.dark-mode #mobile-theme-fab {
  background: #333;
  color: #ffd700;
  border-color: #555;
}
.resource-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 12px;
  padding: 10px 0;
}
.res-img-card {
  position: relative;
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg-image-thumb);
  transition: transform 0.2s;
}
.res-img-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.res-img-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.res-img-actions {
  position: absolute;
  top: 4px;
  right: 4px;
  display: flex;
  gap: 4px;
}
.res-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 0.8rem;
  color: white;
}
.res-btn.delete {
  background: rgba(255, 59, 48, 0.9);
}
.res-btn.delete:hover {
  background: #d32f2f;
}
.res-badge-used {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 122, 255, 0.8);
  color: white;
  font-size: 0.7rem;
  text-align: center;
  padding: 2px 0;
  backdrop-filter: blur(2px);
}
.empty-state {
  text-align: center;
  padding: 40px 0;
  color: var(--text-placeholder);
  font-style: italic;
  grid-column: 1 / -1;
}
#p2p-modal .modal-container {
  max-width: 380px;
  text-align: center;
  padding-top: 30px;
  overflow: hidden;
}
.p2p-ripple-container {
  position: relative;
  width: 80px;
  height: 80px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.p2p-icon {
  font-size: 40px;
  color: var(--color-primary);
  z-index: 2;
  position: relative;
}
.p2p-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  opacity: 0;
  animation: ripple 2s infinite;
}
.p2p-ripple:nth-child(2) {
  animation-delay: 0.5s;
}
.p2p-ripple:nth-child(3) {
  animation-delay: 1s;
}
@keyframes ripple {
  0% {
    width: 40px;
    height: 40px;
    opacity: 0.8;
    border-width: 4px;
  }
  100% {
    width: 120px;
    height: 120px;
    opacity: 0;
    border-width: 0px;
  }
}
.p2p-status-badge {
  display: table;
  margin: 0 auto 15px auto;
  padding: 6px 16px;
  border-radius: 20px;
  background: var(--bg-input);
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: background-color 0.3s, color 0.3s;
  max-width: 100%;
}
.p2p-status-badge.connected {
  background: #e8f5e9;
  color: #2e7d32;
  font-weight: 600;
}
#p2p-qrcode-box {
  background: white;
  padding: 10px;
  border-radius: 12px;
  display: block;
  width: fit-content;
  margin: 0 auto 10px auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  transition: opacity 0.3s;
}
#p2p-qrcode-box img {
  display: block;
  max-width: 100%;
}
#receiver-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--bg-editor);
  z-index: 20000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  text-align: center;
}
.receiver-card {
  background: var(--bg-card);
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 400px;
  border: 1px solid var(--border-color);
}
.receiver-progress {
  width: 100%;
  height: 6px;
  background: var(--bg-input);
  border-radius: 3px;
  margin: 20px 0;
  overflow: hidden;
}
.receiver-progress-bar {
  height: 100%;
  background: var(--color-primary);
  width: 0%;
  transition: width 0.2s linear;
}
#mobile-theme-fab {
  display: none;
  position: fixed;
  top: calc(60px + var(--system-broadcast-height, 0px) + var(--global-banners-height, 0px));
  right: 15px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 900;
  align-items: center;
  justify-content: center;
  color: var(--text-primary);
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
  font-size: 1.2rem;
}
html.dark-mode #mobile-theme-fab {
  background: #333;
  color: #ffd700;
  border-color: #555;
}
@media (max-width: 1024px) {
  #mobile-theme-fab {
    display: flex;
  }
  .app-header .theme-switch-wrapper {
    display: none !important;
  }
  .header-actions-wrapper {
    gap: 15px !important;
  }
}
.save-status-badge {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  background: var(--bg-input);
  padding: 4px 10px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  z-index: 2000;
  white-space: nowrap;
}
@media (max-width: 1024px) {
  .save-status-badge {
    position: fixed;
    top: 15px;
    left: 15px;
    transform: none;
    background: var(--bg-card);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
    color: var(--color-primary);
    top: max(15px, env(safe-area-inset-top) + 10px);
  }
}
#rich-text-editor-container {
  height: 300px !important;
  max-height: 40vh !important;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-color);
  border-radius: 4px;
}
#rich-text-editor-container .ql-container {
  flex: 1;
  overflow-y: auto !important;
  height: auto !important;
}
.preview-card-content .ql-container {
  font-family: inherit;
  font-size: inherit;
  overflow: visible !important;
  text-align: inherit;
  height: auto !important;
  width: 100% !important;
}
.preview-card-content .ql-editor {
  padding: 0 !important;
  line-height: inherit;
  overflow: visible !important;
  min-height: 1em;
  user-select: text !important;
  -webkit-user-select: text !important;
  touch-action: auto !important;
  white-space: pre-wrap !important;
  word-break: break-word !important;
  outline: none !important;
}
.preview-card-content .ql-container {
  outline: none !important;
}
.preview-card-content .ql-editor p {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 1em;
  line-height: inherit;
}

/* Ensure empty paragraphs in content are preserved */
.preview-card-content p:empty,
.preview-card-content p:has(br) {
  min-height: 1em !important;
  display: block !important;
}
.ql-tooltip {
  z-index: 20000 !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap;
  pointer-events: auto !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  width: max-content !important;
  max-width: 100vw !important;
}
@media (min-width: 769px) {
  .ql-bubble .ql-tooltip {
    position: absolute !important;
    transform: translate3d(0, 0, 0);
  }
}
@media (max-width: 768px) {
  .ql-bubble .ql-tooltip.global-fixed-tooltip {
    position: fixed !important;
    top: calc(20px + env(safe-area-inset-top)) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    min-width: 280px !important;
    max-width: 95vw !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    background-color: #333 !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
    opacity: 1 !important;
    z-index: 2147483647 !important;
    margin-top: 0 !important;
  }
  .ql-bubble .ql-tooltip-arrow {
    display: none !important;
  }
  .ql-bubble .ql-tooltip-editor input {
    height: 35px !important;
    width: 150px !important;
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border: none !important;
  }
  .ql-bubble .ql-tooltip button {
    width: 26px !important;
    height: 26px !important;
  }
}
.preview-card-inner.is-editing-rich-text {
  overflow: visible !important;
  height: auto !important;
  min-height: 100%;
}
.preview-card-content.is-editing-rich-text {
  max-height: none !important;
}
.preview-item-wrapper.is-editing-wrapper {
  z-index: 5000 !important;
  position: relative !important;
  contain: none !important;
}
.progress-bar-preview[data-style="battery"] {
  flex-direction: row !important;
  align-items: center;
  gap: 10px;
}
.progress-bar-preview[data-style="battery"] .progress-bar-header {
  display: none !important;
}
.progress-bar-preview[data-style="battery"] .progress-bar-track {
  border: 2px solid var(--g-comp-text-color);
  padding: 2px;
  border-radius: 4px !important;
  background: transparent !important;
  position: relative;
  overflow: visible !important;
  height: 24px !important;
}
.progress-bar-preview[data-style="battery"] .progress-bar-track::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  right: -5px;
  width: 3px;
  background: var(--g-comp-text-color);
  border-radius: 0 2px 2px 0;
}
.progress-bar-preview[data-style="battery"] .progress-bar-fill {
  height: 100% !important;
  border-radius: 1px !important;
  background: linear-gradient(to bottom, #a8e063, #56ab2f);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.progress-bar-preview[data-style="battery"][data-value-low="true"]
  .progress-bar-fill {
  background: linear-gradient(to bottom, #ff5e62, #ff9966);
}
.progress-bar-preview[data-style="retro"] .progress-bar-track {
  border-radius: 0 !important;
  border-top: 2px solid #808080;
  border-left: 2px solid #808080;
  border-right: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  background: #c0c0c0 !important;
  padding: 2px;
  height: 24px !important;
}
.progress-bar-preview[data-style="retro"] .progress-bar-fill {
  border-radius: 0 !important;
  background-color: #000080 !important;
  background-image: repeating-linear-gradient(
    90deg,
    #000080,
    #000080 10px,
    transparent 10px,
    transparent 12px
  ) !important;
  background-size: 100% 100%;
}
.timeline-preview[data-style="receipt"] {
  font-family: "Fusion Pixel 12px Mono latin", "Consolas", monospace;
  background-color: #fffdf5;
  color: #333 !important;
  border: 1px solid #ddd;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  border-top: 2px dashed #ccc;
  border-bottom: 2px dashed #ccc;
  padding-left: 25px;
}
.timeline-preview[data-style="receipt"] .timeline-line {
  border-left: 1px dashed #999;
  background: transparent !important;
  width: 0;
  left: 6px;
}
.timeline-preview[data-style="receipt"] .timeline-dot {
  background: #333;
  border: none;
  width: 6px;
  height: 6px;
  left: -24px;
  top: 5px;
  border-radius: 0;
}
.timeline-preview[data-style="receipt"] .timeline-time {
  font-weight: normal;
  border-bottom: 1px dotted #ccc;
  width: 100%;
  margin-bottom: 2px;
}
.timeline-preview[data-style="metro"] {
  background-color: #f5f5f7;
  padding-left: 50px;
}
.timeline-preview[data-style="metro"] .timeline-line {
  width: 6px;
  background-color: var(--tl-accent-color) !important;
  left: 22px;
  border-radius: 3px;
}
.timeline-preview[data-style="metro"] .timeline-dot {
  width: 16px;
  height: 16px;
  left: -33px;
  top: 2px;
  background: #fff;
  border: 4px solid var(--tl-accent-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.timeline-preview[data-style="metro"] .timeline-time {
  background: var(--tl-accent-color);
  color: #fff;
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.75em;
  font-weight: bold;
}
.timeline-preview[data-style="metro"] .timeline-content {
  font-weight: bold;
  font-size: 1.05em;
}
.grid-preview-container {
  display: grid;
  gap: 10px;
  width: 100%;
}
.grid-preview-container.is-masonry {
  display: flex !important;
  gap: 10px;
  align-items: flex-start;
}
.grid-masonry-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.grid-item {
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease;
}
.grid-img-wrapper {
  width: 100%;
  position: relative;
  background: rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border-radius: var(--grid-radius, 8px);
}
.grid-preview-container[data-style="circle"] .grid-img-wrapper {
  border-radius: 50% !important;
  aspect-ratio: 1 / 1 !important;
  width: 100%;
  overflow: hidden;
  mask-image: radial-gradient(white, black);
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.grid-preview-container[data-style="circle"] .grid-img-wrapper img {
  border-radius: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}
.grid-preview-container[data-style="circle"] .grid-item {
  background-color: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
  border-radius: 0 !important;
}
.grid-preview-container[data-style="circle"] .grid-label {
  margin-top: 10px;
}
.grid-img-wrapper img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}
.grid-preview-container.is-masonry .grid-img-wrapper img {
  position: static;
  height: auto;
  object-fit: contain;
}
.grid-item:hover .grid-img-wrapper img {
  transform: scale(1.05);
}
.grid-label {
  margin-top: 6px;
  font-size: 0.9em;
  text-align: center;
  font-weight: 600;
  opacity: 0.95;
  word-wrap: break-word;
  line-height: 1.3;
}
.grid-subtitle {
  font-size: 0.75em;
  text-align: center;
  opacity: 0.7;
  word-wrap: break-word;
  white-space: pre-line;
  line-height: 1.2;
  margin-top: 2px;
}
.grid-preview-container[data-style="polaroid"] {
  gap: 15px;
}
.grid-preview-container[data-style="polaroid"] .grid-item {
  background: #fff;
  padding: 8px 8px 12px 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transform: rotate(var(--grid-rot, 0deg));
  color: #333 !important;
}
.grid-preview-container[data-style="polaroid"] .grid-img-wrapper {
  border-radius: 0;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.grid-preview-container[data-style="polaroid"] .grid-label {
  font-family: "LXGW WenKai", "Comic Sans MS", cursive, sans-serif;
  margin-top: 8px;
  width: 100%;
  justify-content: center;
}
.grid-preview-container[data-style="inventory"] {
  gap: 4px;
  background: rgba(0, 0, 0, 0.3);
  padding: 4px;
  border-radius: 6px;
  border: 2px solid rgba(255, 255, 255, 0.2);
}
.grid-preview-container[data-style="inventory"] .grid-item {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  padding: 4px;
  aspect-ratio: 1/1;
}
.grid-preview-container[data-style="inventory"] .grid-img-wrapper {
  border-radius: 2px;
  width: 100%;
  height: 100%;
}
.grid-preview-container[data-style="inventory"] .grid-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.7em;
  padding: 2px;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}
.unified-editor-item {
  display: flex;
  align-items: stretch;
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 8px;
  position: relative;
  overflow: hidden;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}
.unified-editor-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.unified-drag-handle {
  width: 28px;
  background: var(--bg-section);
  border-right: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  color: var(--text-placeholder);
  flex-shrink: 0;
  font-size: 1.2rem;
}
.unified-drag-handle:hover {
  color: var(--text-primary);
  background: var(--border-color);
}
.unified-content {
  flex-grow: 1;
  padding: 8px 10px;
  padding-right: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.unified-content.column {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.unified-thumb {
  width: 48px;
  height: 48px;
  min-width: 48px;
  flex-shrink: 0;
  border-radius: 6px;
  background: var(--bg-image-thumb);
  border: 1px solid var(--border-input);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.unified-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.unified-thumb .placeholder-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ccc;
  font-size: 20px;
}
.unified-delete-btn {
  position: static !important;
  width: 36px;
  height: auto !important;
  align-self: stretch;
  background: rgba(0, 0, 0, 0.02);
  color: var(--text-secondary);
  border: none;
  border-left: 1px solid var(--border-color);
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s, background-color 0.2s;
  padding: 0;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.unified-delete-btn:hover {
  background: var(--color-danger);
  color: white !important;
}
.unified-delete-btn .iconify {
  font-size: 14px;
}
.unified-content input[type="text"],
.unified-content textarea {
  background: var(--bg-editor) !important;
  border: 1px solid var(--border-input) !important;
  padding: 6px 8px !important;
  font-size: 0.9em;
  border-radius: 4px;
}
.unified-content input[type="text"]:focus,
.unified-content textarea:focus {
  background: var(--bg-editor) !important;
  border-color: var(--color-primary) !important;
}
#universal-color-picker-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.35);
  z-index: 20000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s;
  pointer-events: auto;
}
#universal-color-picker {
  position: fixed;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
  z-index: 20001;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  box-sizing: border-box;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.2s,
    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#universal-color-picker-overlay.visible {
  opacity: 1;
  visibility: visible;
}
#universal-color-picker.visible {
  opacity: 1;
  visibility: visible;
  transform: scale(1) translateY(0);
}
@media (min-width: 769px) {
  #universal-color-picker-overlay {
    display: none;
  }
  #universal-color-picker {
    width: 260px;
    border-radius: 10px;
    left: 50%;
    top: 50%;
  }
}
@media (max-width: 768px) {
  #universal-color-picker {
    left: 0 !important;
    top: auto !important;
    bottom: 0 !important;
    width: 100% !important;
    border-radius: 16px 16px 0 0;
    border-bottom: none;
    transform: translateY(100%);
    padding-bottom: calc(15px + env(safe-area-inset-bottom));
  }
  #universal-color-picker.visible {
    transform: translateY(0);
  }
  #ucp-eyedropper-btn {
    display: none !important;
  }
}
.ucp-sv-box {
  width: 100%;
  height: 150px;
  background: red;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  cursor: crosshair;
  touch-action: none;
}
.ucp-sv-white {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.ucp-sv-black {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
.ucp-sv-cursor {
  position: absolute;
  width: 12px;
  height: 12px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  transform: translate(-6px, -6px);
  pointer-events: none;
}
.ucp-controls-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.ucp-tool-btn {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  background: var(--bg-input);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
}
.ucp-tool-btn:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.ucp-tool-btn.small {
  width: 24px;
  height: 24px;
  font-size: 0.9em;
}
.ucp-sliders-col {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ucp-slider-track {
  width: 100%;
  height: 12px;
  border-radius: 6px;
  position: relative;
  cursor: pointer;
  touch-action: none;
}
.ucp-slider-track.hue {
  background: linear-gradient(
    to right,
    #f00 0%,
    #ff0 17%,
    #0f0 33%,
    #0ff 50%,
    #00f 67%,
    #f0f 83%,
    #f00 100%
  );
}
.ucp-slider-cursor {
  position: absolute;
  top: 50%;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transform: translate(-7px, -50%);
  pointer-events: none;
}
.ucp-preview-circle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #fff;
  flex-shrink: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.3),
    0 2px 5px rgba(0, 0, 0, 0.05);
  transition: background-color 0.1s;
}
.ucp-inputs-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ucp-input-group {
  display: none;
  flex-grow: 1;
  gap: 5px;
  align-items: center;
  position: relative;
}
.ucp-input-group.active {
  display: flex;
}
.ucp-text-input,
.ucp-num-input {
  width: 100%;
  padding: 6px;
  font-size: 0.85rem;
  border: 1px solid var(--border-input);
  background-color: var(--bg-input);
  color: var(--text-primary);
  border-radius: 6px;
  text-align: center;
  font-family: monospace;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ucp-text-input:focus,
.ucp-num-input:focus {
  border-color: var(--color-primary);
  outline: none;
  background-color: var(--bg-editor);
}
.ucp-text-input:focus,
.ucp-num-input:focus {
  border-color: var(--color-primary);
  outline: none;
  background: var(--bg-editor);
}
.ucp-input-label {
  position: absolute;
  right: 0;
  bottom: -14px;
  width: 100%;
  text-align: center;
  font-size: 0.65rem;
  color: var(--text-secondary);
  pointer-events: none;
}
.ucp-rec-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--border-color);
  padding-top: 8px;
}
.ucp-rec-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ucp-swatch {
  width: 20px;
  height: 20px;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
}
.ucp-swatch:hover {
  transform: scale(1.1);
  z-index: 1;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.ucp-rec-label {
  font-size: 0.7rem;
  color: var(--text-secondary);
  margin-top: 2px;
}
#preview-stickers-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
  border-radius: inherit;
}
.sticker-item {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: center center;
  min-width: 20px;
  min-height: 20px;
}
.sticker-item:active {
  cursor: grabbing;
}
.sticker-item.selected {
  outline: 2px solid var(--color-primary);
  background-color: rgba(0, 122, 255, 0.05);
  z-index: 1000 !important;
}
.sticker-handle {
  display: none;
  position: absolute;
  width: 12px;
  height: 12px;
  background: #fff;
  border: 1px solid var(--color-primary);
  border-radius: 50%;
  z-index: 1001;
}
.sticker-item.selected .sticker-handle {
  display: block;
}
.handle-nw {
  top: -6px;
  left: -6px;
  cursor: nwse-resize;
}
.handle-ne {
  top: -6px;
  right: -6px;
  cursor: nesw-resize;
}
.handle-sw {
  bottom: -6px;
  left: -6px;
  cursor: nesw-resize;
}
.handle-se {
  bottom: -6px;
  right: -6px;
  cursor: nwse-resize;
}
.handle-rot {
  top: -25px;
  left: 50%;
  transform: translateX(-50%);
  cursor: grab;
  background: var(--color-primary);
}
.handle-rot::after {
  content: "";
  position: absolute;
  top: 10px;
  left: 50%;
  width: 1px;
  height: 15px;
  background: var(--color-primary);
  transform: translateX(-50%);
  z-index: -1;
}
.sticker-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  font-size: inherit;
  line-height: 1;
  white-space: nowrap;
}
.sticker-content img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sticker-content .iconify,
.sticker-content svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  stroke: currentColor;
  font-size: inherit;
  display: block;
}
.sticker-content svg.stroked {
  fill: none;
  stroke-width: 2px;
  vector-effect: non-scaling-stroke;
}
.custom-svg-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  vertical-align: middle;
}
.custom-svg-icon svg {
  width: 100% !important;
  height: 100% !important;
  fill: currentColor !important;
  display: block;
}
.icon-grid-item .custom-svg-icon {
  width: 24px !important;
  height: 24px !important;
}
.tag-pill .custom-svg-icon {
  margin-right: 4px;
  font-size: 1.1em;
  vertical-align: -0.15em;
}
.select-icon-btn .custom-svg-icon {
  margin-right: 5px;
  font-size: 1.2em;
  vertical-align: middle;
}
.preview-items-container figure.film-style,
.grid-preview-container[data-style="film"] {
  background-color: #1a1a1a !important;
  color: #ffffff !important;
  padding: 28px 12px 28px 12px !important;
  border-radius: 2px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  overflow: visible !important;
}
.preview-items-container figure.film-style::before,
.preview-items-container figure.film-style::after,
.grid-preview-container[data-style="film"]::before,
.grid-preview-container[data-style="film"]::after {
  content: "";
  position: absolute;
  left: 5px;
  right: 5px;
  height: 12px;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 12px,
    #ffffff 12px,
    #ffffff 20px
  );
  opacity: 0.8;
  pointer-events: none;
}
.preview-items-container figure.film-style::before,
.grid-preview-container[data-style="film"]::before {
  top: 8px;
}
.preview-items-container figure.film-style::after,
.grid-preview-container[data-style="film"]::after {
  bottom: 8px;
}
.preview-items-container figure.film-style img {
  border: 2px solid #ffffff;
  border-radius: 0 !important;
  box-sizing: border-box;
}
.preview-items-container figure.film-style figcaption {
  color: #aaaaaa !important;
  font-family: "Courier New", monospace;
  margin-top: 8px;
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
}
.grid-preview-container[data-style="film"] {
  gap: 15px;
}
.grid-preview-container[data-style="film-strip"] {
  display: flex;
  flex-direction: column;
  gap: 0;
  background-color: #1a1a1a;
  padding: 0 12px;
  border-radius: 2px;
  position: relative;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  width: fit-content;
  margin: 0 auto;
  min-width: 100%;
}
.grid-preview-container[data-style="film-strip"]::before,
.grid-preview-container[data-style="film-strip"]::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 10px;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 12px,
    #ffffff 12px,
    #ffffff 20px
  );
  opacity: 0.8;
  pointer-events: none;
}
.grid-preview-container[data-style="film-strip"]::before {
  left: 4px;
}
.grid-preview-container[data-style="film-strip"]::after {
  right: 4px;
}
.grid-preview-container[data-style="film-strip"] .grid-item {
  background: transparent;
  box-shadow: none;
  padding: 10px 0;
  color: #fff !important;
}
.grid-preview-container[data-style="film-strip"] .grid-img-wrapper {
  border: 2px solid #fff;
  border-radius: 0;
  width: 100%;
}
.grid-preview-container[data-style="film-strip"] .grid-label {
  font-family: "Courier New", monospace;
  font-size: 0.7em;
  margin-top: 4px;
  opacity: 0.7;
}
.grid-preview-container[data-style="film"] .grid-item {
  background: transparent;
  box-shadow: none;
  color: #fff !important;
}
.grid-preview-container[data-style="film"] .grid-img-wrapper {
  border: 2px solid #fff;
  border-radius: 0;
}
body.export-mode .cut-line-preview {
  visibility: hidden !important;
  opacity: 0 !important;
}
.calendar-preview {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--cal-bg);
  color: var(--cal-text);
  border-radius: var(--cal-radius);
  padding: var(--g-comp-padding);
  box-sizing: border-box;
}
.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: bold;
  font-size: 1.1em;
  border-bottom: 2px solid transparent;
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}
.cal-day-name {
  font-size: 0.75em;
  opacity: 0.6;
  margin-bottom: 5px;
}
.cal-day-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  font-size: 0.9em;
  position: relative;
  background: rgba(0, 0, 0, 0.02);
  cursor: pointer;
}
.cal-day-cell.active {
  background: var(--cal-accent);
  color: var(--cal-accent-text, #fff);
  font-weight: bold;
}

.calendar-preview.hide-cell-borders .cal-day-cell {
  border: none;
  background: transparent;
}
.calendar-preview.hide-cell-borders .cal-day-cell.active {
  background: var(--cal-accent);
}
.cal-day-note {
  font-size: 0.6em;
  line-height: 1.2;
  margin-top: 2px;
  opacity: 0.9;
  white-space: normal;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  max-height: 2.4em;
  display: none;
}
.cal-day-cell.has-note {
  justify-content: flex-start;
  padding-top: 4px;
}
.cal-day-cell.has-note .cal-day-note {
  display: block;
}
.cal-day-cell.has-note .cal-day-note.multi-line {
  white-space: pre-wrap;
  text-align: left;
  padding: 0 2px;
}
.calendar-week-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cal-week-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
}
.cal-week-label {
  font-weight: bold;
  width: 40px;
  flex-shrink: 0;
  color: var(--cal-accent);
}
.cal-week-content {
  flex: 1;
  font-size: 0.9em;
  white-space: pre-wrap;
}
.calendar-preview[data-style="cute"] {
  background-color: #fffdf5 !important;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center 20px;
  font-family: "LXGW WenKai", "Comic Sans MS", cursive, sans-serif;
  color: #4a4a4a !important;
  border: 2px solid rgba(0, 0, 0, 0.1);
  box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: visible;
}
.calendar-preview[data-style="cute"]::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  width: 120px;
  height: 35px;
  background-color: var(--cal-accent);
  opacity: 0.4;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  z-index: 0;
  mask-image: linear-gradient(
    90deg,
    transparent 2%,
    black 5%,
    black 95%,
    transparent 98%
  );
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 2%,
    black 5%,
    black 95%,
    transparent 98%
  );
}
.calendar-preview[data-style="cute"] .calendar-header {
  position: relative;
  z-index: 1;
  text-align: center;
  border-bottom: none;
  margin-bottom: 15px;
  font-size: 1.4em;
  letter-spacing: 2px;
  color: var(--cal-accent);
  text-shadow: 1px 1px 0 #fff;
}
.calendar-preview[data-style="cute"] .cal-day-name {
  font-weight: bold;
  color: #888;
  font-size: 0.8em;
}
.calendar-preview[data-style="cute"] .cal-day-cell {
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
  z-index: 1;
  aspect-ratio: auto !important;
  min-height: 45px;
  height: auto !important;
  justify-content: flex-start !important;
  padding-top: 6px;
  padding-bottom: 4px;
}
.calendar-preview[data-style="cute"] .cal-num {
  position: relative;
  z-index: 2;
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1;
}
.calendar-preview[data-style="cute"] .cal-day-cell.active .cal-num {
  color: var(--cal-accent-text, #fff);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.calendar-preview[data-style="cute"] .cal-day-cell.active::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  background-color: var(--cal-accent);
  opacity: 0.9;
  border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
  z-index: 0;
  box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.15);
}
.calendar-preview[data-style="cute"] .cal-day-note {
  display: block !important;
  margin-top: 4px;
  font-size: 0.65rem;
  line-height: 1.2;
  color: #555;
  font-weight: normal;
  width: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  z-index: 2;
  transform: rotate(-2deg);
}
.calendar-preview[data-style="cute"] .cal-day-cell.has-note::before {
  display: none;
}
.calendar-preview[data-style="pixel"] {
  font-family: "Fusion Pixel 12px Mono latin", monospace;
  border: 2px solid var(--cal-text);
  box-shadow: 4px 4px 0 var(--cal-accent);
  border-radius: 0;
}
.calendar-preview[data-style="pixel"] .cal-day-cell.active {
  background: var(--cal-text);
  color: var(--cal-accent-text, var(--cal-bg));
  border-radius: 0;
}
.qa-preview {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  height: 100%;
  background: transparent;
}
.qa-box-q,
.qa-box-a {
  padding: 20px;
  position: relative;
  word-wrap: break-word;
}
.qa-label {
  font-size: 0.75em;
  opacity: 0.6;
  margin-bottom: 5px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.qa-content {
  font-size: 1.1em;
  font-weight: 600;
  line-height: 1.4;
}
.qa-answer-img {
  display: block;
  max-width: 100%;
  border-radius: 8px;
  margin-top: 10px;
  object-fit: cover;
}
.qa-preview[data-style="default"] {
  background: var(--qa-container-bg);
  border-radius: var(--qa-radius);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.qa-preview[data-style="default"] .qa-box-q {
  background: var(--qa-q-bg, rgba(0, 0, 0, 0.03));
  color: var(--qa-q-text);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.qa-preview[data-style="default"] .qa-box-a {
  background: var(--qa-a-bg, transparent);
  color: var(--qa-a-text);
}
.qa-preview[data-style="marshmallow"] {
  gap: 15px;
}
.qa-preview[data-style="marshmallow"] .qa-box-q {
  background: var(--qa-q-bg);
  color: var(--qa-q-text);
  border-radius: 16px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
}
.qa-preview[data-style="marshmallow"] .qa-box-q .qa-label {
  opacity: 0.8;
  color: currentColor;
}
.qa-preview[data-style="marshmallow"] .qa-box-a {
  background: var(--qa-a-bg);
  color: var(--qa-a-text);
  border-radius: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  text-align: center;
  font-size: 0.95em;
}
.qa-preview[data-style="retro"] {
  gap: 0;
  border: 2px solid var(--qa-text-main);
  background: var(--qa-container-bg);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, 0.1);
}
.qa-preview[data-style="retro"] .qa-box-q {
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 19px,
    rgba(0, 0, 0, 0.1) 20px
  );
  background-color: var(--qa-q-bg, transparent);
  color: var(--qa-q-text);
  border-bottom: 2px dashed var(--qa-text-main);
}
.qa-preview[data-style="retro"] .qa-box-a {
  font-family: "Courier New", monospace;
  background-color: var(--qa-a-bg, transparent);
  color: var(--qa-a-text);
}
.letter-preview {
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background-color: var(--letter-bg, #ffffff);
  color: var(--letter-text, #333333);
  border-radius: var(--letter-radius, 8px);
  padding: var(--g-comp-padding);
}
.letter-preview[data-style="email98"] {
  background-color: var(--letter-bg, #c0c0c0) !important;
  border: 2px solid #dfdfdf;
  border-right-color: #808080;
  border-bottom-color: #808080;
  box-shadow: 1px 1px 0 #000;
  padding: 4px !important;
  border-radius: 0 !important;
  font-family: "Pixel Arial", "Consolas", "Courier New", monospace;
}
.letter-preview[data-style="email98"] .letter-header {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: white;
  padding: 4px 6px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  margin-bottom: 4px;
}
.letter-preview[data-style="email98"] .letter-meta-row {
  display: flex;
  font-size: 0.8rem;
  margin-bottom: 2px;
  align-items: baseline;
}
.letter-preview[data-style="email98"] .letter-meta-label {
  width: 60px;
  color: var(--letter-text, #444);
  opacity: 0.8;
  text-align: right;
  padding-right: 8px;
}
.letter-preview[data-style="email98"] .letter-meta-content {
  flex: 1;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #808080;
  border-right-color: #dfdfdf;
  border-bottom-color: #dfdfdf;
  padding: 2px 4px;
  color: var(--letter-text, black);
}
.letter-preview[data-style="email98"] .letter-body {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid #808080;
  border-right-color: #dfdfdf;
  border-bottom-color: #dfdfdf;
  padding: 10px;
  margin-top: 4px;
  min-height: 80px;
  color: var(--letter-text, black);
  overflow-wrap: break-word;
}
.letter-preview[data-style="wax_seal"] {
  background-color: var(--letter-bg, #fdfbf7) !important;
  background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.08'/%3E%3C/svg%3E");
  color: var(--letter-text, #4a3b2a) !important;
  font-family: "Songti SC", "Noto Serif SC", serif;
  padding: 30px 25px !important;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.letter-preview[data-style="wax_seal"] .letter-seal {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bd2c2c;
  opacity: 0.9;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
  transform: rotate(15deg);
}
.letter-preview[data-style="wax_seal"] .letter-header {
  border-bottom: 2px solid rgba(74, 59, 42, 0.2);
  padding-bottom: 15px;
  margin-bottom: 15px;
  text-align: center;
  background: transparent !important;
}
.letter-preview[data-style="wax_seal"] .letter-title {
  font-size: 1.3rem;
  font-weight: bold;
  letter-spacing: 2px;
  margin-bottom: 5px;
}
.letter-preview[data-style="wax_seal"] .letter-date {
  font-size: 0.8rem;
  opacity: 0.6;
  font-style: italic;
}
.letter-preview[data-style="wax_seal"] .letter-body {
  line-height: 1.8;
  font-size: 1rem;
  text-align: justify;
}
.letter-preview[data-style="wax_seal"] .letter-footer {
  margin-top: 20px;
  text-align: right;
  font-style: italic;
  font-weight: bold;
}
.letter-preview[data-style="airmail"] {
  background-color: var(--letter-bg, #fff) !important;
  color: var(--letter-text, #333) !important;
  padding: 25px !important;
  background-image: repeating-linear-gradient(
    135deg,
    #d32f2f 0,
    #d32f2f 15px,
    transparent 15px,
    transparent 25px,
    #1976d2 25px,
    #1976d2 40px,
    transparent 40px,
    transparent 50px
  );
  background-size:
    100% 10px,
    100% 10px,
    10px 100%,
    10px 100%;
  background-repeat: no-repeat;
  background-position: top, bottom, left, right;
  border: 10px solid transparent;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.letter-preview[data-style="airmail"] .letter-inner {
  background: white;
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.letter-preview[data-style="airmail"] .letter-stamp-area {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.letter-preview[data-style="airmail"] .letter-stamp {
  border: 2px dotted #ccc;
  padding: 5px 10px;
  font-size: 0.7rem;
  color: #ccc;
  transform: rotate(-5deg);
  font-weight: bold;
  text-transform: uppercase;
}
.letter-preview[data-style="airmail"] .letter-address-row {
  display: flex;
  font-family: "Courier New", monospace;
  margin-bottom: 15px;
  font-size: 0.9rem;
  border-bottom: 1px dashed #eee;
  padding-bottom: 5px;
}
.letter-preview[data-style="airmail"] .letter-label {
  width: 60px;
  color: #999;
  font-weight: bold;
}
.letter-preview[data-style="airmail"] .letter-body {
  font-family: inherit;
  line-height: 1.6;
}
.achievement-preview {
  text-align: left !important;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  background: var(--ach-bg);
  color: var(--ach-text);
  border-radius: var(--ach-radius);
  position: relative;
  overflow: hidden;
  gap: 15px;
  border: 1px solid transparent;
}
.ach-icon-wrapper {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
.ach-icon-wrapper img {
  width: var(--ach-icon-inner-size, 100%) !important;
  height: var(--ach-icon-inner-size, 100%) !important;
  object-fit: contain;
  display: block;
}
.ach-icon-wrapper .iconify {
  width: var(--ach-icon-inner-size, 100%) !important;
  height: var(--ach-icon-inner-size, 100%) !important;
  display: block !important;
}
/* Ensure IconView wrapper also respects the size */
.ach-icon-wrapper .icon-view-wrapper {
  width: var(--ach-icon-inner-size, 100%) !important;
  height: var(--ach-icon-inner-size, 100%) !important;
}
.ach-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
.ach-top-text {
  font-size: 0.75rem;
  opacity: 0.8;
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ach-title {
  font-weight: bold;
  font-size: 1.1rem;
  line-height: 1.2;
  margin-bottom: 2px;
}
.ach-desc {
  font-size: 0.85rem;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ach-score {
  font-size: 0.9rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 4px;
}
.achievement-preview[data-style="steam"] {
  background: linear-gradient(to right, #1b2838 0%, #2a475e 100%);
  border: 1px solid #3c5d7e;
  border-radius: 2px;
  font-family: Arial, sans-serif;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
.achievement-preview[data-style="steam"] .ach-icon-wrapper {
  border-radius: 0;
  border: 1px solid #000;
}
.achievement-preview[data-style="steam"] .ach-top-text {
  color: #66c0f4;
  font-size: 0.7rem;
}
.achievement-preview[data-style="steam"] .ach-title {
  color: #dcdedf;
  text-shadow: 0 1px 2px #000;
}
.achievement-preview[data-style="steam"] .ach-desc {
  color: #8f98a0;
}
.achievement-preview[data-style="xbox"] {
  background: #171717;
  border-radius: 40px;
  padding: 8px 20px 8px 8px;
  color: #fff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  border: 1px solid #333;
}
.achievement-preview[data-style="xbox"] .ach-icon-wrapper {
  border-radius: 50%;
  background: #107c10;
  color: #fff;
  width: 48px;
  height: 48px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.achievement-preview[data-style="xbox"] .ach-title {
  font-size: 1rem;
}
.achievement-preview[data-style="xbox"] .ach-top-text {
  display: none;
}
.achievement-preview[data-style="xbox"] .ach-score {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.8rem;
}
.achievement-preview[data-style="minecraft"] {
  background: #212121;
  border: 2px solid #555;
  outline: 2px solid #000;
  outline-offset: -4px;
  border-radius: 0;
  padding: 12px;
  font-family: "Fusion Pixel 12px Mono latin", "Consolas", monospace;
  color: #fff;
  image-rendering: pixelated;
}
.achievement-preview[data-style="minecraft"] .ach-icon-wrapper {
  background: #333;
  border: 2px solid #555;
  border-radius: 0;
  width: 48px;
  height: 48px;
}
.achievement-preview[data-style="minecraft"] .ach-top-text {
  color: #ffff55;
  font-weight: bold;
  text-shadow: 2px 2px 0 #000;
  letter-spacing: 0;
}
.achievement-preview[data-style="minecraft"] .ach-title {
  text-shadow: 2px 2px 0 #000;
}
.achievement-preview[data-style="minecraft"] .ach-desc {
  opacity: 1;
  color: #aaaaaa;
  text-shadow: 2px 2px 0 #000;
}
.preview-header[data-style="id-card"] {
  box-shadow:
    0 4px 15px rgba(0, 0, 0, 0.15),
    inset 0 0 0 1px rgba(255, 255, 255, 0.2);
  overflow: hidden !important;
  display: flex;
  flex-direction: row;
  align-items: stretch !important;
  padding: 0 !important;
  isolation: isolate;
}
.preview-header[data-style="social-card"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--social-banner-height, 120px);
  background: var(--social-banner-bg, #667eea);
  background-size: cover;
  background-position: center var(--social-banner-y, 50%);
  z-index: -2;
}
.preview-header[data-style="social-card"][data-banner-shadow="true"]::before {
  box-shadow: inset 0 -60px 50px -20px rgba(0, 0, 0, 0.3);
}

.preview-header[data-style="social-card"][data-banner-shadow="true"]::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--social-banner-height, 120px);
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.4) 0%,
    rgba(0, 0, 0, 0.05) 40%,
    transparent 100%
  );
  z-index: 0;
  pointer-events: none;
  border-radius: 20px 20px 0 0;
}
.id-card-holo-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0.6;
  background: linear-gradient(
    115deg,
    transparent 25%,
    rgba(255, 0, 0, 0.4) 30%,
    rgba(255, 255, 0, 0.4) 35%,
    rgba(0, 255, 0, 0.4) 40%,
    rgba(0, 255, 255, 0.5) 45%,
    rgba(0, 0, 255, 0.4) 50%,
    rgba(255, 0, 255, 0.4) 55%,
    transparent 60%
  );
  background-size: 250% 250%;
  mix-blend-mode: overlay;
  animation: holo-sheen 4s infinite linear;
  filter: contrast(1.2);
}
@keyframes holo-sheen {
  0% {
    background-position: 200% 0%;
  }
  100% {
    background-position: -200% 0%;
  }
}
.id-card-hole {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 11;
}
.id-card-left {
  width: 35%;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.03);
  border-top-left-radius: inherit;
  border-bottom-left-radius: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-right: 1px dashed rgba(0, 0, 0, 0.1);
}
.id-card-right {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
}
.preview-header[data-style="id-card"] #preview-avatar {
  border-radius: var(--avatar-radius, 8px);
  aspect-ratio: 3/4;
  object-fit: cover;
  width: 100% !important;
  height: 100% !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: var(--bg-image-thumb);
}
.preview-header[data-style="id-card"] #preview-avatar-wrapper {
  margin: 0 !important;
  transform: none !important;
  width: 100%;
}
.preview-header[data-style="id-card-v"] {
  flex-direction: column !important;
  text-align: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  aspect-ratio: unset !important;
  height: auto !important;
  min-height: 380px;
  max-width: 320px;
  margin: 0 auto;
  align-items: center !important;
  justify-content: flex-start !important;
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.12),
    0 2px 8px rgba(0, 0, 0, 0.08),
    inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.preview-header[data-style="id-card-v"] .id-card-left {
  width: 100% !important;
  height: auto !important;
  flex: 0 0 auto !important;
  border-right: none !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.04) 0%,
    rgba(0, 0, 0, 0.01) 100%
  );
  padding: 35px 20px 25px 20px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-header[data-style="id-card-v"] .id-card-right {
  width: 100% !important;
  flex: 1 1 auto;
  padding: 20px 24px 50px 24px !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  text-align: center !important;
  gap: 4px;
}
.preview-header[data-style="id-card-v"] #preview-avatar {
  width: 100px !important;
  height: 100px !important;
  border: 3px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 4px 12px rgba(0, 0, 0, 0.12),
    0 0 0 4px rgba(var(--g-theme-primary-rgb, 0, 122, 255), 0.1);
}
.preview-header[data-style="id-card-v"] #preview-nickname {
  font-size: 1.4rem !important;
  margin: 8px 0 4px 0 !important;
  letter-spacing: 0.5px;
}
.preview-header[data-style="id-card-v"] #preview-subtitle {
  font-size: 0.75rem !important;
  text-transform: uppercase;
  letter-spacing: 2px;
  opacity: 0.7;
}
.preview-header[data-style="id-card-v"] #preview-bio {
  font-size: 0.85rem !important;
  margin: 10px 0 !important;
  line-height: 1.5;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.preview-header[data-style="id-card-v"] .tags-container {
  margin-top: auto !important;
  padding-top: 12px !important;
  flex-wrap: wrap;
}
.preview-header[data-style="id-card-v"] #preview-custom-id {
  font-size: 0.7rem !important;
  opacity: 0.6;
  margin-top: 6px !important;
}
.preview-header[data-style="id-card-v"]::after {
  display: none;
}
.preview-header[data-style="social-card"] {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 !important;
  overflow: visible !important;
  position: relative;
  border-radius: 20px !important;
  isolation: isolate;
}
.preview-header[data-style="social-card"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--social-banner-height, 120px);
  background: var(
    --social-banner-bg,
    linear-gradient(135deg, var(--g-theme-accent, #4facfe) 0%, #00f2fe 100%)
  );
  background-size: cover;
  background-position: center var(--social-banner-y, center);
  border-radius: inherit;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  z-index: 0;
  transition:
    border-radius 0.3s ease,
    -webkit-mask 0.3s ease;
}
.preview-header[data-style="social-card"] {
  background-color: var(--card-bg-color, #fff);
  border-radius: var(--g-comp-border-radius) !important;
}
.preview-header[data-style="social-card"][data-bottom-shape="convex"]::before {
  border-radius: 0 0 50% 50% / 0 0 80px 80px !important;
}
.preview-header[data-style="social-card"][data-bottom-shape="convex"][data-banner-shadow="true"]::after {
  border-radius: 20px 20px 50% 50% / 20px 20px 80px 80px !important;
}
.preview-header[data-style="social-card"][data-bottom-shape="concave"]::before {
  -webkit-mask: radial-gradient(
    120% 100% at 50% 120%,
    transparent 50%,
    black 50.5%
  );
  mask: radial-gradient(120% 100% at 50% 120%, transparent 50%, black 50.5%);
  border-radius: 20px 20px 0 0;
}
.preview-header[data-style="social-card"][data-bottom-shape="concave"][data-banner-shadow="true"]::after {
  -webkit-mask: radial-gradient(
    120% 100% at 50% 120%,
    transparent 50%,
    black 50.5%
  );
  mask: radial-gradient(120% 100% at 50% 120%, transparent 50%, black 50.5%);
}
.preview-header[data-style="social-card"] .id-card-left {
  position: relative;
  z-index: 2;
  width: 100% !important;
  padding-top: calc(var(--social-banner-height, 120px) - 45px) !important;
  padding-bottom: 15px !important;
  background: transparent !important;
  border: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible !important;
}
.preview-header[data-style="social-card"][data-bottom-shape="concave"] .id-card-left {
  padding-top: calc(var(--social-banner-height, 120px) - 75px) !important;
}
.preview-header[data-style="social-card"][data-bottom-shape="convex"] .id-card-left {
  padding-top: calc(var(--social-banner-height, 120px) - 15px) !important;
}
.preview-header[data-style="social-card"] #preview-avatar {
  border-radius: 50%;
  border: 4px solid var(--card-bg-final, #fff) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  background-color: #fff;
}
.preview-header[data-style="social-card"] #preview-avatar-wrapper {
  position: relative;
  z-index: 5;
}
.preview-header[data-style="social-card"] .id-card-right {
  width: 100% !important;
  padding: 5px 24px 24px 24px !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.preview-header[data-style="social-card"] #preview-nickname {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
}
.preview-header[data-style="social-card"] #preview-subtitle {
  font-size: 0.85rem !important;
  opacity: 0.65;
  margin: 0 !important;
}
.preview-header[data-style="social-card"] #preview-bio {
  font-size: 0.9rem !important;
  margin: 8px 0 12px 0 !important;
  line-height: 1.55;
  max-width: 100%;
  word-break: break-word;
  white-space: pre-wrap;
}
.preview-header[data-style="social-card"] .tags-container {
  flex-wrap: wrap;
  gap: 8px;
  width: 100%;
}
.preview-header[data-style="social-card"] .tag-pill {
  padding: 6px 14px !important;
  border-radius: 20px !important;
  font-size: 0.8rem !important;
  font-weight: 500;
}
.preview-header[data-style="social-card"] .id-card-hole,
.preview-header[data-style="social-card"] .id-card-holo-layer,
.preview-header[data-style="social-card"] #preview-custom-id {
  display: none !important;
}
.preview-header[data-style="ticket"] {
  display: flex;
  flex-direction: row;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  padding: 0 !important;
  min-height: 180px;
  font-family: "Courier New", "Consolas", monospace;
  color: #1e293b;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.ticket-main {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
.ticket-main::after {
  content: "";
  position: absolute;
  right: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  background-image: radial-gradient(
    circle at center,
    #e2e8f0 5px,
    transparent 5px
  );
  background-size: 12px 16px;
  background-repeat: repeat-y;
  background-position: center top;
}
.ticket-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}
.ticket-airline {
  font-size: 1.1rem;
  font-weight: bold;
  color: #1e40af;
  letter-spacing: 2px;
}
.ticket-flight-no {
  font-size: 0.9rem;
  color: #64748b;
  font-weight: bold;
}
.ticket-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.ticket-passenger {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin-top: 5px;
}
.ticket-passenger-label {
  font-size: 0.65rem;
  color: #94a3b8;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 2px;
  text-align: left;
}
.preview-header[data-style="ticket"] #preview-avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 6px !important;
  border: 2px solid #1e40af !important;
  margin: 0 !important;
}
.ticket-passenger-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  text-align: left !important;
  align-items: flex-start;
}
.preview-header[data-style="ticket"] #preview-nickname {
  text-align: left !important;
  margin: 0 !important;
  font-size: 1.1rem !important;
  line-height: 1.2 !important;
}
.preview-header[data-style="ticket"] .ticket-subtitle {
  text-align: left !important;
  margin: 0 !important;
  opacity: 0.7;
}
.preview-header[data-style="ticket"] #preview-avatar-wrapper {
  margin: 0 !important;
  transform: none !important;
}
.ticket-passenger-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.ticket-subtitle {
  font-size: 0.8rem;
  color: #64748b;
  font-style: italic;
}
.ticket-bio {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 2px;
  line-height: 1.3;
}
.ticket-label {
  font-size: 0.65rem;
  color: #94a3b8;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.ticket-name {
  font-size: 1.1rem;
  font-weight: bold;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ticket-route {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 8px 0;
}
.ticket-city {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ticket-code {
  font-size: 1.4rem;
  font-weight: bold;
  color: #1e40af;
  letter-spacing: 2px;
}
.ticket-arrow {
  font-size: 1.5rem;
  color: #3b82f6;
  animation: ticket-fly 2s ease-in-out infinite;
}
@keyframes ticket-fly {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(5px);
  }
}
.ticket-details {
  display: flex;
  gap: 20px;
  margin-top: 4px;
}
.ticket-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ticket-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.ticket-tags-container .tag-item {
  background: rgba(30, 64, 175, 0.1);
  color: #1e40af;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.7rem;
  border: 1px solid rgba(30, 64, 175, 0.2);
}
.ticket-value {
  font-size: 0.95rem;
  font-weight: bold;
  color: #334155;
}
.ticket-seat {
  color: #dc2626;
  font-size: 1.1rem;
}
.ticket-stub {
  width: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  background: var(
    --ticket-stub-bg,
    linear-gradient(180deg, #1e40af 0%, #1e3a8a 100%)
  );
  color: var(--ticket-stub-text, #fff);
  gap: 10px;
  position: relative;
}
.ticket-stub::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0;
  bottom: 0;
  width: 12px;
  background-image: radial-gradient(
    circle at center,
    #f8fafc 5px,
    transparent 5px
  );
  background-size: 12px 16px;
  background-repeat: repeat-y;
  background-position: center top;
}
.ticket-barcode-wrapper {
  width: 50px;
  height: 100%;
  min-height: 140px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.preview-header[data-style="ticket"] svg.real-barcode {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg) !important;
  width: 180px !important;
  height: 45px !important;
  opacity: 0.95;
  display: block;
}
.ticket-stub-info {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  letter-spacing: 2px;
}
.ticket-stub-seat {
  font-size: 1.2rem;
  font-weight: bold;
  letter-spacing: 1px;
}
.ticket-stub-flight {
  font-size: 0.7rem;
  opacity: 0.8;
  letter-spacing: 1px;
}
.music-card-preview[data-style="lockscreen"] {
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  padding: 30px 20px;
  overflow: hidden;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
.lockscreen-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(0.7);
  transform: scale(1.2);
  z-index: 0;
}
.music-card-preview[data-style="lockscreen"] > * {
  position: relative;
  z-index: 2;
}
.music-card-preview[data-style="lockscreen"] .music-cover {
  width: 140px;
  height: 140px;
  border-radius: 12px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
  margin-bottom: 20px;
  align-self: center;
}
.music-card-preview[data-style="lockscreen"] .music-info {
  width: 100%;
  padding: 0;
}
.music-card-preview[data-style="lockscreen"] .music-progress-bar {
  background: rgba(255, 255, 255, 0.3);
}
.music-card-preview[data-style="lockscreen"] .music-progress-fill {
  background: #ffffff;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.music-card-preview[data-style="win95"] {
  flex-direction: column;
  padding: 2px;
  background: #c0c0c0;
  border-top: 2px solid #dfdfdf;
  border-left: 2px solid #dfdfdf;
  border-right: 2px solid #000000;
  border-bottom: 2px solid #000000;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
  border-radius: 0;
  font-family: "MS Sans Serif", "Microsoft Sans Serif", "Tahoma", sans-serif;
  color: #000;
  min-height: 180px;
}
.wmp-title-bar {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: white;
  padding: 3px 6px;
  font-weight: bold;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2px;
}
.wmp-screen {
  background: #000;
  border: 2px solid;
  border-color: #808080 #fff #fff #808080;
  height: 100px;
  margin: 5px;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wmp-visualizer {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 100%;
  opacity: 0.3;
  pointer-events: none;
}
.wmp-bar {
  width: 10px;
  background: repeating-linear-gradient(to top, #00ff00, #00ff00 2px, #000 3px);
  height: 20%;
  transition: height 0.1s;
}
.is-playing .wmp-bar {
  animation: wmp-eq 0.6s infinite alternate;
}
.is-playing .wmp-bar:nth-child(2) {
  animation-delay: 0.1s;
}
.is-playing .wmp-bar:nth-child(3) {
  animation-delay: 0.3s;
}
.is-playing .wmp-bar:nth-child(4) {
  animation-delay: 0.2s;
}
.is-playing .wmp-bar:nth-child(5) {
  animation-delay: 0.4s;
}
@keyframes wmp-eq {
  0% {
    height: 10%;
  }
  100% {
    height: 90%;
  }
}
.wmp-controls {
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.wmp-btn-group {
  display: flex;
  gap: 2px;
  justify-content: center;
}
.wmp-btn {
  width: 24px;
  height: 22px;
  background: #c0c0c0;
  border-top: 1px solid #fff;
  border-left: 1px solid #fff;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  cursor: pointer;
}
.wmp-btn:active {
  border-top: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #fff;
  border-bottom: 1px solid #fff;
  transform: translate(1px, 1px);
}
.wmp-status {
  font-size: 10px;
  color: #00ff00;
  position: absolute;
  bottom: 4px;
  left: 6px;
  font-family: monospace;
}
.preview-items-container figure.browser-style {
  background: #fff;
  padding: 0 !important;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
}
.browser-header {
  background: #f0f0f0;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ddd;
  gap: 10px;
}
.browser-dots {
  display: flex;
  gap: 6px;
}
.browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.browser-dot.red {
  background: #ff5f56;
  border: 1px solid #e0443e;
}
.browser-dot.yellow {
  background: #ffbd2e;
  border: 1px solid #dea123;
}
.browser-dot.green {
  background: #27c93f;
  border: 1px solid #1aab29;
}
.browser-address {
  flex: 1;
  background: #fff;
  border-radius: 4px;
  font-size: 0.75rem;
  color: #555;
  padding: 2px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  border: 1px solid #ddd;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}
.preview-items-container figure.browser-style .img-wrapper {
  border-radius: 0;
}
.preview-items-container figure.browser-style figcaption {
  background: #f9f9f9 !important;
  border-top: 1px solid #eee;
  padding: 10px 15px;
  text-align: var(--g-comp-text-align, center);
}
@keyframes toast-in-left {
  from {
    opacity: 0;
    transform: translateX(-100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
@keyframes toast-out-left {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(-100%);
  }
}
.letter-preview[data-style="top_secret"] {
  background-color: #f4ecd8 !important;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.08'/%3E%3C/svg%3E") !important;
  color: #2c1e1a !important;
  font-family: "Courier New", Courier, monospace;
  padding: 50px 40px !important;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.05),
    1px 1px 0 rgba(0, 0, 0, 0.1),
    0 10px 20px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid #dcd0b8;
  overflow: hidden;
  position: relative;
}
.letter-preview[data-style="top_secret"]::before {
  display: none !important;
  content: "CONFIDENTIAL";
  position: absolute;
  top: 25px;
  left: -32px;
  width: 150px;
  text-align: center;
  background: #b71c1c;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 1px;
  padding: 4px 0;
  transform: rotate(-45deg);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  z-index: 10;
  pointer-events: none;
}
.letter-preview[data-style="top_secret"] .letter-stamp-secret {
  position: absolute;
  bottom: 30px;
  right: 30px;
  border: 4px double rgba(183, 28, 28, 0.6);
  color: rgba(183, 28, 28, 0.7);
  padding: 8px 15px;
  font-size: 2.2rem;
  font-weight: 900;
  transform: rotate(-12deg);
  pointer-events: none;
  text-transform: uppercase;
  border-radius: 4px;
  mix-blend-mode: multiply;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='200' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.7'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg width='200' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.7'/%3E%3C/svg%3E");
}
.letter-preview[data-style="top_secret"] .letter-body {
  border-top: 2px solid rgba(0, 0, 0, 0.8);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 25px 0;
  margin: 15px 0;
  line-height: 1.6;
  font-weight: 600;
}
.marquee-container {
  width: 100%;
  overflow: hidden;
  mask-image: linear-gradient(
    to right,
    transparent,
    black 5%,
    black 95%,
    transparent
  );
  -webkit-mask-image: linear-gradient(
    to right,
    transparent,
    black 5%,
    black 95%,
    transparent
  );
  display: flex;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}
.marquee-content {
  display: flex;
  width: max-content;
  white-space: nowrap;
  animation: marquee-scroll linear infinite;
  font-weight: bold;
  text-transform: uppercase;
  will-change: transform;
  -webkit-font-smoothing: antialiased;
  backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
}
.marquee-text-block {
  flex-shrink: 0;
  padding-right: 50px;
  display: inline-block;
}
.marquee-container[data-style="led"] {
  background-color: #000 !important;
  border: 4px solid #333;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
}
.marquee-container[data-style="led"] .marquee-content {
  font-family: "Fusion Pixel 12px Mono latin", monospace;
  text-shadow: 0 0 4px currentColor;
  letter-spacing: 2px;
}
.marquee-container[data-style="breaking"] {
  background-color: #cc0000 !important;
  color: #fff !important;
  border-top: 2px solid #ff3333;
  border-bottom: 2px solid #990000;
  font-style: italic;
}
body.export-mode .marquee-content {
  animation: none !important;
  justify-content: center;
  transform: none !important;
  white-space: normal;
  overflow-wrap: break-word;
}
@keyframes marquee-scroll {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-50%, 0, 0);
  }
}
.music-card-preview[data-style="cd_player"] {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 25px 20px;
  background: linear-gradient(145deg, #e6e6e6, #ffffff);
  border: 1px solid #ccc;
  box-shadow:
    inset 1px 1px 0px #fff,
    5px 5px 15px rgba(0, 0, 0, 0.1);
  color: #333;
  overflow: hidden;
  position: relative;
}
.cd-player-lid {
  width: 180px;
  height: 180px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  box-shadow:
    inset 2px 2px 5px rgba(255, 255, 255, 0.8),
    inset -2px -2px 5px rgba(0, 0, 0, 0.1),
    0 0 0 8px rgba(0, 0, 0, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}
.cd-disc {
  width: 92%;
  height: 92%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 15%,
    transparent 30%,
    rgba(255, 255, 255, 0.4) 45%,
    transparent 60%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 90%
  );
  position: relative;
  animation: spin 4s linear infinite;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.cd-disc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  mix-blend-mode: multiply;
}
.cd-disc::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25px;
  height: 25px;
  background: #e6e6e6;
  border-radius: 50%;
  border: 2px solid #ccc;
  box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 5;
}
.cd-controls-area {
  width: 100%;
  background: #d4d4d4;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #bbb;
  box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
}
.cd-lcd {
  flex: 1;
  background: #8fa382;
  font-family: "Fusion Pixel 12px Mono latin", monospace;
  padding: 4px 8px;
  border-radius: 4px;
  box-shadow: inset 2px 2px 4px rgba(0, 0, 0, 0.2);
  font-size: 0.75rem;
  color: #1a2e12;
  display: flex;
  justify-content: space-between;
}
.apply-global-border:not([data-border-style="pixel"]):not(
    [data-border-style="neo-brutalism"]
  ):not([data-border-style="double-offset"])
  > .marquee-container {
  border: var(--g-border-width) var(--g-border-style, solid)
    var(--g-border-color) !important;
  background-clip: border-box !important;
  border-radius: inherit;
  width: 100%;
}
.chart-preview-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  gap: 15px;
}
.chart-main-area {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.chart-circle {
  width: 100%;
  max-width: 180px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background-image: var(--chart-gradient);
  position: relative;
  flex-shrink: 0;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.chart-preview-container[data-style="ring"] .chart-circle {
  -webkit-mask-image: radial-gradient(transparent 58%, black 60%);
  mask-image: radial-gradient(transparent 58%, black 60%);
}
.chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 15px;
  justify-content: center;
}
.chart-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85em;
  opacity: 0.9;
}
.chart-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.chart-bar-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.chart-bar-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.chart-bar-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.85em;
  font-weight: 600;
}
.chart-bar-track {
  height: 8px;
  width: 100%;
  background: rgba(128, 128, 128, 0.1);
  border-radius: 4px;
  overflow: hidden;
}
.chart-bar-fill {
  height: 100%;
  border-radius: 4px;
}
.ranking-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.rank-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.03);
  transition: background-color 0.2s, box-shadow 0.2s;
  position: relative;
  overflow: hidden;
}
.rank-badge {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 0.9em;
  border-radius: 50%;
  background: #eee;
  color: #555;
  flex-shrink: 0;
  z-index: 2;
}
.rank-img-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.05);
  display: none;
}
.rank-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rank-item.has-image .rank-img-wrapper {
  display: block;
}
.rank-content {
  flex: 1;
  min-width: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.rank-name {
  font-weight: bold;
  font-size: 1.05em;
  line-height: 1.2;
  margin-bottom: 2px;
}
.rank-desc {
  font-size: 0.85em;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-score {
  font-weight: bold;
  opacity: 0.9;
  font-size: 1.1em;
  z-index: 2;
}
.ranking-preview[data-style="card"] .rank-item {
  background: var(--card-bg-color, #fff);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
}
.ranking-preview[data-style="simple"] .rank-item {
  background: transparent;
  border-bottom: 1px dashed rgba(128, 128, 128, 0.2);
  border-radius: 0;
  padding: 8px 0;
}
.ranking-preview[data-style="simple"] .rank-item:last-child {
  border-bottom: none;
}
.ranking-preview[data-style="poster"] {
  gap: 15px;
}
.ranking-preview[data-style="poster"] .rank-item {
  background: linear-gradient(
    90deg,
    rgba(128, 128, 128, 0.05) 0%,
    transparent 100%
  );
  padding: 0;
  border-radius: 8px;
  overflow: hidden;
  height: 60px;
}
.ranking-preview[data-style="poster"] .rank-img-wrapper {
  width: 80px;
  height: 100%;
  border-radius: 0;
  mask-image: linear-gradient(to right, black 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, black 80%, transparent 100%);
}
.ranking-preview[data-style="poster"] .rank-content {
  padding-left: 10px;
}
.ranking-preview[data-style="poster"] .rank-badge {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 20px;
  height: 20px;
  font-size: 0.7em;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.ranking-preview[data-style="poster"] .rank-score {
  padding-right: 15px;
}
/* Multi-selected outlines are handled by components (e.g. PreviewCanvas.vue) */
.preview-item-wrapper.multi-selected {
  outline-offset: 2px;
  z-index: 100;
}
#drag-selection-box {
  position: absolute;
  background: rgba(0, 122, 255, 0.1);
  border: 1px solid rgba(0, 122, 255, 0.5);
  pointer-events: none;
  z-index: 9999;
  display: none;
}
html.native-screenshot-mode {
  position: static !important;
  height: auto !important;
  overflow: visible !important;
  width: auto !important;
}
body.native-screenshot-mode {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  background-color: var(--bg-preview-pane) !important;
  touch-action: auto !important;
  overscroll-behavior: contain !important;
  pointer-events: auto !important;
}
body.native-screenshot-mode .app-header,
body.native-screenshot-mode .layer-panel,
body.native-screenshot-mode .inspector-panel,
body.native-screenshot-mode .resizer,
body.native-screenshot-mode .resizer-left,
body.native-screenshot-mode .mobile-edit-pencil,
body.native-screenshot-mode .preview-overlay,
body.native-screenshot-mode #mobile-theme-fab,
body.native-screenshot-mode #mobile-cloud-fab,
body.native-screenshot-mode .save-status-badge,
body.native-screenshot-mode #storage-warning-banner,
body.native-screenshot-mode #page-limit-warning-banner,
body.native-screenshot-mode #system-broadcast-container {
  display: none !important;
}
body.native-screenshot-mode .preview-item-wrapper,
body.native-screenshot-mode .preview-header,
body.native-screenshot-mode .sticker-item {
  pointer-events: none !important;
  user-select: none !important;
  outline: none !important;
}
body.native-screenshot-mode .preview-card-inner,
body.native-screenshot-mode .preview-card-content,
body.native-screenshot-mode #preview-nickname,
body.native-screenshot-mode #preview-subtitle,
body.native-screenshot-mode #preview-bio {
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
}
body.native-screenshot-mode .music-lyrics-container {
  mask-image: none !important;
  -webkit-mask-image: none !important;
  filter: none !important;
  height: auto !important;
}
body.native-screenshot-mode .lyrics-line {
  color: var(--music-text-color) !important;
  opacity: 0.6 !important;
}
body.native-screenshot-mode .lyrics-line.active {
  opacity: 1 !important;
  font-weight: bold !important;
}
body.native-screenshot-mode strong,
body.native-screenshot-mode b {
  font-weight: 600 !important;
}
/* Existing native-screenshot-mode styles removed here and consolidated at the end of the file */

.export-hero-card {
  background: linear-gradient(
    135deg,
    var(--bg-input) 0%,
    var(--bg-section) 100%
  );
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.export-hero-card:hover {
  background: var(--bg-image-upload-hover);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.export-hero-card .hero-icon {
  font-size: 2.2rem;
  color: var(--color-primary);
}
.export-hero-card h4 {
  margin: 0 0 4px 0;
  color: var(--color-primary);
  font-size: 1.05rem;
}
.export-hero-card p {
  margin: 0;
  font-size: 0.8rem;
  color: var(--text-secondary);
  opacity: 0.9;
}
.export-hero-card .badge {
  position: absolute;
  top: 0;
  right: 0;
  background: var(--color-primary);
  color: white;
  font-size: 0.65rem;
  padding: 2px 8px;
  border-radius: 0 0 0 8px;
  font-weight: bold;
}
.theme-preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(40px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px dashed var(--border-color);
  padding-left: 10px;
  padding-right: 10px;
}
.layout-floating-mode .theme-preset-grid {
  grid-template-columns: repeat(auto-fill, minmax(35px, 1fr)) !important;
  gap: 8px !important;
}
.theme-swatch {
  width: 40px;
  height: 40px;
  margin: 0 auto;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  border: 2px solid var(--border-color);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
.theme-swatch:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}
.theme-swatch::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--swatch-bg);
}
.theme-swatch::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50%;
  height: 100%;
  background: var(--swatch-accent);
  transform: skewX(-15deg) translateX(10px);
}
.theme-swatch.active {
  border-color: var(--color-primary);
  box-shadow:
    0 0 0 2px var(--bg-editor),
    0 0 0 4px var(--color-primary);
}
.theme-label {
  grid-column: 1 / -1;
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--text-secondary);
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.export-menu-list {
  background: var(--bg-input);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  overflow: hidden;
}
.export-menu-item {
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--border-color);
  transition: background 0.2s;
  color: var(--text-primary);
  text-decoration: none;
}
.export-menu-item:last-child {
  border-bottom: none;
}
.export-menu-item:hover {
  background: var(--bg-editor);
}
.export-menu-item .menu-icon {
  font-size: 1.4rem;
  color: var(--text-secondary);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.export-menu-item .text-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.export-menu-item h5 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
}
.export-menu-item p {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-secondary);
  opacity: 0.8;
  line-height: 1.3;
}
.export-menu-item .arrow {
  color: var(--text-placeholder);
  font-size: 1.2rem;
  flex-shrink: 0;
}
.export-menu-item .iconify {
  font-size: 1.2rem;
  color: var(--text-secondary);
}
.export-menu-item .arrow {
  color: var(--text-placeholder);
  font-size: 1.2rem;
}
.file-icon-placeholder {
  width: 80px;
  height: 80px;
  background: var(--bg-input);
  border-radius: 12px;
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  color: var(--text-secondary);
  margin: 0 auto 15px auto;
}
.checklist-preview {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.checklist-grid {
  display: grid;
  gap: 8px;
  width: 100%;
}
.checklist-item {
  cursor: pointer;
  transition: background-color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1), border-color 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  border-radius: var(--chk-item-radius, 6px);
  min-height: 40px;
  user-select: none;
  -webkit-user-select: none;
  box-sizing: border-box;
}
.checklist-item:active {
  transform: scale(0.96);
}
.checklist-icon {
  font-size: 1.2em;
  margin-right: 6px;
  flex-shrink: 0;
  line-height: 1;
}
.checklist-text {
  line-height: 1.3;
  word-break: break-word;
}
.checklist-preview[data-style="default"] .checklist-item {
  justify-content: flex-start;
  background-color: var(--chk-item-bg, rgba(0, 0, 0, 0.03));
  border: 1px solid transparent;
}
.checklist-preview[data-style="default"] .checklist-item:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
.checklist-preview[data-style="tag"] .checklist-item {
  background-color: var(--chk-item-bg, var(--bg-input));
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
}
.checklist-preview[data-style="tag"] .checklist-item:not([data-state="none"]) {
  color: #fff;
  font-weight: bold;
  border-color: transparent;
}
.checklist-preview[data-style="tag"] .checklist-item[data-state="checked"] {
  background-color: var(--accent-color);
}
.checklist-preview[data-style="tag"] .checklist-item[data-state="crossed"] {
  background-color: var(--crossed-color);
}
.checklist-preview[data-style="tag"] .checklist-item[data-state="heart"] {
  background-color: var(--heart-color);
}
.checklist-preview[data-style="tag"] .checklist-icon {
  display: none;
}
.checklist-preview[data-style="bingo"] .checklist-grid {
  gap: 4px;
}
.checklist-preview[data-style="bingo"] .checklist-item {
  aspect-ratio: 1 / 1;
  flex-direction: column;
  text-align: center;
  background-color: var(--chk-item-bg, var(--bg-card));
  border: 2px solid var(--border-color);
  padding: 4px;
  justify-content: center;
}
.checklist-preview[data-style="bingo"] .checklist-icon {
  margin-right: 0;
  margin-bottom: 4px;
  font-size: 1.5em;
}
.checklist-preview[data-style="bingo"]
  .checklist-item:not([data-state="none"]) {
  font-weight: bold;
  background-color: var(--chk-item-bg, var(--bg-input));
}
.checklist-preview[data-style="bingo"] .checklist-item[data-state="checked"] {
  border-color: var(--accent-color);
  color: var(--accent-color);
}
.checklist-preview[data-style="bingo"] .checklist-item[data-state="crossed"] {
  border-color: var(--color-danger);
  color: var(--color-danger);
}
.checklist-preview[data-style="bingo"] .checklist-item[data-state="heart"] {
  border-color: #e91e63;
  color: #e91e63;
}
.container-shape-win95 {
  border: 2px solid #dfdfdf !important;
  box-shadow:
    inset 2px 2px 0 #ffffff,
    inset -2px -2px 0 #808080,
    2px 2px 5px rgba(0, 0, 0, 0.3) !important;
  padding-top: 38px !important;
  border-radius: 0 !important;
  position: relative;
  background-color: #c0c0c0;
}
.container-shape-win95::before {
  content: attr(data-win-title);
  position: absolute;
  top: 4px;
  left: 4px;
  right: 4px;
  height: 26px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color: white;
  font-family: "Fusion Pixel 12px Mono latin", "Consolas", sans-serif;
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  padding-left: 8px;
  text-shadow: 1px 1px 0 #000;
  z-index: 100;
  pointer-events: none;
}
.container-shape-win95::after {
  content: "×";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 20px;
  height: 20px;
  background: #c0c0c0;
  color: black;
  border: 1px outset #fff;
  box-shadow: 1px 1px 0 #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  line-height: 16px;
  z-index: 101;
  pointer-events: none;
}
.container-shape-torn {
  --mask-torn:
    radial-gradient(circle at 10px 0, transparent 8px, black 9px) 0 0 / 20px
      20px repeat-x,
    linear-gradient(black 0 0) 0 10px / 100% 100% no-repeat;
  -webkit-mask: var(--mask-torn);
  mask: var(--mask-torn);
  padding-top: 20px !important;
  border-radius: 0 0 2px 2px !important;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}
.container-shape-macos {
  border-radius: 12px !important;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
  padding-top: 50px !important;
  position: relative;
  background-clip: padding-box;
  overflow: hidden;
}
.container-shape-macos::before {
  content: attr(data-win-title);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 36px;
  background: #eef1f5;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #666;
  z-index: 10;
}
html.dark-mode .container-shape-macos::before {
  background: #2d3036;
  color: #999;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.container-shape-macos::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 15px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f56;
  box-shadow:
    20px 0 0 #ffbd2e,
    40px 0 0 #27c93f;
  z-index: 11;
}
.container-shape-loose-leaf-left {
  --hole-color: black;
  --mask-holes: radial-gradient(
      circle at 8px center,
      transparent 6px,
      var(--hole-color) 6.5px
    )
    0 0 / 100% 30px repeat-y;
  -webkit-mask: var(--mask-holes);
  mask: var(--mask-holes);
  padding-left: 25px !important;
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: none !important;
  filter: drop-shadow(2px 2px 5px rgba(0, 0, 0, 0.1));
}
.container-shape-loose-leaf-top {
  --hole-color: black;
  --mask-holes-top: radial-gradient(
      circle at center 8px,
      transparent 6px,
      var(--hole-color) 6.5px
    )
    0 0 / 30px 100% repeat-x;
  -webkit-mask: var(--mask-holes-top);
  mask: var(--mask-holes-top);
  padding-top: 25px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: none !important;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.1));
}
.container-shape-loose-leaf-middle {
  --hole-color: black;
  --gap-half: 13px;
  --hole-offset: 25px; /* 再次增加偏移量，保持中缝开阔感 */
  /* 左侧页遮罩 */
  --mask-left-image: radial-gradient(
      circle at calc(100% - (var(--hole-offset) - var(--gap-half))) center,
      transparent 6px,
      black 6.5px
    );
  /* 右侧页遮罩 */
  --mask-right-image: radial-gradient(
      circle at calc(var(--hole-offset) - var(--gap-half)) center,
      transparent 6px,
      black 6.5px
    );

  -webkit-mask-image: var(--mask-left-image), var(--mask-right-image);
  -webkit-mask-size: calc(50% - var(--gap-half)) 30px, calc(50% - var(--gap-half)) 30px;
  -webkit-mask-position: left top, right top;
  -webkit-mask-repeat: repeat-y, repeat-y;
  
  mask-image: var(--mask-left-image), var(--mask-right-image);
  mask-size: calc(50% - var(--gap-half)) 30px, calc(50% - var(--gap-half)) 30px;
  mask-position: left top, right top;
  mask-repeat: repeat-y, repeat-y;

  /* 图层物理分离，无需复杂复合 */
  -webkit-mask-composite: source-over;
  mask-composite: add;
  position: relative;
  box-shadow: none !important;
}
.container-shape-loose-leaf-middle::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  transform: translateX(-50%);
  /* 只需要一个极轻微的中缝线，或是取消它让镂空彻底 */
  background: rgba(0, 0, 0, 0.03); 
  pointer-events: none;
  z-index: 10;
}
.container-shape-loose-leaf-middle::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - var(--gap-width) / 2 - 10px);
  right: calc(50% - var(--gap-width) / 2 - 10px);
  /* 在镂空带两侧增加向内阴影模拟厚度 */
  box-shadow: 
    inset -8px 0 10px -5px rgba(0, 0, 0, 0.08),
    inset 8px 0 10px -5px rgba(0, 0, 0, 0.08);
  pointer-events: none;
  z-index: 5;
}
.container-shape-stack {
  position: relative;
  z-index: 1;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.05),
    4px 4px 0 rgba(0, 0, 0, 0.05),
    4px 4px 0 1px rgba(255, 255, 255, 0.5),
    8px 8px 0 rgba(0, 0, 0, 0.05),
    8px 8px 0 1px rgba(255, 255, 255, 0.3) !important;
  transform: rotate(-1deg);
  border-radius: 4px !important;
  transition: transform 0.3s ease;
}
.container-shape-stack:hover {
  transform: rotate(0deg) scale(1.01);
}
.badge-beta {
  background-color: #f1c40f;
  color: #000;
  font-size: 0.65rem;
  padding: 2px 5px;
  border-radius: 4px;
  font-weight: 900;
  margin-left: 5px;
  vertical-align: middle;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.code-preview-box {
  background: #1a1b26;
  color: #7aa2f7;
  padding: 12px;
  border-radius: 8px;
  font-family: "Consolas", "Monaco", monospace;
  font-size: 0.75rem;
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 120px;
  overflow-y: auto;
  margin: 10px 0;
  border: 1px solid #333;
}
.steam-list-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  transition: background 0.2s;
}
.steam-list-item:hover {
  background: var(--bg-image-upload-hover);
}
.steam-list-item img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 4px;
  margin-right: 12px;
}
.steam-game-info {
  flex: 1;
  min-width: 0;
}
.steam-game-name {
  font-weight: bold;
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary);
}
.steam-game-time {
  font-size: 0.8rem;
  color: var(--text-secondary);
}
.steam-ach-item {
  display: flex;
  align-items: center;
  padding: 8px;
  border-bottom: 1px solid var(--border-color);
  cursor: pointer;
  opacity: 0.6;
}
.steam-ach-item.unlocked {
  opacity: 1;
  background: rgba(0, 122, 255, 0.05);
}
.steam-ach-item:hover {
  background: var(--bg-image-upload-hover);
}
.steam-ach-icon {
  width: 48px;
  height: 48px;
  margin-right: 12px;
  border-radius: 4px;
}
#template-library-modal .modal-container {
  max-width: 900px;
  height: 80vh;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
/* 
#template-list-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 15px;
  align-content: start;
  padding: 5px;
  overflow-y: auto;
  flex: 1;
}
.template-card {
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--bg-input);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.template-card-img-wrapper {
  width: 100%;
  background: #f0f2f5;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border-color);
}
.template-card-img-wrapper img {
  width: 100%;
  display: block;
}
@media (min-width: 769px) {
  .template-card-img-wrapper {
    height: 160px;
    overflow: hidden;
  }
  .template-card-img-wrapper img {
    height: 100%;
    object-fit: cover;
    object-position: top;
  }
}
@media (max-width: 768px) {
  #template-library-modal .modal-container {
    width: 95% !important;
    height: 85vh !important;
    padding: 15px !important;
  }
  #template-list-container {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 2px !important;
  }
  .template-card {
    height: auto !important;
    overflow: visible !important;
    flex-shrink: 0;
  }
  .template-card-img-wrapper {
    height: auto !important;
    min-height: 100px;
  }
  .template-card-img-wrapper img {
    height: auto !important;
    object-fit: contain;
  }
}
*/
.preview-header[data-style="steam"] {
  background: radial-gradient(
    circle at top left,
    rgba(42, 71, 94, 1) 0%,
    rgba(27, 40, 56, 1) 60%
  ) !important;
  color: #c4c4c4 !important;
  padding: 20px !important;
  display: flex;
  align-items: flex-start;
  gap: 20px;
  font-family: "Motiva Sans", "Arial", sans-serif;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  min-height: 180px;
}
.preview-header[data-style="steam"]::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background:
    radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px) 0 0 / 11px 11px,
    radial-gradient(circle, rgba(255,255,255,0.12) 1px, transparent 1px) 5.5px 5.5px / 11px 11px;
  opacity: 0.8;
  pointer-events: none;
  animation: moveDots 60s linear infinite;
  z-index: -2;
}
.preview-header[data-style="steam"] .id-card-left {
  width: 120px !important;
  flex-shrink: 0;
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  position: relative;
  z-index: 2;
}
.preview-header[data-style="steam"] #preview-avatar {
  width: 110px !important;
  height: 110px !important;
  border-radius: 4px !important;
  border: none !important;
  padding: 2px;
  background-color: #57cbde;
  background-clip: content-box;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}
.preview-header[data-style="steam"] .id-card-right {
  flex: 1;
  padding: 10px 0 0 0 !important;
  z-index: 2;
  text-align: left;
  align-items: flex-start;
}
.preview-header[data-style="steam"] #preview-nickname {
  font-size: 2.2rem !important;
  color: #ffffff !important;
  font-weight: 500 !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  margin-bottom: 5px !important;
  line-height: 1.1;
}
.preview-header[data-style="steam"] #preview-subtitle {
  font-size: 1.1rem !important;
  color: #57cbde !important;
  margin-bottom: 15px !important;
  font-weight: normal !important;
  letter-spacing: 0.5px;
}
.preview-header[data-style="steam"].in-game #preview-avatar {
  background-color: #90ba3c;
}
.preview-header[data-style="steam"].in-game #preview-subtitle {
  color: #90ba3c !important;
}
.preview-header[data-style="steam"] #preview-bio {
  color: #acb2b8 !important;
  font-size: 0.9rem !important;
}
.steam-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid #57cbde;
  color: #57cbde;
  font-weight: bold;
  font-size: 16px;
  margin-left: 10px;
  vertical-align: text-bottom;
  box-shadow: 0 0 5px rgba(87, 203, 222, 0.4);
}
.preview-header[data-style="steam"] .tags-container {
  justify-content: flex-start;
  gap: 8px;
  margin-top: 15px !important;
}
.preview-header[data-style="steam"] .tag-pill {
  background: #222b35 !important;
  border: 1px solid #3c4146 !important;
  color: #66c0f4 !important;
  border-radius: 2px !important;
  padding: 4px 8px !important;
  font-size: 0.75rem !important;
  box-shadow: none !important;
}
body.is-dragging .sortable-drag {
  transition: none !important;
  animation: none !important;
  z-index: 10000 !important;
}
.sortable-ghost {
  transition: none !important;
  opacity: 0.3 !important;
}
.preview-header[data-style="win95"] {
  background-color: #c0c0c0 !important;
  border: 2px solid !important;
  border-color: #ffffff #808080 #808080 #ffffff !important;
  padding: 3px !important;
  display: flex;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  box-shadow: 1px 1px 0 #000 !important;
  font-family:
    "Fusion Pixel 12px Mono latin", "Microsoft Sans Serif", "Tahoma", sans-serif !important;
}
.win95-profile-titlebar {
  background: linear-gradient(90deg, #000080, #1084d0);
  color: white;
  padding: 3px 4px 3px 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.5px;
  margin-bottom: 2px;
}
.win95-profile-controls {
  display: flex;
  gap: 2px;
}
.win95-profile-content {
  background: #ffffff;
  border: 2px solid !important;
  border-color: #808080 #ffffff #ffffff #808080 !important;
  padding: 15px;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  color: #000;
  flex: 1;
}
.win95-profile-statusbar {
  margin-top: 2px;
  padding: 2px 4px;
  border: 1px solid !important;
  border-color: #808080 #ffffff #ffffff #808080 !important;
  font-size: 11px;
  color: #000;
  display: flex;
  justify-content: space-between;
}
.preview-header[data-style="win95"] #preview-avatar {
  border-radius: 0 !important;
  border: 2px solid !important;
  border-color: #808080 #ffffff #ffffff #808080 !important;
}
.preview-header[data-style="win95"] .tag-pill {
  background: #c0c0c0 !important;
  border: 1px solid !important;
  border-color: #ffffff #808080 #808080 #ffffff !important;
  border-radius: 0 !important;
  color: #000 !important;
  box-shadow: none !important;
  font-size: 11px !important;
}
.standard-rules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  line-height: 1.4;
  margin-top: 10px;
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1px solid var(--border-color);
}
.standard-rules-table th,
.standard-rules-table td {
  border: 1px solid var(--border-color);
  padding: 10px 8px;
  text-align: left;
  vertical-align: middle;
}
.standard-rules-table th {
  background: var(--bg-section);
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
}
.standard-rules-table tbody tr:nth-child(even) {
  background: rgba(128, 128, 128, 0.03);
}
@media (max-width: 768px) {
  .standard-rules-table {
    font-size: 0.75rem;
  }
  .standard-rules-table th,
  .standard-rules-table td {
    padding: 6px 4px;
  }
}
#system-broadcast-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  min-height: 0;
  background: var(--bg-editor);
}
#system-broadcast-container .system-marquee {
  pointer-events: auto;
}
@media (max-width: 1024px) {
  #system-broadcast-container {
    top: 0;
    z-index: 101;
  }
  body.has-broadcast .app-container {
    padding-top: calc(var(--system-broadcast-height, 0px) + var(--global-banners-height, 0px)) !important;
  }
}
.system-marquee {
  width: 100%;
  height: 36px;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
}
.system-marquee-inner {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding-right: 40px;
}
.system-marquee-scroll-text {
  display: inline-block;
  white-space: nowrap;
  padding-left: 15px;
  font-size: 0.85rem;
  font-weight: bold;
  transform: translateX(0);
  animation-play-state: paused;
}
.system-marquee-scroll-text * {
  display: inline !important;
  white-space: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.system-marquee-scroll-text.is-overflowing {
  animation: sys-pingpong 12s linear infinite alternate;
}
.system-marquee:hover .system-marquee-scroll-text.is-overflowing,
.carousel-item.is-active .system-marquee-scroll-text.is-overflowing {
  animation-play-state: running;
}
@keyframes sys-pingpong {
  0%,
  15% {
    transform: translateX(0);
  }
  85%,
  100% {
    transform: translateX(var(--scroll-dist, -50%));
  }
}
#system-broadcast-carousel {
  width: 100%;
  height: 36px;
  overflow: hidden;
  position: relative;
  z-index: 100;
  pointer-events: auto;
}
#system-broadcast-carousel .system-marquee-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  background: rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
}
.carousel-inner {
  transition: transform 0.5s ease-in-out;
  display: flex;
  flex-direction: column;
}
.carousel-item {
  height: 36px;
  display: flex;
  align-items: center;
  padding: 0 45px 0 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  font-size: 0.85rem;
  font-weight: 500;
}
@media (max-width: 1024px) {
  .system-marquee:first-child {
    padding-top: env(safe-area-inset-top);
    height: calc(36px + env(safe-area-inset-top));
  }
}
.system-marquee-content {
  display: flex;
  white-space: nowrap;
  position: absolute;
  animation: sys-marquee 20s linear infinite;
}
.system-marquee-text {
  padding-right: 50vw;
  font-size: 0.85rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
}
.system-marquee-close {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.1);
  color: inherit;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
@keyframes sys-marquee {
  0% {
    transform: translateX(100vw);
  }
  100% {
    transform: translateX(-100%);
  }
}
#inspector-tab-content-selected {
  padding-top: 0 !important;
}
.editor-item-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--bg-section);
  border-bottom: 1px solid var(--border-color);
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 2px 10px !important;
  height: 44px;
  display: flex;
  align-items: center;
}
.selected-sub-tabs {
  position: sticky;
  top: 44px;
  z-index: 30;
  background: var(--bg-editor);
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 0 !important;
  padding: 4px 10px !important;
  transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  gap: 5px;
}
.inspector-scroll-container.is-scrolled .editor-item-header {
  height: 32px;
  background: var(--bg-editor);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.inspector-scroll-container.is-scrolled .editor-item-title-input {
  font-size: 0.85rem !important;
}
.inspector-scroll-container.is-scrolled .item-delete-btn {
  transform: scale(0.85);
  padding: 2px 8px !important;
}
.inspector-scroll-container.is-scrolled .selected-sub-tabs {
  top: 32px;
  padding: 2px 10px !important;
  background: var(--bg-section);
}
.inspector-scroll-container.is-scrolled .selected-sub-tab-btn {
  font-size: 0.75rem !important;
  padding: 4px 8px !important;
}
.inspector-sub-content {
  padding: 15px;
}
#update-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 20010;
  display: none;
  visibility: hidden;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  backdrop-filter: blur(5px);
}
#update-modal-overlay.active {
  display: flex;
}
#update-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}
#update-modal-overlay.active {
  display: flex;
}
#update-modal-overlay.visible {
  opacity: 1;
  visibility: visible;
}
.export-quality-tabs {
  display: flex;
  background: var(--bg-input);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border-input);
  gap: 4px;
  margin-bottom: 8px;
}
.quality-tab {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-secondary);
  transition: color 0.2s, background-color 0.2s, border-color 0.2s;
  border: 1px solid transparent;
  font-weight: 500;
}
.quality-tab:hover {
  background: rgba(128, 128, 128, 0.05);
  color: var(--text-primary);
}
.quality-tab:has(input:checked) {
  background: var(--bg-card);
  color: var(--color-primary-text);
  border-color: rgba(0, 0, 0, 0.05);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  font-weight: bold;
}
.quality-tab input {
  display: none;
}
.quality-hint {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0 0 15px 0;
  padding: 8px;
  background: rgba(128, 128, 128, 0.05);
  border-radius: 6px;
  line-height: 1.4;
}
.export-toggles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 15px;
}
.toggle-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid var(--border-input);
  background: var(--bg-input);
  font-size: 0.85rem;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}
.toggle-card:hover {
  border-color: var(--color-primary);
  background: var(--bg-card);
}
.toggle-card.active {
  background: var(--bg-image-upload-hover);
  border-color: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 600;
}
.toggle-card input[type="checkbox"] {
  accent-color: var(--color-primary);
  transform: scale(1.1);
}
.toggle-card .radius-input {
  width: 40px;
  padding: 2px 4px;
  font-size: 0.8rem;
  border: 1px solid var(--border-input);
  border-radius: 4px;
  text-align: center;
  margin-left: 5px;
}
.export-filename-group {
  display: flex;
  align-items: center;
  background: var(--bg-input);
  border: 1px solid var(--border-input);
  border-radius: 8px;
  padding: 0 10px;
  margin-bottom: 10px;
}
.export-filename-group input {
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 10px 5px;
}
.update-card {
  background: var(--bg-card);
  width: 90%;
  max-width: 360px;
  border-radius: 16px;
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
  transform: scale(0.95);
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  border: 1px solid var(--border-color);
}
#update-modal-overlay.visible .update-card {
  transform: scale(1);
}
.lyrics-line .trans-text {
  display: block;
  font-size: 0.75em;
  opacity: 0.7;
  font-weight: normal;
  margin-top: 2px;
  line-height: 1.3;
}
.lyrics-line:not(.active) .trans-text {
  opacity: 0.5;
}
.release-notes-content h4,
#help-changelog h4 {
  margin: 15px 0 8px 0;
  font-size: 0.95rem;
  color: #3b82f6 !important;
  font-weight: bold;
  border-bottom: 1px dashed var(--border-color);
  padding-bottom: 4px;
}
.release-notes-content h4:first-child,
#help-changelog h4:first-child {
  margin-top: 0;
}
.release-notes-content ul,
#help-changelog ul {
  margin: 0;
  padding-left: 20px;
  list-style-type: disc;
}
.release-notes-content li,
#help-changelog li {
  margin-bottom: 6px;
  line-height: 1.5;
}
.release-notes-content strong,
#help-changelog strong {
  color: var(--text-primary);
  font-weight: 800;
}
.release-notes-content::-webkit-scrollbar {
  width: 6px;
}
.release-notes-content::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 3px;
}
@keyframes slideDown {
  from {
    transform: translateY(-100%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes bounce {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}
.flower-particle {
  position: fixed;
  bottom: -50px;
  pointer-events: none;
  z-index: 1000001;
  font-size: 24px;
  user-select: none;
  will-change: transform, opacity;
  animation: flower-fly 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.tag-pill,
.preview-button,
.social-name,
.todo-text,
.cal-num {
  display: inline-flex !important;
  align-items: var(--g-font-align, center) !important;
}
.preview-card-title,
.music-title,
.grid-label,
.grid-subtitle,
.rank-name,
.todo-title,
.scale-label,
.preview-item-wrapper:not([data-item-type="social"]):not([data-item-type="achievement"]) [data-item-key="title"],
.preview-item-wrapper:not([data-item-type="social"]):not([data-item-type="achievement"]) [data-item-key="songTitle"],
.preview-item-wrapper:not([data-item-type="social"]):not([data-item-type="achievement"]) [data-item-key="label"],
.preview-item-wrapper:not([data-item-type="social"]):not([data-item-type="achievement"]) [data-item-key="leftLabel"],
.preview-item-wrapper:not([data-item-type="social"]):not([data-item-type="achievement"]) [data-item-key="rightLabel"] {
  display: flex !important;
  width: 100% !important;
  min-width: 100% !important;
  flex-shrink: 0 !important;
  align-items: var(--g-font-align, center) !important;
  justify-content: var(--local-justify, var(--g-comp-justify, center)) !important;
  box-sizing: border-box;
  font-family: var(--g-comp-title-font-family, var(--g-comp-font-family)) !important;
  font-weight: var(--g-comp-title-font-weight, 700) !important;
  font-style: var(--g-comp-title-font-style, normal) !important;
}

/* Targeted alignment refinements for specific modules */
.music-card-preview:not([data-style]):not(.music-card-vinyl),
.music-card-cassette,
.showcase-card[data-style="magazine"],
.showcase-card.ticket-style,
.showcase-card[data-style="book"] {
  --local-justify: flex-start !important;
}

.grid-label,
.grid-subtitle {
  justify-content: center !important;
}
.preview-card-title .title-text-content,
.grid-label,
.grid-subtitle,
.music-title,
.preview-button span,
.social-name span {
  position: relative;
  top: var(--g-font-offset-y, 0px);
  white-space: pre-wrap !important;
  word-break: break-word !important;
}
.tag-pill > span:not(.icon-view-wrapper) {
  position: relative;
  top: var(--g-font-offset-y, 0px);
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.preview-card-title .iconify,
.preview-card-title .custom-svg-icon {
  flex-shrink: 0 !important;
}

@keyframes flower-fly {
  0% {
    transform: translateY(0) rotate(0deg) scale(0.5);
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-85vh) translateX(var(--drift))
      rotate(var(--rotation)) scale(1.2);
    opacity: 0;
  }
}




/* Dialogue Module Styles */
.dialogue-entry {
  display: flex;
  gap: 12px;
  max-width: 85% !important;
  width: fit-content !important;
  align-items: flex-start;
}

.dialogue-left {
  align-self: flex-start;
}

.dialogue-right {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.dialogue-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  margin-top: 0;
}

.dialogue-avatar.initial-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.dialogue-content-wrapper {
  display: flex;
  flex-direction: column;
  width: fit-content !important;
  max-width: 100% !important;
}

.dialogue-left .dialogue-content-wrapper {
  align-items: flex-start;
}

.dialogue-right .dialogue-content-wrapper {
  align-items: flex-end;
}

.dialogue-speaker {
  font-size: 0.8em;
  font-weight: 600;
  margin-bottom: 4px;
  padding: 0 8px;
}

.dialogue-bubble {
  position: relative;
  padding: 10px 15px;
  border-radius: 18px;
  background-color: var(--bubble-bg-color);
  width: fit-content !important;
  max-width: 100% !important;
}

.dialogue-left .dialogue-bubble {
  border-top-left-radius: 0;
}

.dialogue-right .dialogue-bubble {
  border-top-right-radius: 0;
}

.dialogue-bubble::before {
  content: "";
  position: absolute;
  bottom: 8px;
  width: 0;
  height: 0;
  border: 8px solid transparent;
}

.dialogue-left .dialogue-bubble::before {
  left: -5px;
  top: 0;
  bottom: auto;
  width: 5px;
  height: 6px;
  border: none;
  background-color: var(--bubble-bg-color);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3Cpath d='M5,6 L5,0 L2.9,0 Q0.5,0 1.7,1.6 L5,6 Z' fill='black'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3Cpath d='M5,6 L5,0 L2.9,0 Q0.5,0 1.7,1.6 L5,6 Z' fill='black'/%3E%3C/svg%3E") no-repeat center;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}

.dialogue-right .dialogue-bubble::before {
  right: -5px;
  top: 0;
  bottom: auto;
  width: 5px;
  height: 6px;
  border: none;
  background-color: var(--bubble-bg-color);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3Cpath d='M0,6 L0,0 L2.1,0 Q4.5,0 3.3,1.6 L0,6 Z' fill='black'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 6'%3E%3Cpath d='M0,6 L0,0 L2.1,0 Q4.5,0 3.3,1.6 L0,6 Z' fill='black'/%3E%3C/svg%3E") no-repeat center;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
}

.dialogue-entry.dialogue-center {
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 10px 0;
}

.dialogue-entry.dialogue-center .dialogue-content-wrapper {
  align-items: center !important;
  width: 100%;
}

.dialogue-entry.dialogue-center .dialogue-bubble {
  background: rgba(0, 0, 0, 0.15) !important;
  border-radius: 4px !important;
  padding: 4px 12px;
  color: #fff !important;
  font-size: 0.75rem !important;
  box-shadow: none !important;
  border: none !important;
}

.dialogue-entry.dialogue-center .dialogue-bubble::before {
  display: none !important;
}

.dialogue-entry.dialogue-center .dialogue-avatar,
.dialogue-entry.dialogue-center .dialogue-header {
  display: none !important;
}

.dialogue-bubble.is-image {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  overflow: hidden;
}

.dialogue-bubble.is-image::before {
  display: none !important;
}

.dialogue-image {
  max-width: 100%;
  max-height: 300px;
  border-radius: 8px;
  display: block;
  cursor: pointer;
}

/* Discord Style */
.dialogue-preview-container[data-style="discord"] .dialogue-entry {
  flex-direction: row !important;
  align-items: flex-start;
  gap: 16px;
  padding: 2px 0;
  max-width: 100%;
}

.dialogue-preview-container[data-style="discord"] .dialogue-entry:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.dialogue-preview-container[data-style="discord"] .dialogue-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50% !important;
  margin-top: 2px;
  cursor: pointer;
}

.dialogue-preview-container[data-style="discord"] .dialogue-content-wrapper {
  flex: 0 1 auto;
  align-items: flex-start !important;
}

.dialogue-preview-container[data-style="discord"] .dialogue-header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}

.dialogue-preview-container[data-style="discord"] .dialogue-speaker {
  font-size: 1rem;
  font-weight: 500;
  color: #f2f3f5 !important;
  padding: 0;
  margin: 0;
}

.dialogue-preview-container[data-style="discord"] .dialogue-timestamp {
  font-size: 0.75rem;
  color: #949ba4;
  font-weight: normal;
}

.dialogue-preview-container[data-style="discord"] .dialogue-bubble {
  background: transparent !important;
  padding: 0;
  color: #dbdee1 !important;
  border: none;
  border-radius: 0;
}

.dialogue-preview-container[data-style="discord"] .dialogue-bubble::before {
  display: none;
}

/* Editor Styles */
.dialogue-avatar-thumb-wrapper {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--bg-image-thumb);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  border: 2px dashed var(--border-input);
}

.dialogue-avatar-thumb-wrapper:hover {
  border-color: var(--color-primary);
}

.dialogue-entry-editor {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--bg-input);
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  margin-bottom: 10px;
}

.dialogue-entry-editor .card-drag-handle {
  cursor: grab;
  color: var(--text-placeholder);
  font-size: 1.5rem;
  padding: 8px 4px;
}

.dialogue-entry-editor .card-delete-btn {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  padding: 0;
}

/* Legacy Save Status Badge Replication */
.save-status-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    background: var(--bg-input);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    z-index: 2000;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 5px;
}

@media (max-width: 1024px) {
    .save-status-badge {
        position: fixed;
        top: 15px;
        left: 15px;
        transform: none;
        background: var(--bg-card);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        border-color: var(--color-primary);
        color: var(--color-primary);
        top: max(15px, env(safe-area-inset-top) + 10px);
        z-index: 500; /* Stays below panels and modals */
    }
}




/* Unified Editor Styles */
.unified-editor-item {
    display: flex;
    align-items: stretch;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.unified-editor-item:hover,
.unified-editor-item:focus-within {
    border-color: var(--border-input);
    background: var(--bg-editor);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.unified-drag-handle {
    width: 32px;
    background: rgba(0, 0, 0, 0.02);
    border-right: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    color: var(--text-placeholder);
    flex-shrink: 0;
    font-size: 1.2rem;
    transition: color 0.2s;
}

.unified-editor-item:hover .unified-drag-handle {
    color: var(--text-secondary);
    background: rgba(0, 0, 0, 0.05);
}

.unified-drag-handle:active {
    cursor: grabbing;
}

.unified-content {
    flex-grow: 1;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.unified-content.column {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.unified-delete-btn {
    width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-left: 1px solid transparent;
    color: var(--text-placeholder);
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.2s, opacity 0.2s;
    font-size: 1.1rem;
}

.unified-editor-item:hover .unified-delete-btn {
    color: var(--text-secondary);
    border-left-color: var(--border-color);
}

.unified-delete-btn:hover {
    background-color: rgba(255, 59, 48, 0.1);
    color: var(--color-danger) !important;
}



.marquee-selection-box {
  position: absolute;
  border: 2px dashed var(--g-theme-accent, #007aff);
  background: rgba(0, 122, 255, 0.05);
  pointer-events: none;
  z-index: 1500; /* Below panels (2000) and modals (10000) */
  border-radius: 4px;
}

.mobile-pencils-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1000;
}

.mobile-pencil-wrapper.reactive {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible;
}

.mobile-pencil-wrapper.reactive .pencil-icon {
  width: 22px;
  height: 22px;
  background: var(--color-primary, #007aff);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 8px rgba(0,0,0,0.2);
  cursor: pointer;
  border: 1.5px solid white;
  pointer-events: auto;
  position: absolute;
  top: 0;
  right: 0;
}

/* --- Icon Load Failure / Offline Placeholder --- */
span.iconify:not(svg):empty {
  display: inline-flex !important;
  width: 1em;
  height: 1em;
  background-color: var(--text-placeholder, #ccc);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m-1 11h2v2h-2m0-8h2v6h-2'/%3E%3C/svg%3E") no-repeat center;
  mask-size: contain;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18C6.47 2 2 6.47 2 12s4.47 10 10 10s10-4.47 10-10S17.53 2 12 2m-1 11h2v2h-2m0-8h2v6h-2'/%3E%3C/svg%3E") no-repeat center;
  -webkit-mask-size: contain;
  opacity: 0.25;
  vertical-align: middle;
}

/* --- Rich Text Image Support --- */
.tiptap img, .ql-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 5px 4px;
  display: inline-block;
  vertical-align: middle;
}

/* Ensure images don't break vertical layout if any */
[style*="writing-mode: vertical-rl"] .tiptap img,
[style*="writing-mode: vertical-rl"] .ql-editor img {
  max-height: 100%;
  width: auto;
  margin: 0 10px;
  display: inline-block;
}

/* --- Export Mode Layout Fixes --- */
html.native-screenshot-mode,
body.native-screenshot-mode {
  overflow: auto !important;
  position: static !important;
  height: auto !important;
  min-height: 100dvh !important;
  background-color: var(--bg-preview-pane) !important;
}

.preview-canvas-area {
  display: block;
  overflow-x: hidden;
  position: relative;
}
.preview-canvas-area.has-padding {
  padding-bottom: 280px;
}

html body.native-screenshot-mode.native-screenshot-mode .app-header,
html body.native-screenshot-mode.native-screenshot-mode .layer-panel,
html body.native-screenshot-mode.native-screenshot-mode .inspector-panel,
html body.native-screenshot-mode.native-screenshot-mode .resizer,
html body.native-screenshot-mode.native-screenshot-mode .resizer-left,
html body.native-screenshot-mode.native-screenshot-mode .workspace-tabs-container,
html body.native-screenshot-mode.native-screenshot-mode .mobile-edit-pencil,
html body.native-screenshot-mode.native-screenshot-mode .save-status-badge,
html body.native-screenshot-mode.native-screenshot-mode #storage-warning-banner,
html body.native-screenshot-mode.native-screenshot-mode #page-limit-warning-banner,
html body.native-screenshot-mode.native-screenshot-mode #system-broadcast-container,
html body.native-screenshot-mode.native-screenshot-mode .global-banners-stack {
  display: none !important;
}

html body.native-screenshot-mode.native-screenshot-mode .app-container,
html body.native-screenshot-mode.native-screenshot-mode .preview-panel,
html body.native-screenshot-mode.native-screenshot-mode .preview-canvas-area {
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: auto !important;
  min-height: 100dvh !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}



html body.native-screenshot-mode.native-screenshot-mode .preview-overlay,
html body.native-screenshot-mode.native-screenshot-mode .preview-texture-layer,
html body.native-screenshot-mode.native-screenshot-mode .preview-glass-layer {
  min-height: 100dvh !important;
  height: 100% !important;
}

html body.native-screenshot-mode.native-screenshot-mode::after {
  content: none !important;
  display: none !important;
}

/* --- Forced Layout Overrides (Ignore Responsive) --- */

/* 1. Force Mobile Layout */
html.is-mobile .app-header {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: calc(55px + env(safe-area-inset-bottom)) !important;
  padding: 0 15px !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
  border-bottom: none !important;
  border-top: 1px solid var(--border-color) !important;
  z-index: 300 !important;
  display: flex !important;
}


html.is-mobile .app-header-title {
  display: none !important;
}

html.is-mobile #mobile-layer-toggle,
html.is-mobile #mobile-inspector-toggle {
  display: flex !important;
}

html.is-mobile .app-container {
  padding-top: calc(var(--system-broadcast-height, 0px) + var(--global-banners-height, 0px)) !important;
  padding-bottom: calc(55px + env(safe-area-inset-bottom)) !important;
}

html.is-mobile .layer-panel {
  position: fixed !important;
  top: calc(var(--system-broadcast-height, 0px) + var(--global-banners-height, 0px)) !important;
  bottom: calc(55px + env(safe-area-inset-bottom)) !important;
  left: 0 !important;
  width: 85% !important;
  height: auto !important;
  z-index: 2000 !important;
  transform: translateX(-100%) !important;
  background-color: var(--bg-editor) !important;
}
html.is-mobile .layer-panel.is-open {
  transform: translateX(0) !important;
}

html.is-mobile .inspector-panel {
  position: fixed !important;
  top: auto !important;
  bottom: calc(55px + env(safe-area-inset-bottom)) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  height: var(--mobile-inspector-panel-height, var(--mobile-inspector-height, 50vh)) !important;
  z-index: 2001 !important;
  border-radius: 20px 20px 0 0 !important;
  border-left: none !important;
  border-top: 1px solid var(--border-color) !important;
  transform: translateY(110%) !important;
  background-color: var(--bg-editor) !important;
}
html.is-mobile .inspector-panel.is-open {
  transform: translateY(0) !important;
}

/* Hide bottom nav when inspector panel is open on mobile */
html.is-mobile body.inspector-open-mobile .app-header,
body.inspector-open-mobile .app-header {
  display: none !important;
}
html.is-mobile body.inspector-open-mobile .app-container,
body.inspector-open-mobile .app-container {
  padding-bottom: env(safe-area-inset-bottom) !important;
}
html.is-mobile body.inspector-open-mobile .inspector-panel,
body.inspector-open-mobile .inspector-panel {
  bottom: env(safe-area-inset-bottom) !important;
}

/* 2. Force PC Layout (Undo Media Queries) */
html.is-pc .app-header {
  position: fixed !important;
  top: var(--system-broadcast-height, 0px) !important;
  bottom: auto !important;
  height: var(--header-height) !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-top: none !important;
}

html.is-pc .app-header-title {
  display: flex !important;
}

html.is-pc #mobile-layer-toggle,
html.is-pc #mobile-inspector-toggle {
  display: none !important;
}

html.is-pc .app-container {
  flex-direction: row !important;
  padding-bottom: 0 !important;
  padding-top: calc(var(--header-height) + var(--system-broadcast-height, 0px) + var(--global-banners-height, 0px)) !important;
}

html.is-pc .layer-panel,
html.is-pc .inspector-panel {
  position: relative !important;
  height: calc(100dvh - var(--header-height) - var(--system-broadcast-height, 0px)) !important;
  transform: none !important;
  top: 0 !important;
}

html.is-pc .layer-panel {
  width: var(--layer-panel-width) !important;
  display: flex !important;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, min-width 0.3s ease !important;
}

html.is-pc .inspector-panel {
  width: var(--inspector-panel-width) !important;
  border-radius: 0 !important;
  border-left: 1px solid var(--border-color) !important;
  display: flex !important;
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, min-width 0.3s ease !important;
}

/* 性能吞吐优化：当拖拽面板处于活跃状态时，暂时屏蔽所有组件及图层的毛玻璃（backdrop-filter）和复杂阴影（box-shadow），防止移动端 GPU 填充率暴增导致掉帧 */
body.is-dragging-inspector .item-inner-container,
body.is-dragging-inspector .preview-card-inner,
body.is-dragging-inspector .music-card-preview,
body.is-dragging-inspector .showcase-card,
body.is-dragging-inspector .timeline-preview,
body.is-dragging-inspector .preview-glass-layer {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.is-dragging-inspector .preview-wrapper,
body.is-dragging-inspector .preview-item-wrapper,
body.is-dragging-inspector .preview-item-wrapper::before,
body.is-dragging-inspector .preview-item-wrapper::after,
body.is-dragging-inspector .item-inner-container,
body.is-dragging-inspector .item-inner-container::before,
body.is-dragging-inspector .item-inner-container::after,
body.is-dragging-inspector .apply-global-shadow::before,
body.is-dragging-inspector .apply-global-shadow::after,
body.is-dragging-inspector .bento-group-container,
body.is-dragging-inspector .preview-card-inner,
body.is-dragging-inspector .music-card-preview,
body.is-dragging-inspector .showcase-card,
body.is-dragging-inspector .timeline-preview {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 移动端导入/导出中心模态框样式优化 */
@media (max-width: 768px) {
  #export-modal .modal-container,
  #import-modal .modal-container {
    max-height: 82vh;
    overflow-y: auto;
    padding: 16px 20px;
  }
  
  #export-modal .modal-container h3,
  #import-modal .modal-container h3 {
    margin-bottom: 12px;
    font-size: 1.15rem;
  }

  #export-modal .modal-container p,
  #import-modal .modal-container p {
    margin-bottom: 15px !important;
  }

  .export-hero-card {
    padding: 10px 12px;
    margin-bottom: 12px;
    gap: 10px;
    border-radius: 8px;
  }

  .export-hero-card .hero-icon {
    font-size: 1.6rem;
  }

  .export-hero-card h4 {
    font-size: 0.9rem;
    margin-bottom: 2px;
  }

  .export-hero-card p {
    font-size: 0.72rem;
    line-height: 1.35;
  }

  .export-hero-card .badge {
    font-size: 0.6rem;
    padding: 1px 6px;
  }

  .export-menu-item {
    padding: 8px 12px;
    gap: 8px;
  }

  .export-menu-item .menu-icon {
    font-size: 1.1rem;
  }

  .export-menu-item h5 {
    font-size: 0.85rem;
  }

  .export-menu-item p {
    font-size: 0.7rem;
    line-height: 1.3;
  }

  .export-menu-item .arrow {
    font-size: 1rem;
  }
}

/* ==========================================================================
   移动端高频样式快捷调整面板 (Inline Mobile Quick Adjuster)
   ========================================================================== */

/* 聚光灯特效（性能优化版） */
/* 优化点：移除每个卡片的 filter:blur()（每帧对N张卡片做高斯模糊=最大性能瓶颈）
         改用单层暗化遮罩 + opacity 方案，GPU 只需合成一层 */
.preview-items-container.has-mobile-spotlight {
  /* 限制重绘范围，避免影响容器外元素 */
  contain: layout style;
}

.preview-items-container.has-mobile-spotlight::before {
  content: "";
  position: absolute;
  /* 用适度负值覆盖溢出区域（阴影、transform偏移），但远小于原来的-9999px */
  top: -100px;
  left: -100px;
  right: -100px;
  bottom: -100px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  pointer-events: none;
}

.preview-items-container.has-mobile-spotlight .preview-item-wrapper:not(.selected) {
  /* 仅用 opacity 暗化，由 GPU 直接合成，无需离屏模糊运算 */
  opacity: 0.28 !important;
  pointer-events: none !important;
  /* 提示浏览器这是可合成的属性，减少布局计算 */
  will-change: opacity;
}

.preview-items-container.has-mobile-spotlight .preview-item-wrapper.selected {
  z-index: 1000 !important;
  position: relative !important;
  /* 移除 scale(1.02) 避免触发额外合成层，仅保留微弱上浮感 */
  transform: translateY(-2px) !important;
}

/* 贴合卡片的圆弧手柄 */
.mobile-quick-arc-bar {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
  z-index: 1010;
  display: flex;
  justify-content: center;
  align-items: center;
}

.quick-arc-handle {
  background: var(--bg-editor, rgba(30, 34, 42, 0.95));
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-top: none;
  padding: 6px 14px;
  border-radius: 0 0 14px 14px;
  color: var(--color-primary, #007aff);
  font-size: 0.72rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 5px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), background-color 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), box-shadow 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

.quick-arc-handle:active {
  transform: scale(0.94);
}

.quick-arc-handle .chevron {
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* 悬浮调节面板 */
.mobile-quick-adjust-popover {
  position: absolute;
  left: 50%;
  bottom: -40px;
  transform: translate(-50%, 100%);
  z-index: 1020;
  width: 320px;
  background: var(--bg-editor, rgba(30, 34, 42, 0.95));
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--border-color, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: popover-fade-in 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.1);
}

.mobile-quick-adjust-popover.popover-upwards {
  bottom: 100%;
  margin-bottom: 15px;
  transform: translate(-50%, 0);
  animation: popover-fade-in-upwards 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.1);
}

@keyframes popover-fade-in {
  from { opacity: 0; transform: translate(-50%, 90%) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, 100%) scale(1); }
}

@keyframes popover-fade-in-upwards {
  from { opacity: 0; transform: translate(-50%, 10px) scale(0.95); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* 标签切换 */
.quick-adjust-tabs {
  display: flex;
  border-bottom: 1px solid var(--border-color);
  padding-bottom: 6px;
  gap: 4px;
}

.adjust-tab-btn {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 600;
  padding: 5px 0;
  border-radius: 6px;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.adjust-tab-btn.active {
  color: #007aff;
  background: rgba(0, 122, 255, 0.1);
}

.quick-adjust-content {
  display: flex;
  flex-direction: column;
}

.tab-pane {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pane-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pane-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.pane-value {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--text-primary);
}

.pane-value.color-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-family: monospace;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  color: #fff !important;
}

/* 范围滑动条设计 (精美/iOS大拇指) */
.slider-wrapper {
  padding: 4px 0;
}

.mobile-quick-adjust-popover input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: rgba(120, 120, 128, 0.3);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
  outline: none;
  margin: 6px 0;
  vertical-align: middle;
}

/* iOS 风格的圆滑块 */
.mobile-quick-adjust-popover input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.mobile-quick-adjust-popover input[type="range"]::-webkit-slider-thumb:active {
  transform: scale(1.15);
}

.mobile-quick-adjust-popover input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.1s ease;
}

.mobile-quick-adjust-popover input[type="range"]::-moz-range-thumb:active {
  transform: scale(1.15);
}

/* HSL 调色器专有背景样式 */
.hue-range {
  background: linear-gradient(to right, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000) !important;
}

.hsl-sliders {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

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

.hsl-slider-row .slider-label {
  font-size: 0.68rem;
  width: 38px;
  color: var(--text-secondary);
  font-weight: 600;
  text-align: right;
  flex-shrink: 0;
}

.hsl-slider-row input[type="range"] {
  flex: 1;
}

/* 标签内重置按钮 */
.pane-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.reset-style-btn {
  background: transparent;
  border: none;
  padding: 2px;
  color: var(--text-placeholder, #8e8e93);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.2s ease, background-color 0.2s ease;
  font-size: 1rem;
}

.reset-style-btn:hover {
  background: rgba(120, 120, 128, 0.15);
  color: var(--color-danger, #ff3b30);
}

.reset-style-btn:active {
  transform: scale(0.9);
}

/* ==========================================================================
   Tiptap & Quill Rich Text Render Style Overrides for Tailwind CSS Reset
   ========================================================================== */
.tiptap, .ql-editor {
  line-height: 1.6;
}
.tiptap p, .ql-editor p {
  margin-bottom: 0.5em !important;
}
.tiptap h1, .ql-editor h1 {
  font-size: 1.8em !important;
  font-weight: 800 !important;
  margin-top: 0.8em !important;
  margin-bottom: 0.4em !important;
  color: var(--text-primary) !important;
}
.tiptap h2, .ql-editor h2 {
  font-size: 1.5em !important;
  font-weight: 700 !important;
  margin-top: 0.7em !important;
  margin-bottom: 0.35em !important;
  color: var(--text-primary) !important;
}
.tiptap h3, .ql-editor h3 {
  font-size: 1.25em !important;
  font-weight: 700 !important;
  margin-top: 0.6em !important;
  margin-bottom: 0.3em !important;
  color: var(--text-primary) !important;
}
.tiptap h4, .ql-editor h4 {
  font-size: 1.1em !important;
  font-weight: 700 !important;
  margin-top: 0.5em !important;
  margin-bottom: 0.25em !important;
  color: #3b82f6 !important;
}
.tiptap strong, .ql-editor strong,
.tiptap b, .ql-editor b {
  font-weight: bold !important;
}
.tiptap em, .ql-editor em,
.tiptap i, .ql-editor i {
  font-style: italic !important;
}
.tiptap u, .ql-editor u {
  text-decoration: underline !important;
}
.tiptap s, .ql-editor s,
.tiptap strike, .ql-editor strike {
  text-decoration: line-through !important;
}
.tiptap sub, .ql-editor sub {
  vertical-align: sub !important;
  font-size: 0.75em !important;
}
.tiptap sup, .ql-editor sup {
  vertical-align: super !important;
  font-size: 0.75em !important;
}
.tiptap blockquote, .ql-editor blockquote {
  border-left: 4px solid var(--color-primary, #007aff) !important;
  padding-left: 1em !important;
  margin: 0.8em 0 !important;
  color: var(--text-secondary, #666) !important;
  font-style: italic !important;
}
.tiptap pre, .ql-editor pre {
  background: var(--bg-input, #f5f5f5) !important;
  color: var(--text-primary, #333) !important;
  padding: 0.8em !important;
  border-radius: 6px !important;
  font-family: monospace !important;
  overflow-x: auto !important;
  margin: 0.8em 0 !important;
}
.tiptap code, .ql-editor code {
  background: var(--bg-input, #f5f5f5) !important;
  padding: 0.2em 0.4em !important;
  border-radius: 4px !important;
  font-family: monospace !important;
  font-size: 0.9em !important;
}
.tiptap img, .ql-editor img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  display: block !important;
  margin: 0.8em 0 !important;
}
.tiptap a, .ql-editor a {
  color: var(--color-primary, #007aff) !important;
  text-decoration: underline !important;
  cursor: pointer !important;
}
.tiptap ul, .ql-editor ul {
  list-style-type: disc !important;
  padding-left: 20px !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.tiptap ol, .ql-editor ol {
  list-style-type: decimal !important;
  padding-left: 20px !important;
  margin-bottom: 8px !important;
  display: block !important;
}
.tiptap li, .ql-editor li {
  display: list-item !important;
  margin-bottom: 4px !important;
}

/* ==================== Side Panels Controls Night Mode Adaptation ==================== */
.inspector-panel input[type="text"]:not(.color-preview-btn):not(.todo-text-input):not(.checklist-text-input),
.inspector-panel input[type="number"]:not(.todo-text-input):not(.checklist-text-input),
.inspector-panel select,
.inspector-panel textarea {
  background-color: var(--bg-input);
  color: var(--text-primary);
  border: 1px solid var(--border-input);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 0.85rem;
  outline: none;
  transition: border-color var(--transition-short), box-shadow var(--transition-short);
}

.inspector-panel input[type="text"]:not(.color-preview-btn):not(.todo-text-input):not(.checklist-text-input):focus,
.inspector-panel input[type="number"]:not(.todo-text-input):not(.checklist-text-input):focus,
.inspector-panel select:focus,
.inspector-panel textarea:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* Inset styles for inputs inside custom editor rows / list items */
.timeline-editor-row input[type="text"],
.timeline-editor-row input[type="number"],
.timeline-editor-row textarea,
.timeline-editor-row select,
.unified-editor-item input[type="text"]:not(.todo-text-input):not(.checklist-text-input):not(.stat-name-input),
.unified-editor-item input[type="number"],
.unified-editor-item textarea,
.unified-editor-item select {
  background-color: var(--bg-inset) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

.timeline-editor-row input[type="text"]:focus,
.timeline-editor-row input[type="number"]:focus,
.timeline-editor-row textarea:focus,
.timeline-editor-row select:focus,
.unified-editor-item input[type="text"]:not(.todo-text-input):not(.checklist-text-input):not(.stat-name-input):focus,
.unified-editor-item input[type="number"]:focus,
.unified-editor-item textarea:focus,
.unified-editor-item select:focus {
  border-color: var(--color-primary) !important;
  background-color: var(--bg-inset) !important;
}

/* ==========================================================================
   模块背景纹理通用多层级叠加与高斯模糊适配系统
   ========================================================================== */

/* 1. 确保所有可能的模块卡片容器具备相对定位及独立层级，形成局部 Stacking Context */
.preview-card-inner,
.item-inner-container,
.music-card-preview,
.music-card-cassette,
.music-card-MP3,
.music-apple,
.showcase-card,
.rpg-card-preview,
.timeline-preview,
.timeline-pro-preview,
.progress-bar-preview,
.social-card-preview,
.grid-preview-wrapper,
.todo-preview-container,
.calendar-preview,
.qa-preview,
.achievement-preview,
.letter-preview,
.ranking-preview,
.checklist-preview,
.relationship-preview,
.timer-preview,
.dialogue-preview-container,
.marquee-container,
.preview-header,
.profile-pro,
.profile-magazine,
.profile-life,
.profile-glass,
.collage-preview-wrapper,
.crossword-preview,
.receipt-paper,
.receipt-card,
.receipt-linear,
.linear-card,
.qr-code-module-container {
  position: relative;
  z-index: 1;
}

/* 2. 局部背景纹理层 (常规无毛玻璃模式下渲染)：使用 ::after 伪元素，利用 z-index: -1 紧贴背景且完美处于文字内容下方 */
.preview-card-inner::after,
.item-inner-container::after,
.music-card-preview::after,
.music-card-cassette::after,
.music-card-MP3::after,
.music-apple::after,
.showcase-card::after,
.rpg-card-preview::after,
.timeline-preview::after,
.timeline-pro-preview::after,
.progress-bar-preview::after,
.social-card-preview::after,
.grid-preview-wrapper::after,
.todo-preview-container::after,
.calendar-preview::after,
.qa-preview::after,
.achievement-preview::after,
.letter-preview::after,
.ranking-preview::after,
.checklist-preview::after,
.relationship-preview::after,
.timer-preview::after,
.dialogue-preview-container::after,
.marquee-container::after,
.preview-header::after,
.profile-pro::after,
.profile-magazine::after,
.profile-life::after,
.profile-glass::after,
.collage-preview-wrapper::after,
.crossword-preview::after,
.receipt-paper::after,
.receipt-card::after,
.receipt-linear::after,
.linear-card::after,
.qr-code-module-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--item-texture-bg);
  background-size: var(--item-texture-size);
  background-repeat: repeat;
  opacity: var(--item-texture-opacity);
  border-radius: inherit;
  z-index: -1;
  display: var(--item-texture-display, none);
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* 3. 页面模糊目标纹理层 (毛玻璃开启时在 wrapper 层面上渲染，置于 backdrop-filter 之下接受模糊) */
.preview-item-wrapper::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: var(--item-texture-bg);
  background-size: var(--item-texture-size);
  background-repeat: repeat;
  opacity: var(--item-texture-opacity);
  border-radius: inherit;
  z-index: 0;
  display: var(--item-texture-glass-display, none);
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Global Rich Text styles for Tiptap / ql-editor */
.tiptap,
.ql-editor {
  white-space: pre-wrap !important;
  word-wrap: break-word;
  word-break: break-all;
}
.tiptap p,
.ql-editor p {
  margin: 0 0 0.4em 0;
}
.tiptap p[style*="line-height"],
.ql-editor p[style*="line-height"] {
  line-height: unset;
}
.tiptap ul,
.tiptap ol,
.ql-editor ul,
.ql-editor ol {
  padding-left: 1.5em !important;
  margin: 0.5em 0 !important;
  list-style-position: outside !important;
}
.tiptap ul,
.ql-editor ul {
  list-style-type: disc !important;
}
.tiptap ol,
.ql-editor ol {
  list-style-type: decimal !important;
}
.tiptap li p,
.ql-editor li p {
  margin: 0 !important;
}
.tiptap ul[data-type="taskList"],
.ql-editor ul[data-type="taskList"] {
  list-style: none !important;
  padding: 0 !important;
}
.tiptap ul[data-type="taskList"] li,
.ql-editor ul[data-type="taskList"] li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 4px;
}
.tiptap ul[data-type="taskList"] li > label,
.ql-editor ul[data-type="taskList"] li > label {
  flex: 0 0 auto;
  user-select: none;
  margin-top: 4px;
}
.tiptap ul[data-type="taskList"] input[type="checkbox"],
.ql-editor ul[data-type="taskList"] input[type="checkbox"] {
  cursor: pointer;
  width: 1.2em;
  height: 1.2em;
  accent-color: var(--color-primary);
}
.tiptap table,
.ql-editor table {
  border-collapse: collapse;
  table-layout: fixed;
  width: 100%;
  margin: 1em 0;
  overflow: hidden;
}
.tiptap table td,
.tiptap table th,
.ql-editor table td,
.ql-editor table th {
  min-width: 1em;
  border: 2px solid var(--border-color, #ddd);
  padding: 6px 10px;
  vertical-align: top;
  box-sizing: border-box;
  line-height: inherit;
}
.tiptap table th,
.ql-editor table th {
  font-weight: bold;
  text-align: left;
  background-color: rgba(128, 128, 128, 0.05);
}
.tiptap h1,
.tiptap h2,
.tiptap h3 {
  margin: 0.5em 0 0.3em 0 !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}
.tiptap h1 { font-size: 1.6em; }
.tiptap h2 { font-size: 1.4em; }
.tiptap h3 { font-size: 1.2em; }
.tiptap blockquote {
  border-left: 4px solid var(--color-primary, #007AFF);
  padding-left: 1em !important;
  margin: 0.8em 0 !important;
  color: var(--text-secondary);
  background: rgba(128, 128, 128, 0.05);
  border-radius: 2px 8px 8px 2px;
}
.tiptap pre {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 12px !important;
  border-radius: 8px !important;
  margin: 0.8em 0 !important;
  font-family: 'Fira Code', monospace;
  font-size: 0.9em;
  overflow-x: auto !important;
}
.tiptap code {
  background: rgba(128, 128, 128, 0.1);
  padding: 2px 4px !important;
  border-radius: 4px !important;
  font-family: monospace;
}
.tiptap img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 5px 4px !important;
  display: inline-block;
  vertical-align: middle;
}
.is-empty-paragraph {
  min-height: 1em;
}
.tiptap hr, .ql-editor hr {
  border: none !important;
  border-top: 1px dashed var(--border-color, rgba(255, 255, 255, 0.15)) !important;
  margin: 1.2em 0 !important;
  height: 0 !important;
}

/* ==========================================================================
   PC端左右面板悬浮折叠与收缩样式 (PC Panel Collapse Toggles & Anim Styles)
   ========================================================================== */

/* 悬浮折叠/展开按钮 */
.main-floating-toggle-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 46px;
  background: var(--bg-editor) !important;
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1010;
  transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 1.15rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 0;
}

/* Teleport 到 body 的悬浮按钮：重置定位基础值，由 JS syncFloatTogglePosition 完全接管 */
.main-floating-toggle-btn.floating-teleported {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
}

/* 折叠按钮图标旋转动画：折叠时旋转 180°，展开时恢复原位 */
.main-floating-toggle-btn .toggle-icon {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.main-floating-toggle-btn.panel-collapsed .toggle-icon {
  transform: rotate(180deg);
}

.main-floating-toggle-btn:hover {
  color: #fff !important;
  background: var(--color-primary, #007AFF) !important;
  border-color: var(--color-primary, #007AFF) !important;
}

.main-floating-toggle-btn.left-toggle {
  left: 0;
  border-radius: 0 8px 8px 0;
  border-left: none !important;
}

.main-floating-toggle-btn.right-toggle {
  right: 0;
  border-radius: 8px 0 0 8px;
  border-right: none !important;
}

/* PC面板折叠状态下的样式覆盖 */
html.is-pc .layer-panel.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  border-left: none !important;
  border-right: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

html.is-pc .inspector-panel.collapsed {
  width: 0 !important;
  min-width: 0 !important;
  border-left: none !important;
  border-right: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
  overflow: hidden !important;
}

/* 隐藏PC端的旧版折叠按钮以避免界面冗余 */
html.is-pc .inspector-panel .collapse-btn {
  display: none !important;
}

/* ==========================================================================
   Figma UI3 极简悬浮底栏模式布局样式覆盖 (Figma UI3 Layout Styles)
   ========================================================================== */

/* 悬浮布局模式激活时的卡片样式 (仅限右侧属性面板，左侧图层面板在下方独立实现以贴边贴顶) */
.layout-floating-mode .inspector-panel {
  position: absolute !important;
  z-index: 1000 !important;
  height: calc(100dvh - var(--header-height) - var(--system-broadcast-height, 0px) - var(--global-banners-height, 0px) - 32px) !important;
  top: calc(var(--header-height) + var(--system-broadcast-height, 0px) + var(--global-banners-height, 0px) + 16px) !important;
  bottom: 16px !important;
  border-radius: 16px !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, width 0.4s ease !important;
}

/* 左侧图层面板贴边悬浮样式 (贴边、贴顶、贴底，高度占满，去除圆角和左/上/下边框) */
.layout-floating-mode .layer-panel {
  position: absolute !important;
  z-index: 1000 !important;
  left: 0 !important;
  top: calc(var(--header-height) + var(--system-broadcast-height, 0px) + var(--global-banners-height, 0px)) !important;
  bottom: 0 !important;
  height: calc(100dvh - var(--header-height) - var(--system-broadcast-height, 0px) - var(--global-banners-height, 0px)) !important;
  width: var(--layer-panel-width) !important;
  border-radius: 0 !important;
  border: none !important;
  border-right: 1px solid var(--border-color) !important;
  box-shadow: 6px 0 30px rgba(0, 0, 0, 0.04) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  transform: translate3d(0, 0, 0) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease, width 0.4s ease !important;
}

.layout-floating-mode .inspector-panel {
  right: 16px !important;
  width: var(--inspector-panel-width) !important;
  transform: translate3d(0, 0, 0) !important;
}

/* 悬浮面板在折叠状态下向左右平滑滑出视口并淡出，而不是改变宽度，避免内容受挤压 */
.layout-floating-mode .layer-panel.collapsed {
  transform: translate3d(-100%, 0, 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: var(--layer-panel-width) !important;
  min-width: var(--layer-panel-width) !important;
  overflow: hidden !important;
}

.layout-floating-mode .inspector-panel.collapsed {
  transform: translate3d(calc(100% + 32px), 0, 0) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: var(--inspector-panel-width) !important;
  min-width: var(--inspector-panel-width) !important;
  overflow: hidden !important;
}

/* 暗色模式下悬浮面板半透明卡片色彩微调 */
html.dark-mode .layout-floating-mode .inspector-panel {
  background: rgba(26, 28, 34, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}
html.dark-mode .layout-floating-mode .layer-panel {
  background: rgba(26, 28, 34, 0.82) !important;
  border-right-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 6px 0 30px rgba(0, 0, 0, 0.3) !important;
}

/* 悬浮布局下中间的画布视口强行扩展占满 100% 宽度 */
.layout-floating-mode .preview-panel {
  width: 100% !important;
  flex-grow: 1 !important;
}

/* 悬浮布局下的左右边缘折叠按钮浮动样式适配 */
.layout-floating-mode .main-floating-toggle-btn {
  z-index: 1020 !important;
  transform: none !important;
}

/* 左侧折叠按钮：在悬浮布局下固定锚在图层面板右边缘 */
.layout-floating-mode .main-floating-toggle-btn.left-toggle {
  position: fixed !important;
  left: 280px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  border-radius: 0 8px 8px 0 !important;
  border-left: none !important;
  transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s, border-color 0.2s, color 0.2s !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 折叠后，按钮移到视口最左边（0px），与图层面板滑出同步 */
.layout-floating-mode .main-floating-toggle-btn.left-toggle.panel-collapsed {
  left: 0 !important;
  right: auto !important;
  transform: translateY(-50%) !important;
  z-index: 1021 !important;
  border-radius: 0 8px 8px 0 !important;
  border-left: none !important;
}

/* 使用最高特异性选择器确保折叠状态生效 */
html.layout-floating-mode body .preview-panel button.main-floating-toggle-btn.left-toggle.panel-collapsed {
  left: 0 !important;
}

.layout-floating-mode .main-floating-toggle-btn.right-toggle {
  right: 12px !important;
  border-radius: 8px !important;
  border-right: 1px solid var(--border-color) !important;
}

/* Initial Load Animations */
@keyframes fadeInUpApp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.is-initial-loading .layer-panel, 
.is-initial-loading .inspector-panel, 
.is-initial-loading .preview-panel, 
.is-initial-loading .workspace-tabs-container {
  animation: fadeInUpApp 0.6s cubic-bezier(0.16, 1, 0.3, 1) backwards;
}

.is-initial-loading .workspace-tabs-container { animation-delay: 0.15s; }
.is-initial-loading .preview-panel { animation-delay: 0.2s; }
.is-initial-loading .layer-panel { animation-delay: 0.25s; }
.is-initial-loading .inspector-panel { animation-delay: 0.3s; }

/* Workspace Tab Switching Slide Transition */
.workspace-slide-enter-active,
.workspace-slide-leave-active {
  transition: opacity 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.workspace-slide-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.workspace-slide-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

/* Preset theme transition classes */
.is-theme-transitioning,
.is-theme-transitioning *,
.is-theme-transitioning .preview-canvas,
.is-theme-transitioning .preview-item-wrapper,
.is-theme-transitioning .item-inner-container,
.is-theme-transitioning .preview-card,
.is-theme-transitioning .preview-card-inner,
.is-theme-transitioning .preview-card-title,
.is-theme-transitioning .preview-card-content,
.is-theme-transitioning .title-text-content,
.is-theme-transitioning .title-icon-fixed,
.is-theme-transitioning .floating-title-badge,
.is-theme-transitioning .floating-title-text,
.is-theme-transitioning .win95-header,
.is-theme-transitioning .browser-header,
.is-theme-transitioning span,
.is-theme-transitioning h1,
.is-theme-transitioning h2,
.is-theme-transitioning h3,
.is-theme-transitioning h4,
.is-theme-transitioning h5,
.is-theme-transitioning h6,
.is-theme-transitioning p,
.is-theme-transitioning a,
.is-theme-transitioning button,
.is-theme-transitioning svg,
.is-theme-transitioning .icon-view-wrapper {
  transition: 
    background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    background-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    border-color 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    text-shadow 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    fill 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    stroke 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 云同步弹窗打开时，降低顶栏、面板、resizer 等固定定位元素的层级，防止闪烁 */
body.sync-modal-open .app-header,
body.sync-modal-open .layer-panel,
body.sync-modal-open .inspector-panel,
body.sync-modal-open .resizer-left,
body.sync-modal-open .resizer,
body.sync-modal-open .workspace-dock-wrapper,
body.sync-modal-open .workspace-tabs-container,
body.sync-modal-open .main-floating-toggle-btn,
body.sync-modal-open .global-banners-stack,
body.sync-modal-open #system-broadcast-container {
  z-index: -1 !important;
  pointer-events: none !important;
}



:root {
    --inspector-ui-opacity: 1; --mobile-inspector-height: 0px; --mobile-inspector-panel-height: 0px; --global-banners-height: 0px;
    --active-card-font-family: sans-serif !important;
}
html, body, #app {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    position: static !important;
    background-color: transparent !important;
    background-image: linear-gradient(135deg, #645B86, #e6e9ed) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    font-family: var(--active-card-font-family), -apple-system, sans-serif !important;
}
.preview-wrapper {
    display: block !important;
    width: 100%;
    margin: 0 auto !important;
    padding: 20px;
    padding-bottom: 80px;
    box-sizing: border-box;
    background-color: transparent !important;
    background-image: none !important;
    position: relative;
    max-width: 600px;
    border-radius: 0 !important;
    box-shadow: none !important;
    flex-shrink: unset !important;
    transition: none !important;
    transform-origin: unset !important;
    transform: none !important;
    overflow: visible !important;
    container-type: inline-size;
    container-name: canvas;
}
@media screen and (min-width: 769px) {
  .preview-wrapper {
    max-width: 600px;
    padding: 40px;
  }
}
.preview-items-container {
    width: 100%;
    position: relative;
}
.preview-items-container.is-bento-canvas {
    display: grid !important;
    position: relative;
    grid-template-columns: repeat(var(--bento-cols, 24), 1fr) !important;
    grid-auto-rows: calc((100cqw - (var(--bento-cols, 24) - 1) * var(--preview-gap, 24px)) / var(--bento-cols, 24)) !important;
    gap: var(--preview-gap, 24px) !important;
    align-items: stretch !important;
}
#preview-stickers-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}
.preview-items-container.is-bento-canvas ~ #preview-stickers-layer {
    display: grid !important;
    grid-template-columns: repeat(var(--bento-cols, 24), 1fr) !important;
    grid-auto-rows: calc((100cqw - (var(--bento-cols, 24) - 1) * var(--preview-gap, 24px)) / var(--bento-cols, 24)) !important;
    gap: var(--preview-gap, 24px) !important;
    align-items: stretch !important;
}
.preview-item-wrapper {
    box-sizing: border-box;
}
.preview-item-wrapper.is-hidden {
    display: none !important;
}
.preview-card-inner {
    position: relative;
}
.preview-card-inner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--card-bg-combined, transparent);
    background-size: cover;
    background-position: center;
    opacity: var(--card-bg-opacity, 1);
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
}
.footer-credit {
    position: relative;
    z-index: 20;
    clear: both;
    text-align: center;
    padding: 20px;
    color: #888;
    font-size: 12px;
    margin-top: 40px;
}
.bk-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 12px 24px;
    border-radius: 50px;
    z-index: 2147483647;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.bk-toast.visible {
    opacity: 1;
}
#bk-lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.95);
    z-index: 2147483647;
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    cursor: zoom-out;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}
#bk-lightbox.visible {
    display: flex;
    opacity: 1;
}
#bk-lightbox img {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    user-select: none;
}
[data-action] {
    cursor: pointer !important;
}
.spoiler-blur {
    filter: blur(10px) !important;
    cursor: pointer !important;
    transition: filter 0.3s ease;
    user-select: none !important;
}
.spoiler-blur.revealed {
    filter: none !important;
    cursor: text !important;
    user-select: text !important;
}
.preview-item-wrapper.is-expanded .fold-overlay {
    opacity: 0 !important;
}
.tiptap ul, .tiptap ol, .ql-editor ul, .ql-editor ol {
    padding-left: 1.6em !important;
    margin: 0.8em 0 !important;
}
.tiptap ul, .ql-editor ul {
    list-style-type: disc !important;
}
.tiptap ol, .ql-editor ol {
    list-style-type: decimal !important;
}
.tiptap ul[data-type="taskList"], .ql-editor ul[data-type="taskList"] {
    list-style: none !important;
    padding: 0 !important;
}
.tiptap ul[data-type="taskList"] li, .ql-editor ul[data-type="taskList"] li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}
.tiptap ul[data-type="taskList"] li label, .ql-editor ul[data-type="taskList"] li label {
    position: relative;
    width: 1.1em;
    height: 1.1em;
    border: 1.5px solid currentColor;
    border-radius: 3px;
    display: inline-block;
    flex-shrink: 0;
    margin-top: 0.2em;
}
.tiptap ul[data-type="taskList"] li[data-checked="true"] label::after,
.ql-editor ul[data-type="taskList"] li[data-checked="true"] label::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.8em;
}
.tiptap ul[data-type="taskList"] li[data-checked="true"] > div,
.ql-editor ul[data-type="taskList"] li[data-checked="true"] > div {
    text-decoration: line-through;
    opacity: 0.6;
}

/* Offline Custom Modals for Calendar Note Details */
.cal-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}
.cal-modal-content {
    background: var(--bg-editor, #fff);
    border-radius: 16px;
    width: 100%;
    max-width: 400px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--text-primary, #333);
    border: 1px solid var(--border-color, rgba(0,0,0,0.1));
    transform: translateY(20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.cal-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.05));
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cal-modal-close {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    color: var(--text-secondary, #888);
    cursor: pointer;
    padding: 0 5px;
    line-height: 1;
}
.cal-modal-body {
    padding: 20px;
    max-height: 50vh;
    overflow-y: auto;
}
.cal-modal-note-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--color-primary, #000);
    padding-left: 10px;
    border-left: 4px solid var(--color-primary, #6366f1);
}
.cal-modal-detail-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--text-secondary, #444);
    white-space: pre-wrap;
    word-break: break-all;
}

.music-lyrics-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 90px;
    overflow: hidden;
}
.lyrics-line {
    font-size: 0.85em;
    opacity: 0.4;
    white-space: pre-wrap;
    word-break: break-word;
    text-align: center;
    transition: all 0.4s;
    margin: 4px 0;
}
.lyrics-line.active {
    opacity: 1 !important;
    font-weight: bold !important;
    transform: scale(1.08);
    color: var(--music-accent-color);
}
.cal-day-cell {
    cursor: pointer;
}
.cal-day-cell.is-today {
    box-shadow: inset 0 0 0 2px var(--cal-accent, #FF3B30);
}
.cal-day-cell.cal-pulse {
    animation: cal-pulse 2s infinite cubic-bezier(0.4, 0, 0.6, 1);
}
@keyframes cal-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.85; transform: scale(0.95); } }
.music-progress-bar { position: relative; }

/* Lightbox Styles */
#bk-lightbox {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.9); z-index: 99999;
    display: none; justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s;
}
#bk-lightbox.visible { opacity: 1; }
#bk-lightbox img { max-width: 90%; max-height: 90%; object-fit: contain; }
#bk-lightbox .gallery-nav { display: flex; align-items: center; justify-content: center; }


@media screen and (min-width: 769px) {
  .preview-items-container.is-bento-canvas {
    --bento-cols: 24;
  }

  .preview-items-container {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    grid-auto-rows: 1px !important;
    column-gap: 24px !important;
    row-gap: 0px !important;
    align-items: start !important;
  }
  [data-item-id="profile_a545c062y"] { grid-column: span 12 !important; width: auto !important; }
  [data-item-id="c_wr97ocqwn"] { grid-column: span 12 !important; width: auto !important; }
  [data-item-id="card_q1eq8agig"] { grid-column: span 12 !important; width: auto !important; }
}


@media screen and (max-width: 768px) {
  .preview-items-container.is-bento-canvas {
    --bento-cols: 12;
  }

  .preview-items-container {
    display: grid !important;
    grid-template-columns: repeat(6, 1fr) !important;
    grid-auto-rows: 1px !important;
    column-gap: 24px !important;
    row-gap: 0px !important;
    align-items: start !important;
  }
  [data-item-id="profile_a545c062y"] { grid-column: span 6 !important; width: auto !important; }
  [data-item-id="c_wr97ocqwn"] { grid-column: span 6 !important; width: auto !important; }
  [data-item-id="card_q1eq8agig"] { grid-column: span 6 !important; width: auto !important; }
}