:root {
    --inspector-ui-opacity: 1; --color-birthday-logo: #EE0000; --system-broadcast-height: 72px; --broadcast-offset: 72px;
    --active-card-font-family: sans-serif !important;
}
html, body {
    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: #f0f2f5;
    font-family: var(--active-card-font-family), -apple-system, sans-serif !important;
}
/* Tiptap Support Styles */
.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; cursor: pointer; }
.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; pointer-events: none; }
.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"], .ql-editor ul[data-type="taskList"] li[data-checked="true"] { opacity: 0.6; }
.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; }
.spoiler-blur { filter: blur(10px); cursor: pointer; transition: filter 0.3s ease; }
.spoiler-blur:hover { filter: blur(5px); }
.spoiler-blur.revealed { filter: none !important; cursor: text; }
.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); }
.preview-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 80px;
    box-sizing: border-box;
    background-color: transparent;
    background-image: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}
@media screen and (min-width: 769px) { .preview-wrapper { max-width: 1000px; padding: 40px; } }
.preview-items-container { width: 100%; position: relative; }
.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-final, transparent);
    background-size: cover;
    background-position: center;
    opacity: var(--card-bg-opacity, 1);
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
}

.footer-credit { text-align: center; padding: 20px; color: #888; font-size: 12px; margin-top: 20px; }
.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); }
.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); }
#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="link"],
[data-action="toggle-check"],
[data-action="cycle-check"],
[data-action="alert"],
[data-action="copy"],
[data-action="lightbox"],
[data-action="lightbox-bg"],
[data-action="toggle-spoiler"],
[data-action="toggle-fold"] { cursor: pointer !important; }

.spoiler-blur { filter: blur(8px); cursor: pointer; transition: filter 0.3s; user-select: none; }
.spoiler-blur:hover { filter: blur(4px); }
.spoiler-blur.revealed { filter: none; user-select: text; cursor: text; }
.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); } }
:root { --bg-editor: #ffffff; --bg-input: #f8f8f8; --border-color: #e8e8e8; --bg-preview-pane: #e3e3e3; --color-primary: #007aff; }
.dark-mode { --bg-editor: #1a1c22; --bg-input: #1a1c22; --border-color: #2d313a; --bg-preview-pane: #0f1115; }
.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); }
#app-skeleton-container { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; display: flex; flex-direction: column; background: var(--bg-preview-pane); z-index: 9999; }
@media screen and (max-width: 768px) {
  .hide-on-mobile { display: none !important; }
}
@import url("https://fontsapi.zeoseven.com/570/main/result.css");
body { font-family: "Fusion Pixel 12px Mono latin"; font-weight: 400; }
a:not(.btn) { color: var(--color-primary); text-decoration: none; transition: 0.2s; 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: 0px !important; padding: 0px !important; width: 100% !important; }
.preview-items-container:has(.is-editing-wrapper) { overflow: visible !important; }
.app-container { max-width: none !important; width: 100% !important; margin: 0px !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 { transition: opacity 0.3s; opacity: 0.3 !important; }
.driver-popover, #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: rgba(0, 0, 0, 0.2) 0px 10px 30px; }
.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: rgb(255, 255, 255); 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; }
.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: 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; --bg-editor: #f5f7fa; --bg-preview-pane: #eef2f7; --bg-preview-page: #ffffff; --bg-card: #ffffff; --bg-primary: var(--bg-card); --bg-input: #ffffff; --bg-section: #fdfdfd; --bg-inset: #f0f2f5; --bg-secondary: var(--bg-section); --border-color: #e1e8f0; --border-input: #d1d5db; --border-dashed: #cbd5e0; --shadow-light: rgba(0, 0, 0, .05); --shadow-medium: rgba(0, 0, 0, .1); --text-primary: #1a1c23; --text-secondary: #64748b; --text-label: #475569; --text-placeholder: #94a3b8; --text-muted: var(--text-secondary); --text-on-primary: #ffffff; --text-action: #007aff; --color-primary: #007aff; --color-primary-hover: #006ae6; --color-primary-text: var(--color-primary); --color-primary-bg: rgba(0, 122, 255, .05); --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: rgba(0, 0, 0, .4); --bg-image-thumb: #f1f5f9; --bg-image-upload-hover: #eef5ff; --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 { --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; --border-color: #2d313a; --border-input: #3a3f4b; --border-dashed: #4a5568; --shadow-light: rgba(0, 0, 0, .3); --shadow-medium: rgba(0, 0, 0, .5); --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-label: #cbd5e0; --text-placeholder: #64748b; --text-on-primary: #ffffff; --text-action: #3498db; --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-primary-text: var(--color-primary); --bg-modal-overlay: rgba(0, 0, 0, .7); --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; }
html, body { height: var(--app-height, 100vh); margin: 0px; padding: 0px; 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; text-rendering: geometricprecision !important; }
#system-broadcast-container { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 9999; pointer-events: auto; }
#storage-warning-banner { display: none; position: fixed; top: var(--system-broadcast-height, 0px); left: 0px; width: 100%; background-color: var(--color-danger); color: rgb(255, 255, 255); padding: 8px 20px; text-align: center; font-size: 0.9rem; z-index: 9999; box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 10px; }
#storage-warning-banner a { color: rgb(255, 255, 255); font-weight: 700; text-decoration: underline; cursor: pointer; }
body.storage-warning .app-header, body.storage-warning .app-container { top: 35px; }
body.storage-warning .app-container { height: calc(-35px + 100vh); }
#page-limit-warning-banner { display: none; position: fixed; top: var(--system-broadcast-height, 0px); left: 0px; width: 100%; height: 26px; background-color: rgb(243, 156, 18); color: rgb(255, 255, 255); font-size: 0.75rem; line-height: 26px; z-index: 9998; overflow: hidden; white-space: nowrap; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px; }
#page-limit-warning-banner span { display: inline-block; padding-left: 100%; animation: 20s linear 0s infinite normal none running banner-marquee; }
@keyframes banner-marquee { 
  0% { transform: translate(0px); }
  100% { transform: translate(-100%); }
}
body.page-limit-warning .app-header, body.page-limit-warning .app-container { top: 26px; }
body.storage-warning.page-limit-warning #page-limit-warning-banner { top: calc(35px + var(--system-broadcast-height, 0px)) !important; }
body.storage-warning.page-limit-warning .app-header, body.storage-warning.page-limit-warning .app-container { top: calc(61px + var(--system-broadcast-height, 0px)); }
body.storage-warning:not(.page-limit-warning) .app-header { top: calc(35px + var(--system-broadcast-height, 0px)); }
body.page-limit-warning:not(.storage-warning) .app-header { top: calc(26px + var(--system-broadcast-height, 0px)); }
body.storage-warning.page-limit-warning .app-header { top: calc(61px + var(--system-broadcast-height, 0px)); }
body.storage-warning .layer-panel, body.storage-warning .inspector-panel, body.storage-warning .resizer { top: calc(var(--header-height) + 35px); height: calc(100vh - var(--header-height) - 35px); }
.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: 0px 20px; position: fixed; top: var(--system-broadcast-height, 0px); left: 0px; z-index: 100; box-shadow: 0 2px 8px var(--shadow-light); transition: all 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; }
.app-container { display: flex; height: 100dvh; padding-top: calc(var(--header-height) + var(--system-broadcast-height, 0px)); position: relative; top: 0px; transition: none; }
.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: 0px -4px; height: calc(100dvh - var(--header-height) - var(--system-broadcast-height, 0px)); cursor: col-resize; z-index: 101; transition: background 0.2s; 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; }
body.has-broadcast .app-header { top: var(--system-broadcast-height, 0px) !important; }
body.has-broadcast .app-container { padding-top: calc(var(--header-height) + var(--system-broadcast-height, 0px)) !important; }
body.driverjs-active { overflow: hidden !important; position: static !important; }
.layer-panel, .inspector-panel { background: var(--bg-editor); padding-bottom: env(safe-area-inset-bottom); overflow-y: auto; flex-shrink: 0; transition: width var(--transition-speed) ease,opacity var(--transition-speed) ease,transform var(--transition-speed) ease; position: relative; height: calc(100dvh - var(--header-height) - var(--system-broadcast-height, 0px)) !important; }
.layer-panel { width: var(--layer-panel-width); border-right: 1px solid var(--border-color); padding: 0px; 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 1 0%; 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: 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: 0px 15px 10px; }
.module-library-container { flex-shrink: 0; 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; }
.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 1 0%; padding: 8px; border-top: none; border-right: none; border-left: none; border-image: initial; background: transparent; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; font-weight: 600; font-size: 0.9rem; transition: 0.2s; border-radius: 6px 6px 0px 0px; }
.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 { 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: 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 { display: grid; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; }
.library-grid { display: none; grid-template-columns: repeat(3, 1fr); gap: 8px; animation: 0.2s ease 0s 1 normal none running fadeIn; 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: 0.2s; height: 60px; }
.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 { 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: 0px; display: flex; flex-direction: column; overflow: hidden; opacity: var(--inspector-ui-opacity, 1); transition: opacity 0.3s, transform 0.3s; }
.inspector-scroll-container { flex-grow: 1; overflow-y: auto; padding: 0px; display: flex; flex-direction: column; width: 100%; max-width: 100%; overflow-x: hidden !important; }
.inspector-tab-content { display: none; padding: 20px 20px 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: 0px; }
.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: rgba(0, 0, 0, 0.03) 0px -2px 10px; transition: padding 0.2s; }
.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 0px; gap: 10px; background: var(--bg-editor); position: static; top: 0px; z-index: 20; }
.sub-tab-btn { flex: 1 1 0%; text-align: center; padding: 8px; font-size: 0.85rem; 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: ; border-bottom: none; border-radius: 8px 8px 0px 0px; background: var(--bg-input); cursor: pointer; color: var(--text-secondary); transition: 0.2s; }
.sub-tab-btn.active { background: var(--bg-editor); color: var(--color-primary-text); font-weight: 700; border-top: 2px solid var(--color-primary); margin-bottom: -1px; z-index: 21; box-shadow: rgba(0, 0, 0, 0.02) 0px -2px 5px; }
.global-sub-content { display: none; border-top: 1px solid var(--border-input); padding-top: 20px; }
.global-sub-content.active { display: block; animation: 0.2s ease 0s 1 normal none running fadeIn; }
.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 1 0%; padding: 12px 10px; cursor: pointer; border-top: none; border-right: none; border-left: none; border-image: initial; background: none; color: var(--text-secondary); font-weight: 600; border-bottom: 2px solid transparent; transition: all 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; }
.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: 0px; }
.preview-canvas-area { flex-grow: 1; overflow: hidden auto; 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: 0px 15px; gap: 4px; overflow-x: auto; flex-shrink: 0; z-index: 10; 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-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: ; border-bottom: none; border-radius: 8px 8px 0px 0px; font-size: 0.85rem; color: var(--text-secondary); cursor: pointer; flex: 0 0 auto; min-width: 120px; max-width: 200px; height: 34px; transition: 0.2s; user-select: none; position: relative; white-space: nowrap; }
.workspace-tab.active { background: var(--bg-preview-pane); color: var(--color-primary); font-weight: 700; border-bottom: 1px solid var(--bg-preview-pane); margin-bottom: -1px; z-index: 5; box-shadow: rgba(0, 0, 0, 0.02) 0px -2px 5px; }
.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: rgba(0, 122, 255, 0.1) 0px 0px 0px 2px; }
.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: 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: 700; 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: center top; 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; 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: 400; 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: rgb(93, 173, 226); color: rgb(255, 255, 255); }
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 { 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: 0px; 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: 0.3s ease 0s 1 normal none running fadeIn; }
.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; pointer-events: none; }
.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 20px 40px; position: relative; overflow: visible; font-family: var(--active-card-font-family); transition: all var(--transition-speed) ease,width .4s cubic-bezier(.25,.8,.25,1),max-width .4s cubic-bezier(.25,.8,.25,1); }
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: 0px auto !important; transform-origin: center top !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; 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: rgba(0, 122, 255, 0.5) 0px 0px 8px; 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: rgba(0, 0, 0, 0.1) 0px 2px 4px; }
.btn-primary { background: var(--color-primary); }
.btn-success { background: rgb(52, 199, 89); color: rgb(255, 255, 255); }
.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 { background: rgb(153, 153, 153); 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: 0px; margin: 0px 0px 14px; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px; overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; position: relative; }
.editor-section:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.08) 0px 6px 16px; border-color: var(--color-primary); }
fieldset.editor-section { min-width: 0px; margin-inline: 0px; padding-block: 0px; padding-inline: 0px; }
.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: 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; }
.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: 400; color: var(--text-action); }
.advanced-setting { display: block; animation: 0.3s ease 0s 1 normal none running fadeIn; }
.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: 0px; }
.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: 0.2s cubic-bezier(0.4, 0, 0.2, 1); max-width: 100%; overflow-wrap: break-word; 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 { 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: rgba(0, 122, 255, 0.2) 0px 0px 0px 3px; }
.form-group textarea { min-height: 80px; resize: vertical; }
.input-group { display: flex; align-items: stretch; gap: 0px; background-color: var(--bg-input); border: 1px solid var(--border-input); border-radius: 8px; overflow: hidden; transition: 0.2s; box-shadow: rgba(0, 0, 0, 0.04) 0px 1px 3px inset; 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: rgba(0, 122, 255, 0.15) 0px 0px 0px 3px; }
.input-group .btn-small { color: var(--text-secondary); width: 36px !important; height: 100% !important; border-top: none !important; border-right: none !important; border-bottom: none !important; border-image: initial !important; border-radius: 0px !important; border-left: 1px solid rgba(128, 128, 128, 0.2) !important; background-color: transparent !important; margin: 0px !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: 0px 12px; appearance: none; background: rgba(128, 128, 128, 0.2); border-radius: 3px; outline: none; }
.input-group input[type="range"]::-webkit-slider-thumb { appearance: none; width: 16px; height: 16px; background: var(--color-primary); border-radius: 50%; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 3px; }
.stepper-group { display: flex; align-items: center; gap: 5px; }
.stepper-group input[type="range"] { flex-grow: 1; }
.btn-stepper { display: none; flex-shrink: 0; width: 28px; height: 28px; padding: 0px; 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: 0.2s; 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 { 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: rgba(0, 0, 0, 0.06) 0px 1px 3px inset; }
.radio-group.wrap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.radio-group.wrap.dense { grid-template-columns: repeat(4, 1fr); }
.radio-group label { flex: 1 1 0%; text-align: center; padding: 7px 4px; margin: 0px; border-radius: 6px; cursor: pointer; transition: 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: nowrap; }
.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: rgba(0, 0, 0, 0.08) 0px 2px 5px; 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: 0px; }
.color-control-group { flex: 1 1 0%; min-width: 0px; }
.color-control-row { flex-direction: column !important; gap: 12px !important; }
.color-control-group { width: 100% !important; flex: 0 0 auto !important; }
.input-group.simple { width: 100%; box-sizing: border-box; }
.checkbox-group { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; }
.border-apply-to-list .checkbox-group { padding-left: 20px; }
.border-apply-to-list .checkbox-group.is-parent { padding-left: 0px; }
.checkbox-group label { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; margin: 0px; }
.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: 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: rgba(0, 0, 0, 0.05) 0px 1px 2px; }
hr.separator { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); margin: 20px 0px; }
.tabs { display: flex; border-bottom: 1px solid var(--border-color); margin-bottom: 15px; overflow-x: auto; white-space: nowrap; flex-wrap: nowrap; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab-btn { flex: 0 0 auto; padding: 8px 12px; cursor: pointer; border-top: none; border-right: none; border-left: none; border-image: initial; 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; padding: 30px 15px; text-align: center; border-radius: 16px; transition: all 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 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 { width: 90px; height: 90px; border: 4px solid var(--bg-preview-page); box-shadow: 0 4px 12px var(--shadow-light); object-fit: cover; background-color: rgb(255, 255, 255); transition: all var(--transition-speed) ease; cursor: pointer; position: relative; z-index: 5; }
#preview-avatar-wrapper { position: relative; display: inline-block; line-height: 0; transition: all 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: rgba(0, 0, 0, 0.4) 0px 1px 3px; }
#avatar-status-badge.badge-red-dot { background-color: rgb(255, 59, 48); color: rgb(255, 255, 255); font-size: 10px; font-weight: 700; border: 2px solid rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 6px; width: auto; min-width: 20px; height: 20px; padding: 0px 4px; border-radius: 10px; text-shadow: none; }
.inspector-panel .radio-group { display: grid; grid-template-columns: repeat(auto-fill, minmax(75px, 1fr)); gap: 5px; }
.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: 0px; }
.timeline-event-editor .card-delete-btn { flex-shrink: 0; width: 32px; height: 32px; padding: 0px; margin: 5px; }
.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: rgb(204, 204, 204); font-size: 20px; }
.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: 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: rgba(0, 122, 255, 0.1) 0px 0px 0px 2px; outline: none; }
#preview-nickname { margin: 12px 0px 5px; font-size: 1.6rem; font-weight: 700; color: var(--text-primary); transition: color var(--transition-speed) ease; }
#preview-subtitle { margin: 0px 0px 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: 0px; 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: all var(--transition-speed) ease; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; cursor: grab; flex-shrink: 0; position: relative; overflow: visible; }
.tag-pill > span:not(.icon-view-wrapper) { display: inline-block; }
.mobile-pencil-wrapper { position: absolute; top: 0px; right: 0px; display: none; z-index: 100; pointer-events: none; }
@media screen and (max-width: 1024px) {
  .mobile-pencil-wrapper:not(.reactive) { display: flex; width: 20px; height: 20px; top: -8px; right: -8px; background: var(--color-primary); color: rgb(255, 255, 255); border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 6px; cursor: pointer; border: 1.5px solid rgb(255, 255, 255); pointer-events: auto; }
}
.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: all var(--transition-speed) ease; }
.sortable-ghost { transform: scale(0.95); transition: 0.2s; border-radius: 12px; 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; transform: scale(1.05) !important; box-shadow: rgba(0, 0, 0, 0.25) 0px 15px 30px !important; z-index: 10000 !important; transition: none !important; }
.preview-item-wrapper { user-select: none; }
.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: all var(--transition-short) ease; min-height: 80px; }
.thumbnail-wrapper img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-short) ease; }
.thumbnail-wrapper:hover, .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: 0px; font-size: 0.8rem; line-height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: rgb(255, 255, 255); border: none; }
.thumbnail-actions .btn:hover { background: rgba(0, 0, 0, 0.8); }
.editor-item-header { display: flex; align-items: center; padding: 0px 10px; background: var(--bg-section); border-bottom: 1px solid var(--border-color); border-radius: 8px 8px 0px 0px; position: sticky; top: 0px; z-index: 20; box-shadow: rgba(0, 0, 0, 0.02) 0px 2px 5px; }
.editor-item-title-input { font-weight: 600; color: var(--text-primary); margin: 0px; flex-grow: 1; padding: 10px; border: 1px solid transparent; background: transparent; font-size: 1em; min-width: 0px; 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; }
.preview-items-container.compact-mode { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 1px; column-gap: var(--preview-gap); row-gap: 0px; align-items: start; }
.preview-items-container.compact-mode .preview-item-wrapper { height: auto; align-self: start; width: auto !important; }
.preview-items-container.locked-mode * { cursor: default !important; pointer-events: none !important; }
#preview-items-container .empty-placeholder { text-align: center; padding: 50px 0px; color: var(--text-placeholder); width: 100%; }
.preview-item-wrapper { cursor: pointer; position: relative; z-index: 1; contain: layout style; transform: translate3d(0px, 0px, 0px); backface-visibility: hidden; perspective: 1000px; will-change: transform, margin; 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, border-radius 0.3s, box-shadow 0.3s !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 { backdrop-filter: var(--g-comp-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); overflow-wrap: break-word; transition: all var(--transition-short) ease; -webkit-text-stroke: var(--g-comp-text-stroke); paint-order: stroke; line-height: var(--g-comp-line-height); letter-spacing: var(--g-comp-letter-spacing, 0px); }
.preview-card-inner::before { content: ""; position: absolute; inset: 0px; z-index: 0; background-image: ; background-repeat: ; background-attachment: ; background-origin: ; background-clip: ; background-color: ; background-size: cover; background-position: center var(--card-bg-pos-y, center); border-radius: inherit; opacity: var(--card-bg-opacity, 1); transition: background var(--transition-speed) ease; }
.preview-card-inner[data-card-style]:not([data-card-style="default"]):not([data-card-style="quote"]):not([data-card-style="terminal"]):not([data-has-bg-image="true"])::before { display: none !important; }
.preview-card-inner::after { content: ""; position: absolute; inset: 0px; background-color: var(--card-overlay-color, transparent); opacity: var(--card-overlay-opacity, 0); border-radius: inherit; z-index: 1; pointer-events: none; transition: all var(--transition-short) ease; }
.preview-card-sticker { position: absolute; top: -10px; left: 50%; width: 80px; height: 25px; transform: translate(-50%) rotate(-3deg); z-index: 10; pointer-events: none; }
.preview-card-sticker.tape { background-color: rgba(255, 255, 245, 0.85); box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 6px; 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: translate(-50%) rotate(-2deg); }
.preview-card-sticker.pushpin { width: 20px; height: 20px; top: -8px; background-color: rgb(231, 76, 60); border-radius: 50%; border: 2px solid rgb(192, 57, 43); box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px; transform: translate(-50%) rotate(10deg); }
.preview-card-sticker.pushpin::before { content: ""; position: absolute; bottom: -8px; left: 50%; transform: translate(-50%) rotate(45deg); width: 6px; height: 6px; background: rgb(189, 195, 199); }
.preview-card .preview-card-inner, .preview-button, .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, .preview-button, .timeline-preview, .progress-bar-preview { backdrop-filter: var(--g-comp-backdrop-filter); }
.preview-card:hover .preview-card-inner, .preview-button:hover, .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); z-index: 100; box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 35px !important; }
.preview-card-title, .preview-card-content { position: relative; z-index: 2; margin: 0px; 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; }
.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); white-space: pre-wrap; font-variant-ligatures: none; overflow-wrap: break-word; word-break: break-word; hyphens: none; padding-right: 0.5px; box-sizing: border-box; line-height: var(--g-comp-line-height, 1.5) !important; letter-spacing: var(--g-comp-letter-spacing, 0px) !important; 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 p, .preview-card-content .ql-editor p, .letter-body p, .dialogue-text p, .qa-content p, .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 !important; letter-spacing: inherit !important; white-space: pre-wrap !important; padding: 0px !important; margin: 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); margin: 0px !important; padding: 0px !important; white-space: pre-wrap !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 { padding-left: 1.6em !important; margin: 0.8em 0px !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; }
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ul ul { list-style-type: circle !important; margin: 4px 0px !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 { padding-left: 1.6em !important; margin: 0.8em 0px !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; }
.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; }
.tiptap ul ul { list-style-type: circle !important; margin: 4px 0px !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 { display: inline-block !important; transform: none !important; margin: 0px !important; padding: 2px 0px !important; line-height: 1.4 !important; }
.preview-card-title .iconify, .preview-card-title .custom-svg-icon, .tag-pill .iconify, .tag-pill .custom-svg-icon { flex-shrink: 0; display: block !important; margin: 0px !important; padding: 0px !important; }
.tag-pill .iconify, .tag-pill .custom-svg-icon { font-size: 1.1em; display: block !important; margin: 0px !important; }
.preview-items-container figure { margin: 0px; transition: transform 0.3s; 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 0px 0px; max-width: 100%; transition: transform 0.3s; }
.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: 0px; 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 { padding: 12px; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 15px; transform: rotate(-1.5deg); transition: transform 0.3s, box-shadow 0.3s; border-radius: 2px; background-color: rgb(255, 255, 255) !important; height: auto !important; }
.preview-items-container figure.polaroid-style figcaption { position: static; margin-top: 15px; margin-bottom: 10px; width: 100%; text-align: center; font-family: "LXGW WenKai", "Comic Sans MS", cursive, sans-serif; font-size: 1rem; opacity: 0.9; padding: 0px; color: rgb(51, 51, 51) !important; background: transparent !important; }
.preview-button { display: flex; align-items: center; padding: 12px 18px; font-weight: 600; transition: transform 0.2s, box-shadow 0.2s; cursor: pointer; text-decoration: none; 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)); justify-content: var(--button-text-align, var(--g-comp-text-align)); width: 100%; height: 100%; }
.preview-button:hover { transform: scale(1.03); box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px; }
.preview-button .iconify { font-size: 1.2em; margin-right: 10px; }
.preview-button.vertical-mode { gap: 4px; flex-direction: column !important; justify-content: center !important; text-align: center !important; padding: 8px 2px !important; }
.stat-block-preview { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 15px 5px; height: 100%; gap: 2px; border-radius: var(--g-comp-border-radius); background-color: var( --card-bg-color, var(--button-bg-color, var(--g-comp-bg-color)) ); color: var( --card-text-color, var(--button-text-color, var(--g-comp-text-color)) ); overflow: hidden; }
.stat-block-icon .iconify { opacity: 0.7; margin-bottom: 4px; font-size: 1.8em !important; margin-right: 0px !important; }
.stat-block-value { font-size: 1.6em; font-weight: 700; line-height: 1.1; color: var(--accent-color, var(--g-theme-accent)); }
.stat-block-label { font-size: 0.75em; opacity: 0.6; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; }
.preview-button.vertical-mode .iconify { margin-bottom: 2px; margin-right: 0px !important; font-size: 1.6em !important; }
.preview-button.vertical-mode span[data-item-key="text"] { font-size: 0.8em; line-height: 1.1; opacity: 0.9; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-button .button-subtext { display: block; font-size: 0.8em; opacity: 0.7; margin-top: 2px; line-height: 1; }
.preview-button:not(.vertical-mode) { gap: 8px; }
.preview-button:not(.vertical-mode) .button-text-group { display: flex; flex-direction: column; align-items: var(--button-text-align, flex-start); gap: 2px; flex-grow: 1; }
.preview-button:not(.vertical-mode) .button-subtext { text-align: var(--button-text-align, left); }
.preview-button[data-style="ios"] { backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.3); position: relative; background-color: var( --button-bg-color, rgba(255, 255, 255, .75) ) !important; border-radius: var(--button-border-radius, 14px) !important; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px !important; align-items: flex-start !important; padding: 12px 15px !important; color: rgb(0, 0, 0) !important; }
.preview-button[data-style="ios"][style*="--button-bg-color"] { background-color: var(--button-bg-color) !important; }
.preview-button[data-style="ios"] .iconify { border-radius: 6px; background: var(--icon-background, var(--accent-color, #007aff)); color: rgb(255, 255, 255); padding: 4px; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 5px; font-size: 2em !important; margin-right: 12px !important; }
.preview-button[data-style="ios"] .button-text-group { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 1 1 0%; }
.preview-button[data-style="ios"] span[data-item-key="text"] { font-weight: 600; font-size: 0.95em; opacity: 0.9; }
.preview-button[data-style="ios"] .button-subtext { font-size: 0.85em; opacity: 0.6; font-weight: 400; line-height: 1.3; }
.preview-button[data-style="ios"]::after { content: "Now"; position: absolute; top: 12px; right: 15px; font-size: 0.75em; opacity: 0.4; font-weight: 400; }
.preview-button[data-style="retro"] { display: flex; background-color: silver !important; border-width: 2px !important; border-style: solid !important; border-color: rgb(255, 255, 255) rgb(0, 0, 0) rgb(0, 0, 0) rgb(255, 255, 255) !important; border-radius: 0px !important; box-shadow: rgba(0, 0, 0, 0.2) 2px 2px !important; color: rgb(0, 0, 0) !important; font-family: "Courier New", Courier, monospace !important; padding: 4px !important; flex-direction: column !important; gap: 0px !important; }
.preview-button[data-style="retro"]::before { content: attr(data-title-text); display: block; background: navy; color: rgb(255, 255, 255); width: 100%; padding: 2px 6px; font-size: 0.8em; font-weight: 700; box-sizing: border-box; margin-bottom: 8px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.preview-button[data-style="retro"] .retro-inner { display: flex; align-items: center; padding: 10px 15px 15px; width: 100%; gap: 15px; }
.preview-button[data-style="retro"] .iconify { color: rgb(0, 0, 0) !important; font-size: 2em !important; margin: 0px !important; }
.preview-button[data-style="retro"] .button-subtext { font-size: 0.9em; text-align: left; width: 100%; }
.preview-button[data-style="retro"] .button-text-group, .preview-button[data-style="retro"] > span[data-item-key="text"] { display: none !important; }
.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: 0px; }
.apply-global-border::before, .apply-global-border::after { display: none; content: ""; position: absolute; inset: 0px; border-radius: inherit; pointer-events: none; transition: 0.3s; }
.apply-global-border { border: 0px solid transparent; 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"]) { box-sizing: border-box; border: var(--g-border-width) var(--g-border-style, solid) var(--g-border-color) !important; background-clip: border-box !important; }
.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: var(--g-border-width) var(--g-border-style, solid) var(--g-border-color) !important; background-clip: border-box !important; }
.preview-header.apply-global-border { transform-style: flat; }
.apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .preview-card > .preview-card-inner::before { top: calc(-1 * var(--g-border-width)); left: calc(-1 * var(--g-border-width)); right: calc(-1 * var(--g-border-width)); bottom: calc(-1 * var(--g-border-width)); z-index: -1; }
.apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .preview-card > .preview-card-inner::after { inset: 0px; border-radius: var(--g-comp-border-radius); }
.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); 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"] { background-clip: border-box; position: relative; z-index: 1; border: var(--g-border-width) solid var(--g-border-color) !important; }
.apply-global-border[data-border-style="double-offset"]::before { content: ""; display: block; position: absolute; inset: 0px; 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; 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 { 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 { z-index: 1; transition: box-shadow 0.3s, transform 0.3s; box-shadow: var(--g-shadow-value) !important; }
.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: rgba(0, 0, 0, 0.15) 0px 4px 20px; padding: 5px 0px; min-width: 180px; display: none; animation: 0.1s ease 0s 1 normal none running fadeIn; }
#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: 0px; margin: 4px 0px; 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: 700; }
.layer-panel-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: relative; }
.flyout-panel { position: absolute; left: 105%; bottom: 0px; width: 200px; background: var(--bg-editor); border: 1px solid var(--border-color); box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 20px; border-radius: 12px; padding: 10px; display: none; z-index: 1000; max-height: 400px; overflow-y: auto; }
.flyout-panel.visible { display: block; animation: 0.2s ease 0s 1 normal none running fadeIn; }
.flyout-grid { display: grid; grid-template-columns: 1fr; gap: 5px; }
@media (max-width: 1024px) {
  .layer-panel-buttons { overflow-x: auto; white-space: nowrap; padding-bottom: 10px; gap: 10px; scrollbar-width: none; display: flex !important; }
  .layer-panel-buttons::-webkit-scrollbar { display: none; }
  .layer-panel-buttons .btn { flex: 0 0 auto; padding: 10px 16px; min-width: 80px; width: auto !important; }
  #show-more-modules-btn, .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: rgba(0, 0, 0, 0.2) 0px 4px 10px; 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: 0px; height: 100%; gap: 12px; padding: 5px 0px; }
.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 0px; min-height: 45px; mask-image: linear-gradient(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: 0.3s; margin: 4px 0px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.music-lyrics-container { flex: 1 1 0%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; min-height: 80px; mask-image: linear-gradient(transparent 0%, black 15%, black 85%, transparent 100%); }
.lyrics-line.active { opacity: 1; font-weight: 700; font-size: 0.95em; color: var(--music-accent-color); transform: scale(1.05); margin: 2px 0px; }
.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-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; transition: transform 0.5s; 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: 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 4px; }
.tag-pill:hover { transform: translateY(-1px) scale(1.05); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 8px; 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: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); margin: 4px 0px; text-align: center; }
.lyrics-line.active { transform: scale(1.08); color: var(--music-accent-color); opacity: 1 !important; font-weight: 700 !important; }
.music-lyrics-container { flex: 1 1 0%; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 90px; mask-image: linear-gradient(transparent 0%, black 20%, black 80%, transparent 100%); }
.music-card-cassette { background: linear-gradient(rgb(42, 42, 42), rgb(26, 26, 26)); color: rgb(34, 34, 34); padding: 12px; display: flex; flex-direction: column; border-radius: 8px; 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: ""; position: absolute; top: 8px; left: 8px; width: 6px; height: 6px; border-radius: 50%; background: rgb(17, 17, 17); box-shadow: rgba(255, 255, 255, 0.1) 1px 1px 1px inset, rgb(51, 51, 51) 0px 0px 0px 2px; z-index: 2; }
.music-card-cassette::after { content: ""; position: absolute; top: 8px; right: 8px; width: 6px; height: 6px; border-radius: 50%; background: rgb(17, 17, 17); box-shadow: rgba(255, 255, 255, 0.1) 1px 1px 1px inset, rgb(51, 51, 51) 0px 0px 0px 2px; z-index: 2; }
.cassette-body { background-color: rgb(227, 224, 209); background-image: linear-gradient(rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0) 10%); border-radius: 4px; padding: 15px 10px; 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; 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: ""; position: absolute; bottom: -8px; width: 8px; height: 8px; border-radius: 50%; background: rgb(34, 34, 34); z-index: 5; }
.cassette-body::before { left: 20px; }
.cassette-body::after { right: 20px; }
.cassette-header { background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, 0.03) 3px) rgb(255, 253, 245); padding: 6px 10px; border-radius: 2px; margin-bottom: 12px; transform: rotate(-0.5deg); box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 2px; display: flex; justify-content: space-between; align-items: center; border: 1px solid rgb(212, 212, 212); }
.cassette-header [data-item-key="songTitle"] { width: auto !important; min-width: 0px !important; }
.cassette-spools { display: flex; justify-content: center; align-items: center; gap: 25px; background: rgb(34, 34, 34); padding: 8px; border-radius: 30px; margin-bottom: 5px; border: 2px solid rgb(85, 85, 85); box-shadow: rgba(0, 0, 0, 0.5) 0px 2px 5px inset; position: relative; }
.cassette-spools::before { content: ""; position: absolute; inset: 0px 15%; background: rgba(255, 255, 255, 0.1); pointer-events: none; }
.spool { width: 36px; height: 36px; background: radial-gradient(circle, rgb(238, 238, 238) 3px, transparent 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-radius: 50%; border: 4px solid rgb(92, 64, 51); animation: 4s linear 0s infinite normal none running spin; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px; }
.cassette-tape-window { height: 4px; background: rgb(62, 39, 35); flex-grow: 1; margin: 0px 5px; opacity: 0.8; }
.music-card-MP3 { background: linear-gradient(145deg, rgb(240, 240, 240), rgb(220, 220, 220)); border-radius: 18px; box-sizing: border-box; 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; display: flex; flex-direction: column; align-items: center; color: rgb(43, 56, 54); text-shadow: rgba(255, 255, 255, 0.15) 0px 1px 0px; 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: rgb(198, 216, 211); 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 rgb(95, 122, 118); border-radius: 4px; padding: 10px; margin-bottom: 15px; display: flex; gap: 10px; 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 { width: 50px; height: 50px; background: rgb(204, 204, 204); object-fit: cover; flex-shrink: 0; border: 1px solid rgb(51, 51, 51); }
.MP3-info { flex: 1 1 0%; min-width: 0px; 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: rgb(230, 230, 230); border-radius: 50%; position: relative; border: 1px solid rgb(187, 187, 187); display: flex; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px; }
.MP3-center-btn { width: 45px; height: 45px; background: rgb(204, 204, 204); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px inset; }
.MP3-ctrl { position: absolute; color: rgb(153, 153, 153); font-weight: 700; 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, 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: 0.3s; }
.rpg-title { font-size: 1.2em; font-weight: 700; 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"] { border: 2px solid rgb(255, 255, 255); overflow: visible; transform: rotate(-1deg); background-color: rgb(0, 0, 0) !important; color: rgb(255, 255, 255) !important; }
.rpg-card-preview[data-style="red"]::before { content: ""; position: absolute; inset: 0px; background: repeating-linear-gradient(45deg, rgb(26, 26, 26), rgb(26, 26, 26) 10px, rgb(34, 34, 34) 10px, rgb(34, 34, 34) 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: rgb(255, 255, 255); color: rgb(0, 0, 0); padding: 4px 15px; transform: skew(-15deg) rotate(-2deg); box-shadow: rgb(211, 13, 25) 3px 3px; margin-bottom: 25px; }
.rpg-card-preview[data-style="red"] .radar-grid { stroke: rgb(102, 102, 102); 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: rgb(255, 255, 255); stroke-width: 3; stroke-linejoin: round; }
.rpg-card-preview[data-style="red"] .radar-label { font-family: pingfangzhangyalinheifang, sans-serif; font-size: 16px; fill: rgb(255, 255, 255); text-shadow: rgb(0, 0, 0) 2px 2px 0px; }
.rpg-card-preview[data-style="blue"] { background: linear-gradient(160deg, rgb(238, 251, 252), rgb(196, 233, 250)); border: 1px solid rgba(255, 255, 255, 0.8); color: rgb(0, 43, 77); box-shadow: rgba(0, 183, 246, 0.25) 0px 8px 32px; }
.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: rgb(0, 86, 179); border-bottom: 2px solid rgb(0, 183, 246); 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: rgb(0, 183, 246); stroke-width: 2; filter: drop-shadow(rgba(0, 183, 246, 0.5) 0px 0px 5px); }
.rpg-card-preview[data-style="blue"] .radar-label { font-size: 12px; fill: rgb(0, 64, 128); font-weight: 700; }
.timeline-preview { position: relative; overflow: hidden; width: 100%; }
.timeline-line { position: absolute; left: 8px; top: 0px; bottom: 0px; width: 2px; background-color: var(--border-color); }
.timeline-event { position: relative; margin-bottom: 20px; }
.timeline-event:last-child { margin-bottom: 0px; }
.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); }
.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: 0px; left: 0px; 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; }
.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: all var(--transition-speed) ease; }
.modal-overlay.visible .modal-container { transform: scale(1); opacity: 1; }
.modal-container h3 { margin-top: 0px; margin-bottom: 20px; font-size: 1.25rem; color: var(--text-primary); }
.fade-enter-active, .fade-leave-active { transition: opacity 0.3s !important; }
.fade-enter-from, .fade-leave-to { opacity: 0 !important; }
.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: 0px; }
.cropper-img-container { flex: 3 1 0%; 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 1 0%; 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: 0px; }
#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: rgb(255, 255, 255); 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: rgba(0, 0, 0, 0.3) 0px 5px 20px; z-index: 2000; max-width: 90%; width: 450px; border: 1px solid var(--border-color); }
.error-modal h3 { color: var(--color-danger); margin-top: 0px; }
.error-modal p { margin: 10px 0px; font-size: 0.95rem; }
.error-modal .btn { margin-top: 15px; float: right; }
#loading-overlay { position: fixed; top: 0px; left: 0px; 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: rgb(255, 255, 255); font-size: 1.2rem; backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: opacity 0.3s, visibility 0.3s; pointer-events: none; }
#loading-overlay.visible { opacity: 1; visibility: visible; transition-delay: 0s; pointer-events: auto; }
.spinner { width: 40px; height: 40px; 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%; animation: 1s linear 0s infinite normal none running spin; 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: rgba(0, 0, 0, 0.15) 0px 8px 20px; border: 1px solid var(--border-color); opacity: 0; transform: translate(100%); animation: 0.5s ease 0s 1 normal forwards running toast-in, 0.5s ease 4.5s 1 normal forwards running toast-out; 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 rgb(46, 204, 113); }
.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; }
.pixabay-grid-item:hover img { transform: scale(1.1); }
.pixabay-grid-item .photographer-info { position: absolute; bottom: 0px; left: 0px; width: 100%; background: rgba(0, 0, 0, 0.6); color: rgb(255, 255, 255); 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: 0px; 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: 0px; 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: 700; }
.tag-manager-item .tag-drag-handle { cursor: grab; color: var(--text-placeholder); font-size: 1.5rem; padding: 0px 8px; }
.tag-manager-item .tag-icon-btn { flex-shrink: 0; width: 32px; height: 32px; padding: 0px; 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: 0px; 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 0px; }
.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-height: 85vh; min-height: 450px; overflow: hidden; transition: height 0.3s; max-width: 900px !important; height: auto !important; display: flex !important; flex-direction: row !important; padding: 0px !important; }
.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 0px; overflow-y: auto; }
.modal-sidebar .tab-btn { border-left: 4px solid transparent; text-align: left; padding: 12px 20px; width: 100%; border-radius: 0px; font-size: 0.9rem; gap: 10px; border-bottom: none !important; display: flex !important; align-items: center !important; }
#help-modal .btn { justify-content: center; gap: 6px; display: inline-flex !important; align-items: center !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 { flex: 1 1 0%; display: flex; flex-direction: column; min-width: 0px; 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: 0px; }
@media (max-width: 1024px) {
  .modal-container.sidebar-layout { min-height: auto; flex-direction: column !important; height: 80vh !important; max-height: 80vh !important; width: 90% !important; max-width: 450px !important; border-radius: 16px !important; overflow: hidden !important; position: fixed !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; bottom: auto !important; margin: 0px !important; }
  .modal-main-content { display: flex; flex-direction: column; flex: 1 1 0% !important; height: 100% !important; overflow: hidden !important; }
  .modal-sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: 0px 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; 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; white-space: nowrap; padding: 12px 15px; flex: 0 0 auto; font-size: 0.85rem; text-align: center; border-bottom: 3px solid transparent !important; width: auto !important; }
  .modal-sidebar .tab-btn.active { border-bottom-color: var(--color-primary) !important; font-weight: 700; }
  .modal-tab-container { flex: 1 1 0%; padding: 20px 15px 40px !important; overflow-y: auto !important; height: auto !important; }
  .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: 0px; margin-bottom: 8px; }
#help-thanks p { margin: 4px 0px; }
#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; overflow-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: translate(-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: 0px; padding: 0px; }
#color-context-menu li { padding: 8px 12px; cursor: pointer; border-radius: 4px; font-size: 0.9rem; }
#color-context-menu li:hover { background: var(--bg-input); }
#color-context-menu hr { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); margin: 4px 0px; }
#preview-context-menu { position: fixed; z-index: 10000; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 16px; display: none; min-width: 160px; padding: 5px; animation: 0.1s ease 0s 1 normal none running fadeIn; overflow: visible !important; }
#preview-context-menu ul { list-style: none; margin: 0px; padding: 0px; }
#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); }
#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: rgba(0, 0, 0, 0.2) 0px 4px 16px; min-width: 140px; padding: 5px; z-index: 10001; }
#preview-context-menu li:hover > .submenu { display: block; animation: 0.1s ease 0s 1 normal none running fadeIn; }
#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: 0px; 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: rgb(255, 255, 255); border-radius: 8px; display: inline-block; margin: 10px 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px; }
#qrcode-container canvas, #qrcode-container img { background-color: rgb(255, 255, 255); padding: 10px; max-width: 100%; height: auto; display: block; margin: 0px 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: 400; white-space: normal; max-width: 250px; z-index: 10001; pointer-events: none; opacity: 0; transition: opacity 0.2s; 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: all 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: 0px !important; padding: 0px !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: all var(--transition-short); }
.export-option:hover { background-color: var(--bg-input); border-color: var(--color-primary); }
.export-option h4 { margin: 0px 0px 5px; }
.export-option p { margin: 0px; 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 { 
  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 fadeIn { 
  0% { opacity: 0; transform: translateY(10px); }
  100% { opacity: 1; transform: translateY(0px); }
}
@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; }
.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: rgb(255, 255, 255); border-radius: 50%; border: 2px solid var(--bg-preview-page); box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 5px; z-index: 2; cursor: pointer; opacity: 0.8; transition: all var(--transition-short); font-size: 1rem; }
@media (max-width: 1024px) {
  .app-header { position: fixed; left: 0px; width: 100%; height: calc(55px + env(safe-area-inset-bottom)); padding-top: 0px; padding-right: 15px; padding-left: 15px; padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid var(--border-color); background: var(--bg-editor); z-index: 300; align-items: center; justify-content: space-between; box-shadow: rgba(0, 0, 0, 0.05) 0px -2px 10px; top: auto !important; bottom: 0px !important; border-bottom: none !important; display: flex !important; transform: none !important; }
  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: 0px !important; }
  .app-header-title { display: none; }
  #mobile-layer-toggle, #mobile-inspector-toggle { align-items: center; justify-content: center; display: flex !important; padding: 8px 12px !important; }
  .header-actions-wrapper { display: flex; align-items: center; gap: 10px; }
  .theme-switch-wrapper { display: block !important; }
  #theme-toggle-btn { min-width: 40px; padding: 6px 10px !important; font-size: 0.85rem !important; }
  .app-container { padding-bottom: calc(55px + env(safe-area-inset-bottom)); height: 100dvh; overflow: hidden; padding-top: var(--system-broadcast-height, 0px) !important; }
  .preview-panel { height: 100%; padding: 20px 0 var(--mobile-inspector-height, 0px); overflow: hidden auto; font-variant-ligatures: none; letter-spacing: -0.015em !important; }
  .preview-canvas-area { overflow: visible !important; padding: 10px 0px !important; align-items: center !important; }
  body.export-mode .preview-panel { letter-spacing: normal !important; }
  .layer-panel { position: fixed; left: 0px; 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: translate(-100%); border-right: 1px solid var(--border-color); z-index: 200; transition: transform 0.3s ease-in-out; padding-bottom: 20px; top: 0px !important; background-color: var(--bg-editor) !important; }
  .layer-panel.is-open { transform: translate(0px); }
  .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: 0px; right: 0px; 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 0px 0px; box-shadow: rgba(0, 0, 0, 0.12) 0px -4px 20px; z-index: 201; will-change: transform; transition: transform 0.3s, height 0.2s; display: flex; flex-direction: column; touch-action: none; contain: size layout style; isolation: isolate; padding-bottom: 0px !important; background-color: var(--bg-editor) !important; backdrop-filter: none !important; }
  .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: var(--bg-card); padding: 20px; border-radius: 12px; margin-bottom: 20px; border: 1px solid var(--border-color); }
  .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 0px 0px; touch-action: none; }
  .inspector-drag-indicator { width: 40px; height: 5px; background-color: var(--border-input); border-radius: 3px; }
  .inspector-panel.is-open { transform: translateY(0px); }
  .inspector-scroll-container { flex: 1 1 0%; overflow-y: auto; padding-bottom: 10px; }
  .inspector-footer { flex-shrink: 0; background: var(--bg-section); border-top: 1px solid var(--border-color); min-height: 45px; padding: 10px 20px calc(5px + env(safe-area-inset-bottom)) 20px !important; }
  body.panels-open::after { content: ""; position: fixed; top: 0px; left: 0px; width: 100%; height: calc(100% - 55px - env(safe-area-inset-bottom)); background: rgba(0, 0, 0, 0.05); z-index: 199; pointer-events: auto; transition: opacity 0.3s; backdrop-filter: none !important; }
  .toast-notification-container { max-width: 80vw; inset: 30px auto auto 20px !important; transform: none !important; width: auto !important; align-items: flex-start !important; }
  .toast-notification { box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px; text-align: left; margin-bottom: 10px; transform: translate(-120%); max-width: 85vw !important; animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 1 normal forwards running toast-in-left, 0.4s ease 4s 1 normal forwards running toast-out-left !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 { backdrop-filter: blur(4px); pointer-events: none; opacity: 0.3 !important; background-color: rgba(0, 0, 0, 0.2) !important; }
  body.inspector-open .app-header { display: none !important; }
  body.inspector-open .inspector-panel.is-open { bottom: 0px !important; }
  .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: 0px; z-index: 10; }
  html.dark-mode .inspector-panel .editor-section > legend { box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; }
  .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: 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); display: flex; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 15px, rgba(255, 255, 255, 0.1) 0px 0px 5px inset; animation: 8s linear 0s infinite normal none running spin; }
.vinyl-label { width: 45%; height: 45%; border-radius: 50%; object-fit: cover; border: 1px solid rgb(85, 85, 85); background-color: rgb(255, 255, 255); }
.vinyl-tonearm { position: absolute; top: -10px; right: -10px; width: 75px; height: 6px; background-color: rgb(209, 213, 219); border-radius: 3px; transform-origin: 90% 50%; transform: rotate(-35deg); z-index: 20; box-shadow: rgba(0, 0, 0, 0.2) 1px 2px 4px; pointer-events: none; }
.vinyl-tonearm::before { content: ""; position: absolute; left: -2px; top: -3px; width: 14px; height: 12px; background-color: rgb(55, 65, 81); border-radius: 2px; transform: rotate(25deg); box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 2px; }
.vinyl-tonearm::after { content: ""; position: absolute; right: -6px; top: -6px; width: 18px; height: 18px; background: radial-gradient(circle, rgb(243, 244, 246) 40%, rgb(156, 163, 175)); border-radius: 50%; border: 2px solid rgb(255, 255, 255); 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: transparent; }
}
.highlight-animation { animation: 1.5s ease-out 0s 1 normal none running highlight; }
@media (max-width: 768px) {
  #cropper-modal .modal-container { padding: 15px; }
  .cropper-main-content { gap: 10px; }
  .cropper-img-container { flex: 4 1 0%; }
  .cropper-sidebar { flex: 1 1 0%; 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: 0.3s; z-index: 1; text-align: left; }
.showcase-cover { object-fit: cover; flex-shrink: 0; position: relative; z-index: 2; transition: transform 0.3s; }
.showcase-info { flex-grow: 1; display: flex; flex-direction: column; position: relative; z-index: 2; min-width: 0px; }
.showcase-meta { font-size: 0.85em; opacity: 0.7; margin-bottom: 5px; }
.showcase-rating { color: rgb(255, 180, 0); font-size: 0.9em; margin: 5px 0px; letter-spacing: 1px; }
.showcase-comment { font-size: 0.95em; line-height: 1.6; margin: 10px 0px; 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: rgba(0, 0, 0, 0.15) 0px 8px 20px; background-color: var(--card-bg-color, #fff); }
.showcase-card[data-style="magazine"][data-layout="vertical"] .showcase-cover { width: calc(100% - 30px); height: 200px; margin: -30px auto 15px; border-radius: 8px; }
body.mobile-full-view-mode .preview-panel { overflow-x: hidden; display: flex; flex-direction: column; justify-content: flex-start; padding: 20px 0px !important; align-items: flex-start !important; }
body.mobile-full-view-mode .preview-wrapper { -webkit-font-smoothing: subpixel-antialiased; position: relative; left: 0px; width: 600px !important; max-width: none !important; transform-origin: left top !important; margin: 0px !important; }
body.mobile-full-view-mode .mobile-edit-pencil { width: 32px; height: 32px; font-size: 1.1rem; }
.preview-item-wrapper { isolation: isolate; overflow: visible !important; }
.showcase-card[data-style="magazine"][data-layout="horizontal"] .showcase-cover { width: 100px; height: 140px; margin-top: -10px; border-radius: 6px; }
.showcase-card[data-style="magazine"] .showcase-comment { border-left: 3px solid var(--g-theme-accent, #007aff); font-family: "Songti SC", "Noto Serif SC", serif; font-style: italic; background: linear-gradient(90deg, rgba(127, 127, 127, 0.05), rgba(127, 127, 127, 0)); padding: 10px 12px; border-radius: 0px 8px 8px 0px; }
.showcase-card[data-style="poster"] { 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; color: rgb(255, 255, 255) !important; border: none !important; }
.showcase-card[data-style="poster"]::before { display: none; }
.showcase-card[data-style="poster"]::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(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: rgba(0, 0, 0, 0.4) 0px 10px 30px; 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: rgb(240, 240, 240); }
.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: rgb(255, 255, 255); backdrop-filter: blur(4px); }
.showcase-card[data-style="book"] { overflow: hidden; position: relative; background-color: rgb(255, 253, 249); 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: ""; position: absolute; top: 0px; right: 25px; width: 30px; height: 55px; background-color: var(--accent-color, #c0392b); clip-path: polygon(0px 0px, 100% 0px, 100% 100%, 50% 80%, 0px 100%); z-index: 10; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px; }
.showcase-card[data-style="book"] .showcase-cover { object-fit: cover; border-left: 4px solid rgba(60, 60, 60, 0.15); border-radius: 3px 6px 6px 3px; box-shadow: rgba(0, 0, 0, 0.1) 3px 0px 6px inset, rgba(0, 0, 0, 0.15) 4px 5px 15px; flex-shrink: 0; margin-right: 20px; z-index: 2; width: 100px !important; height: 145px !important; }
.showcase-card[data-style="book"] .showcase-info { flex: 1 1 0%; 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: 700; 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 { color: var(--card-text-color, #333); border-radius: 8px; overflow: hidden; position: relative; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px; --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); mask-composite: intersect; padding: 0px !important; flex-direction: row !important; background-color: var(--card-bg-color, #ffffff) !important; }
.ticket-left { flex: 1 1 0%; padding: 15px 10px 15px 15px; display: flex; gap: 12px; min-width: 0px; }
.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 1 0%; display: flex; flex-direction: column; justify-content: center; font-family: "Courier New", Courier, monospace; min-width: 0px; }
.ticket-header { font-size: 0.6rem; letter-spacing: 2px; opacity: 0.5; margin-bottom: 2px; font-weight: 700; text-transform: uppercase; }
.ticket-title { margin: 0px; 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 0px 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; -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; }
.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%; opacity: 0.8; mix-blend-mode: multiply; display: block; transform: translate(-50%, -50%) rotate(90deg) !important; width: 140px !important; height: 30px !important; }
.ticket-barcode { display: none !important; }
.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(currentcolor 0px, 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: 700; letter-spacing: 1px; }
.preview-card-inner[data-card-style="grid"] { background-color: rgb(255, 255, 255) !important; color: rgb(51, 51, 51) !important; background-image: linear-gradient(rgb(224, 224, 224) 1px, transparent 1px), linear-gradient(90deg, rgb(224, 224, 224) 1px, transparent 1px) !important; background-size: 24px 24px !important; background-position: -1px -1px !important; border-top: 2px solid rgb(229, 57, 53) !important; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 8px !important; line-height: 24px !important; padding-top: 12px !important; }
.preview-card-inner[data-card-style="grid"] .preview-card-title { font-weight: 700; background: rgb(255, 255, 255); display: inline-block; padding: 0px 8px; margin-bottom: 12px; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px; color: rgb(26, 35, 126) !important; }
.preview-card-inner[data-card-style="paper"] { background-color: tan !important; color: rgb(58, 36, 9) !important; text-shadow: rgba(255, 255, 255, 0.2) 0px 1px 1px !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), rgba(184, 134, 11, 0.1) 40%, rgba(139, 69, 19, 0.3)), radial-gradient(circle at 10% 90%, rgba(255, 255, 210, 0.3), rgba(184, 134, 11, 0.1), rgba(139, 69, 19, 0.2)) !important; background-size: 150px 150px, cover, cover !important; background-blend-mode: multiply, overlay, normal !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; border: 1px solid rgba(80, 42, 4, 0.1) !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: currentcolor 0px 0px 2px; background-color: rgb(26, 27, 38) !important; color: var(--card-text-color, #4af626) !important; font-family: "Fusion Pixel 12px Mono latin", Consolas, Monaco, monospace !important; font-size: 0.95em !important; padding-top: 38px !important; border-radius: 6px !important; box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 30px !important; border: 1px solid rgb(51, 51, 51) !important; }
.preview-card-inner[data-card-style="browser"] { background-color: rgb(255, 255, 255) !important; padding: 0px !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: 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"] { overflow: hidden; display: flex; flex-direction: column; background-color: silver !important; color: rgb(0, 0, 0) !important; border: 2px solid rgb(223, 223, 223) !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; border-radius: 0px !important; padding: 2px !important; }
.preview-card-inner[data-card-style="win95"] .win95-header { background: navy; color: rgb(255, 255, 255); padding: 2px 4px; font-family: "Fusion Pixel 12px Mono latin", Consolas, sans-serif; font-weight: 700; 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: silver; border-width: 1px; border-style: solid; border-color: rgb(255, 255, 255) rgb(0, 0, 0) rgb(0, 0, 0) rgb(255, 255, 255); border-image: initial; box-shadow: gray -1px -1px inset; color: rgb(0, 0, 0); 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 1 0%; }
.preview-card-inner[data-card-style="terminal"]::before { content: "● ● ●  Terminal"; position: absolute; top: 0px; left: 0px; right: 0px; height: 28px; background: rgb(36, 40, 59); border-bottom: 1px solid rgb(17, 17, 17); color: rgb(86, 95, 137); font-size: 10px; line-height: 28px; padding-left: 10px; font-family: sans-serif; white-space: pre; border-radius: 5px 5px 0px 0px; z-index: 10; pointer-events: none; letter-spacing: 2px; text-align: left; }
.preview-card-inner[data-card-style="terminal"] .preview-card-title { font-weight: 700; 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: 1s step-end 0s infinite normal none running terminal-blink; margin-left: 2px; opacity: 0.8; }
@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; flex-direction: row !important; align-items: stretch !important; padding: 0px !important; background: linear-gradient(rgb(27, 40, 56) 0%, rgb(27, 40, 56) 100%) !important; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px !important; height: auto !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; color: rgb(198, 212, 223) !important; }
.showcase-card[data-style="steam"] .showcase-cover { object-fit: cover; border-right: 1px solid rgb(0, 0, 0); background-color: rgb(0, 0, 0); width: 160px !important; min-width: 160px !important; height: 100% !important; border-radius: 0px !important; margin: 0px !important; }
.showcase-card[data-style="steam"] .showcase-info { flex-grow: 1; padding: 12px 15px; background: linear-gradient(135deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0)); display: flex; flex-direction: column; justify-content: flex-start; }
.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 { font-size: 1.3em; text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 0px; 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); padding: 0px; margin: 10px 0px; font-size: 0.9em; line-height: 1.5; border-radius: 2px; flex-grow: 1; display: flex; flex-direction: column; 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 { display: flex; align-items: center; gap: 6px; background-color: rgba(0, 0, 0, 0.2); padding: 8px 10px; font-size: 1em; font-weight: 400; border-bottom: 1px solid rgb(69, 85, 108); color: rgb(102, 192, 244); }
.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 { padding: 10px; white-space: pre-wrap; }
.showcase-card[data-style="steam"] .showcase-cover { box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; border: none; border-radius: 0px !important; }
.showcase-card[data-style="steam"] h3 span { font-size: 1.2em; text-shadow: rgba(0, 0, 0, 0.3) 0px 1px 2px; color: rgb(255, 255, 255) !important; }
.showcase-card[data-style="steam"] .showcase-meta { color: rgb(143, 152, 160) !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: rgb(103, 193, 245); border: none; border-radius: 2px; }
.preview-items-container figure.polaroid-style { padding: 12px; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 15px; transform: rotate(-1.5deg); transition: transform 0.3s, box-shadow 0.3s; border-radius: 2px; height: auto !important; }
.preview-items-container figure.polaroid-style:hover { transform: scale(1.02) rotate(0deg); box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 25px; z-index: 10; }
.preview-items-container figure.polaroid-style .img-wrapper { width: 100%; aspect-ratio: 1 / 1; background: rgb(238, 238, 238); border: 1px solid rgba(0, 0, 0, 0.05); }
.preview-items-container figure.polaroid-style img { border-radius: 0px; object-fit: cover; height: 100% !important; }
.preview-items-container figure.polaroid-style figcaption { position: static; margin-top: 15px; margin-bottom: 10px; width: 100%; text-align: center; font-family: "LXGW WenKai", "Comic Sans MS", cursive, sans-serif; font-size: 1rem; opacity: 0.9; color: rgb(51, 51, 51) !important; }
@media (max-width: 768px) {
  #cropper-modal .modal-container { display: flex; flex-direction: column; overflow-y: auto; width: 95% !important; max-width: 95% !important; height: auto !important; max-height: 90dvh !important; padding: 15px !important; }
  .cropper-main-content { flex-direction: column !important; gap: 15px !important; flex: 0 0 auto !important; }
  .cropper-img-container { min-height: 200px; width: 100%; margin: 0px auto; height: 40vh !important; flex: 0 0 auto !important; }
  .cropper-sidebar { display: flex; flex-direction: column; align-items: center; width: 100% !important; min-width: 0px !important; margin-top: 0px !important; }
  #cropper-preview-canvas { max-height: 120px !important; margin-bottom: 10px !important; }
  .crop-ratios.radio-group { justify-content: center; flex-wrap: wrap !important; gap: 8px !important; margin-bottom: 10px !important; }
  .crop-ratios label { padding: 4px 8px; background: var(--bg-input); border-radius: 4px; margin: 0px !important; }
  #filter-controls { border-top: 1px dashed var(--border-color); padding-top: 10px !important; margin-top: 10px !important; }
  #filter-sliders-grid { grid-template-columns: 1fr 1fr !important; gap: 10px 15px !important; }
  .modal-actions { padding-bottom: 10px; flex-wrap: wrap !important; gap: 10px !important; margin-top: 20px !important; }
  .modal-actions > div { flex: 1 1 100% !important; display: flex !important; gap: 10px !important; }
  .modal-actions .btn { justify-content: center; font-size: 0.95rem; flex: 1 1 0% !important; padding: 12px !important; }
}
.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, box-shadow 0.3s !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 { 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; text-align: left !important; }
.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: rgb(238, 238, 238); background-size: cover; background-position: center center; }
.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); font-weight: 700; 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: rgb(240, 240, 240); cursor: pointer; background-size: cover; background-position: center 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 { border-radius: 4px; padding: 6px 10px; position: relative; margin-top: 5px; font-size: 0.9em; background-color: rgba(0, 0, 0, 0.05) !important; }
.social-card-preview[data-style="moments"] .social-comments-area::before { content: ""; position: absolute; top: -6px; left: 12px; width: 0px; height: 0px; 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: rgb(238, 238, 238); background-size: cover; background-position: center 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: 700; font-size: 1.1em; }
.social-card-preview[data-style="feed"] .social-handle { font-size: 0.9em; opacity: 0.6; font-weight: 400; }
.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(0px, 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(0px, 1fr) minmax(0px, 1fr); aspect-ratio: 2 / 1; }
.social-card-preview[data-style="feed"] .social-images-grid[data-count="3"] { grid-template-columns: 1.2fr minmax(0px, 1fr); grid-template-rows: minmax(0px, 1fr) minmax(0px, 1fr); aspect-ratio: 16 / 9; }
.social-card-preview[data-style="feed"] .social-images-grid[data-count="3"] .social-img:nth-child(1) { 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"] { 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"] { border: 1px solid rgb(219, 219, 219); background: rgb(255, 255, 255) !important; padding: 0px !important; gap: 0px !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-weight: 600; margin-left: 10px; font-size: 0.9rem !important; color: rgb(38, 38, 38) !important; }
.social-card-preview[data-style="instagram"] .social-images-grid { border-radius: 0px; border: none; margin: 0px; aspect-ratio: auto; gap: 1px; background: rgb(255, 255, 255); width: 100% !important; }
.social-ins-actions { padding: 10px 12px 0px; display: flex; justify-content: space-between; font-size: 1.5rem; color: rgb(38, 38, 38); }
.social-ins-likes { padding: 0px 12px; margin-top: 8px; font-weight: 600; font-size: 0.9rem; color: rgb(38, 38, 38); }
.social-ins-content { padding: 6px 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: rgb(238, 238, 238); 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: 0px; background: rgba(0, 0, 0, 0.6); color: rgb(255, 255, 255); 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); }
.resource-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px; padding: 10px 0px; }
.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: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
.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: rgb(255, 255, 255); }
.res-btn.delete { background: rgba(255, 59, 48, 0.9); }
.res-btn.delete:hover { background: rgb(211, 47, 47); }
.res-badge-used { position: absolute; bottom: 0px; left: 0px; width: 100%; background: rgba(0, 122, 255, 0.8); color: rgb(255, 255, 255); font-size: 0.7rem; text-align: center; padding: 2px 0px; backdrop-filter: blur(2px); }
.empty-state { text-align: center; padding: 40px 0px; 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: 0px 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: 2s ease 0s infinite normal none running ripple; }
.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: 0px auto 15px; padding: 6px 16px; border-radius: 20px; background: var(--bg-input); font-size: 0.85rem; color: var(--text-secondary); transition: 0.3s; max-width: 100%; }
.p2p-status-badge.connected { background: rgb(232, 245, 233); color: rgb(46, 125, 50); font-weight: 600; }
#p2p-qrcode-box { background: rgb(255, 255, 255); padding: 10px; border-radius: 12px; display: block; width: fit-content; margin: 0px auto 10px; box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 15px; transition: opacity 0.3s; }
#p2p-qrcode-box img { display: block; max-width: 100%; }
#receiver-overlay { position: fixed; top: 0px; left: 0px; 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: rgba(0, 0, 0, 0.1) 0px 10px 40px; 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 0px; 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: 85px; right: 15px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; z-index: 900; align-items: center; justify-content: center; color: var(--text-primary); cursor: pointer; transition: 0.3s; font-size: 1.2rem; }
html.dark-mode #mobile-theme-fab { background: rgb(51, 51, 51); color: gold; border-color: rgb(85, 85, 85); }
@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; 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; left: 15px; transform: none; background: var(--bg-card); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; border-color: var(--color-primary); color: var(--color-primary); top: max(15px,env(safe-area-inset-top) + 10px); }
}
#rich-text-editor-container { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: 4px; height: 300px !important; max-height: 40vh !important; }
#rich-text-editor-container .ql-container { flex: 1 1 0%; overflow-y: auto !important; height: auto !important; }
.preview-card-content .ql-container { font-family: inherit; font-size: inherit; text-align: inherit; overflow: visible !important; height: auto !important; width: 100% !important; }
.preview-card-content .ql-editor { line-height: inherit; min-height: 1em; padding: 0px !important; overflow: visible !important; 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 { min-height: 1em; line-height: 1.5; margin: 0px !important; padding: 0px !important; }
.preview-card-content p:empty, .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; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 12px !important; width: max-content !important; max-width: 100vw !important; }
@media (min-width: 769px) {
  .ql-bubble .ql-tooltip { position: absolute !important; transform: translateZ(0px); }
}
@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: translate(-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: rgb(51, 51, 51) !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 20px !important; opacity: 1 !important; z-index: 2147483647 !important; margin-top: 0px !important; }
  .ql-bubble .ql-tooltip-arrow { display: none !important; }
  .ql-bubble .ql-tooltip-editor input { height: 35px !important; width: 150px !important; color: rgb(255, 255, 255) !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 { min-height: 100%; overflow: visible !important; height: auto !important; }
.preview-card-content.is-editing-rich-text { max-height: none !important; }
.preview-item-wrapper.is-editing-wrapper { will-change: z-index; z-index: 5000 !important; position: relative !important; contain: none !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; border-radius: 4px !important; background: transparent !important; 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: 0px 2px 2px 0px; }
.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; height: 100% !important; border-radius: 1px !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-color: rgb(128, 128, 128) rgb(255, 255, 255) rgb(255, 255, 255) rgb(128, 128, 128); padding: 2px; border-radius: 0px !important; background: silver !important; height: 24px !important; }
.progress-bar-preview[data-style="retro"] .progress-bar-fill { background-size: 100% 100%; border-radius: 0px !important; background-color: navy !important; background-image: repeating-linear-gradient(90deg, rgb(0, 0, 128), rgb(0, 0, 128) 10px, transparent 10px, transparent 12px) !important; }
.timeline-preview[data-style="receipt"] { font-family: "Fusion Pixel 12px Mono latin", Consolas, monospace; border-width: 2px 1px; border-style: dashed solid; border-color: rgb(204, 204, 204) rgb(221, 221, 221); border-image: initial; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 6px; background-color: rgb(255, 253, 245) !important; color: rgb(51, 51, 51) !important; padding-left: 15px !important; }
.timeline-preview[data-style="receipt"] .timeline-line { border-left: 1px dashed rgb(153, 153, 153); width: 0px; left: 6px; background: transparent !important; }
.timeline-preview[data-style="receipt"] .timeline-dot { background: rgb(51, 51, 51); border: none; width: 6px; height: 6px; left: -24px; top: 5px; border-radius: 0px; }
.timeline-preview[data-style="receipt"] .timeline-time { font-weight: 400; border-bottom: 1px dotted rgb(204, 204, 204); width: 100%; margin-bottom: 2px; }
.timeline-preview[data-style="metro"] { background-color: rgb(245, 245, 247) !important; padding-left: 50px !important; }
.timeline-preview[data-style="metro"] .timeline-line { width: 6px; left: 18px; border-radius: 3px; background-color: var(--tl-accent-color) !important; }
.timeline-preview[data-style="metro"] .timeline-dot { width: 16px; height: 16px; left: -33px; top: 2px; background: rgb(255, 255, 255); border: 4px solid var(--tl-accent-color); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px; }
.timeline-preview[data-style="metro"] .timeline-time { background: var(--tl-accent-color); display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 0.75em; font-weight: 700; color: rgb(255, 255, 255) !important; }
.timeline-preview[data-style="metro"] .timeline-content { font-weight: 700; font-size: 1.05em; }
.grid-preview-container { display: grid; gap: 10px; width: 100%; }
.grid-preview-container.is-masonry { gap: 10px; align-items: flex-start; display: flex !important; }
.grid-masonry-column { flex: 1 1 0%; display: flex; flex-direction: column; gap: 10px; min-width: 0px; }
.grid-item { display: flex; flex-direction: column; position: relative; overflow: hidden; transition: transform 0.2s; }
.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 { width: 100%; overflow: hidden; mask-image: -webkit-radial-gradient(center, white, black); border-radius: 50% !important; aspect-ratio: 1 / 1 !important; }
.grid-preview-container[data-style="circle"] .grid-img-wrapper img { border-radius: 0px !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: 0px !important; }
.grid-preview-container[data-style="circle"] .grid-label { margin-top: 10px; }
.grid-img-wrapper img { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.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; overflow-wrap: break-word; line-height: 1.3; }
.grid-subtitle { font-size: 0.75em; text-align: center; opacity: 0.7; overflow-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: rgb(255, 255, 255); padding: 8px 8px 12px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px; transform: rotate(var(--grid-rot, 0deg)); color: rgb(51, 51, 51) !important; }
.grid-preview-container[data-style="polaroid"] .grid-img-wrapper { border-radius: 0px; 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: 0px; left: 0px; right: 0px; background: rgba(0, 0, 0, 0.6); color: rgb(255, 255, 255); font-size: 0.7em; padding: 2px; margin: 0px; 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: rgba(0, 0, 0, 0.05) 0px 2px 8px; }
.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 0px 8px 10px; display: flex; align-items: center; gap: 10px; min-width: 0px; }
.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: rgb(204, 204, 204); font-size: 20px; }
.unified-delete-btn { width: 36px; align-self: stretch; background: rgba(0, 0, 0, 0.02); color: var(--text-secondary); border-top: none; border-right: none; border-bottom: none; border-image: initial; border-left: 1px solid var(--border-color); border-radius: 0px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: 0.2s; padding: 0px; font-size: 1.1rem; flex-shrink: 0; position: static !important; height: auto !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 { font-size: 0.9em; border-radius: 4px; 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 { position: fixed; top: 0px; left: 0px; 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: rgba(0, 0, 0, 0.25) 0px 8px 30px; 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(0px); }
@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 { border-radius: 16px 16px 0px 0px; border-bottom: none; transform: translateY(100%); padding-bottom: calc(15px + env(safe-area-inset-bottom)); left: 0px !important; top: auto !important; bottom: 0px !important; width: 100% !important; }
  #universal-color-picker.visible { transform: translateY(0px); }
  #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: 0px; background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0)); }
.ucp-sv-black { position: absolute; inset: 0px; background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)); }
.ucp-sv-cursor { position: absolute; width: 12px; height: 12px; border: 2px solid rgb(255, 255, 255); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 2px; 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, red, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255), rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, red); }
.ucp-slider-cursor { position: absolute; top: 50%; width: 14px; height: 14px; background: rgb(255, 255, 255); border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 3px; 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: rgb(255, 255, 255); flex-shrink: 0; box-shadow: rgba(255, 255, 255, 0.3) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0.05) 0px 2px 5px; 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: rgba(0, 0, 0, 0.05) 0px 1px 2px inset; }
.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: 0px; 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: rgba(0, 0, 0, 0.2) 0px 2px 5px; }
.ucp-rec-label { font-size: 0.7rem; color: var(--text-secondary); margin-top: 2px; }
#preview-stickers-layer { position: absolute; top: 0px; left: 0px; 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; 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: rgb(255, 255, 255); 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: translate(-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: translate(-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 { align-items: center; justify-content: center; width: 1em; height: 1em; vertical-align: middle; display: inline-flex !important; }
.custom-svg-icon svg { display: block; width: 100% !important; height: 100% !important; fill: currentcolor !important; }
.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"] { border-radius: 2px; position: relative; box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 15px; background-color: rgb(26, 26, 26) !important; color: rgb(255, 255, 255) !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: ""; position: absolute; left: 5px; right: 5px; height: 12px; background-image: repeating-linear-gradient(90deg, transparent, transparent 12px, rgb(255, 255, 255) 12px, rgb(255, 255, 255) 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 rgb(255, 255, 255); box-sizing: border-box; border-radius: 0px !important; }
.preview-items-container figure.film-style figcaption { font-family: "Courier New", monospace; margin-top: 8px; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 1px; color: rgb(170, 170, 170) !important; }
.grid-preview-container[data-style="film"] { gap: 15px; }
.grid-preview-container[data-style="film-strip"] { display: flex; flex-direction: column; gap: 0px; background-color: rgb(26, 26, 26); padding: 0px 12px; border-radius: 2px; position: relative; box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 15px; width: fit-content; margin: 0px auto; min-width: 100%; }
.grid-preview-container[data-style="film-strip"]::before, .grid-preview-container[data-style="film-strip"]::after { content: ""; position: absolute; top: 0px; bottom: 0px; width: 10px; background-image: repeating-linear-gradient(0deg, transparent, transparent 12px, rgb(255, 255, 255) 12px, rgb(255, 255, 255) 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 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 { 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: rgb(255, 255, 255) !important; }
.grid-preview-container[data-style="film"] .grid-img-wrapper { border: 2px solid rgb(255, 255, 255); border-radius: 0px; }
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: 700; 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: 700; }
.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; margin-top: 2px; opacity: 0.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; 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: 0px 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: 700; width: 40px; flex-shrink: 0; color: var(--cal-accent); }
.cal-week-content { flex: 1 1 0%; font-size: 0.9em; white-space: pre-wrap; }
.calendar-preview[data-style="cute"] { 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; border: 2px solid rgba(0, 0, 0, 0.1); box-shadow: rgba(0, 0, 0, 0.05) 2px 3px 10px; position: relative; overflow: visible; background-color: rgb(255, 253, 245) !important; color: rgb(74, 74, 74) !important; }
.calendar-preview[data-style="cute"]::before { content: ""; position: absolute; top: -12px; left: 50%; transform: translate(-50%) rotate(-1deg); width: 120px; height: 35px; background-color: var(--cal-accent); opacity: 0.4; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px; z-index: 0; 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: rgb(255, 255, 255) 1px 1px 0px; }
.calendar-preview[data-style="cute"] .cal-day-name { font-weight: 700; color: rgb(136, 136, 136); font-size: 0.8em; }
.calendar-preview[data-style="cute"] .cal-day-cell { background: transparent; border: none; border-radius: 0px; position: relative; z-index: 1; min-height: 45px; padding-top: 6px; padding-bottom: 4px; aspect-ratio: auto !important; height: auto !important; justify-content: flex-start !important; }
.calendar-preview[data-style="cute"] .cal-num { position: relative; z-index: 2; font-weight: 700; 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: rgba(0, 0, 0, 0.2) 0px 1px 1px; }
.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%; z-index: 0; box-shadow: rgba(0, 0, 0, 0.15) 1px 2px 4px; }
.calendar-preview[data-style="cute"] .cal-day-note { margin-top: 4px; font-size: 0.65rem; line-height: 1.2; color: rgb(85, 85, 85); font-weight: 400; width: 100%; white-space: normal; overflow: visible; text-overflow: clip; z-index: 2; transform: rotate(-2deg); display: block !important; }
.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: 0px; }
.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 { display: flex; flex-direction: column; gap: 0px; width: 100%; height: 100%; background: transparent; }
.qa-box-q, .qa-box-a { padding: 20px; position: relative; overflow-wrap: break-word; }
.qa-label { font-size: 0.75em; opacity: 0.6; margin-bottom: 5px; font-weight: 700; 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, .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: rgba(0, 0, 0, 0.1) 0px 4px 15px; 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: rgba(0, 0, 0, 0.05) 0px 2px 10px; text-align: center; font-size: 0.95em; }
.qa-preview[data-style="retro"] { gap: 0px; border: 2px solid var(--qa-text-main); background: var(--qa-container-bg); box-shadow: rgba(0, 0, 0, 0.1) 6px 6px; }
.qa-preview[data-style="retro"] .qa-box-q { background-image: repeating-linear-gradient(0deg, transparent, transparent 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 { 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"] { border-width: 2px; border-style: solid; border-color: rgb(223, 223, 223) gray gray rgb(223, 223, 223); border-image: initial; box-shadow: rgb(0, 0, 0) 1px 1px; font-family: "Pixel Arial", Consolas, "Courier New", monospace; background-color: var(--letter-bg, #c0c0c0) !important; padding: 4px !important; border-radius: 0px !important; }
.letter-preview[data-style="email98"] .letter-header { background: linear-gradient(90deg, navy, rgb(16, 132, 208)); color: rgb(255, 255, 255); padding: 4px 6px; font-weight: 700; 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 1 0%; background: rgba(255, 255, 255, 0.9); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128) rgb(223, 223, 223) rgb(223, 223, 223) rgb(128, 128, 128); border-image: initial; padding: 2px 4px; color: var(--letter-text, black); }
.letter-preview[data-style="email98"] .letter-body { background: rgba(255, 255, 255, 0.9); border-width: 1px; border-style: solid; border-color: rgb(128, 128, 128) rgb(223, 223, 223) rgb(223, 223, 223) rgb(128, 128, 128); border-image: initial; padding: 10px; margin-top: 4px; min-height: 80px; color: var(--letter-text, black); overflow-wrap: break-word; }
.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"); font-family: "Songti SC", "Noto Serif SC", serif; box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 15px; border: 1px solid rgba(0, 0, 0, 0.05); 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 { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: rgb(189, 44, 44); opacity: 0.9; filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 2px 2px); 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: 700; 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: 700; }
.letter-preview[data-style="airmail"] { background-image: repeating-linear-gradient(135deg, rgb(211, 47, 47) 0px, rgb(211, 47, 47) 15px, transparent 15px, transparent 25px, rgb(25, 118, 210) 25px, rgb(25, 118, 210) 40px, transparent 40px, transparent 50px); background-size: 100% 10px, 100% 10px, 10px 100%, 10px 100%; background-repeat: no-repeat; background-position: center top, center bottom, left center, right center; border: 10px solid transparent; 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); 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 rgb(204, 204, 204); padding: 5px 10px; font-size: 0.7rem; color: rgb(204, 204, 204); transform: rotate(-5deg); font-weight: 700; 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 rgb(238, 238, 238); padding-bottom: 5px; }
.letter-preview[data-style="airmail"] .letter-label { width: 60px; color: rgb(153, 153, 153); font-weight: 700; }
.letter-preview[data-style="airmail"] .letter-body { font-family: inherit; line-height: 1.6; }
.achievement-preview { 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; text-align: left !important; }
.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: 100%; height: 100%; object-fit: cover; }
.ach-icon-wrapper .iconify { font-size: 32px; }
.ach-content { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; min-width: 0px; }
.ach-top-text { font-size: 0.75rem; opacity: 0.8; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.5px; }
.ach-title { font-weight: 700; 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: 700; display: flex; align-items: center; gap: 4px; }
.achievement-preview[data-style="steam"] { background: linear-gradient(to right, rgb(27, 40, 56), rgb(42, 71, 94)); 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-radius: 0px; border: 1px solid rgb(0, 0, 0); }
.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"] { background: rgb(23, 23, 23); border-radius: 40px; padding: 8px 20px 8px 8px; color: rgb(255, 255, 255); box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 15px; border: 1px solid rgb(51, 51, 51); }
.achievement-preview[data-style="xbox"] .ach-icon-wrapper { border-radius: 50%; background: rgb(16, 124, 16); color: rgb(255, 255, 255); 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); padding: 2px 8px; border-radius: 10px; font-size: 0.8rem; }
.achievement-preview[data-style="minecraft"] { background: rgb(33, 33, 33); border: 2px solid rgb(85, 85, 85); outline: rgb(0, 0, 0) solid 2px; outline-offset: -4px; border-radius: 0px; padding: 12px; font-family: "Fusion Pixel 12px Mono latin", Consolas, monospace; color: rgb(255, 255, 255); image-rendering: pixelated; }
.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); font-weight: 700; text-shadow: rgb(0, 0, 0) 2px 2px 0px; letter-spacing: 0px; }
.achievement-preview[data-style="minecraft"] .ach-title { text-shadow: rgb(0, 0, 0) 2px 2px 0px; }
.achievement-preview[data-style="minecraft"] .ach-desc { opacity: 1; color: rgb(170, 170, 170); text-shadow: rgb(0, 0, 0) 2px 2px 0px; }
.preview-header[data-style="id-card"] { box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 15px, rgba(255, 255, 255, 0.2) 0px 0px 0px 1px inset; display: flex; flex-direction: row; isolation: isolate; overflow: visible !important; align-items: stretch !important; padding: 0px !important; }
.preview-header[data-style="social-card"]::before { content: ""; position: absolute; top: 0px; left: 0px; 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: 0; }
.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-bottom-shape="convex"]::before { border-radius: 0px 0px 50% 50% / 0px 0px 20px 20px; }
.preview-header[data-style="social-card"][data-bottom-shape="concave"]::before { mask-image: radial-gradient(circle at 50% 120%, transparent 20%, black 21%); }
.preview-header[data-style="social-card"][data-banner-shadow="true"]::after { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; 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: 1; pointer-events: none; border-radius: 20px 20px 0px 0px; }
.id-card-holo-layer { position: absolute; inset: 0px; 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%) 0% 0% / 250% 250%; mix-blend-mode: overlay; animation: 4s linear 0s infinite normal none running holo-sheen; 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: translate(-50%); width: 40px; height: 6px; background: rgba(0, 0, 0, 0.1); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px inset; 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 1 0%; 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; background-color: var(--bg-image-thumb); width: 100% !important; height: 100% !important; background-repeat: no-repeat !important; background-size: cover !important; background-position: center center !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"] { min-height: 380px; max-width: 320px; 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; flex-direction: column !important; text-align: center !important; padding: 0px !important; overflow: hidden !important; aspect-ratio: unset !important; height: auto !important; align-items: center !important; justify-content: flex-start !important; }
.preview-header[data-style="id-card-v"] .id-card-left { border-bottom: 1px solid rgba(0, 0, 0, 0.06); background: linear-gradient(rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.01)); display: flex; align-items: center; justify-content: center; width: 100% !important; height: auto !important; flex: 0 0 auto !important; border-right: none !important; padding: 35px 20px 25px !important; }
.preview-header[data-style="id-card-v"] .id-card-right { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; width: 100% !important; padding: 20px 24px 50px !important; justify-content: flex-start !important; text-align: center !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); width: 100px !important; height: 100px !important; border: 3px solid rgba(255, 255, 255, 0.9) !important; }
.preview-header[data-style="id-card-v"] #preview-nickname { letter-spacing: 0.5px; font-size: 1.4rem !important; margin: 8px 0px 4px !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 { line-height: 1.5; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; font-size: 0.85rem !important; margin: 10px 0px !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; font-size: 0.7rem !important; 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; position: relative; isolation: isolate; padding: 0px !important; overflow: visible !important; border-radius: 20px !important; }
.preview-header[data-style="social-card"]::before { content: ""; position: absolute; top: 0px; left: 0px; right: 0px; 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; border-bottom-left-radius: 0px !important; border-bottom-right-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; }
.preview-header[data-style="social-card"][data-bottom-shape="concave"]::before { mask: radial-gradient(120% 100% at 50% 120%, transparent 50%, black 50.5%); border-radius: 20px 20px 0px 0px; }
.preview-header[data-style="social-card"] .id-card-left { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100% !important; padding-top: calc(var(--social-banner-height, 120px) - 40px) !important; padding-bottom: 15px !important; background: transparent !important; border: none !important; overflow: visible !important; }
.preview-header[data-style="social-card"] #preview-avatar { border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 20px; background-color: rgb(255, 255, 255); border: 4px solid var(--card-bg-final, #fff) !important; }
.preview-header[data-style="social-card"] #preview-avatar-wrapper { position: relative; z-index: 5; }
.preview-header[data-style="social-card"] .id-card-right { display: flex; flex-direction: column; gap: 6px; width: 100% !important; padding: 5px 24px 24px !important; }
.preview-header[data-style="social-card"] #preview-nickname { font-size: 1.35rem !important; font-weight: 700 !important; margin: 0px !important; }
.preview-header[data-style="social-card"] #preview-subtitle { opacity: 0.65; font-size: 0.85rem !important; margin: 0px !important; }
.preview-header[data-style="social-card"] #preview-bio { line-height: 1.55; max-width: 100%; word-break: break-word; white-space: pre-wrap; font-size: 0.9rem !important; margin: 8px 0px 12px !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; padding: 6px 14px !important; border-radius: 20px !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"] { display: flex; flex-direction: row; background: linear-gradient(135deg, rgb(248, 250, 252), rgb(226, 232, 240)); min-height: 180px; font-family: "Courier New", Consolas, monospace; color: rgb(30, 41, 59); position: relative; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px; padding: 0px !important; }
.ticket-main { flex: 1 1 0%; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; position: relative; }
.ticket-main::after { content: ""; position: absolute; right: -6px; top: 0px; bottom: 0px; width: 12px; background-image: radial-gradient(circle, rgb(226, 232, 240) 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 rgb(226, 232, 240); }
.ticket-airline { font-size: 1.1rem; font-weight: 700; color: rgb(30, 64, 175); letter-spacing: 2px; }
.ticket-flight-no { font-size: 0.9rem; color: rgb(100, 116, 139); font-weight: 700; }
.ticket-body { display: flex; flex-direction: column; gap: 12px; flex: 1 1 0%; }
.ticket-passenger { display: flex; align-items: flex-start; gap: 15px; margin-top: 5px; }
.ticket-passenger-label { font-size: 0.65rem; color: rgb(148, 163, 184); 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 rgb(30, 64, 175) !important; margin: 0px !important; }
.ticket-passenger-info { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0%; align-items: flex-start; 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 { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0%; }
.ticket-subtitle { font-size: 0.8rem; color: rgb(100, 116, 139); font-style: italic; }
.ticket-bio { font-size: 0.75rem; color: rgb(148, 163, 184); margin-top: 2px; line-height: 1.3; }
.ticket-label { font-size: 0.65rem; color: rgb(148, 163, 184); letter-spacing: 1px; text-transform: uppercase; }
.ticket-name { font-size: 1.1rem; font-weight: 700; color: rgb(15, 23, 42); text-transform: uppercase; letter-spacing: 1px; }
.ticket-route { display: flex; align-items: center; gap: 15px; padding: 8px 0px; }
.ticket-city { display: flex; flex-direction: column; gap: 2px; }
.ticket-code { font-size: 1.4rem; font-weight: 700; color: rgb(30, 64, 175); letter-spacing: 2px; }
.ticket-arrow { font-size: 1.5rem; color: rgb(59, 130, 246); 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 { 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: rgb(30, 64, 175); 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: 700; color: rgb(51, 65, 85); }
.ticket-seat { color: rgb(220, 38, 38); 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: 0px; bottom: 0px; width: 12px; background-image: radial-gradient(circle, rgb(248, 250, 252) 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%; opacity: 0.95; display: block; transform: translate(-50%, -50%) rotate(90deg) !important; width: 180px !important; height: 45px !important; }
.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: 700; 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: rgba(0, 0, 0, 0.3) 0px 1px 4px; }
.lockscreen-bg { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background-size: cover; background-position: center 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: rgba(0, 0, 0, 0.4) 0px 15px 35px; margin-bottom: 20px; align-self: center; }
.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"] { flex-direction: column; padding: 2px; background: silver; border-width: 2px; border-style: solid; border-color: rgb(223, 223, 223) rgb(0, 0, 0) rgb(0, 0, 0) rgb(223, 223, 223); box-shadow: rgba(0, 0, 0, 0.3) 2px 2px 5px; border-radius: 0px; font-family: "MS Sans Serif", "Microsoft Sans Serif", Tahoma, sans-serif; color: rgb(0, 0, 0); min-height: 180px; }
.wmp-title-bar { background: linear-gradient(90deg, navy, rgb(16, 132, 208)); color: rgb(255, 255, 255); padding: 3px 6px; font-weight: 700; font-size: 12px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.wmp-screen { background: rgb(0, 0, 0); border-width: 2px; border-style: solid; border-image: initial; border-color: rgb(128, 128, 128) rgb(255, 255, 255) rgb(255, 255, 255) rgb(128, 128, 128); 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, rgb(0, 255, 0), rgb(0, 255, 0) 2px, rgb(0, 0, 0) 3px); 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 { 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: silver; border-width: 1px; border-style: solid; border-color: rgb(255, 255, 255) rgb(0, 0, 0) rgb(0, 0, 0) rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; }
.wmp-btn:active { border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0) rgb(255, 255, 255) rgb(255, 255, 255) rgb(0, 0, 0); transform: translate(1px, 1px); }
.wmp-status { font-size: 10px; color: rgb(0, 255, 0); position: absolute; bottom: 4px; left: 6px; font-family: monospace; }
.preview-items-container figure.browser-style { background: rgb(255, 255, 255); border-radius: 8px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 30px; display: flex; flex-direction: column; padding: 0px !important; }
.browser-header { background: rgb(240, 240, 240); padding: 8px 12px; display: flex; align-items: center; border-bottom: 1px solid rgb(221, 221, 221); gap: 10px; }
.browser-dots { display: flex; gap: 6px; }
.browser-dot { width: 10px; height: 10px; border-radius: 50%; }
.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 { flex: 1 1 0%; background: rgb(255, 255, 255); border-radius: 4px; font-size: 0.75rem; color: rgb(85, 85, 85); padding: 2px 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; border: 1px solid rgb(221, 221, 221); 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 { border-top: 1px solid rgb(238, 238, 238); padding: 10px 15px; text-align: var(--g-comp-text-align, center); 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"] { font-family: "Courier New", Courier, monospace; border: 1px solid rgb(220, 208, 184); overflow: hidden; position: relative; 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; color: rgb(44, 30, 26) !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"; position: absolute; top: 25px; left: -32px; width: 150px; text-align: center; background: rgb(183, 28, 28); color: rgb(255, 255, 255); font-size: 0.75rem; font-weight: 900; letter-spacing: 1px; padding: 4px 0px; transform: rotate(-45deg); box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; z-index: 10; pointer-events: none; display: none !important; }
.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; 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 0px; margin: 15px 0px; 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); display: flex; transform: translateZ(0px); }
.marquee-content { display: flex; width: max-content; white-space: nowrap; animation: auto linear 0s infinite normal none running marquee-scroll; font-weight: 700; text-transform: uppercase; will-change: transform; -webkit-font-smoothing: antialiased; backface-visibility: hidden; transform: translateZ(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 { font-family: "Fusion Pixel 12px Mono latin", monospace; text-shadow: currentcolor 0px 0px 4px; letter-spacing: 2px; }
.marquee-container[data-style="breaking"] { border-top: 2px solid rgb(255, 51, 51); border-bottom: 2px solid rgb(153, 0, 0); font-style: italic; background-color: rgb(204, 0, 0) !important; color: rgb(255, 255, 255) !important; }
body.export-mode .marquee-content { justify-content: center; white-space: normal; overflow-wrap: break-word; animation: auto ease 0s 1 normal none running none !important; transform: none !important; }
@keyframes marquee-scroll { 
  0% { transform: translateZ(0px); }
  100% { transform: translate3d(-50%, 0px, 0px); }
}
.music-card-preview[data-style="cd_player"] { flex-direction: column; align-items: center; justify-content: flex-start; padding: 25px 20px; background: linear-gradient(145deg, rgb(230, 230, 230), rgb(255, 255, 255)); border: 1px solid rgb(204, 204, 204); box-shadow: rgb(255, 255, 255) 1px 1px inset, rgba(0, 0, 0, 0.1) 5px 5px 15px; color: rgb(51, 51, 51); overflow: hidden; position: relative; }
.cd-player-lid { width: 180px; height: 180px; background: rgba(255, 255, 255, 0.2); border-radius: 50%; 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; 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(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: 4s linear 0s infinite normal none running spin; box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 10px; }
.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: rgb(230, 230, 230); border-radius: 50%; border: 2px solid rgb(204, 204, 204); box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 2px inset; z-index: 5; }
.cd-controls-area { width: 100%; background: rgb(212, 212, 212); border-radius: 8px; padding: 10px; display: flex; align-items: center; gap: 10px; border: 1px solid rgb(187, 187, 187); box-shadow: rgba(0, 0, 0, 0.1) 1px 1px 3px inset; }
.cd-lcd { flex: 1 1 0%; background: rgb(143, 163, 130); font-family: "Fusion Pixel 12px Mono latin", monospace; padding: 4px 8px; border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 4px inset; font-size: 0.75rem; color: rgb(26, 46, 18); 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-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 { 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: 0.3s; }
.chart-preview-container[data-style="ring"] .chart-circle { mask-image: radial-gradient(transparent 58%, rgb(0, 0, 0) 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: 0.3s; }
.rank-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.03); transition: 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: rgb(238, 238, 238); color: rgb(85, 85, 85); 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 1 0%; min-width: 0px; z-index: 2; display: flex; flex-direction: column; justify-content: center; }
.rank-name { font-weight: 700; 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: 700; font-family: "Fusion Pixel 12px Mono latin", monospace; 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: rgba(0, 0, 0, 0.05) 0px 2px 5px; 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: 0px; padding: 8px 0px; }
.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: 0px; border-radius: 8px; overflow: hidden; height: 60px; }
.ranking-preview[data-style="poster"] .rank-img-wrapper { width: 80px; height: 100%; border-radius: 0px; 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: 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 { 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; 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 .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-text-stroke: 0px transparent !important; -webkit-font-smoothing: antialiased !important; text-rendering: optimizelegibility !important; }
body.native-screenshot-mode .music-lyrics-container { 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: 700 !important; }
body.native-screenshot-mode strong, body.native-screenshot-mode b { font-weight: 600 !important; }
body.native-screenshot-mode .app-container, body.native-screenshot-mode .preview-panel, body.native-screenshot-mode .preview-canvas-area { display: block !important; position: static !important; width: 100% !important; height: auto !important; overflow: visible !important; padding: 0px !important; margin: 0px !important; top: 0px !important; }
body.native-screenshot-mode .preview-panel { padding: 0px !important; margin: 0px !important; width: 100% !important; overflow: visible !important; }
body.native-screenshot-mode .preview-wrapper { background-clip: padding-box; min-height: 100vh; margin: 0px auto !important; left: auto !important; top: auto !important; transform: none !important; width: var(--export-width, auto) !important; max-width: 100% !important; box-shadow: none !important; }
body.native-screenshot-mode::after { content: none !important; display: none !important; }
.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: 0.2s; margin-bottom: 20px; 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 { font-size: 2.2rem; color: var(--color-primary); }
.export-hero-card h4 { margin: 0px 0px 4px; color: var(--color-primary); font-size: 1.05rem; }
.export-hero-card p { margin: 0px; font-size: 0.8rem; color: var(--text-secondary); opacity: 0.9; }
.export-hero-card .badge { position: absolute; top: 0px; right: 0px; background: var(--color-primary); color: rgb(255, 255, 255); font-size: 0.65rem; padding: 2px 8px; border-radius: 0px 0px 0px 8px; font-weight: 700; }
.theme-preset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed var(--border-color); padding-left: 10px; padding-right: 10px; }
.theme-swatch { width: 40px; height: 40px; margin: 0px 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: 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: ""; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: var(--swatch-bg); }
.theme-swatch::after { content: ""; position: absolute; bottom: 0px; right: 0px; width: 50%; height: 100%; background: var(--swatch-accent); 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 { grid-column: 1 / -1; font-size: 0.85rem; font-weight: 700; 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 1 0%; display: flex; flex-direction: column; gap: 2px; min-width: 0px; }
.export-menu-item h5 { margin: 0px; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.export-menu-item p { margin: 0px; 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: 0px auto 15px; }
.checklist-preview { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.checklist-grid { display: grid; gap: 8px; width: 100%; }
.checklist-item { cursor: pointer; transition: 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; 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, .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: rgb(255, 255, 255); font-weight: 700; 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: 0px; margin-bottom: 4px; font-size: 1.5em; }
.checklist-preview[data-style="bingo"] .checklist-item:not([data-state="none"]) { font-weight: 700; 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: rgb(233, 30, 99); color: rgb(233, 30, 99); }
.container-shape-win95 { position: relative; background-color: silver; border: 2px solid rgb(223, 223, 223) !important; box-shadow: rgb(255, 255, 255) 2px 2px inset, gray -2px -2px inset, rgba(0, 0, 0, 0.3) 2px 2px 5px !important; padding-top: 38px !important; border-radius: 0px !important; }
.container-shape-win95::before { content: attr(data-win-title); position: absolute; top: 4px; left: 4px; right: 4px; height: 26px; background: linear-gradient(90deg, navy, rgb(16, 132, 208)); color: rgb(255, 255, 255); font-family: "Fusion Pixel 12px Mono latin", Consolas, sans-serif; font-weight: 700; font-size: 14px; display: flex; align-items: center; padding-left: 8px; text-shadow: rgb(0, 0, 0) 1px 1px 0px; z-index: 100; pointer-events: none; }
.container-shape-win95::after { content: "×"; position: absolute; top: 7px; right: 7px; width: 20px; height: 20px; background: silver; color: rgb(0, 0, 0); border: 1px outset rgb(255, 255, 255); box-shadow: rgb(0, 0, 0) 1px 1px; display: flex; align-items: center; justify-content: center; font-weight: 700; 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; mask: var(--mask-torn); filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 2px 8px); padding-top: 20px !important; border-radius: 0px 0px 2px 2px !important; }
.container-shape-macos { position: relative; background-clip: padding-box; overflow: hidden; border-radius: 12px !important; box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 50px !important; padding-top: 50px !important; }
.container-shape-macos::before { content: attr(data-win-title); position: absolute; top: 0px; left: 0px; right: 0px; height: 36px; background: rgb(238, 241, 245); 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: rgb(102, 102, 102); z-index: 10; }
html.dark-mode .container-shape-macos::before { background: rgb(45, 48, 54); color: rgb(153, 153, 153); 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: rgb(255, 95, 86); box-shadow: rgb(255, 189, 46) 20px 0px, rgb(39, 201, 63) 40px 0px; 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; mask: var(--mask-holes); border-left: 1px solid rgba(0, 0, 0, 0.1); filter: drop-shadow(rgba(0, 0, 0, 0.1) 2px 2px 5px); padding-left: 25px !important; box-shadow: none !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); border-top: 1px solid rgba(0, 0, 0, 0.1); filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 2px 5px); padding-top: 25px !important; box-shadow: none !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; mask-position: left top, right top; mask-repeat: repeat-y, repeat-y; mask-composite: add; position: relative; box-shadow: none !important; }
.container-shape-loose-leaf-middle::after { content: ""; position: absolute; top: 0px; bottom: 0px; left: 50%; width: 2px; transform: translate(-50%); background: rgba(0, 0, 0, 0.03); pointer-events: none; z-index: 10; }
.container-shape-loose-leaf-middle::before { content: ""; position: absolute; top: 0px; bottom: 0px; left: calc(50% - var(--gap-width) / 2 - 10px); right: calc(50% - var(--gap-width) / 2 - 10px); box-shadow: rgba(0, 0, 0, 0.08) -8px 0px 10px -5px inset, rgba(0, 0, 0, 0.08) 8px 0px 10px -5px inset; pointer-events: none; z-index: 5; }
.container-shape-stack { position: relative; z-index: 1; transform: rotate(-1deg); transition: transform 0.3s; 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; border-radius: 4px !important; }
.container-shape-stack:hover { transform: rotate(0deg) scale(1.01); }
.badge-beta { background-color: rgb(241, 196, 15); color: rgb(0, 0, 0); font-size: 0.65rem; padding: 2px 5px; border-radius: 4px; font-weight: 900; margin-left: 5px; vertical-align: middle; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px; }
.code-preview-box { background: rgb(26, 27, 38); color: rgb(122, 162, 247); 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 0px; border: 1px solid rgb(51, 51, 51); }
.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 1 0%; min-width: 0px; }
.steam-game-name { font-weight: 700; 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: 0.3s; }
.preview-header[data-style="steam"] { display: flex; align-items: flex-start; gap: 20px; font-family: "Motiva Sans", Arial, sans-serif; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; min-height: 180px; background: radial-gradient(circle at left top, rgb(42, 71, 94), rgb(27, 40, 56) 60%) !important; color: rgb(196, 196, 196) !important; padding: 20px !important; }
.preview-header[data-style="steam"]::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: url("https://community.akamai.steamstatic.com/public/images/profile/2020/bg_dots.png"); opacity: 0.1; pointer-events: none; animation: 60s linear 0s infinite normal none running moveDots; }
.preview-header[data-style="steam"] .id-card-left { flex-shrink: 0; position: relative; z-index: 2; width: 120px !important; background: transparent !important; padding: 0px !important; border: none !important; }
.preview-header[data-style="steam"] #preview-avatar { padding: 2px; background-color: rgb(87, 203, 222); background-clip: content-box; box-shadow: rgba(0, 0, 0, 0.5) 0px 4px 15px; width: 110px !important; height: 110px !important; border-radius: 4px !important; border: none !important; }
.preview-header[data-style="steam"] .id-card-right { flex: 1 1 0%; z-index: 2; text-align: left; 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; font-size: 2.2rem !important; color: rgb(255, 255, 255) !important; font-weight: 500 !important; margin-bottom: 5px !important; }
.preview-header[data-style="steam"] #preview-subtitle { letter-spacing: 0.5px; font-size: 1.1rem !important; color: rgb(87, 203, 222) !important; margin-bottom: 15px !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 { 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 rgb(87, 203, 222); color: rgb(87, 203, 222); font-weight: 700; font-size: 16px; margin-left: 10px; vertical-align: text-bottom; 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 { background: rgb(34, 43, 53) !important; border: 1px solid rgb(60, 65, 70) !important; color: rgb(102, 192, 244) !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: auto ease 0s 1 normal none running none !important; z-index: 10000 !important; }
.sortable-ghost { transition: none !important; opacity: 0.3 !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) rgb(128, 128, 128) rgb(128, 128, 128) rgb(255, 255, 255) !important; padding: 3px !important; flex-direction: column !important; align-items: stretch !important; gap: 0px !important; box-shadow: rgb(0, 0, 0) 1px 1px !important; font-family: "Fusion Pixel 12px Mono latin", "Microsoft Sans Serif", Tahoma, sans-serif !important; }
.win95-profile-titlebar { background: linear-gradient(90deg, navy, rgb(16, 132, 208)); color: rgb(255, 255, 255); padding: 3px 4px 3px 6px; display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 13px; letter-spacing: 0.5px; margin-bottom: 2px; }
.win95-profile-controls { display: flex; gap: 2px; }
.win95-profile-content { background: rgb(255, 255, 255); padding: 15px; display: flex; gap: 20px; align-items: flex-start; color: rgb(0, 0, 0); flex: 1 1 0%; border-width: 2px !important; border-style: solid !important; border-image: initial !important; border-color: rgb(128, 128, 128) rgb(255, 255, 255) rgb(255, 255, 255) rgb(128, 128, 128) !important; }
.win95-profile-statusbar { margin-top: 2px; padding: 2px 4px; font-size: 11px; color: rgb(0, 0, 0); display: flex; justify-content: space-between; border-width: 1px !important; border-style: solid !important; border-image: initial !important; border-color: rgb(128, 128, 128) rgb(255, 255, 255) rgb(255, 255, 255) rgb(128, 128, 128) !important; }
.preview-header[data-style="win95"] #preview-avatar { border-radius: 0px !important; border-width: 2px !important; border-style: solid !important; border-image: initial !important; border-color: rgb(128, 128, 128) rgb(255, 255, 255) rgb(255, 255, 255) rgb(128, 128, 128) !important; }
.preview-header[data-style="win95"] .tag-pill { background: silver !important; border-width: 1px !important; border-style: solid !important; border-image: initial !important; border-color: rgb(255, 255, 255) rgb(128, 128, 128) rgb(128, 128, 128) rgb(255, 255, 255) !important; border-radius: 0px !important; color: rgb(0, 0, 0) !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: 700; text-align: center; white-space: nowrap; }
.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; }
}
#system-broadcast-container { position: fixed; top: 0px; left: 0px; width: 100%; z-index: 1000; display: flex; flex-direction: column; pointer-events: none; min-height: 0px; background: var(--bg-editor); }
#system-broadcast-container .system-marquee { pointer-events: auto; }
@media (max-width: 1024px) {
  #system-broadcast-container { top: 0px; z-index: 101; }
  body.has-broadcast .app-container { padding-top: calc(var(--header-height) + var(--system-broadcast-height, 0px)) !important; }
}
.system-marquee { width: 100%; height: 36px; overflow: hidden; position: relative; display: flex; align-items: center; box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 5px; }
.system-marquee-inner { flex: 1 1 0%; overflow: hidden; white-space: nowrap; position: relative; height: 100%; display: flex; align-items: center; padding-right: 40px; }
.system-marquee-scroll-text { display: inline-block; padding-left: 15px; font-size: 0.85rem; font-weight: 700; transform: translate(0px); }
.system-marquee-scroll-text.is-overflowing { animation: 12s linear 0s infinite alternate none running sys-pingpong; }
@keyframes sys-pingpong { 
  0%, 15% { transform: translate(0px); }
  85%, 100% { transform: translate(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: 0px 45px 0px 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: 20s linear 0s infinite normal none running sys-marquee; }
.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: translate(100vw); }
  100% { transform: translate(-100%); }
}
#inspector-tab-content-selected { padding-top: 0px !important; }
.editor-item-header { position: sticky; top: 0px; z-index: 40; background: var(--bg-section); border-bottom: 1px solid var(--border-color); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); height: 44px; display: flex; align-items: center; padding: 2px 10px !important; }
.selected-sub-tabs { position: sticky; top: 44px; z-index: 30; background: var(--bg-editor); border-bottom: 1px solid var(--border-color); transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; gap: 5px; margin-bottom: 0px !important; padding: 4px 10px !important; }
.inspector-scroll-container.is-scrolled .editor-item-header { height: 32px; background: var(--bg-editor); 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 { top: 32px; background: var(--bg-section); padding: 2px 10px !important; }
.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: 0px; left: 0px; 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; }
.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 1 0%; text-align: center; padding: 8px 4px; cursor: pointer; border-radius: 6px; font-size: 0.85rem; color: var(--text-secondary); transition: 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: rgba(0, 0, 0, 0.05) 0px 2px 4px; font-weight: 700; }
.quality-tab input { display: none; }
.quality-hint { font-size: 0.75rem; color: var(--text-secondary); margin: 0px 0px 15px; 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: 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: 0px 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: rgba(0, 0, 0, 0.4) 0px 20px 50px; 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: 400; margin-top: 2px; line-height: 1.3; }
.lyrics-line:not(.active) .trans-text { opacity: 0.5; }
.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: var(--bg-card); padding: 20px; border-radius: 12px; margin-bottom: 20px; border: 1px solid var(--border-color); }
.release-notes-content h4, #help-changelog h4 { margin: 15px 0px 8px; font-size: 0.95rem; color: var(--color-primary-text); font-weight: 700; border-bottom: 1px dashed var(--border-color); padding-bottom: 4px; }
.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 { position: fixed; bottom: -50px; pointer-events: none; z-index: 1000001; font-size: 24px; user-select: none; will-change: transform, opacity; animation: 3s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s 1 normal forwards running flower-fly; }
.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"] { box-sizing: border-box; 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; 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; }
.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(0px) rotate(0deg) scale(0.5); opacity: 1; }
  50% { opacity: 1; }
  100% { transform: translateY(-85vh) translate(var(--drift)) rotate(var(--rotation)) scale(1.2); opacity: 0; }
}
.dialogue-entry { display: flex; gap: 12px; max-width: 85%; 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 center; flex-shrink: 0; margin-top: 0px; }
.dialogue-avatar.initial-avatar { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; }
.dialogue-content-wrapper { display: flex; flex-direction: column; }
.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: 0px 8px; }
.dialogue-bubble { position: relative; padding: 10px 15px; border-radius: 18px; background-color: var(--bubble-bg-color); }
.dialogue-left .dialogue-bubble { border-top-left-radius: 4px; }
.dialogue-right .dialogue-bubble { border-top-right-radius: 4px; }
.dialogue-bubble::before { content: ""; position: absolute; bottom: 8px; width: 0px; height: 0px; border: 8px solid transparent; }
.dialogue-left .dialogue-bubble::before { left: -10px; border-right-color: var(--bubble-bg-color); transform: translateY(-50%); top: 50%; }
.dialogue-right .dialogue-bubble::before { right: -10px; border-left-color: var(--bubble-bg-color); transform: translateY(-50%); top: 50%; }
.dialogue-entry.dialogue-center { justify-content: center; width: 100%; max-width: 100%; margin: 10px 0px; }
.dialogue-entry.dialogue-center .dialogue-content-wrapper { align-items: center !important; width: 100%; }
.dialogue-entry.dialogue-center .dialogue-bubble { padding: 4px 12px; background: rgba(0, 0, 0, 0.15) !important; border-radius: 4px !important; color: rgb(255, 255, 255) !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 { overflow: hidden; background: transparent !important; padding: 0px !important; border: none !important; box-shadow: none !important; }
.dialogue-bubble.is-image::before { display: none !important; }
.dialogue-image { max-width: 100%; max-height: 300px; border-radius: 8px; display: block; cursor: pointer; }
.dialogue-preview-container[data-style="discord"] .dialogue-entry { align-items: flex-start; gap: 16px; padding: 2px 0px; max-width: 100%; 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 { width: 40px; height: 40px; margin-top: 2px; cursor: pointer; border-radius: 50% !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-content-wrapper { flex: 1 1 0%; 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; padding: 0px; margin: 0px; color: rgb(242, 243, 245) !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-timestamp { font-size: 0.75rem; color: rgb(148, 155, 164); font-weight: 400; }
.dialogue-preview-container[data-style="discord"] .dialogue-bubble { padding: 0px; border: none; border-radius: 0px; background: transparent !important; color: rgb(219, 222, 225) !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-bubble::before { display: none; }
.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: 0px; }
.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; 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; left: 15px; transform: none; background: var(--bg-card); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; border-color: var(--color-primary); color: var(--color-primary); top: max(15px,env(safe-area-inset-top) + 10px); z-index: 10002; }
}
.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: 0.2s; }
.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 { 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: 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: 0px; }
.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-top: none; border-right: none; border-bottom: none; border-image: initial; border-left: 1px solid transparent; color: var(--text-placeholder); cursor: pointer; flex-shrink: 0; transition: 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: 10000; border-radius: 4px; }
.mobile-pencils-layer { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 1000; }
.mobile-pencil-wrapper.reactive { overflow: visible; background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0px !important; }
.mobile-pencil-wrapper.reactive .pencil-icon { width: 22px; height: 22px; background: var(--color-primary, #007aff); color: rgb(255, 255, 255); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 8px; cursor: pointer; border: 1.5px solid white; pointer-events: auto; position: absolute; top: 0px; right: 0px; }
span.iconify:not(svg):empty { 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") center center / contain no-repeat; opacity: 0.25; vertical-align: middle; display: inline-flex !important; }
.app-header[data-v-6a26b463] { height: var(--header-height); background: var(--bg-card); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; padding: 0px 20px; box-sizing: border-box; position: fixed; top: 0px; left: 0px; width: 100%; z-index: 100; transition: background 0.3s, color 0.3s; }
.app-header-title[data-v-6a26b463] { display: flex; align-items: center; height: 100%; }
.april-fools-bouncer-wrapper[data-v-6a26b463] { position: absolute; z-index: 1000; pointer-events: auto; perspective: 500px; }
@media (max-width: 768px) {
  .april-fools-bouncer-wrapper[data-v-6a26b463] { position: static; display: flex; align-items: center; margin-left: 8px; }
}
.app-logo[data-v-6a26b463] { height: 52px; width: auto; max-width: 220px; }
@media screen and (max-width: 768px) {
  .app-logo[data-v-6a26b463], .cat-logo-wrapper[data-v-6a26b463] { display: none !important; }
}
.header-actions-wrapper[data-v-6a26b463] { display: flex; align-items: center; gap: 10px; }
.theme-switch-wrapper button[data-v-6a26b463] { min-width: 80px; }
.new-badge-dot[data-v-6a26b463] { position: absolute; top: -2px; right: -2px; width: 8px; height: 8px; background-color: var(--color-danger, #ff4757); border-radius: 50%; border: 2px solid var(--bg-card); box-shadow: rgba(255, 71, 87, 0.5) 0px 0px 5px; z-index: 10; }
.btn-rainbow-exclamation[data-v-6a26b463] { font-weight: 800; font-size: 1.2rem; color: rgb(255, 255, 255); align-items: center; justify-content: center; animation: 0.4s linear 0s infinite normal none running mc-spin-float-6a26b463, 0.2s linear 0s infinite normal none running rainbow-bg-6a26b463; text-shadow: rgba(0, 0, 0, 0.3) 0px 0px 4px; transform-style: preserve-3d; width: 32px !important; height: 32px !important; border-radius: 51% !important; padding: 0px !important; display: flex !important; border: none !important; }
@keyframes mc-spin-float-6a26b463 { 
  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-6a26b463 { 
  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); }
}
.layer-panel[data-v-9f8226b0] { display: flex; flex-direction: column; height: 100%; background: var(--bg-panel); border-right: 1px solid var(--border-color); }
.layer-list[data-v-9f8226b0] { flex: 1 1 0%; overflow-y: auto; padding: 10px 0px; min-height: 0px; border-bottom: 1px solid var(--border-color); }
.module-library-container[data-v-9f8226b0] { flex: 0 0 auto; height: auto; max-height: 35%; overflow-y: auto; background: var(--bg-panel); border-top: 1px solid var(--border-color); }
.skeleton-list[data-v-9f8226b0] { display: flex; flex-direction: column; gap: 8px; }
.btn-icon[data-v-9f8226b0] { width: auto; padding: 6px 10px; font-size: 0.9rem; display: flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; }
.layer-actions[data-v-9f8226b0] { display: flex; gap: 4px; }
.layer-actions .btn-icon[data-v-9f8226b0] { width: 26px; height: 26px; padding: 0px; font-size: 1.1rem; background: none; border: none; color: var(--text-secondary); }
.layer-actions .btn-icon[data-v-9f8226b0]:hover { background: var(--border-color); border-radius: 4px; }
.layer-actions .btn-icon.danger-text[data-v-9f8226b0]:hover { color: var(--color-danger); background: rgba(255, 71, 87, 0.1); }
.layer-move-btn[data-v-9f8226b0] { opacity: 0.3; }
.layer-item:hover .layer-move-btn[data-v-9f8226b0] { opacity: 1; }
.layer-move-btn[data-v-9f8226b0]:disabled { opacity: 0.1 !important; cursor: default; }
.layer-move-btn[data-v-9f8226b0]:disabled:hover { background: none !important; }
.layer-item[data-v-9f8226b0] { 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-item[data-v-9f8226b0]:hover { background-color: var(--bg-input); border-color: var(--text-secondary); }
.layer-item.selected[data-v-9f8226b0] { background-color: var(--bg-image-upload-hover); border-color: var(--color-primary); font-weight: 600; border-left-width: 4px; padding-left: 7px; }
.layer-item.selected .layer-name[data-v-9f8226b0], .layer-item.selected .layer-icon[data-v-9f8226b0] { color: var(--color-primary-text); }
.group-header[data-v-9f8226b0] { display: flex; align-items: center; gap: 8px; padding: 10px; 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)); border-radius: 8px; margin-bottom: 6px; cursor: pointer; transition: 0.2s; }
.group-header[data-v-9f8226b0]:hover { background: var(--bg-input); border-color: var(--text-secondary); }
.group-header .folder-toggle[data-v-9f8226b0] { display: flex; align-items: center; justify-content: center; width: 20px; color: var(--text-secondary); }
.group-header .layer-name[data-v-9f8226b0] { flex: 1 1 0%; font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.group-children[data-v-9f8226b0] { padding-left: 20px; margin-bottom: 8px; border-left: 2px dashed var(--border-color); margin-left: 18px; }
.group-children .layer-item[data-v-9f8226b0] { margin-bottom: 4px; background: var(--bg-panel); }
.layer-item .layer-icon[data-v-9f8226b0] { font-size: 1.1em; color: var(--text-secondary); }
.layer-item .layer-name[data-v-9f8226b0] { flex-grow: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-left: 4px; }
.edit-layer-input[data-v-9f8226b0] { flex-grow: 1; background: var(--bg-input); border: 1px solid var(--color-primary); color: var(--text-primary); border-radius: 4px; padding: 2px 4px; font-size: 0.9rem; width: 0px; min-width: 50px; }
.lib-btn[data-v-9f8226b0] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background-color: var(--bg-editor); border: 1px solid var(--border-input); border-radius: 8px; padding: 8px 4px; cursor: pointer; color: var(--text-primary); transition: 0.2s; height: 68px; }
.lib-btn[data-v-9f8226b0]: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-9f8226b0] { opacity: 0.9; color: var(--text-secondary); font-size: 0.75rem !important; }
.lib-btn[data-v-9f8226b0]:hover .icon-view-wrapper, .lib-btn:hover .iconify[data-v-9f8226b0] { color: var(--color-primary); }
.layer-node[data-v-9f8226b0] { cursor: default; }
.drag-handle[data-v-9f8226b0] { display: flex; align-items: center; justify-content: center; width: 20px; height: 100%; cursor: grab; color: var(--text-secondary); opacity: 0.3; transition: opacity 0.2s; }
.layer-item:hover .drag-handle[data-v-9f8226b0], .group-header:hover .drag-handle[data-v-9f8226b0] { opacity: 1; }
.drag-handle[data-v-9f8226b0]:active { cursor: grabbing; }
.layer-node .layer-actions button[data-v-9f8226b0] { cursor: pointer; }
.layer-sortable-ghost[data-v-9f8226b0] { opacity: 0.2; background: var(--color-primary-light) !important; border: 2px dashed var(--color-primary) !important; }
.layer-node.sortable-chosen[data-v-9f8226b0] { background: var(--bg-section-hover, rgba(255, 255, 255, .05)); }
.layer-panel .lib-btn .icon-view-wrapper, .layer-panel .lib-btn .iconify, .layer-panel .lib-btn .iconify-external-wrapper, .layer-panel .lib-btn svg { font-size: 1.6rem !important; width: 1.6rem !important; height: 1.6rem !important; }
.sticker-item[data-v-9c68ede3] { position: absolute; cursor: grab; user-select: none; box-sizing: border-box; }
.sticker-item[data-v-9c68ede3]:active { cursor: grabbing; }
.sticker-item.selected[data-v-9c68ede3] { outline: 2px dashed var(--color-primary); outline-offset: 2px; }
.sticker-content[data-v-9c68ede3] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.sticker-content img[data-v-9c68ede3] { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.sticker-idb-placeholder[data-v-9c68ede3] { width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center center; }
.sticker-content svg[data-v-9c68ede3] { width: 100%; height: 100%; }
.tape-shape[data-v-9c68ede3], .circle-shape[data-v-9c68ede3] { width: 100%; height: 100%; box-sizing: border-box; }
.sticker-handle[data-v-9c68ede3] { position: absolute; width: 14px; height: 14px; background: rgb(255, 255, 255); border: 1px solid var(--color-primary); z-index: 100; pointer-events: auto; }
.sticker-handle[data-v-9c68ede3]::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 32px; height: 32px; pointer-events: auto; }
.handle-nw[data-v-9c68ede3] { top: -6px; left: -6px; cursor: nw-resize; }
.handle-ne[data-v-9c68ede3] { top: -6px; right: -6px; cursor: ne-resize; }
.handle-sw[data-v-9c68ede3] { bottom: -6px; left: -6px; cursor: sw-resize; }
.handle-se[data-v-9c68ede3] { bottom: -6px; right: -6px; cursor: se-resize; }
.handle-rot[data-v-9c68ede3] { top: -25px; left: 50%; transform: translate(-50%); width: 12px; height: 12px; border-radius: 50%; cursor: crosshair; background: var(--color-primary); border: 2px solid rgb(255, 255, 255); }
.handle-rot[data-v-9c68ede3]::after { content: ""; position: absolute; top: 10px; left: 50%; transform: translate(-50%); width: 1px; height: 13px; background: var(--color-primary); z-index: -1; }
.profile-pro[data-v-cbece411] { display: flex; flex-direction: column; transition: 0.3s; user-select: none; height: 100%; }
.pro-header[data-v-cbece411] { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-shrink: 0; }
.pro-main-info[data-v-cbece411] { flex: 1 1 0%; min-width: 0px; }
.pro-nickname[data-v-cbece411] { font-weight: 600; margin: 0px; letter-spacing: -0.02em; }
.pro-subtitle[data-v-cbece411] { font-weight: 510; margin: 2px 0px 0px; opacity: 0.9; }
.pro-status-badge[data-v-cbece411] { overflow: visible; }
.pro-badge-symbol[data-v-cbece411] { font-size: 14px; }
.pro-badge-icon[data-v-cbece411] { font-size: 18px; }
.pro-badge-indicator[data-v-cbece411] { width: 12px; height: 12px; border-radius: 50%; }
.pro-badge-indicator.online[data-v-cbece411] { background: rgb(67, 181, 129); }
.pro-badge-indicator.busy[data-v-cbece411], .pro-badge-indicator.dnd[data-v-cbece411] { background: rgb(240, 71, 71); }
.pro-badge-indicator.idle[data-v-cbece411] { background: rgb(250, 166, 26); }
.pro-badge-indicator.red-dot[data-v-cbece411] { background: rgb(255, 51, 51); width: auto; height: auto; padding: 1px 4px; border-radius: 9px; font-size: 9px; color: rgb(255, 255, 255); }
.pro-badge-indicator.red-dot[data-v-cbece411]::after { content: "99+"; }
.pro-divider[data-v-cbece411] { height: 1px; background: rgba(255, 255, 255, 0.05); margin-bottom: 20px; flex-shrink: 0; }
.pro-body[data-v-cbece411] { display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0px; overflow-y: auto; scrollbar-width: thin; }
.pro-body[data-v-cbece411]::-webkit-scrollbar { width: 4px; }
.pro-body[data-v-cbece411]::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; }
.pro-bio[data-v-cbece411] { line-height: 1.6; margin: 0px 0px 16px; }
.pro-extras[data-v-cbece411] { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.pro-extra-item[data-v-cbece411] { display: flex; align-items: center; gap: 8px; }
.pro-tags[data-v-cbece411] { display: flex; flex-wrap: wrap; gap: 8px; }
.pro-highlight[data-v-cbece411] { position: absolute; top: 0px; right: 0px; width: 100px; height: 100px; background: linear-gradient(135deg, transparent 70%, rgba(255, 255, 255, 0.03) 100%); pointer-events: none; }
.profile-life[data-v-e7f56833] { width: 100%; height: 100%; display: flex; flex-direction: column; }
.life-hero[data-v-e7f56833] { width: 100%; position: relative; }
.life-hero-badge[data-v-e7f56833] { color: rgb(255, 255, 255); }
.life-badge-icon[data-v-e7f56833] { font-size: 24px; }
.life-badge-symbol[data-v-e7f56833] { font-size: 20px; }
.life-content[data-v-e7f56833] { padding: 20px; flex: 1 1 0%; min-height: 0px; overflow-y: auto; scrollbar-width: thin; }
.life-header[data-v-e7f56833] { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 12px; }
.life-nickname[data-v-e7f56833] { font-weight: 700; margin: 0px; letter-spacing: -0.02em; }
.life-subtitle[data-v-e7f56833] { font-weight: 500; margin: 2px 0px 0px; opacity: 0.8; }
.life-rating-badge[data-v-e7f56833] { padding: 4px 10px; border-radius: 8px; color: rgb(255, 255, 255); font-size: 0.85rem; font-weight: 700; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 10px; }
.life-bio[data-v-e7f56833] { line-height: 1.6; margin: 0px 0px 16px; }
.life-tags[data-v-e7f56833] { display: flex; flex-wrap: wrap; gap: 8px; }
.tiptap-editor-inline[data-v-d3c365e0] { position: relative; z-index: 100; background: transparent; }
.tiptap-bubble-menu[data-v-d3c365e0] { position: absolute; pointer-events: none; opacity: 0; transition: opacity 0.2s, transform 0.2s; z-index: 10000; }
.tiptap-bubble-menu.active[data-v-d3c365e0] { pointer-events: auto; opacity: 1; }
.premium-toolbar[data-v-d3c365e0] { display: flex; align-items: center; gap: 4px; background: var(--rt-toolbar-bg, rgba(255, 255, 255, .85)); backdrop-filter: blur(12px); padding: 6px; border-radius: 100px; box-shadow: rgba(0, 0, 0, 0.12) 0px 8px 32px, rgba(0, 0, 0, 0.05) 0px 2px 8px; border: 1px solid var(--rt-toolbar-border, rgba(255, 255, 255, .3)); color: var(--rt-toolbar-text, #333); }
:root.dark-mode .premium-toolbar[data-v-d3c365e0], .dark-mode .premium-toolbar[data-v-d3c365e0] { 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-d3c365e0] { display: flex; gap: 2px; }
.premium-toolbar button[data-v-d3c365e0] { background: transparent; border: none; width: 30px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; transition: 0.2s; }
.premium-toolbar button[data-v-d3c365e0]:hover { background: var(--rt-toolbar-btn-hover, #f0f0f0); }
.premium-toolbar button.is-active[data-v-d3c365e0] { 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-d3c365e0] { font-size: 1.25rem; width: 1.25rem; height: 1.25rem; }
.toolbar-divider[data-v-d3c365e0] { width: 1px; height: 18px; background: var(--rt-toolbar-border, rgba(0, 0, 0, .1)); margin: 0px 4px; }
[data-v-d3c365e0] .tiptap-content-root .tiptap { outline: none !important; line-height: inherit !important; letter-spacing: inherit !important; white-space: pre-wrap !important; padding: 0px !important; margin: 0px !important; min-height: 0px !important; }
[data-v-d3c365e0] .tiptap-content-root .tiptap .ProseMirror { padding: 0px !important; margin: 0px !important; min-height: 0px !important; }
[data-v-d3c365e0] .tiptap-content-root .tiptap p { margin: 0px !important; padding: 0px !important; }
[data-v-d3c365e0] .tiptap-content-root .tiptap a { color: var(--color-primary); text-decoration: underline; cursor: pointer; }
[data-v-d3c365e0] .tiptap-content-root .tiptap hr { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 2px solid var(--rt-toolbar-border, #ddd); margin: 1rem 0px; }
.tiptap-bubble-menu.active[data-v-d3c365e0] { animation: 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal none running slide-up-d3c365e0; }
@keyframes slide-up-d3c365e0 { 
  0% { opacity: 0; transform: translate(-50%, 10px) scale(0.95); }
  100% { opacity: 1; transform: translate(-50%) scale(1); }
}
.preview-card-content[data-v-d25a8edd] .tiptap, .preview-card-content[data-v-d25a8edd] .ql-editor { max-width: 100%; width: var(--v0b1919b9) !important; line-height: inherit !important; letter-spacing: inherit !important; }
h3.preview-card-title[data-v-d25a8edd] { display: block !important; text-align: var(--v08c813ec) !important; line-height: 1.4 !important; width: 100% !important; margin: 0px 0px 16px !important; padding: 0px !important; box-sizing: border-box !important; }
h3.preview-card-title > .title-inner-wrapper[data-v-d25a8edd] { display: inline-flex !important; 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; }
h3.preview-card-title > .title-inner-wrapper > .title-icon-fixed[data-v-d25a8edd] { flex: 0 0 auto !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; margin: 0px !important; }
h3.preview-card-title > .title-inner-wrapper > span.title-text-content[data-item-key][data-v-d25a8edd] { flex: 0 1 auto !important; width: auto !important; min-width: 0px !important; max-width: 100% !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; margin: 0px !important; text-align: left !important; }
.button-item-wrapper.is-bento[data-v-9e18cdeb] { height: 100%; display: flex; align-items: center; justify-content: center; }
.button-item-wrapper.is-bento[data-v-9e18cdeb] .preview-button { height: 100%; min-height: unset; align-self: stretch; flex: 1 1 0%; display: flex !important; align-items: center !important; justify-content: center !important; }
.button-item-wrapper.is-bento[data-v-9e18cdeb] .preview-button[data-style="ios"] { align-items: center !important; padding-top: 15px !important; }
.button-item-wrapper.is-bento[data-v-9e18cdeb] .preview-button[data-style="retro"] { gap: 0px !important; }
.button-item-wrapper.is-bento[data-v-9e18cdeb] .preview-button[data-style="retro"] .retro-inner { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; padding: 0px !important; }
.showcase-vinyl[data-v-5eff2cac] { width: 100%; height: 100%; box-sizing: border-box; transition: 0.3s; color: rgb(255, 255, 255); }
.vinyl-main-content[data-v-5eff2cac] { position: relative; z-index: 1; display: flex; gap: 30px; align-items: center; }
@media (max-width: 480px) {
  .vinyl-main-content[data-v-5eff2cac] { flex-direction: column; text-align: center; gap: 20px; }
}
.vinyl-visual-group[data-v-5eff2cac] { position: relative; width: 160px; height: 160px; flex-shrink: 0; }
.vinyl-sleeve[data-v-5eff2cac] { position: relative; width: 150px; height: 150px; background: rgb(34, 34, 34); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 30px; z-index: 2; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); }
.vinyl-cover[data-v-5eff2cac] { width: 100%; height: 100%; object-fit: cover; }
.sleeve-gloss[data-v-5eff2cac] { position: absolute; inset: 0px; background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%); pointer-events: none; }
.vinyl-disk-wrapper[data-v-5eff2cac] { position: absolute; top: 5px; left: 70px; width: 140px; height: 140px; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); z-index: 1; transform: rotate(15deg); }
.showcase-vinyl:hover .vinyl-disk-wrapper[data-v-5eff2cac] { transform: translate(10px) rotate(45deg); }
.vinyl-disk[data-v-5eff2cac] { width: 100%; height: 100%; background: radial-gradient(circle, rgb(51, 51, 51), rgb(17, 17, 17)); border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.4) 0px 4px 15px; }
.vinyl-disk-lines[data-v-5eff2cac] { position: absolute; inset: 5px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.05); background: repeating-radial-gradient(circle, transparent, transparent 2px, rgba(255, 255, 255, 0.02) 3px); }
.vinyl-disk-label[data-v-5eff2cac] { width: 50px; height: 50px; border-radius: 50%; background-color: rgb(68, 68, 68); z-index: 2; border: 4px solid rgb(17, 17, 17); box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px inset; }
.vinyl-disk-label[data-v-5eff2cac]::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6px; height: 6px; background: rgb(17, 17, 17); border-radius: 50%; }
.vinyl-info-area[data-v-5eff2cac] { flex: 1 1 0%; display: flex; flex-direction: column; gap: 8px; min-width: 0px; align-items: center; text-align: center; }
.vinyl-title[data-v-5eff2cac] { margin: 0px; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.vinyl-subtitle[data-v-5eff2cac] { font-size: 0.9rem; font-weight: 500; margin-top: -4px; }
.vinyl-rating[data-v-5eff2cac] { display: flex; justify-content: center; gap: 2px; color: rgb(255, 204, 0); font-size: 0.9rem; margin: 4px 0px; }
.vinyl-comment[data-v-5eff2cac] { font-size: 0.95rem; font-style: italic; line-height: 1.5; opacity: 0.95; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 90%; }
.vinyl-tags[data-v-5eff2cac] { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 10px; }
.vinyl-tag[data-v-5eff2cac] { display: inline-flex; align-items: center; }
.radar-area[data-v-7bf002a2] { transition: 0.3s; }
.radar-area.pulse-enabled[data-v-7bf002a2] { filter: drop-shadow(0 0 3px var(--rpg-stroke-color)); animation: 4s ease-in-out 0s infinite normal none running radar-pulse-7bf002a2; transform-origin: center center; }
@keyframes radar-pulse-7bf002a2 { 
  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-7bf002a2] { font-size: 11px; font-weight: 700; fill: var(--rpg-text-color); pointer-events: none; text-shadow: rgba(0, 0, 0, 0.1) 0px 1px 2px; }
.radar-grid[data-v-7bf002a2] { transition: 0.5s; }
.todo-preview-container[data-v-7c85d05a] { width: 100%; }
.win95-style[data-v-7c85d05a] { font-family: "Courier New", Courier, monospace; }
.sticky-style[data-v-7c85d05a] { font-family: "Segoe Print", "Comic Sans MS", cursive; }
.letter-preview[data-v-d8c69cdd] { 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, 20px); }
.letter-preview[data-style="email98"][data-v-d8c69cdd] { border-width: 2px; border-style: solid; border-color: rgb(223, 223, 223) gray gray rgb(223, 223, 223); border-image: initial; box-shadow: rgb(0, 0, 0) 1px 1px; background-color: var(--letter-bg, #c0c0c0) !important; padding: 4px !important; border-radius: 0px !important; }
.letter-preview[data-style="wax_seal"][data-v-d8c69cdd] { 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"); font-family: "Songti SC", "Noto Serif SC", serif; box-shadow: rgba(0, 0, 0, 0.08) 0px 5px 15px; border: 1px solid rgba(0, 0, 0, 0.05); 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-d8c69cdd] { position: absolute; top: 20px; right: 20px; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; color: rgb(189, 44, 44); opacity: 0.9; filter: drop-shadow(rgba(0, 0, 0, 0.2) 0px 2px 2px); }
.letter-preview[data-style="wax_seal"] .letter-header[data-v-d8c69cdd] { border-bottom: 2px solid rgba(74, 59, 42, 0.2); padding-bottom: 15px; margin-bottom: 15px; text-align: center; }
.letter-preview[data-style="wax_seal"] .letter-title[data-v-d8c69cdd] { font-size: 1.3rem; font-weight: 700; letter-spacing: 2px; margin-bottom: 5px; }
.letter-preview[data-style="wax_seal"] .letter-date[data-v-d8c69cdd] { font-size: 0.8rem; opacity: 0.6; font-style: italic; }
.letter-preview[data-style="wax_seal"] .letter-footer[data-v-d8c69cdd] { margin-top: 20px; text-align: right; font-style: italic; font-weight: 700; }
.letter-preview[data-style="airmail"][data-v-d8c69cdd] { background-image: repeating-linear-gradient(135deg, rgb(211, 47, 47) 0px, rgb(211, 47, 47) 15px, transparent 15px, transparent 25px, rgb(25, 118, 210) 25px, rgb(25, 118, 210) 40px, transparent 40px, transparent 50px); background-size: 100% 10px, 100% 10px, 10px 100%, 10px 100%; background-repeat: no-repeat; background-position: center top, center bottom, left center, right center; border: 10px solid transparent; 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-d8c69cdd] { background: rgb(255, 255, 255); height: 100%; width: 100%; display: flex; flex-direction: column; }
.letter-preview[data-style="airmail"] .letter-stamp-area[data-v-d8c69cdd] { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.letter-preview[data-style="airmail"] .letter-stamp[data-v-d8c69cdd] { border: 2px dotted rgb(204, 204, 204); padding: 5px 10px; font-size: 0.7rem; color: rgb(204, 204, 204); font-weight: 700; text-transform: uppercase; }
.letter-preview[data-style="airmail"] .letter-address-row[data-v-d8c69cdd] { display: flex; font-family: "Courier New", monospace; margin-bottom: 15px; font-size: 0.9rem; border-bottom: 1px dashed rgb(238, 238, 238); padding-bottom: 5px; }
.letter-preview[data-style="airmail"] .letter-label[data-v-d8c69cdd] { width: 60px; color: rgb(153, 153, 153); font-weight: 700; }
.letter-preview[data-style="top_secret"][data-v-d8c69cdd] { font-family: "Courier New", Courier, monospace; border: 1px solid rgb(220, 208, 184); 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; color: rgb(44, 30, 26) !important; padding: var(--g-comp-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"] .letter-stamp-secret[data-v-d8c69cdd] { 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; pointer-events: none; text-transform: uppercase; border-radius: 4px; mix-blend-mode: multiply; 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-d8c69cdd] { border-top: 2px solid rgba(0, 0, 0, 0.8); border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 25px 0px; margin: 15px 0px; line-height: var(--g-comp-line-height); font-weight: 600; }
.letter-body[data-v-d8c69cdd] { line-height: var(--g-comp-line-height); white-space: pre-wrap; word-break: break-word; flex: 1 1 0%; }
.calendar-bg-image[data-v-00937da5], .calendar-bg-overlay[data-v-00937da5] { position: absolute; inset: 0px; z-index: 0; }
.calendar-preview[data-v-00937da5] > :not(.calendar-bg-image):not(.calendar-bg-overlay) { position: relative; z-index: 1; }
.cal-day-cell.cal-pulse[data-v-00937da5] { animation: 2s cubic-bezier(0.4, 0, 0.6, 1) 0s infinite normal none running cal-pulse-00937da5; }
@keyframes cal-pulse-00937da5 { 
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.85; transform: scale(0.96); }
}
.cal-day-cell[data-v-00937da5] { position: relative; cursor: pointer; }
.cal-modal-overlay[data-v-00937da5] { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; animation: 0.3s ease 0s 1 normal none running fadeIn-00937da5; }
.cal-modal-content[data-v-00937da5] { background: var(--bg-primary, #ffffff); border: 1px solid var(--border-color, rgba(0,0,0,.1)); border-radius: 16px; width: 100%; max-width: 400px; box-shadow: rgba(0, 0, 0, 0.3) 0px 10px 30px; display: flex; flex-direction: column; overflow: hidden; animation: 0.3s ease 0s 1 normal none running slideUp-00937da5; }
.cal-modal-header[data-v-00937da5] { padding: 16px 20px; border-bottom: 1px solid var(--border-color, rgba(0,0,0,.05)); display: flex; justify-content: space-between; align-items: center; }
.cal-modal-date[data-v-00937da5] { font-weight: 700; font-size: 1.1rem; color: var(--color-primary, #111); }
.cal-modal-close[data-v-00937da5] { background: transparent; border: none; font-size: 1.5rem; color: var(--text-secondary, #888); cursor: pointer; padding: 0px 5px; }
.cal-modal-body[data-v-00937da5] { padding: 20px; max-height: 50vh; overflow-y: auto; }
.cal-modal-note-title[data-v-00937da5] { font-size: 1rem; font-weight: 600; margin-bottom: 12px; color: var(--text-primary, #000); padding-left: 10px; border-left: 4px solid var(--color-primary, #6366f1); }
.cal-modal-detail-text[data-v-00937da5] { font-size: 0.9rem; line-height: 1.6; color: var(--text-secondary, #444); white-space: pre-wrap; word-break: break-all; }
@keyframes fadeIn-00937da5 { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes slideUp-00937da5 { 
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}
.checklist-preview-wrapper[data-v-6dce1467] { width: 100%; }
.checklist-item[data-v-6dce1467] { transition: 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; box-sizing: border-box; }
.checklist-item[data-v-6dce1467]:active { transform: scale(0.96); }
.checklist-icon[data-v-6dce1467] { font-size: 1.2em; margin-right: 6px; flex-shrink: 0; line-height: 1; display: flex; align-items: center; justify-content: center; }
.checklist-preview[data-style="default"] .checklist-item[data-v-6dce1467] { justify-content: flex-start; background-color: var(--chk-item-bg, rgba(0, 0, 0, .03)); border: 1px solid transparent; }
.checklist-preview[data-style="tag"] .checklist-item[data-v-6dce1467] { 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-6dce1467]:not([data-state="none"]) { color: rgb(255, 255, 255); font-weight: 700; border-color: transparent; }
.checklist-preview[data-style="tag"] .checklist-item[data-state="checked"][data-v-6dce1467] { background-color: var(--accent-color); }
.checklist-preview[data-style="tag"] .checklist-item[data-state="crossed"][data-v-6dce1467] { background-color: var(--crossed-color); }
.checklist-preview[data-style="tag"] .checklist-item[data-state="heart"][data-v-6dce1467] { background-color: var(--heart-color); }
.checklist-preview[data-style="tag"] .checklist-icon[data-v-6dce1467] { display: none; }
.checklist-preview[data-style="bingo"] .checklist-item[data-v-6dce1467] { 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[data-v-6dce1467] { margin-right: 0px; margin-bottom: 4px; font-size: 1.5em; }
.checklist-preview[data-style="bingo"] .checklist-item[data-v-6dce1467]:not([data-state="none"]) { font-weight: 700; background-color: var(--chk-item-bg, var(--bg-input)); }
.checklist-preview[data-style="bingo"] .checklist-item[data-state="checked"][data-v-6dce1467] { border-color: var(--accent-color); color: var(--accent-color); }
.checklist-preview[data-style="bingo"] .checklist-item[data-state="crossed"][data-v-6dce1467] { border-color: var(--crossed-color); color: var(--crossed-color); }
.checklist-preview[data-style="bingo"] .checklist-item[data-state="heart"][data-v-6dce1467] { border-color: var(--heart-color); color: var(--heart-color); }
.separator-preview[data-v-c922db0f] { display: flex; align-items: center; }
.spacer-preview[data-v-e66ca55e] { width: 100%; border: 2px dashed rgba(0, 0, 0, 0.05); border-radius: 8px; display: flex; align-items: center; justify-content: center; transition: 0.3s; background: rgba(0, 0, 0, 0.02); }
.spacer-preview[data-v-e66ca55e]:hover { border-color: rgba(0, 0, 0, 0.2); background: rgba(0, 0, 0, 0.05); }
.spacer-preview.is-exporting[data-v-e66ca55e] { border: none !important; background: transparent !important; }
.spacer-label[data-v-e66ca55e] { font-size: 0.8rem; color: rgba(0, 0, 0, 0.3); user-select: none; pointer-events: none; }
.spacer-preview.is-exporting .spacer-label[data-v-e66ca55e] { display: none; }
.music-apple[data-v-7276aa1d] { user-select: none; transition: transform 0.3s; }
.apple-cover-container[data-v-7276aa1d] { position: relative; width: 100%; aspect-ratio: 1 / 1; margin-bottom: 24px; }
.apple-cover-img[data-v-7276aa1d] { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; position: relative; z-index: 2; box-shadow: rgba(0, 0, 0, 0.2) 0px 8px 16px; }
.apple-cover-shadow[data-v-7276aa1d] { position: absolute; top: 15px; left: 0px; width: 100%; height: 100%; background: inherit; filter: blur(25px) brightness(0.8); opacity: 0.6; z-index: 1; border-radius: 12px; }
.apple-info[data-v-7276aa1d] { text-align: center; width: 100%; margin-bottom: 24px; }
.apple-title[data-v-7276aa1d] { font-size: 20px; font-weight: 600; margin: 0px 0px 4px; letter-spacing: -0.28px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.apple-artist[data-v-7276aa1d] { font-size: 17px; font-weight: 400; opacity: 0.55; margin: 0px; letter-spacing: -0.374px; }
.apple-controls[data-v-7276aa1d] { display: flex; align-items: center; gap: 32px; margin-bottom: 24px; }
.control-btn[data-v-7276aa1d] { background: transparent; border: none; color: inherit; font-size: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: opacity 0.2s, transform 0.1s; }
.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] { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.15); border-radius: 2px; overflow: hidden; margin-bottom: 8px; }
.apple-progress-fill[data-v-7276aa1d] { height: 100%; background: rgb(255, 255, 255); border-radius: 2px; }
.apple-time[data-v-7276aa1d] { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; letter-spacing: -0.12px; }
.music-item-host[data-v-9dfeef3c] { width: 100%; box-sizing: border-box; }
.cut-line-preview[data-v-c04ba884] { display: flex; align-items: center; justify-content: center; width: 100%; padding: var(--g-comp-padding, 10px 0); gap: 10px; opacity: 0.8; }
.cut-line-dashed[data-v-c04ba884] { flex: 1 1 0%; border-top: 1px dashed currentcolor; height: 0px; }
.cut-line-icon[data-v-c04ba884] { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; }
.dialogue-preview-container[data-v-c1e67a2f] { display: flex; flex-direction: column; gap: 20px; }
.dialogue-entry[data-v-c1e67a2f] { display: flex; gap: 12px; max-width: 85%; align-items: flex-start; }
.dialogue-left[data-v-c1e67a2f] { align-self: flex-start; }
.dialogue-right[data-v-c1e67a2f] { align-self: flex-end; flex-direction: row-reverse; }
.dialogue-center[data-v-c1e67a2f] { align-self: center; max-width: 100%; margin: 4px 0px; }
.dialogue-center .dialogue-content-wrapper[data-v-c1e67a2f] { display: flex; justify-content: center; width: 100%; }
.dialogue-center .dialogue-bubble[data-v-c1e67a2f] { padding: 4px 16px; border-radius: 20px; font-size: 0.85rem; border: none; margin: 4px 0px; box-shadow: none; backdrop-filter: blur(4px); background: rgba(128, 128, 128, 0.15) !important; color: var(--text-secondary) !important; }
.dialogue-center .dialogue-bubble[data-v-c1e67a2f]::before { display: none; }
.dialogue-avatar[data-v-c1e67a2f] { width: 40px; height: 40px; border-radius: 50%; background-size: cover; background-position: center center; flex-shrink: 0; margin-top: 0px; }
.dialogue-avatar.initial-avatar[data-v-c1e67a2f] { display: flex; align-items: center; justify-content: center; font-size: 1.2rem; font-weight: 700; color: rgb(255, 255, 255); text-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; }
.dialogue-content-wrapper[data-v-c1e67a2f] { display: flex; flex-direction: column; }
.dialogue-left .dialogue-content-wrapper[data-v-c1e67a2f] { align-items: flex-start; }
.dialogue-right .dialogue-content-wrapper[data-v-c1e67a2f] { align-items: flex-end; }
.dialogue-speaker[data-v-c1e67a2f] { font-size: 0.8em; font-weight: 600; margin-bottom: 4px; padding: 0px 8px; }
.dialogue-bubble[data-v-c1e67a2f] { position: relative; padding: 10px 15px; border-radius: 18px; background-color: var(--bubble-bg-color); }
.dialogue-left .dialogue-bubble[data-v-c1e67a2f] { border-top-left-radius: 4px; }
.dialogue-right .dialogue-bubble[data-v-c1e67a2f] { border-top-right-radius: 4px; }
.dialogue-bubble[data-v-c1e67a2f]::before { content: ""; position: absolute; bottom: 8px; width: 0px; height: 0px; border: 8px solid transparent; }
.dialogue-left .dialogue-bubble[data-v-c1e67a2f]::before { left: -10px; border-right-color: var(--bubble-bg-color); transform: translateY(-50%); top: 50%; }
.dialogue-right .dialogue-bubble[data-v-c1e67a2f]::before { right: -10px; border-left-color: var(--bubble-bg-color); transform: translateY(-50%); top: 50%; }
.dialogue-image[data-v-c1e67a2f] { max-width: 100%; border-radius: 8px; display: block; }
.dialogue-preview-container[data-style="wechat"][data-v-c1e67a2f] { background-color: rgb(245, 245, 245) !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-avatar[data-v-c1e67a2f] { width: 40px; height: 40px; border-radius: 6px !important; box-shadow: none !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-right .dialogue-speaker[data-v-c1e67a2f] { display: none; }
.dialogue-preview-container[data-style="wechat"] .dialogue-left .dialogue-speaker[data-v-c1e67a2f] { font-size: 0.75rem; margin-bottom: 2px; margin-left: 0px; color: rgb(173, 173, 173) !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-left .dialogue-bubble[data-v-c1e67a2f] { border: 1px solid rgb(237, 237, 237); padding: 9px 11px; background-color: rgb(255, 255, 255) !important; color: rgb(11, 11, 11) !important; border-radius: 6px !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-right .dialogue-bubble[data-v-c1e67a2f] { border: 1px solid rgb(138, 217, 97); padding: 9px 11px; background-color: rgb(149, 236, 105) !important; color: rgb(11, 11, 11) !important; border-radius: 6px !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-bubble[data-v-c1e67a2f]::before { top: 14px; border-width: 6px; }
.dialogue-preview-container[data-style="wechat"] .dialogue-left .dialogue-bubble[data-v-c1e67a2f]::before { border-right-color: rgb(255, 255, 255) !important; left: -11px; }
.dialogue-preview-container[data-style="wechat"] .dialogue-right .dialogue-bubble[data-v-c1e67a2f]::before { border-left-color: rgb(149, 236, 105) !important; right: -11px; }
.dialogue-preview-container[data-style="discord"][data-v-c1e67a2f] { gap: 2px; background-color: rgb(49, 51, 56) !important; color: rgb(219, 222, 225) !important; border-radius: 4px !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-entry[data-v-c1e67a2f] { align-items: flex-start; gap: 16px; padding: 2px 0px; max-width: 100%; flex-direction: row !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-entry[data-v-c1e67a2f]:hover { background-color: rgba(0, 0, 0, 0.04); }
.dialogue-preview-container[data-style="discord"] .dialogue-avatar[data-v-c1e67a2f] { width: 40px; height: 40px; margin-top: 2px; cursor: pointer; border-radius: 50% !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-content-wrapper[data-v-c1e67a2f] { flex: 1 1 0%; align-items: flex-start !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-header[data-v-c1e67a2f] { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.dialogue-preview-container[data-style="discord"] .dialogue-speaker[data-v-c1e67a2f] { font-size: 1rem; font-weight: 500; padding: 0px; margin: 0px; color: rgb(242, 243, 245) !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-timestamp[data-v-c1e67a2f] { font-size: 0.75rem; color: rgb(148, 155, 164); font-weight: 400; }
.dialogue-preview-container[data-style="discord"] .dialogue-bubble[data-v-c1e67a2f] { padding: 0px; border: none; border-radius: 0px; background: transparent !important; color: rgb(219, 222, 225) !important; }
.dialogue-preview-container[data-style="discord"] .dialogue-bubble[data-v-c1e67a2f]::before { display: none; }
.qr-code-module-container[data-v-546c4b72] { min-height: 100px; }
.qr-code-item[data-v-546c4b72] { flex: 1 1 0%; width: 100%; display: flex; justify-content: center; align-items: center; overflow: hidden; padding: var(--g-comp-padding); }
.qr-code-item[data-v-546c4b72] canvas, .qr-code-item[data-v-546c4b72] svg { display: block; object-fit: contain; max-width: 100% !important; max-height: 100% !important; width: auto !important; height: auto !important; aspect-ratio: 1 / 1 !important; }
.qr-title[data-v-546c4b72] { font-weight: 700; font-size: 1.1em; margin-bottom: 4px; }
.qr-description[data-v-546c4b72] { font-size: 0.9em; opacity: 0.8; }
.item-upload-progress-overlay[data-v-325cbc06] { position: absolute; inset: 0px; background: rgba(255, 255, 255, 0.85); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(4px); border-radius: inherit; pointer-events: none; }
.exporting .mobile-pencils-layer[data-v-325cbc06], .exporting .bento-drag-handle[data-v-325cbc06], .exporting .bento-more-handle[data-v-325cbc06], .exporting .bento-resize-handle[data-v-325cbc06], .exporting .bento-select-handle[data-v-325cbc06], .exporting .bento-rotate-handle[data-v-325cbc06], .exporting .bento-grid-overlay[data-v-325cbc06] { display: none !important; }
.progress-bar-container[data-v-325cbc06] { width: 60%; height: 4px; background: rgba(0, 0, 0, 0.1); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
.progress-bar-fill[data-v-325cbc06] { height: 100%; background: var(--g-theme-accent, #007AFF); transition: width 0.3s; }
.progress-label[data-v-325cbc06] { font-size: 11px; font-weight: 600; color: rgb(51, 51, 51); }
.fade-enter-active[data-v-325cbc06], .fade-leave-active[data-v-325cbc06] { transition: opacity 0.3s; }
.fade-enter-from[data-v-325cbc06], .fade-leave-to[data-v-325cbc06] { opacity: 0; }
.preview-item-wrapper[data-v-325cbc06] { position: relative; cursor: pointer; }
.mobile-pencil-wrapper[data-v-325cbc06] { z-index: 100; pointer-events: none; }
.pencil-icon[data-v-325cbc06] { width: 20px; height: 20px; background: var(--color-primary, #6366f1); color: rgb(255, 255, 255); border-radius: 50%; border: 1px solid white; display: flex; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 8px; cursor: pointer; font-size: 11px; pointer-events: auto; transition: none !important; }
.pencil-icon[data-v-325cbc06]:hover { transform: scale(1.1) !important; filter: brightness(1.1); }
.pencil-icon[data-v-325cbc06]:active { transform: scale(0.9) !important; }
.preview-item-wrapper.selected[data-v-325cbc06] { outline: 2px solid var(--bento-group-color, var(--color-primary)); z-index: 100 !important; cursor: pointer !important; pointer-events: auto !important; }
.preview-item-wrapper.selected .bento-drag-handle[data-v-325cbc06], .preview-item-wrapper.selected .bento-resize-handle[data-v-325cbc06], .preview-item-wrapper.selected .bento-rotate-handle[data-v-325cbc06] { z-index: 110 !important; pointer-events: auto !important; }
.preview-item-wrapper.multi-selected[data-v-325cbc06]: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-325cbc06] { outline-style: solid; outline-color: var(--bento-group-color, var(--color-primary)); outline-width: 2px; box-shadow: 0 0 0 4px var(--bento-group-color, rgba(0, 122, 255, .1)); }
.preview-item-wrapper.is-dragging-bento[data-v-325cbc06] { 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-325cbc06] * { pointer-events: none !important; }
.preview-item-wrapper.is-dragging-bento .bento-drag-handle[data-v-325cbc06], .preview-item-wrapper.is-dragging-bento .bento-resize-handle[data-v-325cbc06], .preview-item-wrapper.is-dragging-bento .bento-rotate-handle[data-v-325cbc06] { pointer-events: auto !important; }
.preview-item-wrapper.is-resizing-bento[data-v-325cbc06] { opacity: 0.9 !important; z-index: 9999 !important; outline: 2px dashed var(--bento-group-color, var(--color-primary)) !important; }
.bento-drag-handle[data-v-325cbc06] { position: absolute; top: -10px; left: -10px; width: 24px; height: 24px; background: var(--bento-group-color, var(--color-primary)); color: rgb(255, 255, 255); border-radius: 6px; display: flex; align-items: center; justify-content: center; z-index: 110; cursor: grab; box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 10px; font-size: 16px; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); }
.bento-drag-handle[data-v-325cbc06]:hover { transform: scale(1.15); filter: brightness(1.1); }
.bento-drag-handle[data-v-325cbc06]:active { cursor: grabbing; }
.bento-select-handle[data-v-325cbc06] { position: absolute; top: -10px; left: 20px; width: 24px; height: 24px; background: rgb(255, 255, 255); color: rgb(153, 153, 153); border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 111; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px; font-size: 18px; transition: 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); border: 1px solid rgba(0, 0, 0, 0.05); }
.bento-select-handle.is-selected[data-v-325cbc06] { background: var(--bento-group-color, var(--color-primary)); color: rgb(255, 255, 255); border-color: var(--bento-group-color, var(--color-primary)); transform: scale(1.1); }
.bento-select-handle[data-v-325cbc06]:hover { transform: scale(1.1); }
.bento-more-handle[data-v-325cbc06] { position: absolute; top: -10px; left: 50px; width: 24px; height: 24px; background: rgb(255, 255, 255); color: var(--bento-group-color, var(--color-primary)); border-radius: 6px; display: flex; align-items: center; justify-content: center; z-index: 110; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px; font-size: 16px; transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1); border: 1px solid rgba(0, 0, 0, 0.05); }
.bento-more-handle[data-v-325cbc06]:hover { transform: scale(1.1); background: rgb(245, 245, 247); }
.bento-resize-handle[data-v-325cbc06] { position: absolute; bottom: 0px; right: 0px; width: 20px; height: 20px; cursor: nwse-resize; z-index: 110; background: linear-gradient(135deg,transparent 50%,var(--bento-group-color, var(--color-primary)) 50%); border-bottom-right-radius: calc(var(--g-comp-border-radius, 8px) - 2px); opacity: 0.8; transition: opacity 0.2s; }
.bento-resize-handle[data-v-325cbc06]:hover { opacity: 1; }
.bento-rotate-handle[data-v-325cbc06] { position: absolute; top: -6px; right: -6px; width: 12px; height: 12px; cursor: crosshair; z-index: 112; background: var(--bento-group-color, var(--color-primary)); border: 2px solid white; border-radius: 3px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 8px; opacity: 0.9; transition: opacity 0.2s, transform 0.2s; }
.bento-rotate-handle[data-v-325cbc06]:hover { opacity: 1; transform: scale(1.25); }
.bento-grid-overlay[data-v-325cbc06] { pointer-events: none; overflow: hidden; opacity: 1; }
.bento-grid-overlay[data-v-325cbc06]::before { content: ""; position: absolute; top: 0px; left: 0px; width: 100%; border-bottom: 1.5px dashed var(--bento-grid-color, rgba(0,0,0,.3)); z-index: 2; }
.bento-grid-overlay[data-v-325cbc06]::after { content: ""; position: absolute; top: 0px; left: 0px; height: 100%; border-right: 1.5px dashed var(--bento-grid-color, rgba(0,0,0,.3)); z-index: 2; }
.grid-cell-marker[data-v-325cbc06] { width: 100%; height: 100%; position: relative; box-sizing: border-box; background: transparent; border: none; border-radius: 0px; }
.grid-cell-marker[data-v-325cbc06]::after { content: ""; box-sizing: border-box; position: absolute; top: 0px; left: 0px; height: 100%; width: calc(100% + var(--preview-gap, 24px) + 2px); border-top: 1.5px dashed var(--bento-grid-color, rgba(0,0,0,.3)); border-bottom: 1.5px dashed var(--bento-grid-color, rgba(0,0,0,.3)); }
.grid-cell-marker[data-v-325cbc06]::before { content: ""; box-sizing: border-box; position: absolute; top: 0px; left: 0px; width: 100%; height: calc(100% + var(--preview-gap, 24px) + 2px); border-left: 1.5px dashed var(--bento-grid-color, rgba(0,0,0,.3)); border-right: 1.5px dashed var(--bento-grid-color, rgba(0,0,0,.3)); background: transparent; border-radius: 0px; }
.is-rotating-bento .item-inner-container[data-v-325cbc06] { pointer-events: none; }
.preview-items-container[data-v-325cbc06]:has(.is-dragging-bento), .preview-items-container[data-v-325cbc06]:has(.is-resizing-bento), .preview-items-container[data-v-325cbc06]:has(.is-rotating-bento), .preview-items-container.is-interacting[data-v-325cbc06] { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
.preview-items-container.is-interacting .preview-item-wrapper[data-v-325cbc06], .preview-items-container.is-interacting .item-inner-container[data-v-325cbc06] { transition: none !important; animation: auto ease 0s 1 normal none running none !important; }
.is-bento-canvas > .preview-item-wrapper[data-v-325cbc06] { height: 100%; }
.is-bento-canvas > .preview-item-wrapper .item-inner-container[data-v-325cbc06] { height: 100% !important; width: 100% !important; }
.is-bento-canvas > .preview-item-wrapper .item-inner-container > div[data-v-325cbc06]:not(.bento-drag-handle):not(.bento-resize-handle) { height: 100% !important; width: 100% !important; }
.is-bento-canvas > .preview-item-wrapper .preview-card-inner[data-v-325cbc06], .is-bento-canvas > .preview-item-wrapper .social-item-inner[data-v-325cbc06], .is-bento-canvas > .preview-item-wrapper .preview-header[data-v-325cbc06], .is-bento-canvas > .preview-item-wrapper .image-item-inner[data-v-325cbc06] { flex: 1 1 0% !important; height: 100% !important; }
.is-bento-canvas > .preview-item-wrapper .preview-card-content[data-v-325cbc06], .is-bento-canvas > .preview-item-wrapper .preview-card-content-wrapper[data-v-325cbc06] { overflow: auto; flex: 1 1 0% !important; height: auto !important; }
.empty-canvas-state[data-v-325cbc06] { width: 100%; min-height: 560px; grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 40px 20px; color: var(--text-secondary); opacity: 0.9; }
.empty-canvas-emoji[data-v-325cbc06] { font-size: 3rem; margin-bottom: 15px; filter: grayscale(1); opacity: 0.5; }
.empty-canvas-title[data-v-325cbc06] { margin: 0px 0px 10px; color: var(--text-primary); }
.empty-canvas-desc[data-v-325cbc06] { font-size: 0.9rem; margin-bottom: 18px; }
.empty-canvas-actions[data-v-325cbc06] { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.empty-canvas-actions .btn[data-v-325cbc06] { width: auto; display: inline-flex; align-items: center; gap: 6px; }
.preview-item-wrapper.is-bounce-feedback[data-v-325cbc06] .item-inner-container { animation: 0.36s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal none running select-bounce-325cbc06; }
@keyframes select-bounce-325cbc06 { 
  0% { scale: 1; }
  32% { scale: 0.965; }
  68% { scale: 1.01; }
  100% { scale: 1; }
}
.sortable-ghost[data-v-325cbc06] { opacity: 0.4; background-color: rgb(240, 240, 240); border: 2px dashed rgb(0, 122, 255); }
.sortable-drag[data-v-325cbc06] { will-change: transform, box-shadow; cursor: grabbing !important; z-index: 9999 !important; }
.preview-stickers-layer[data-v-325cbc06] { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 50; }
.preview-stickers-layer[data-v-325cbc06] > * { pointer-events: auto; }
.preview-item-wrapper.is-editing-wrapper[data-v-325cbc06] { z-index: 1000 !important; overflow: visible !important; }
.preview-item-wrapper.is-editing-wrapper[data-v-325cbc06] .item-inner-container, .preview-item-wrapper.is-editing-wrapper[data-v-325cbc06] .preview-card-inner, .preview-item-wrapper.is-editing-wrapper[data-v-325cbc06] .preview-card-content-wrapper, .preview-item-wrapper.is-editing-wrapper[data-v-325cbc06] .preview-card-content { overflow: visible !important; }
.preview-canvas-area[data-v-325cbc06]:has(.is-editing-wrapper), .preview-items-container[data-v-325cbc06]:has(.is-editing-wrapper) { overflow: visible !important; }
.is-editing-rich-text[data-v-325cbc06] .tiptap { outline: none; background: transparent; }
[data-v-325cbc06] .preview-items-container p, [data-v-325cbc06] .preview-items-container li, [data-v-325cbc06] .preview-items-container ul, [data-v-325cbc06] .preview-items-container ol, [data-v-325cbc06] .preview-items-container .tiptap, [data-v-325cbc06] .preview-items-container .ql-editor { line-height: inherit !important; letter-spacing: inherit !important; }
.locked-mode .preview-item-wrapper.selected[data-v-325cbc06] { outline: none !important; box-shadow: none !important; }
@media screen and (max-width: 768px) {
  .locked-mode .preview-item-wrapper[data-v-325cbc06] { cursor: default !important; }
}
.bulk-action-bar[data-v-325cbc06] { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%); background: rgb(255, 255, 255); border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 40px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; display: flex; align-items: center; padding: 8px 8px 8px 20px; z-index: 90; gap: 16px; min-width: 320px; max-width: 90vw; }
.bulk-info[data-v-325cbc06] { display: flex; flex-direction: column; line-height: 1.2; }
.bulk-info .count[data-v-325cbc06] { font-size: 18px; font-weight: 800; color: var(--color-primary); }
.bulk-info .label[data-v-325cbc06] { font-size: 10px; color: rgb(153, 153, 153); text-transform: uppercase; }
.bulk-actions[data-v-325cbc06] { display: flex; gap: 8px; flex: 1 1 0%; }
.bulk-btn[data-v-325cbc06] { padding: 8px 12px; border-radius: 10px; border: none; background: rgb(245, 245, 247); color: rgb(51, 51, 51); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 4px; cursor: pointer; white-space: nowrap; }
.bulk-btn.primary[data-v-325cbc06] { background: var(--color-primary); color: rgb(255, 255, 255); }
.bulk-btn.danger[data-v-325cbc06] { color: rgb(255, 71, 87); }
.bulk-btn.cancel[data-v-325cbc06] { background: rgb(51, 51, 51); color: rgb(255, 255, 255); margin-left: auto; }
.bulk-btn[data-v-325cbc06]:disabled { opacity: 0.3; cursor: not-allowed; }
.slide-up-enter-active[data-v-325cbc06], .slide-up-leave-active[data-v-325cbc06] { transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s; }
.slide-up-enter-from[data-v-325cbc06], .slide-up-leave-to[data-v-325cbc06] { transform: translate(-50%, 100%) translateY(20px); opacity: 0; }
.bento-group-container[data-v-325cbc06] { display: flex; flex-direction: column; box-sizing: border-box; }
.bento-group-title[data-v-325cbc06] { position: absolute; top: 0px; left: 0px; right: 0px; padding: 0px 12px; height: 34px; display: flex; align-items: center; font-size: 14px; font-weight: 600; color: var(--g-comp-text-color, #666); opacity: 0.9; white-space: nowrap; pointer-events: none; font-family: var(--g-comp-font-family, sans-serif); transition: 0.3s; z-index: 2; }
#preview-items-container > .bento-group-container[data-v-325cbc06] { z-index: 1 !important; }
#preview-items-container > .preview-item-wrapper[data-v-325cbc06] { z-index: 2; }
#preview-items-container > .preview-item-wrapper.selected[data-v-325cbc06] { z-index: 10; }
#preview-items-container > .bento-group-container.drop-highlight[data-v-325cbc06] { animation: 1.2s ease-in-out 0s infinite normal none running group-pulse-325cbc06; 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-325cbc06 { 
  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); }
}
.drop-overlay[data-v-325cbc06] { position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.25); z-index: 3; pointer-events: none; border-radius: inherit; transition: opacity 0.2s; }
.join-group-bubble[data-v-325cbc06] { position: absolute; transform: translate(-50%); z-index: 100; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(12px); border-radius: 12px; padding: 8px 12px; display: flex; align-items: center; gap: 8px; box-shadow: rgba(0, 0, 0, 0.18) 0px 8px 32px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; white-space: nowrap; font-size: 13px; font-weight: 600; color: rgb(51, 51, 51); }
.bubble-text[data-v-325cbc06] { margin-right: 4px; }
.bubble-btn[data-v-325cbc06] { width: 28px; height: 28px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: 0.2s; }
.bubble-btn.confirm[data-v-325cbc06] { background: var(--color-primary, #6366f1); color: rgb(255, 255, 255); }
.bubble-btn.confirm[data-v-325cbc06]:hover { transform: scale(1.15); box-shadow: 0 2px 8px rgba(var(--color-primary-rgb, 99, 102, 241),.4); }
.bubble-btn.cancel[data-v-325cbc06] { background: rgb(240, 240, 240); color: rgb(102, 102, 102); }
.bubble-btn.cancel[data-v-325cbc06]:hover { background: rgb(255, 77, 79); color: rgb(255, 255, 255); transform: scale(1.15); }
.bubble-pop-enter-active[data-v-325cbc06] { animation: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0s 1 normal none running bubble-in-325cbc06; }
.bubble-pop-leave-active[data-v-325cbc06] { animation: 0.15s ease-in 0s 1 normal forwards running bubble-out-325cbc06; }
@keyframes bubble-in-325cbc06 { 
  0% { opacity: 0; transform: translate(-50%) scale(0.5) translateY(10px); }
  100% { opacity: 1; transform: translate(-50%) scale(1) translateY(0px); }
}
@keyframes bubble-out-325cbc06 { 
  0% { opacity: 1; transform: translate(-50%) scale(1); }
}
@media screen and (max-width: 768px) {
  .bento-drag-handle[data-v-325cbc06] { top: -16px !important; left: -16px !important; width: 40px !important; height: 40px !important; font-size: 24px !important; }
  .bento-select-handle[data-v-325cbc06] { top: -16px !important; left: 32px !important; width: 40px !important; height: 40px !important; font-size: 24px !important; }
  .bento-more-handle[data-v-325cbc06] { top: -16px !important; left: 80px !important; width: 40px !important; height: 40px !important; font-size: 24px !important; }
  .bento-resize-handle[data-v-325cbc06] { width: 30px !important; height: 30px !important; }
  .bento-rotate-handle[data-v-325cbc06] { top: -12px !important; right: -12px !important; width: 24px !important; height: 24px !important; }
}
.preview-wrapper.container-shape-ticket[data-v-325cbc06] { --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-325cbc06]::before { content: ""; position: absolute; top: 0px; bottom: 0px; left: 60px; width: 1px; background-image: linear-gradient(rgb(221, 221, 221) 50%, transparent 50%); background-size: 1px 10px; z-index: 5; opacity: 0.5; }
.color-input-container[data-v-fad2ecb0] { display: flex; align-items: stretch; width: 100%; height: 38px; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 6px; overflow: hidden; transition: 0.2s; }
.color-input-container[data-v-fad2ecb0]: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-fad2ecb0] { width: 38px; height: 38px; position: relative; cursor: pointer; flex-shrink: 0; border-right: 1px solid var(--border-color); }
.checkerboard[data-v-fad2ecb0] { position: absolute; inset: 0px; background-image: linear-gradient(45deg, rgb(238, 238, 238) 25%, transparent 25%), linear-gradient(-45deg, rgb(238, 238, 238) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgb(238, 238, 238) 75%), linear-gradient(-45deg, transparent 75%, rgb(238, 238, 238) 75%); background-size: 8px 8px; background-position: 0px 0px, 0px 4px, 4px 4px, 4px 0px; }
.color-block[data-v-fad2ecb0] { position: absolute; inset: 0px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 3px inset; }
.color-hex-input[data-v-fad2ecb0] { flex: 1 1 0%; color: var(--text-primary); padding: 0px 10px; font-family: monospace; font-size: 0.9rem; height: 100%; min-width: 0px; border: none !important; background: transparent !important; }
.color-hex-input[data-v-fad2ecb0]:focus { outline: none; }
.reset-btn[data-v-fad2ecb0] { width: 32px; display: flex; align-items: center; justify-content: center; background: transparent; border-top: none; border-right: none; border-bottom: none; border-image: initial; border-left: 1px solid var(--border-color); color: var(--text-secondary); cursor: pointer; opacity: 0.5; transition: 0.2s; }
.reset-btn[data-v-fad2ecb0]:hover:not(:disabled) { opacity: 1; color: var(--color-primary); background: rgba(0, 0, 0, 0.03); }
.reset-btn[data-v-fad2ecb0]:disabled { cursor: not-allowed; opacity: 0.2; }
.no-text .color-hex-input[data-v-fad2ecb0] { display: none; }
.no-text[data-v-fad2ecb0] { width: auto; flex: 0 0 auto; }
.image-uploader-wrapper[data-v-26db37d4] { width: 100%; }
.image-uploader-wrapper.headless[data-v-26db37d4] { width: auto; display: inline-block; }
.uploader-trigger[data-v-26db37d4] { position: relative; cursor: pointer; display: flex; overflow: hidden; }
.uploader-trigger.is-processing[data-v-26db37d4] { cursor: wait; pointer-events: none; }
.progress-overlay[data-v-26db37d4] { position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 10; }
.progress-content[data-v-26db37d4] { display: flex; flex-direction: column; align-items: center; gap: 8px; color: rgb(255, 255, 255); }
.progress-ring__circle[data-v-26db37d4] { transition: stroke-dashoffset 0.35s; transform: rotate(-90deg); transform-origin: 50% 50%; }
.status-label[data-v-26db37d4] { font-size: 0.75rem; font-weight: 700; text-shadow: rgba(0, 0, 0, 0.5) 0px 1px 2px; }
.percent-label[data-v-26db37d4] { font-size: 0.65rem; opacity: 0.8; }
.fade-enter-active[data-v-26db37d4], .fade-leave-active[data-v-26db37d4] { transition: opacity 0.3s; }
.fade-enter-from[data-v-26db37d4], .fade-leave-to[data-v-26db37d4] { opacity: 0; }
.hidden-pond[data-v-26db37d4] { position: absolute; width: 1px; height: 1px; padding: 0px; margin: -1px; overflow: hidden; clip: rect(0px, 0px, 0px, 0px); border: 0px; }
.uploader-loading[data-v-26db37d4] { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 20px; background: var(--bg-input); border: 1px dashed var(--border-color); border-radius: 8px; color: var(--text-secondary); font-size: 0.85rem; }
.spin[data-v-26db37d4] { animation: 1s linear 0s infinite normal none running spin-26db37d4; }
@keyframes spin-26db37d4 { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
[data-v-26db37d4] .filepond--root { font-family: inherit; margin-bottom: 0px; }
[data-v-26db37d4] .filepond--panel-root { background-color: var(--bg-input); border: 1px dashed var(--border-color); }
[data-v-26db37d4] .filepond--drop-label { color: var(--text-primary); cursor: pointer; }
.error-state[data-v-26db37d4] { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.error-message[data-v-26db37d4] { color: rgb(255, 77, 79); font-weight: 500; }
.retry-button[data-v-26db37d4] { padding: 6px 16px; background: var(--accent-color, #1890ff); color: rgb(255, 255, 255); border: none; border-radius: 4px; cursor: pointer; font-size: 0.8rem; transition: opacity 0.2s; }
.retry-button[data-v-26db37d4]:hover { opacity: 0.9; }
.common-style-editor[data-v-a3c42122] { display: flex; flex-direction: column; gap: 12px; }
.shadow-toggle-group[data-v-a3c42122] { background: var(--bg-input); padding: 4px; border-radius: 6px; border: 1px solid var(--border-color); justify-content: space-around; }
.layout-value[data-v-a3c42122] { color: var(--color-primary); font-weight: 700; font-size: 0.75rem; }
.color-preview-btn[data-v-a3c42122] { width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--border-color); cursor: pointer; flex-shrink: 0; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset; }
.bg-thumb-preview[data-v-a3c42122] { width: 80px; height: 60px; border: 2px dashed var(--border-color); border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; background: var(--bg-input); }
.bg-thumb-preview img[data-v-a3c42122] { width: 100%; height: 100%; object-fit: cover; }
.danger-text[data-v-a3c42122] { color: rgb(239, 68, 68); }
.btn-small[data-v-a3c42122] { padding: 4px 8px; font-size: 0.8rem; }
.editor-item[data-v-be6252c4] { border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-panel); overflow: hidden; }
.editor-item-header[data-v-be6252c4] { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--bg-section); border-bottom: 1px solid var(--border-color); }
.header-main[data-v-be6252c4] { display: flex; align-items: center; gap: 8px; flex: 1 1 0%; min-width: 0px; }
.module-icon[data-v-be6252c4] { color: var(--color-primary); display: flex; align-items: center; flex-shrink: 0; }
.module-title[data-v-be6252c4] { font-weight: 700; font-size: 0.9rem; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.module-title[data-v-be6252c4]:hover { color: var(--color-primary); }
.edit-name-input[data-v-be6252c4] { background: var(--bg-input); border: 1px solid var(--color-primary); color: var(--text-primary); border-radius: 4px; padding: 2px 6px; font-size: 0.85rem; font-weight: 700; width: 100%; }
.module-id[data-v-be6252c4] { font-size: 0.7rem; opacity: 0.4; margin-left: 4px; }
.header-actions[data-v-be6252c4] { display: flex; gap: 4px; }
.action-btn[data-v-be6252c4] { background: transparent; border: none; padding: 4px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; color: var(--text-secondary); opacity: 0.7; transition: 0.2s; }
.action-btn[data-v-be6252c4]:hover { background: var(--bg-input); color: var(--text-primary); opacity: 1; }
.action-btn.delete[data-v-be6252c4]:hover { color: var(--color-danger); }
.editor-item-content[data-v-be6252c4] { padding: 15px; }
.empty-state[data-v-be6252c4] { text-align: center; padding: 40px 20px; color: var(--text-secondary); }
.multi-item-editor[data-v-79b21e2c] { display: flex; flex-direction: column; height: calc(-180px + 100vh); max-height: calc(-180px + 100vh); 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: none; border-radius: 0px 0px 8px 8px; background: var(--bg-panel); }
.editor-item-header[data-v-79b21e2c] { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: var(--bg-section); border-bottom: 1px solid var(--border-color); }
.header-main[data-v-79b21e2c] { display: flex; align-items: center; gap: 8px; flex: 1 1 0%; }
.module-icon[data-v-79b21e2c] { color: var(--color-primary); display: flex; align-items: center; }
.module-title[data-v-79b21e2c] { font-weight: 700; font-size: 0.9rem; }
.header-actions[data-v-79b21e2c] { display: flex; gap: 4px; }
.action-btn[data-v-79b21e2c] { background: transparent; border: none; padding: 4px; cursor: pointer; border-radius: 4px; display: flex; align-items: center; color: var(--text-secondary); opacity: 0.7; transition: 0.2s; }
.action-btn[data-v-79b21e2c]:hover { background: var(--bg-input); color: var(--text-primary); opacity: 1; }
.action-btn.delete[data-v-79b21e2c]:hover { color: var(--color-danger); }
.native-style-tabs[data-v-79b21e2c] { display: flex; border-bottom: 1px solid var(--border-color); background: var(--bg-panel); padding: 0px 10px; justify-content: space-between; }
.tabs-scroll-area[data-v-79b21e2c] { display: flex; overflow-x: auto; scrollbar-width: none; gap: 5px; flex: 1 1 0%; }
.tabs-scroll-area[data-v-79b21e2c]::-webkit-scrollbar { display: none; }
.tab-btn[data-v-79b21e2c] { padding: 10px 12px; background: transparent; border-top: none; border-right: none; border-left: none; border-image: initial; cursor: pointer; color: var(--text-secondary); font-size: 0.85rem; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.tab-btn.active[data-v-79b21e2c] { color: var(--color-primary); border-bottom-color: var(--color-primary); background: rgba(var(--color-primary-rgb),.05); }
.shared-appearance-tab[data-v-79b21e2c] { font-weight: 700; border-left: 1px solid var(--border-color); padding-left: 15px; margin-left: 5px; }
.native-style-tabs.compact-mode .tab-btn[data-v-79b21e2c] { padding: 8px 10px; font-size: 0.82rem; gap: 4px; }
.native-style-tabs.compact-mode .shared-appearance-tab[data-v-79b21e2c] { padding-left: 12px; }
.native-style-tabs.icon-only-mode .item-unique-tab[data-v-79b21e2c] { padding: 8px 12px; }
.native-style-tabs.icon-only-mode .item-unique-tab .iconify[data-v-79b21e2c] { font-size: 1.2rem; margin: 0px; }
.native-style-tabs.icon-only-mode .shared-appearance-tab[data-v-79b21e2c] { padding: 8px 10px; }
.multi-editor-content[data-v-79b21e2c] { flex: 1 1 0%; overflow-y: auto; padding: 15px; }
.native-style-tabs .container-settings-tab[data-v-79b21e2c] { border-left: 1px solid var(--border-color); margin-left: auto; }
.container-settings-tab[data-v-79b21e2c] { background: rgba(var(--color-primary-rgb),.03); }
.container-section[data-v-79b21e2c] { animation: 0.2s ease 0s 1 normal none running fadeIn-79b21e2c; }
.container-section .tabs[data-v-79b21e2c] { display: flex; justify-content: center; gap: 10px; }
.setting-row[data-v-79b21e2c] { display: flex; gap: 15px; margin-bottom: 20px; }
.setting-col[data-v-79b21e2c] { flex: 1 1 0%; }
.setting-group[data-v-79b21e2c] { margin-bottom: 20px; }
.setting-label[data-v-79b21e2c] { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 8px; }
.native-input[data-v-79b21e2c] { width: 100%; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; color: var(--text-primary); font-size: 0.9rem; }
.color-picker-trigger[data-v-79b21e2c] { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; }
.color-preview[data-v-79b21e2c] { width: 20px; height: 20px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.1); }
.color-value[data-v-79b21e2c] { font-size: 0.85rem; color: var(--text-primary); }
.slider-control[data-v-79b21e2c] { display: flex; align-items: center; gap: 10px; }
.slider-control input[type="range"][data-v-79b21e2c] { flex: 1 1 0%; }
.slider-value[data-v-79b21e2c] { font-size: 0.8rem; color: var(--text-secondary); min-width: 40px; }
.common-section[data-v-79b21e2c], .individual-section[data-v-79b21e2c] { animation: 0.2s ease 0s 1 normal none running fadeIn-79b21e2c; }
@keyframes fadeIn-79b21e2c { 
  0% { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.batch-edit-hint[data-v-79b21e2c] { font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-hover); padding: 8px 12px; border-radius: 6px; margin-bottom: 20px; border-left: 3px solid var(--color-primary); }
.separator[data-v-79b21e2c] { margin: 15px 0px; border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px dashed var(--border-color); }
.color-control-row[data-v-79b21e2c] { display: flex; gap: 15px; }
.color-control-group[data-v-79b21e2c] { flex: 1 1 0%; }
.segment-control[data-v-79b21e2c] { display: flex; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; overflow: hidden; padding: 2px; }
.segment-control.full-width[data-v-79b21e2c] { width: 100%; }
.segment-btn[data-v-79b21e2c] { flex: 1 1 0%; padding: 6px 10px; background: transparent; border: none; cursor: pointer; font-size: 0.8rem; color: var(--text-secondary); border-radius: 4px; transition: 0.2s; }
.segment-btn.active[data-v-79b21e2c] { background: var(--bg-panel); color: var(--color-primary); box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px; }
.segment-btn.tiny[data-v-79b21e2c] { padding: 4px; font-size: 0.75rem; }
.segment-control.shrink[data-v-79b21e2c] { width: fit-content; }
.container-bg-preview[data-v-79b21e2c] { width: 100%; height: 80px; background: var(--bg-input); border: 2px dashed var(--border-color); border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; cursor: pointer; }
.container-bg-preview img[data-v-79b21e2c] { width: 100%; height: 100%; object-fit: cover; }
.upload-placeholder[data-v-79b21e2c] { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-secondary); font-size: 0.75rem; }
.editor-section[data-v-79b21e2c] { border: 1px solid var(--border-color); border-radius: 8px; padding: 12px; margin-bottom: 15px; background: rgba(var(--color-primary-rgb),.01); }
.editor-section legend[data-v-79b21e2c] { padding: 0px 8px; font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); }
.align-center[data-v-79b21e2c] { align-items: center; }
.max-width[data-v-79b21e2c] { flex: 1 1 0%; }
.gradient-config-area[data-v-79b21e2c] { margin-top: 10px; padding: 10px; background: rgba(var(--color-primary-rgb),.02); border-radius: 8px; }
.item-group-page-selector[data-v-79b21e2c] { margin-bottom: 12px; padding: 8px; background: rgba(var(--color-primary-rgb),.03); border-radius: 8px; }
.scrollable-x[data-v-79b21e2c] { overflow-x: auto; scrollbar-width: none; }
.scrollable-x[data-v-79b21e2c]::-webkit-scrollbar { display: none; }
.separator.tiny[data-v-79b21e2c] { margin: 10px 0px 5px; }
.pagination-area[data-v-79b21e2c] { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-color); }
.pagination-button-wrap[data-v-79b21e2c] { margin-bottom: 15px; }
.pagination-list[data-v-79b21e2c] { display: flex; flex-wrap: wrap; gap: 8px; }
.page-nav-btn[data-v-79b21e2c] { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-panel); color: var(--text-secondary); font-weight: 700; font-size: 0.8rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.page-nav-btn[data-v-79b21e2c]:hover { border-color: var(--color-primary); color: var(--color-primary); }
.page-nav-btn.active[data-v-79b21e2c] { 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-79b21e2c] { background: var(--bg-hover); border-style: dashed; }
.page-action-row[data-v-79b21e2c] { display: flex; justify-content: flex-end; }
.btn-outline-danger[data-v-79b21e2c] { background: transparent; border: 1px solid rgba(239, 68, 68, 0.2); color: rgb(239, 68, 68); }
.btn-outline-danger[data-v-79b21e2c]:hover { background: rgba(239, 68, 68, 0.05); border-color: rgb(239, 68, 68); }
.mt-10[data-v-79b21e2c] { margin-top: 10px; }
.no-margin[data-v-79b21e2c] { margin: 0px; }
.flex-between[data-v-79b21e2c] { display: flex; justify-content: space-between; }
.setting-hint[data-v-79b21e2c] { font-size: 0.7rem; color: rgb(153, 153, 153); margin-top: 4px; }
.toggle-switch[data-v-79b21e2c] { position: relative; width: 40px; height: 20px; }
.toggle-switch input[data-v-79b21e2c] { opacity: 0; width: 0px; height: 0px; }
.toggle-switch label[data-v-79b21e2c] { position: absolute; cursor: pointer; inset: 0px; background-color: rgb(221, 221, 221); transition: 0.4s; border-radius: 20px; }
.toggle-switch label[data-v-79b21e2c]::before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: rgb(255, 255, 255); transition: 0.4s; border-radius: 50%; }
.toggle-switch input:checked + label[data-v-79b21e2c] { background-color: var(--color-primary); }
.toggle-switch input:checked + label[data-v-79b21e2c]::before { transform: translate(20px); }
.showing-individual[data-v-79b21e2c] .selected-sub-tabs, .showing-individual[data-v-79b21e2c] .tabs { display: none !important; }
.showing-individual[data-v-79b21e2c] .editor-item { border: none !important; background: transparent !important; }
.showing-individual[data-v-79b21e2c] .editor-item-header { display: none !important; }
.showing-individual[data-v-79b21e2c] .editor-item-content { padding: 0px !important; }
.editor-body[data-v-79b21e2c] { display: flex; flex: 1 1 0%; position: relative; overflow: hidden; }
.has-sidebar[data-v-79b21e2c] { min-height: 0px; }
.editor-sidebar[data-v-79b21e2c] { width: 58px; background: var(--bg-section); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; flex-shrink: 0; padding: 6px 0px; z-index: 10; align-items: center; height: 100%; }
.sidebar-scroll-area[data-v-79b21e2c] { flex: 1 1 0%; min-height: 0px; width: 100%; overflow-y: auto; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 2px 0px; scrollbar-width: none; }
.sidebar-scroll-area[data-v-79b21e2c]::-webkit-scrollbar { display: none; }
.sidebar-tab-btn[data-v-79b21e2c] { width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-input); display: flex; align-items: center; justify-content: center; cursor: pointer; position: relative; transition: 0.2s; color: var(--text-secondary); flex-shrink: 0; }
.sidebar-tab-btn .iconify[data-v-79b21e2c] { font-size: 1.25rem; display: block; line-height: 1; }
.sidebar-tab-btn[data-v-79b21e2c]:hover { border-color: var(--color-primary); color: var(--color-primary); background: var(--bg-hover); }
.sidebar-tab-btn.active[data-v-79b21e2c] { 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-79b21e2c] { width: 100%; padding: 8px 0px; border-top: 1px solid var(--border-color); display: flex; flex-direction: column; align-items: center; gap: 8px; background: var(--bg-section); flex-shrink: 0; }
.editor-main-area[data-v-79b21e2c] { flex: 1 1 0%; display: flex; flex-direction: column; overflow-y: auto; background: var(--bg-panel); }
.multi-editor-content[data-v-79b21e2c] { padding-bottom: 40px; }
.multi-editor-content.with-inset-padding[data-v-79b21e2c] { padding-left: 0px; }
.icon-wrapper[data-v-79b21e2c], .tab-icon-wrap[data-v-79b21e2c] { position: relative; display: flex; align-items: center; justify-content: center; }
.page-badge[data-v-79b21e2c] { position: absolute; top: -6px; right: -6px; background: var(--color-primary); color: rgb(255, 255, 255); font-size: 10px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 2px var(--bg-section); z-index: 5; }
.sidebar-tab-btn.active .page-badge[data-v-79b21e2c] { background: rgb(255, 255, 255); color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary); }
.page-badge-mini[data-v-79b21e2c] { position: absolute; top: -4px; right: -4px; background: var(--color-primary); color: rgb(255, 255, 255); font-size: 8px; padding: 0px 4px; border-radius: 4px; pointer-events: none; box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px; }
[data-v-79b21e2c] .settings-group .btn-outline-primary, .container-section .btn-outline-primary[data-v-79b21e2c] { border-color: var(--color-primary); color: var(--color-primary); }
[data-v-79b21e2c] .settings-group .btn-outline-primary:hover, .container-section .btn-outline-primary[data-v-79b21e2c]:hover { background: var(--color-primary); color: rgb(255, 255, 255); }
.container-section[data-v-79b21e2c] { padding: 0px 16px; }
.multi-item-editor[data-v-79b21e2c] label, .multi-item-editor[data-v-79b21e2c] .setting-label { color: var(--text-primary); }
.multi-item-editor[data-v-79b21e2c] .form-control, .multi-item-editor[data-v-79b21e2c] select, .multi-item-editor[data-v-79b21e2c] input[type="text"] { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); }
.multi-item-editor[data-v-79b21e2c] .segment-control { display: flex; justify-content: center; gap: 4px; }
.multi-item-editor[data-v-79b21e2c] .segment-btn { background: var(--bg-input); color: var(--text-secondary); border-color: var(--border-color); }
.multi-item-editor[data-v-79b21e2c] .segment-btn.active { background: var(--color-primary); color: rgb(255, 255, 255); border-color: var(--color-primary); }
.multi-item-editor[data-v-79b21e2c] .editor-section { border-color: var(--border-color); background: var(--bg-section); margin-bottom: 16px; }
.multi-item-editor[data-v-79b21e2c] legend { color: var(--text-secondary); font-weight: 700; }
.multi-item-editor[data-v-79b21e2c] .btn-default { background: var(--bg-input); color: var(--text-primary); border-color: var(--border-color); }
.multi-item-editor[data-v-79b21e2c] .btn-default:hover { background: var(--bg-hover); }
.inspector-panel[data-v-1acd02a6] { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.inspector-scroll-container[data-v-1acd02a6] { flex: 1 1 0%; overflow-y: auto; padding-bottom: 20px; }
.inspector-footer[data-v-1acd02a6] { flex-shrink: 0; padding: 10px 15px; background: var(--bg-secondary); border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--text-secondary); z-index: 10; }
.empty-selection-premium[data-v-1acd02a6] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 4rem 1.5rem; text-align: center; color: var(--text-secondary); min-height: 400px; }
.empty-icon-wrapper[data-v-1acd02a6] { position: relative; width: 80px; height: 80px; background: linear-gradient(135deg,var(--color-primary),#60a5fa); border-radius: 24px; display: flex; align-items: center; justify-content: center; margin-bottom: 2rem; color: rgb(255, 255, 255); font-size: 2.5rem; box-shadow: 0 10px 25px color-mix(in srgb,var(--color-primary),transparent 80%); }
.empty-icon-pulse[data-v-1acd02a6] { position: absolute; inset: 0px; border-radius: 24px; border: 2px solid var(--color-primary); animation: 2s ease-out 0s infinite normal none running icon-pulse-1acd02a6; pointer-events: none; }
@keyframes icon-pulse-1acd02a6 { 
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.5); opacity: 0; }
}
.empty-selection-premium h3[data-v-1acd02a6] { margin: 0px 0px 0.75rem; font-size: 1.25rem; color: var(--text-primary); font-weight: 700; }
.empty-selection-premium p[data-v-1acd02a6] { margin: 0px; line-height: 1.6; font-size: 0.95rem; opacity: 0.7; }
.empty-tips[data-v-1acd02a6] { margin-top: 3rem; display: flex; flex-direction: column; gap: 12px; width: 100%; }
.tip-item[data-v-1acd02a6] { background: var(--bg-input); padding: 10px 15px; border-radius: 12px; font-size: 0.82rem; color: var(--text-secondary); display: flex; align-items: center; gap: 10px; border: 1px solid var(--border-color); transition: transform 0.2s; }
.tip-item[data-v-1acd02a6]:hover { transform: translateY(-2px); background: var(--bg-section); }
.tip-item .iconify[data-v-1acd02a6] { color: var(--color-primary-text); }
.btn-active[data-v-1acd02a6] { background: var(--bg-image-upload-hover); color: var(--color-primary-text); border-color: var(--color-primary); }
.stickers-editor .setting-item[data-v-1acd02a6] { margin-bottom: 12px; }
.stickers-editor label[data-v-1acd02a6] { display: block; font-size: 0.85rem; margin-bottom: 5px; color: var(--text-secondary); }
.stickers-editor input[type="text"][data-v-1acd02a6], .stickers-editor select[data-v-1acd02a6] { width: 100%; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: 6px; background: var(--bg-input); color: var(--text-primary); }
.fade-enter-active[data-v-1acd02a6], .fade-leave-active[data-v-1acd02a6] { transition: opacity 0.2s; }
.fade-enter-from[data-v-1acd02a6], .fade-leave-to[data-v-1acd02a6] { opacity: 0; }
.segmented-control .seg-btn[data-v-1acd02a6] { transition: 0.2s; color: var(--text-secondary); font-weight: 500; }
.segmented-control .seg-btn[data-v-1acd02a6]:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.05); }
.segmented-control .seg-btn.active[data-v-1acd02a6] { box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px; background: var(--color-primary-text) !important; color: rgb(255, 255, 255) !important; }
.btn-icon-only[data-v-1acd02a6] { display: flex; align-items: center; justify-content: center; padding: 0px; }
.btn-icon-only.active[data-v-1acd02a6] { background: var(--color-primary-text); color: rgb(255, 255, 255); border-color: var(--color-primary); }
.btn-icon-small[data-v-1acd02a6] { background: rgba(255, 255, 255, 0.2); border: none; color: rgb(255, 255, 255); padding: 6px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.btn-icon-small[data-v-1acd02a6]:hover { background: rgba(255, 255, 255, 0.4); }
.stickers-editor .form-group label[data-v-1acd02a6] { font-weight: 600; color: var(--text-primary); font-size: 0.85rem; margin-bottom: 6px; }
.editor-section .section-content[data-v-1acd02a6] { overflow: hidden; transition: max-height 0.3s ease-out, opacity 0.3s ease-out, padding 0.3s ease-out, margin 0.3s ease-out; max-height: 2000px; opacity: 1; }
.editor-section.collapsed .section-content[data-v-1acd02a6] { max-height: 0px; opacity: 0; pointer-events: none; display: block !important; padding-top: 0px !important; padding-bottom: 0px !important; margin-top: 0px !important; margin-bottom: 0px !important; border: none !important; }
.editor-section legend[data-v-1acd02a6] { user-select: none; }
.inspector-tab-content#inspector-tab-content-global .editor-section[data-v-1acd02a6] { border-left: none; border-right: none; border-radius: 0px; margin-bottom: 20px; box-shadow: none; background: transparent; }
.inspector-tab-content#inspector-tab-content-global .editor-section .section-content[data-v-1acd02a6] { padding: 15px 12px; background: transparent; }
.inspector-tab-content#inspector-tab-content-global .editor-section legend[data-v-1acd02a6] { 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-1acd02a6] { margin: 15px 12px; }
.theme-preset-divider[data-v-1acd02a6] { grid-column: 1 / -1; height: 1px; border-top: 1px dashed var(--border-color); margin: 5px 0px; opacity: 0.6; }
.context-menu[data-v-e152e9f0] { position: fixed; z-index: 9999; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(10px); border-radius: 14px; box-shadow: rgba(0, 0, 0, 0.18) 0px 15px 45px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; padding: 6px; min-width: 190px; transform-origin: left top; border: 1px solid rgba(255, 255, 255, 0.4); }
.context-menu.flip-up[data-v-e152e9f0] { transform-origin: left bottom; }
.menu-list[data-v-e152e9f0] { list-style: none; margin: 0px; padding: 0px; display: flex; flex-direction: column; gap: 2px; }
.menu-list li[data-v-e152e9f0] { padding: 10px 14px; font-size: 14px; color: rgb(44, 62, 80); cursor: pointer; display: flex; align-items: center; gap: 12px; border-radius: 10px; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-weight: 500; }
.menu-list li[data-v-e152e9f0]:hover:not(.disabled):not(.hint) { background: rgb(240, 244, 248); color: var(--color-primary); transform: translate(2px); }
.menu-list li.disabled[data-v-e152e9f0] { opacity: 0.35; cursor: not-allowed; }
.menu-list li.hint[data-v-e152e9f0] { font-size: 11px; opacity: 0.5; padding: 8px 14px 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; pointer-events: none; }
.menu-list li .iconify[data-v-e152e9f0] { font-size: 1.3em; opacity: 0.8; }
.menu-list li:hover .iconify[data-v-e152e9f0] { opacity: 1; }
.menu-list li.danger[data-v-e152e9f0] { color: rgb(255, 77, 79); }
.menu-list li.danger[data-v-e152e9f0]:hover { background: rgb(255, 241, 240); color: rgb(245, 34, 45); }
.menu-list li.separator[data-v-e152e9f0] { margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid rgb(240, 240, 240); }
.menu-list li.separator-top[data-v-e152e9f0] { margin-top: 6px; padding-top: 10px; border-top: 1px solid rgb(240, 240, 240); }
.has-submenu[data-v-e152e9f0] { position: relative; }
.has-submenu[data-v-e152e9f0]::after { content: "›"; margin-left: auto; font-size: 18px; opacity: 0.5; }
.submenu[data-v-e152e9f0] { display: none; position: absolute; top: -4px; left: 100%; background: rgb(255, 255, 255); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 30px; padding: 6px; min-width: 150px; border: 1px solid rgb(240, 240, 240); }
.submenu.flip-left[data-v-e152e9f0] { left: auto; right: 100%; }
.has-submenu:hover > .submenu[data-v-e152e9f0] { display: block; }
.submenu li[data-v-e152e9f0] { justify-content: space-between; }
.icon-check[data-v-e152e9f0] { color: var(--color-primary) !important; font-size: 1rem !important; }
.is-mobile-sheet[data-v-e152e9f0] { position: fixed !important; bottom: 0px !important; left: 0px !important; top: auto !important; width: 100% !important; border-radius: 20px 20px 0px 0px !important; padding-bottom: 40px !important; }
.mobile-handle[data-v-e152e9f0] { width: 40px; height: 5px; background: rgb(221, 221, 221); border-radius: 3px; margin: 0px auto 15px; }
.context-menu-overlay[data-v-e152e9f0] { position: fixed; inset: 0px; z-index: 9998; }
.context-menu-overlay.is-mobile[data-v-e152e9f0] { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); }
.scale-fade-enter-active[data-v-e152e9f0], .scale-fade-leave-active[data-v-e152e9f0] { transition: opacity 0.2s, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); }
.scale-fade-enter-from[data-v-e152e9f0], .scale-fade-leave-to[data-v-e152e9f0] { opacity: 0; transform: scale(0.9) translateY(10px); }
.mobile-theme-fab[data-v-365df96c] { display: none; position: fixed; top: 85px; right: 15px; width: 44px; height: 44px; border-radius: 50%; background: var(--bg-card, #ffffff); border: 1px solid var(--border-color, rgba(0,0,0,.1)); box-shadow: 0 4px 15px var(--shadow-medium, rgba(0, 0, 0, .15)); z-index: 900; align-items: center; justify-content: center; color: var(--text-primary, #333); cursor: pointer; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); font-size: 1.4rem; padding: 0px; backdrop-filter: blur(10px); }
.mobile-theme-fab[data-v-365df96c]:active { transform: scale(0.9); }
:root.dark-mode .mobile-theme-fab[data-v-365df96c], .dark-mode .mobile-theme-fab[data-v-365df96c] { background: rgba(45, 49, 58, 0.8) !important; color: gold !important; border-color: rgba(255, 255, 255, 0.1) !important; }
@media (max-width: 1024px) {
  .mobile-theme-fab[data-v-365df96c] { display: flex; }
}
@supports (padding: env(safe-area-inset-top)) {
  .mobile-theme-fab[data-v-365df96c] { top: calc(85px + env(safe-area-inset-top)); }
}
.warning-banner[data-v-28509db7] { position: fixed; top: var(--system-broadcast-height, 0px); left: 0px; width: 100%; z-index: 99990; padding: 10px 20px; color: rgb(255, 255, 255); text-align: center; font-size: 0.9rem; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px; }
#storage-warning-banner a[data-v-28509db7] { color: rgb(255, 255, 255); text-decoration: underline; font-weight: 700; cursor: pointer; }
@keyframes slideDown-28509db7 { 
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}
.dialogue-editor[data-v-e7d1ab41], .qr-code-editor[data-v-fdc91a9c] { display: flex; flex-direction: column; }
.selected-sub-tabs[data-v-fdc91a9c] { display: flex; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.selected-sub-tab-btn[data-v-fdc91a9c] { flex: 1 1 0%; padding: 8px; background: transparent; border: none; font-size: 0.85rem; opacity: 0.6; cursor: pointer; }
.selected-sub-tab-btn.active[data-v-fdc91a9c] { opacity: 1; border-bottom: 2px solid var(--color-primary); }
.form-control[data-v-fdc91a9c] { width: 100%; padding: 8px; border-radius: 6px; background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-primary); font-family: inherit; font-size: 0.9rem; }
.separator[data-v-fdc91a9c] { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.color-control-row[data-v-fdc91a9c] { display: flex; gap: 12px; }
.color-control-group[data-v-fdc91a9c] { flex: 1 1 0%; }
.val-display[data-v-fdc91a9c] { float: right; color: var(--color-primary); font-weight: 700; }
.chart-editor[data-v-6b9b53eb] { display: flex; flex-direction: column; }
.selected-sub-tabs[data-v-6b9b53eb] { display: flex; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.selected-sub-tab-btn[data-v-6b9b53eb] { flex: 1 1 0%; padding: 10px; background: transparent; border: none; font-size: 0.85rem; opacity: 0.6; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.selected-sub-tab-btn.active[data-v-6b9b53eb] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.chart-editor-row[data-v-6b9b53eb] { display: flex; align-items: center; gap: 8px; padding: 6px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 6px; }
.drag-handle[data-v-6b9b53eb] { cursor: grab; color: var(--text-secondary); opacity: 0.5; display: flex; align-items: center; }
.chart-item-main[data-v-6b9b53eb] { flex: 1 1 0%; display: flex; align-items: center; gap: 6px; min-width: 0px; }
.label-input[data-v-6b9b53eb] { flex: 2 1 0%; min-width: 0px; padding: 4px 6px; border: 1px solid var(--border-input); border-radius: 4px; font-size: 0.85rem; }
.value-input[data-v-6b9b53eb] { flex: 1 1 0%; min-width: 0px; padding: 4px 6px; border: 1px solid var(--border-input); border-radius: 4px; font-size: 0.85rem; text-align: center; }
.delete-btn[data-v-6b9b53eb] { background: transparent; border: none; cursor: pointer; padding: 4px; opacity: 0.4; }
.delete-btn[data-v-6b9b53eb]:hover { opacity: 1; color: rgb(255, 77, 79); }
.flex-between[data-v-6b9b53eb] { display: flex; justify-content: space-between; align-items: center; }
.add-item-btn[data-v-6b9b53eb] { margin-top: 5px; }
.btn-block[data-v-6b9b53eb] { width: 100%; }
.separator[data-v-6b9b53eb] { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.text-editor[data-v-f0cf2b13] { display: flex; flex-direction: column; }
.rich-text-preview[data-v-f0cf2b13] { border: 1px solid var(--border-color); border-radius: 6px; padding: 10px; min-height: 80px; max-height: 200px; overflow-y: auto; background: var(--bg-input); cursor: pointer; transition: border-color 0.2s; }
.rich-text-preview[data-v-f0cf2b13]:hover { border-color: var(--color-primary); }
.placeholder[data-v-f0cf2b13] { color: var(--text-secondary); font-style: italic; text-align: center; margin-top: 20px; }
.profile-editor[data-v-af34c503] { display: flex; flex-direction: column; }
.selected-sub-tabs[data-v-af34c503] { display: flex; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.selected-sub-tab-btn[data-v-af34c503] { flex: 1 1 0%; padding: 8px; background: transparent; border: none; font-size: 0.85rem; opacity: 0.6; }
.selected-sub-tab-btn.active[data-v-af34c503] { opacity: 1; border-bottom: 2px solid var(--color-primary); }
.unified-editor-item[data-v-af34c503] { display: flex; align-items: center; gap: 8px; background: var(--bg-input); padding: 4px 8px; border-radius: 6px; margin-bottom: 6px; width: 100%; }
.unified-content[data-v-af34c503] { flex: 1 1 0%; display: flex; gap: 8px; }
.unified-content input[data-v-af34c503] { flex: 1 1 0%; border: none; background: transparent; }
.thumbnail-wrapper[data-v-af34c503] { width: 60px; height: 60px; border: 2px dashed var(--border-color); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.avatar-col[data-v-af34c503] { display: flex; flex-direction: column; align-items: center; width: 80px; }
.banner-thumb[data-v-af34c503] { width: 100%; height: 60px; }
.style-row-box[data-v-af34c503] { background: var(--bg-section); padding: 8px; border-radius: 6px; margin-bottom: 8px; border: 1px solid var(--border-color); }
.row-header[data-v-af34c503] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.row-header .label[data-v-af34c503] { font-size: 0.85rem; font-weight: 700; }
.input-group.color-hex[data-v-af34c503] { width: 100%; max-width: 220px; display: flex; }
.input-group.color-hex input[type="text"][data-v-af34c503] { flex: 1 1 0%; min-width: 0px; }
.coord-row[data-v-af34c503] { display: flex; gap: 8px; }
.coord-item[data-v-af34c503] { flex: 1 1 0%; text-align: center; }
.coord-item label[data-v-af34c503] { font-size: 0.7rem; }
.style-divider[data-v-af34c503] { margin: 20px 0px 10px; font-size: 0.75rem; font-weight: 700; text-align: center; color: var(--text-secondary); border-bottom: 1px dashed var(--border-color); line-height: 0.1em; }
.section-label[data-v-af34c503] { color: var(--color-primary); font-weight: 700; margin-bottom: 8px; display: block; }
.banner-section-box[data-v-af34c503] { background: var(--bg-editor); padding: 15px; border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 20px; box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 8px; }
.thumb-preview[data-v-af34c503] { width: 100%; height: 60px; margin-bottom: 5px; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; cursor: pointer; background: var(--bg-image-thumb, #f5f5f5); border-radius: 4px; }
.thumb-img[data-v-af34c503] { width: 100%; height: 100%; object-fit: cover; }
.banner-footer-row[data-v-af34c503] { display: flex; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-color); }
.footer-item[data-v-af34c503] { flex: 1 1 0%; }
.styled-box[data-v-af34c503] { background: var(--bg-input); padding: 8px; border-radius: 6px; border: 1px solid var(--border-color); }
.flex-row-sb[data-v-af34c503] { display: flex; justify-content: space-between; align-items: center; }
.m-0[data-v-af34c503] { margin: 0px; }
.mb-1[data-v-af34c503] { margin-bottom: 4px; }
.mt-1[data-v-af34c503] { margin-top: 4px; }
.mt-2[data-v-af34c503] { margin-top: 8px; }
.font-bold[data-v-af34c503] { font-weight: 700; }
.small[data-v-af34c503] { font-size: 0.85rem; }
.label-tiny[data-v-af34c503] { text-align: center; font-size: 0.7rem; color: var(--text-secondary); margin-top: 2px; }
.badge-pos-controls[data-v-af34c503] { background: var(--bg-input); padding: 8px; border-radius: 6px; }
.delete-btn-overlay[data-v-af34c503] { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; background: rgb(244, 63, 94); color: rgb(255, 255, 255); border-radius: 50%; border: none; font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; z-index: 5; }
.delete-btn-overlay[data-v-af34c503]:hover { background: rgb(225, 29, 72); }
.second-overlay[data-v-af34c503] { position: absolute; top: 0px; right: 0px; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; transform: translate(14px, 14px); z-index: 10; pointer-events: auto; }
.card-editor[data-v-8f627ea1] { display: flex; flex-direction: column; }
.selected-sub-tabs[data-v-8f627ea1] { display: flex; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.selected-sub-tab-btn[data-v-8f627ea1] { flex: 1 1 0%; padding: 8px; background: transparent; border: none; font-size: 0.85rem; opacity: 0.6; }
.selected-sub-tab-btn.active[data-v-8f627ea1] { opacity: 1; border-bottom: 2px solid var(--color-primary); }
.rich-text-preview-box[data-v-8f627ea1] { border: 1px solid var(--border-color); background: var(--bg-input); padding: 10px; border-radius: 6px; min-height: 60px; max-height: 150px; overflow: hidden; cursor: pointer; font-size: 0.9rem; }
.preview-content[data-v-8f627ea1] { opacity: 0.8; }
.hint[data-v-8f627ea1] { font-size: 0.75rem; color: var(--text-secondary); margin-top: 8px; line-height: 1.4; }
.music-editor[data-v-c20b997a] { display: flex; flex-direction: column; }
.hint-box[data-v-c20b997a] { font-size: 0.75rem; color: var(--text-secondary); background: var(--bg-input); padding: 8px; border-radius: 6px; margin-bottom: 15px; }
.danger-text[data-v-c20b997a] { color: rgb(239, 68, 68); }
.editor-section[data-v-c20b997a] { border: 1px solid var(--border-color); border-radius: 12px; padding: 15px; margin-bottom: 20px; }
.editor-section legend[data-v-c20b997a] { font-size: 0.85rem; font-weight: 600; padding: 0px 10px; color: var(--text-secondary); }
.image-editor[data-v-eaaf7a2d], .social-editor[data-v-ea86df03] { display: flex; flex-direction: column; }
.image-card-editor-content[data-v-b638f020] { margin-top: 10px; }
.showcase-tags-editor[data-v-b638f020] { margin-top: 5px; }
.unified-editor-item[data-v-b638f020] { transition: 0.2s; }
.unified-editor-item[data-v-b638f020]:hover { border-color: var(--color-primary) !important; }
.hint-text[data-v-b638f020] { font-size: 0.75rem; color: var(--text-secondary); margin-top: 10px; line-height: 1.4; }
.card-style[data-v-b638f020] { background: var(--bg-input); padding: 15px; border-radius: 12px; border: 1px solid var(--border-color); }
.inspector-sub-content[data-v-cd2b3b27] { padding: 15px; }
.section-label[data-v-cd2b3b27] { display: flex; align-items: center; gap: 5px; font-weight: 700; font-size: 0.85rem; margin-bottom: 12px; }
.q-label[data-v-cd2b3b27] { color: var(--color-primary); }
.a-label[data-v-cd2b3b27] { color: var(--text-secondary); }
.edit-mode-card[data-v-cd2b3b27] { background: var(--bg-editor-panel); padding: 15px; border-radius: 12px; border: 1px solid var(--border-color); margin-bottom: 15px; }
.qa-section-q[data-v-cd2b3b27] { border-left: 4px solid var(--color-primary); }
.qa-section-a[data-v-cd2b3b27] { border-left: 4px solid var(--text-secondary); }
.qa-input-small[data-v-cd2b3b27] { font-size: 0.85rem; opacity: 0.8; }
.bold-text[data-v-cd2b3b27] { font-weight: 700; }
.image-upload-area[data-v-cd2b3b27] { margin: 10px 0px 15px; }
.image-preview-v2[data-v-cd2b3b27] { display: flex; flex-direction: column; gap: 8px; }
.thumb-box[data-v-cd2b3b27] { width: 100%; height: 100px; border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; cursor: pointer; background: var(--bg-input); display: flex; align-items: center; justify-content: center; }
.thumb-box img[data-v-cd2b3b27] { max-width: 100%; max-height: 100%; object-fit: contain; }
.image-actions[data-v-cd2b3b27] { display: flex; gap: 8px; }
.image-actions button[data-v-cd2b3b27] { flex: 1 1 0%; }
.btn-dashed[data-v-cd2b3b27] { width: 100%; padding: 12px; border: 1px dashed var(--border-color); background: transparent; color: var(--text-secondary); border-radius: 8px; transition: 0.2s; }
.btn-dashed[data-v-cd2b3b27]:hover { background: var(--bg-secondary); border-color: var(--color-primary); color: var(--color-primary); }
.hint-text[data-v-cd2b3b27] { font-size: 0.75rem; color: var(--text-secondary); margin-top: 10px; line-height: 1.4; }
.card-style[data-v-cd2b3b27] { background: var(--bg-editor-panel); padding: 15px; border-radius: 12px; border: 1px solid var(--border-color); }
.section-label[data-v-72977979] { display: block; font-weight: 700; font-size: 0.85rem; color: var(--color-primary); margin-bottom: 12px; }
.dark-bg[data-v-72977979] { background: var(--bg-input); padding: 15px; border-radius: 12px; border: 1px solid var(--border-color); }
.highlight-group[data-v-72977979] { border-left: 4px solid var(--color-primary); }
.form-item[data-v-72977979] { margin-bottom: 16px; }
.form-item label[data-v-72977979] { display: block; font-size: 0.8rem; margin-bottom: 6px; color: var(--text-secondary); font-weight: 600; }
.form-control[data-v-72977979] { width: 100%; padding: 10px 12px; border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-editor); color: var(--text-primary); font-size: 0.9rem; transition: 0.2s; }
.form-control[data-v-72977979]:focus { border-color: var(--color-primary); outline: none; box-shadow: rgba(0, 122, 255, 0.1) 0px 0px 0px 2px; }
.no-resize[data-v-72977979] { resize: none; }
.dual-row[data-v-72977979] { display: grid; grid-template-columns: 1fr; gap: 12px; }
.segmented-control[data-v-72977979] { display: flex; background: var(--bg-input); padding: 3px; border-radius: 10px; border: 1px solid var(--border-color); width: 100%; }
.segmented-control label[data-v-72977979] { flex: 1 1 0%; text-align: center; padding: 8px 4px; cursor: pointer; border-radius: 8px; font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); transition: 0.2s; user-select: none; }
.segmented-control input[data-v-72977979] { display: none; }
.segmented-control label.active[data-v-72977979] { 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-72977979] { display: flex; align-items: center; justify-content: center; gap: 4px; }
.custom-checkbox-wrapper[data-v-72977979] { display: flex; align-items: center; cursor: pointer; user-select: none; gap: 8px; }
.custom-checkbox-wrapper input[data-v-72977979] { display: none; }
.checkbox-box[data-v-72977979] { width: 18px; height: 18px; border: 2px solid var(--border-color); border-radius: 4px; position: relative; transition: 0.2s; background: var(--bg-editor); }
.custom-checkbox-wrapper input:checked + .checkbox-box[data-v-72977979] { background: var(--color-primary); border-color: var(--color-primary); }
.checkbox-box[data-v-72977979]::after { content: ""; position: absolute; width: 5px; height: 10px; border-width: 0px 2px 2px 0px; border-right-style: solid; border-bottom-style: solid; border-right-color: white; border-bottom-color: white; border-image: initial; border-top-style: initial; border-top-color: initial; border-left-style: initial; border-left-color: initial; left: 5px; top: 1px; transform: rotate(45deg) scale(0); transition: 0.2s; }
.custom-checkbox-wrapper input:checked + .checkbox-box[data-v-72977979]::after { transform: rotate(45deg) scale(1); }
.checkbox-label[data-v-72977979] { font-size: 0.85rem; color: var(--text-secondary); }
.input-with-action[data-v-72977979] { display: flex; gap: 8px; }
.icon-btn[data-v-72977979] { width: 42px; height: 42px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; cursor: pointer; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.icon-btn[data-v-72977979]:hover { color: var(--color-primary); border-color: var(--color-primary); }
.stepper-input[data-v-72977979] { display: flex; align-items: center; gap: 8px; }
.stepper-btn[data-v-72977979] { width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border-color); background: var(--bg-editor); cursor: pointer; color: var(--text-primary); }
.stepper-input input[type="range"][data-v-72977979] { flex: 1 1 0%; cursor: pointer; }
.style-row-box[data-v-72977979] { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.style-row-box.no-bg[data-v-72977979] { background: transparent; padding: 0px; }
.style-field[data-v-72977979] { flex: 1 1 0%; }
.color-input-container[data-v-72977979] { height: 40px; border-radius: 8px; border: 1px solid var(--border-color); overflow: hidden; background: var(--bg-editor); }
.mini-divider[data-v-72977979] { 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-72977979] { 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-72977979] { 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-repeat: no-repeat; background-position: right 10px center; background-size: 16px; padding-right: 40px; }
.achievement-editor-container[data-v-0e7c420d] { display: flex; flex-direction: column; }
.form-group[data-v-0e7c420d] { margin-bottom: 12px; }
.form-group label[data-v-0e7c420d] { display: block; font-size: 0.8rem; margin-bottom: 4px; color: var(--text-secondary); font-weight: 500; }
.radio-group[data-v-0e7c420d] { display: flex; flex-direction: column; gap: 8px; }
.radio-group.wrap[data-v-0e7c420d] { flex-flow: wrap; }
.radio-group label[data-v-0e7c420d] { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0px; font-size: 0.9rem; }
.checkbox-group[data-v-0e7c420d] { display: flex; align-items: center; gap: 6px; font-weight: 400; }
.separator[data-v-0e7c420d] { margin: 12px 0px; border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); }
.input-group[data-v-0e7c420d] { display: flex; gap: 0px; }
.input-group input[type="text"][data-v-0e7c420d], .input-group input[type="color"][data-v-0e7c420d] { flex: 1 1 0%; border: 1px solid var(--border-input); }
.achievement-icon-preview-box[data-v-0e7c420d] { width: 64px; height: 64px; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 8px; cursor: pointer; position: relative; overflow: hidden; transition: 0.2s; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.achievement-icon-preview-box[data-v-0e7c420d]:hover { border-color: var(--color-primary); box-shadow: rgba(0, 122, 255, 0.1) 0px 0px 0px 3px; }
.preview-content[data-v-0e7c420d] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 8px; }
.preview-content[data-v-0e7c420d] .iconify, .preview-content[data-v-0e7c420d] img, .preview-content[data-v-0e7c420d] svg { width: 40px; height: 40px; object-fit: contain; }
.placeholder-icon[data-v-0e7c420d] { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text-placeholder); font-size: 0.7rem; }
.placeholder-icon .iconify[data-v-0e7c420d] { font-size: 1.2rem; }
.hover-overlay[data-v-0e7c420d] { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.2s; }
.achievement-icon-preview-box:hover .hover-overlay[data-v-0e7c420d] { opacity: 1; }
.icon-code-input-hint[data-v-0e7c420d] { width: 100%; }
.hint-input[data-v-0e7c420d] { width: 100%; font-size: 0.75rem !important; color: var(--text-secondary) !important; padding: 4px 8px !important; height: 28px !important; background: transparent !important; border: 1px dashed var(--border-input) !important; }
.hint-input[data-v-0e7c420d]:focus { border-style: solid !important; border-color: var(--color-primary) !important; }
.color-control-row[data-v-0e7c420d] { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.color-control-group[data-v-0e7c420d] { flex: 1 1 0%; min-width: 220px; }
.color-control-group[data-v-0e7c420d] { display: flex; flex-direction: column; }
.color-control-group label[data-v-0e7c420d] { margin-bottom: 6px; }
.color-control-group .input-group[data-v-0e7c420d] { display: flex; gap: 0px; align-items: stretch; }
.color-control-group .input-group[data-v-0e7c420d] > * { border: 1px solid var(--border-input); height: 38px; }
.color-control-group .btn-small[data-v-0e7c420d] { width: 38px; flex-shrink: 0; padding: 0px !important; }
.todo-editor[data-v-03dd31b4] { display: flex; flex-direction: column; }
.inspector-sub-content[data-v-03dd31b4] { padding: 15px; }
.todo-items-editor[data-v-03dd31b4] { display: flex; flex-direction: column; }
.todo-text-input[data-v-03dd31b4]:focus { outline: none; }
.separator[data-v-03dd31b4] { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.color-control-row[data-v-03dd31b4] { display: flex; gap: 10px; }
.color-control-group[data-v-03dd31b4] { flex: 1 1 0%; display: flex; flex-direction: column; gap: 5px; }
.color-control-group label[data-v-03dd31b4] { font-size: 0.85rem; color: var(--text-secondary); }
.calendar-editor[data-v-2e6ca266] { display: flex; flex-direction: column; }
.selected-sub-tabs[data-v-2e6ca266] { display: flex; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.selected-sub-tab-btn[data-v-2e6ca266] { flex: 1 1 0%; padding: 10px; background: transparent; border: none; font-size: 0.85rem; opacity: 0.6; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.selected-sub-tab-btn.active[data-v-2e6ca266] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.cal-month-grid-editor[data-v-2e6ca266] { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 10px; }
.cal-edit-cell[data-v-2e6ca266] { aspect-ratio: 1 / 1; border: 1px solid var(--border-input); border-radius: 4px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 0.8rem; background: var(--bg-input); position: relative; transition: 0.2s; }
.cal-edit-cell[data-v-2e6ca266]:hover { border-color: var(--color-primary); }
.cal-edit-cell.active[data-v-2e6ca266] { background: var(--bg-image-upload-hover); color: var(--color-primary); border-color: currentcolor; font-weight: 700; }
.cal-edit-cell.selected[data-v-2e6ca266] { box-shadow: 0 0 0 3px var(--color-primary); transform: scale(1.1); z-index: 10; border-color: var(--color-primary) !important; }
.note-dot[data-v-2e6ca266] { position: absolute; bottom: 2px; right: 2px; width: 4px; height: 4px; background: rgb(255, 77, 79); border-radius: 50%; }
.cal-grid-hint[data-v-2e6ca266] { margin-top: 6px; text-align: center; font-size: 0.72rem; opacity: 0.5; }
.cal-edit-day-name[data-v-2e6ca266] { font-size: 0.7rem; font-weight: 700; opacity: 0.4; text-align: center; padding: 4px 0px; }
.cal-edit-cell.empty[data-v-2e6ca266] { border: none; background: transparent; pointer-events: none; }
.cal-day-detail-panel[data-v-2e6ca266] { margin-top: 15px; padding: 12px; background: var(--bg-input); border-radius: 8px; 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); }
.cal-day-detail-header[data-v-2e6ca266] { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 0.9rem; }
.cal-note-textarea[data-v-2e6ca266] { width: 100%; padding: 8px; border: 1px solid var(--border-input); border-radius: 6px; background: var(--bg-secondary); color: var(--text-primary); font-size: 0.85rem; resize: vertical; min-height: 40px; font-family: inherit; }
.week-editor-row[data-v-2e6ca266] { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.week-label[data-v-2e6ca266] { width: 40px; font-weight: 700; font-size: 0.85rem; color: var(--text-secondary); }
.week-input[data-v-2e6ca266] { flex: 1 1 0%; padding: 6px 10px !important; font-size: 0.9rem !important; }
.separator[data-v-2e6ca266] { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.ranking-editor[data-v-fc10e525] { display: flex; flex-direction: column; }
.selected-sub-tabs[data-v-fc10e525] { display: flex; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.selected-sub-tab-btn[data-v-fc10e525] { flex: 1 1 0%; padding: 10px; background: transparent; border: none; font-size: 0.85rem; opacity: 0.6; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.selected-sub-tab-btn.active[data-v-fc10e525] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.rank-editor-row[data-v-fc10e525] { display: flex; align-items: flex-start; gap: 10px; padding: 10px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 8px; position: relative; }
.drag-handle[data-v-fc10e525] { cursor: grab; color: var(--text-placeholder); padding: 5px 0px; }
.rank-item-main[data-v-fc10e525] { flex: 1 1 0%; display: flex; gap: 12px; min-width: 0px; }
.rank-thumb-container[data-v-fc10e525] { width: 50px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.rank-thumb[data-v-fc10e525] { width: 50px; height: 50px; border: 2px dashed var(--border-input); border-radius: 4px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; background: var(--bg-secondary); }
.rank-thumb img[data-v-fc10e525] { width: 100%; height: 100%; object-fit: cover; }
.thumb-actions[data-v-fc10e525] { display: flex; gap: 2px; }
.thumb-actions .btn-xs[data-v-fc10e525] { flex: 1 1 0%; padding: 2px 0px; font-size: 0.65rem; }
.rank-inputs[data-v-fc10e525] { flex: 1 1 0%; display: flex; flex-direction: column; gap: 6px; min-width: 0px; }
.rank-inputs input[data-v-fc10e525] { width: 100%; padding: 4px 8px !important; font-size: 0.85rem !important; }
.name-input[data-v-fc10e525] { font-weight: 700; }
.score-input[data-v-fc10e525] { color: var(--color-primary); }
.desc-input[data-v-fc10e525] { opacity: 0.7; font-size: 0.8rem !important; }
.delete-btn[data-v-fc10e525] { background: transparent; border: none; cursor: pointer; padding: 4px; opacity: 0.4; }
.delete-btn[data-v-fc10e525]:hover { opacity: 1; color: rgb(255, 77, 79); }
.add-item-btn[data-v-fc10e525] { margin-top: 5px; }
.separator[data-v-fc10e525] { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.btn-block[data-v-fc10e525] { width: 100%; }
.checklist-editor[data-v-e86e391b] { display: flex; flex-direction: column; }
.inspector-sub-content[data-v-e86e391b] { padding: 15px; }
.checklist-items-list[data-v-e86e391b] { display: flex; flex-direction: column; }
.checklist-text-input[data-v-e86e391b]:focus { outline: none; }
.separator[data-v-e86e391b] { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.color-control-row[data-v-e86e391b] { display: flex; gap: 10px; }
.color-control-group[data-v-e86e391b] { flex: 1 1 0%; display: flex; flex-direction: column; gap: 5px; }
.checklist-col-value[data-v-e86e391b], .chk-radius-value[data-v-e86e391b] { font-weight: 700; color: var(--color-primary); margin-left: 4px; }
.stepper-group[data-v-e86e391b] { display: flex; gap: 4px; align-items: center; }
.btn-stepper[data-v-e86e391b] { width: 32px; height: 32px; padding: 0px; display: flex; align-items: center; justify-content: center; }
.relationship-editor[data-v-37918987] { display: flex; flex-direction: column; }
.selected-sub-tabs[data-v-37918987] { display: flex; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.selected-sub-tab-btn[data-v-37918987] { flex: 1 1 0%; padding: 10px; background: transparent; border: none; font-size: 0.85rem; opacity: 0.6; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.selected-sub-tab-btn.active[data-v-37918987] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.color-preview-btn[data-v-37918987] { width: 32px; height: 32px; border-radius: 4px; border: 1px solid var(--border-color); cursor: pointer; flex-shrink: 0; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset; }
.legend[data-v-37918987] { font-size: 0.9rem; font-weight: 700; margin-bottom: 10px; display: block; }
.separator[data-v-37918987] { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.marquee-editor[data-v-2be87d77] { display: flex; flex-direction: column; }
.selected-sub-tabs[data-v-2be87d77] { display: flex; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.selected-sub-tab-btn[data-v-2be87d77] { flex: 1 1 0%; padding: 10px; background: transparent; border: none; font-size: 0.85rem; opacity: 0.6; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.selected-sub-tab-btn.active[data-v-2be87d77] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
textarea[data-v-2be87d77] { width: 100%; padding: 8px; font-size: 0.9rem; resize: vertical; }
select[data-v-2be87d77] { width: 100%; padding: 6px; }
.separator[data-v-2be87d77] { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.timer-editor[data-v-a2d8f495] { display: flex; flex-direction: column; }
.selected-sub-tabs[data-v-a2d8f495] { display: flex; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.selected-sub-tab-btn[data-v-a2d8f495] { flex: 1 1 0%; padding: 10px; background: transparent; border: none; font-size: 0.85rem; opacity: 0.6; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.selected-sub-tab-btn.active[data-v-a2d8f495] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.highlight-box[data-v-a2d8f495] { background: var(--bg-input); padding: 12px; border-radius: 8px; border: 1px solid var(--color-primary); }
.accent-label[data-v-a2d8f495] { color: var(--color-primary); font-weight: 700; display: block; margin-bottom: 10px; }
.datetime-input[data-v-a2d8f495] { width: 100%; padding: 8px; font-family: monospace; }
.separator[data-v-a2d8f495], .separator[data-v-826786e3] { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.timeline-editor[data-v-99f9fdae] { display: flex; flex-direction: column; }
.selected-sub-tabs[data-v-99f9fdae] { display: flex; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.selected-sub-tab-btn[data-v-99f9fdae] { flex: 1 1 0%; padding: 10px; background: transparent; border: none; font-size: 0.85rem; opacity: 0.6; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.selected-sub-tab-btn.active[data-v-99f9fdae] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.timeline-editor-row[data-v-99f9fdae] { display: flex; align-items: flex-start; gap: 10px; padding: 10px; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 8px; }
.drag-handle[data-v-99f9fdae] { cursor: grab; color: var(--text-placeholder); padding: 5px 0px; }
.timeline-item-main[data-v-99f9fdae] { flex: 1 1 0%; display: flex; flex-direction: column; gap: 8px; min-width: 0px; }
.row-top[data-v-99f9fdae] { display: flex; gap: 8px; align-items: center; }
.time-input[data-v-99f9fdae] { flex: 1 1 0%; font-weight: 700; }
textarea[data-v-99f9fdae] { width: 100%; padding: 6px 8px; font-size: 0.85rem; resize: vertical; }
.delete-btn[data-v-99f9fdae] { background: transparent; border: none; cursor: pointer; padding: 4px; opacity: 0.4; }
.delete-btn[data-v-99f9fdae]:hover { opacity: 1; color: rgb(255, 77, 79); }
.add-item-btn[data-v-99f9fdae] { margin-top: 5px; }
.separator[data-v-99f9fdae] { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.btn-block[data-v-99f9fdae] { width: 100%; }
.grid-editor[data-v-a3560ab7] { display: flex; flex-direction: column; }
.selected-sub-tabs[data-v-a3560ab7] { display: flex; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.selected-sub-tab-btn[data-v-a3560ab7] { flex: 1 1 0%; padding: 10px; background: transparent; border: none; font-size: 0.85rem; opacity: 0.6; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.selected-sub-tab-btn.active[data-v-a3560ab7] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.grid-items-list[data-v-a3560ab7] { display: flex; flex-direction: column; gap: 10px; }
.grid-editor-row[data-v-a3560ab7] { display: flex; gap: 10px; align-items: flex-start; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 10px; padding: 10px; }
.grid-item-main[data-v-a3560ab7] { flex: 1 1 0%; display: flex; flex-direction: column; gap: 10px; }
.grid-item-image-row[data-v-a3560ab7] { display: flex; gap: 10px; }
.grid-thumb[data-v-a3560ab7] { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; background: rgba(0, 0, 0, 0.05); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.grid-thumb img[data-v-a3560ab7] { width: 100%; height: 100%; object-fit: cover; }
.grid-thumb-actions[data-v-a3560ab7] { flex: 1 1 0%; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.grid-item-text-row[data-v-a3560ab7] { display: flex; flex-direction: column; gap: 8px; }
.drag-handle[data-v-a3560ab7] { cursor: grab; opacity: 0.6; padding-top: 4px; }
.delete-btn[data-v-a3560ab7] { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid var(--border-color); background: transparent; cursor: pointer; opacity: 0.7; }
.delete-btn[data-v-a3560ab7]:hover { opacity: 1; }
.separator[data-v-a3560ab7] { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; }
.unified-editor-item[data-v-883e745b] { display: flex; align-items: center; background: var(--bg-input); border: 1px solid var(--border-color); border-radius: 6px; margin-bottom: 5px; }
.unified-drag-handle[data-v-883e745b] { cursor: default; color: rgb(136, 136, 136); background: rgba(0, 0, 0, 0.03); align-self: stretch; display: flex; align-items: center; }
.delete-btn[data-v-883e745b] { background: transparent; border-top: none; border-right: none; border-bottom: none; border-image: initial; border-left: 1px solid var(--border-color); cursor: pointer; color: rgb(136, 136, 136); padding: 0px 8px; align-self: stretch; }
.delete-btn[data-v-883e745b]:hover { color: rgb(255, 77, 79); }
.rpg-editor[data-v-883e745b] { display: flex; flex-direction: column; color: var(--text-main); }
.rpg-editor input[type="text"][data-v-883e745b] { color: var(--text-main); }
.selected-sub-tabs[data-v-883e745b] { display: flex; margin-bottom: 15px; border-bottom: 1px solid var(--border-color); }
.selected-sub-tab-btn[data-v-883e745b] { flex: 1 1 0%; padding: 10px; background: transparent; border: none; font-size: 0.85rem; opacity: 0.6; display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.selected-sub-tab-btn.active[data-v-883e745b] { opacity: 1; border-bottom: 2px solid var(--color-primary); color: var(--color-primary); }
.stats-label[data-v-883e745b] { font-size: 0.85rem; font-weight: 700; display: block; margin-bottom: 10px; color: var(--text-secondary); }
.stat-item[data-v-883e745b] { margin-bottom: 8px; }
.unified-drag-handle[data-v-883e745b] { width: 28px; display: flex; justify-content: center; align-items: center; font-size: 0.75rem; font-weight: 700; }
.unified-content[data-v-883e745b] { flex: 1 1 0%; display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; }
.stat-header[data-v-883e745b] { display: flex; justify-content: space-between; align-items: center; }
.stat-name-input[data-v-883e745b] { border: none; background: transparent; font-weight: 700; font-size: 0.85rem; width: 100px; padding: 0px; color: var(--text-main); }
.rpg-val-display[data-v-883e745b] { font-size: 0.85rem; font-family: monospace; color: var(--color-primary); font-weight: 700; }
.compare-val[data-v-883e745b] { color: var(--text-secondary); font-size: 0.75rem; margin-left: 4px; font-weight: 400; }
.dual-range-container[data-v-883e745b] { display: flex; flex-direction: column; gap: 2px; }
.stat-range[data-v-883e745b] { width: 100%; height: 6px; margin: 4px 0px; }
.compare-range[data-v-883e745b] { opacity: 0.5; accent-color: var(--text-secondary); }
.checkbox-group[data-v-883e745b] { display: flex; align-items: center; gap: 5px; color: var(--text-secondary); user-select: none; }
.flex-between[data-v-883e745b] { display: flex; justify-content: space-between; align-items: center; }
.options-row[data-v-883e745b] { display: flex; gap: 15px; margin-top: -5px; padding: 0px 4px; }
.separator[data-v-883e745b] { border-right: none; border-bottom: none; border-left: none; border-image: initial; border-top: 1px solid var(--border-color); margin: 15px 0px; opacity: 0.5; }
.premium-modal[data-v-01fdd0a4] { width: 90%; max-width: 800px; max-height: 90vh; background: var(--bg-card); border-radius: 12px; box-shadow: rgba(0, 0, 0, 0.5) 0px 10px 40px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-color); animation: 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running modalScaleIn-01fdd0a4; }
@keyframes modalScaleIn-01fdd0a4 { 
  0% { transform: scale(0.96) translateY(20px); opacity: 0; }
  100% { transform: scale(1) translateY(0px); opacity: 1; }
}
.modal-header[data-v-01fdd0a4] { padding: 12px 32px; display: flex; align-items: center; justify-content: flex-start; color: var(--text-primary); }
.modal-header h3[data-v-01fdd0a4] { margin: 0px; font-size: 1.4rem; font-weight: 700; text-align: left; }
.modal-editor-body[data-v-01fdd0a4] { padding: 0px 32px 10px; display: flex; flex-direction: column; flex: 1 1 0%; min-height: 0px; }
.modal-toolbar-wrapper[data-v-01fdd0a4] { padding: 12px 0px 20px; }
.modal-toolbar[data-v-01fdd0a4] { padding: 6px 14px; background: transparent; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--text-secondary); border: 1px solid var(--border-color); border-radius: 4px; }
.toolbar-group[data-v-01fdd0a4] { display: flex; gap: 6px; }
.modal-toolbar button[data-v-01fdd0a4] { background: transparent; border: none; width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; transition: 0.2s; }
.modal-toolbar button[data-v-01fdd0a4]:hover { background: var(--rt-toolbar-btn-hover, rgba(255,255,255,.1)); color: var(--text-primary); }
.modal-toolbar button.is-active[data-v-01fdd0a4] { background: var(--rt-toolbar-btn-active, var(--color-primary-bg)); color: var(--color-primary); }
.divider[data-v-01fdd0a4] { width: 1px; height: 20px; background: var(--border-color); margin: 0px 4px; }
.font-size-container[data-v-01fdd0a4] { display: flex; align-items: center; }
.font-size-input[data-v-01fdd0a4] { background: transparent; border: none; color: var(--text-secondary); font-size: 0.8rem; padding: 2px 4px; width: 65px; cursor: text; outline: none; transition: 0.2s; }
.font-size-input[data-v-01fdd0a4]:hover, .font-size-input[data-v-01fdd0a4]:focus { background: var(--bg-input); color: var(--text-primary); }
.font-size-input[data-v-01fdd0a4]::placeholder { color: rgb(102, 102, 102); opacity: 0.8; }
.tiptap-modal-content[data-v-01fdd0a4] { flex: 1 1 0%; padding: 16px; overflow-y: auto; background: var(--bg-input); color: var(--text-primary); border-radius: 4px; border: 1px solid var(--border-color); transition: 0.2s; }
.tiptap-modal-content[data-v-01fdd0a4]:focus-within { border-color: rgb(59, 130, 246); box-shadow: rgb(59, 130, 246) 0px 0px 0px 1px; }
[data-v-01fdd0a4] .tiptap { outline: none; min-height: 100px; }
[data-v-01fdd0a4] .tiptap p { margin: 0px; }
[data-v-01fdd0a4] .tiptap ul, [data-v-01fdd0a4] .tiptap ol { padding-left: 2em; margin: 1em 0px; }
[data-v-01fdd0a4] .tiptap ol { list-style-type: decimal; }
[data-v-01fdd0a4] .tiptap ul { list-style-type: disc; }
.modal-footer[data-v-01fdd0a4] { padding: 12px 32px 24px; display: flex; justify-content: flex-end; gap: 12px; background: transparent; }
.btn[data-v-01fdd0a4] { padding: 6px 20px; border-radius: 6px; cursor: pointer; font-weight: 500; transition: 0.2s; font-size: 0.9rem; border: none; min-width: 80px; }
.btn[data-v-01fdd0a4]:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn[data-v-01fdd0a4]:active { transform: scale(0.96); }
.btn-default[data-v-01fdd0a4] { background: var(--bg-input); border: 1px solid var(--border-color); color: var(--text-secondary); }
.btn-default[data-v-01fdd0a4]:hover { background: var(--bg-editor); color: var(--text-primary); }
.btn-primary[data-v-01fdd0a4] { background: var(--color-primary); color: rgb(255, 255, 255); }
.btn-primary[data-v-01fdd0a4]:hover { background: rgb(0, 106, 230); }
.export-hero-card[data-v-7a681f78] { 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: 0.2s; margin-bottom: 20px; position: relative; overflow: hidden; }
.export-hero-card[data-v-7a681f78]: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[data-v-7a681f78] { font-size: 2.2rem; color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
.export-hero-card h4[data-v-7a681f78] { margin: 0px 0px 4px; color: var(--color-primary); font-size: 1.05rem; }
.export-hero-card p[data-v-7a681f78] { margin: 0px; font-size: 0.8rem; color: var(--text-secondary); opacity: 0.9; }
.export-hero-card .badge[data-v-7a681f78] { position: absolute; top: 0px; right: 0px; background: var(--color-primary); color: rgb(255, 255, 255); font-size: 0.65rem; padding: 2px 8px; border-radius: 0px 0px 0px 8px; font-weight: 700; }
.export-menu-list[data-v-7a681f78] { background: var(--bg-input); border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden; }
.export-menu-item[data-v-7a681f78] { padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; border-bottom: 1px solid var(--border-color); transition: background 0.2s; }
.export-menu-item[data-v-7a681f78]:last-child { border-bottom: none; }
.export-menu-item[data-v-7a681f78]:hover { background: var(--bg-editor); }
.export-menu-item .menu-icon[data-v-7a681f78] { font-size: 1.4rem; color: var(--text-secondary); flex-shrink: 0; display: flex; align-items: center; }
.export-menu-item .text-col[data-v-7a681f78] { flex: 1 1 0%; display: flex; flex-direction: column; gap: 2px; min-width: 0px; }
.export-menu-item h5[data-v-7a681f78] { margin: 0px; font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.export-menu-item p[data-v-7a681f78] { margin: 0px; font-size: 0.75rem; color: var(--text-secondary); opacity: 0.8; line-height: 1.3; }
.export-menu-item .arrow[data-v-7a681f78] { color: var(--text-placeholder); font-size: 1.2rem; opacity: 0.5; }
.desktop-side-by-side[data-v-c7b565bc] { flex-direction: row !important; align-items: flex-start; }
@media (max-width: 768px) {
  .desktop-side-by-side[data-v-c7b565bc] { flex-direction: column !important; }
}
.modal-overlay[data-v-625fd33b] { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: var(--bg-modal-overlay, rgba(0, 0, 0, .5)); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; opacity: 1; visibility: visible; transition: 0.3s; z-index: 1000 !important; }
#qa-guide-banner[data-v-625fd33b] { position: absolute; top: 0px; left: 0px; width: 100%; background: var(--color-primary); color: rgb(255, 255, 255); z-index: 100; padding: 12px 40px 12px 20px; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 10px; border-radius: 12px 12px 0px 0px; animation: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) 0s 1 normal none running slideDown-625fd33b; box-sizing: border-box; }
.qa-banner-inner[data-v-625fd33b] { max-width: 1200px; margin: 0px auto; display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem; line-height: 1.4; }
.qa-banner-text[data-v-625fd33b] { display: flex; align-items: center; gap: 10px; text-align: left; }
.qa-emoji[data-v-625fd33b] { font-size: 1.2rem; }
.qa-banner-btn[data-v-625fd33b] { background: rgb(255, 255, 255); color: var(--color-primary); padding: 5px 12px; text-decoration: none; border-radius: 6px; font-weight: 700; font-size: 0.75rem; white-space: nowrap; margin-left: 10px; flex-shrink: 0; }
.qa-banner-close[data-v-625fd33b] { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: rgba(255, 255, 255, 0.8); font-size: 1.4rem; cursor: pointer; padding: 5px; line-height: 1; }
@keyframes slideDown-625fd33b { 
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}
@keyframes slideUp-625fd33b { 
  0% { transform: translateY(20px); opacity: 0; }
  100% { transform: translateY(0px); opacity: 1; }
}
@media (max-width: 600px) {
  .qa-banner-inner[data-v-625fd33b] { flex-direction: column; align-items: flex-start; gap: 8px; }
  .qa-banner-btn[data-v-625fd33b] { margin-left: 0px; align-self: flex-end; }
}
.premium-modal[data-v-1c4c02ed] { max-width: 700px; width: 90%; height: 85vh; display: flex; flex-direction: column; background: var(--bg-editor, #ffffff); border-radius: 16px; box-shadow: 0 10px 40px var(--shadow-medium, rgba(0,0,0,.1)); border: 1px solid var(--border-color, #e0e0e0); overflow: hidden; animation: 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running modalScaleIn-1c4c02ed; }
@keyframes modalScaleIn-1c4c02ed { 
  0% { transform: scale(0.96) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0px); opacity: 1; }
}
.modal-header[data-v-1c4c02ed] { padding: 16px 20px; border-bottom: 1px solid var(--border-color, #e0e0e0); display: flex; justify-content: space-between; align-items: center; flex-shrink: 0; background: var(--bg-editor); }
.modal-header h3[data-v-1c4c02ed] { margin: 0px; font-size: 1.15rem; font-weight: 700; color: var(--text-primary); }
.back-btn[data-v-1c4c02ed] { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-input); color: var(--text-primary); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.back-btn[data-v-1c4c02ed]:hover { background: var(--bg-image-upload-hover); transform: translate(-2px); }
.modal-actions[data-v-1c4c02ed] { display: flex; padding: 16px 20px; border-top: 1px solid var(--border-color); background: var(--bg-editor); }
.btn-primary[data-v-1c4c02ed] { 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-1c4c02ed] { padding: 8px 16px; border-radius: 8px; font-size: 0.9rem; font-weight: 600; border-top: none; border-right: none; border-left: none; border-image: initial; background: transparent; color: var(--text-secondary); border-bottom: 3px solid transparent; transition: 0.2s; cursor: pointer; }
.tab-btn[data-v-1c4c02ed]:hover { background: var(--bg-image-upload-hover); color: var(--text-primary); }
.tab-btn.active[data-v-1c4c02ed] { background: var(--bg-image-upload-hover); color: var(--color-primary); border-bottom-color: var(--color-primary); }
.steam-list-item[data-v-1c4c02ed] { display: flex; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid transparent; }
.steam-list-item[data-v-1c4c02ed]:hover { background: var(--bg-image-upload-hover); border-radius: 8px; transform: translate(4px); border-color: color-mix(in srgb,var(--color-primary),transparent 90%); }
@keyframes fadeIn-1c4c02ed { 
  0% { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0px); }
}
.masonry-container[data-v-1c4c02ed] { column-count: 3; column-gap: 12px; width: 100%; }
.masonry-item[data-v-1c4c02ed] { break-inside: avoid; margin-bottom: 12px; cursor: pointer; position: relative; overflow: hidden; border-radius: 10px; border: 1px solid var(--border-color); background: var(--bg-editor); transition: 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); }
.masonry-item[data-v-1c4c02ed]:hover { transform: translateY(-2px); box-shadow: 0 4px 12px var(--shadow-medium); border-color: var(--color-primary); }
.masonry-image[data-v-1c4c02ed] { width: 100%; display: block; object-fit: cover; background: var(--bg-input); }
.masonry-info[data-v-1c4c02ed] { padding: 6px 10px; font-size: 0.7rem; color: var(--text-secondary); background: var(--bg-section); border-top: 1px solid var(--border-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0.8; }
@media (max-width: 600px) {
  .masonry-container[data-v-1c4c02ed] { column-count: 2; column-gap: 8px; }
}
@keyframes marquee-185b9daa { 
  0% { transform: translate(100%); }
  100% { transform: translate(-100%); }
}
.spinning[data-v-185b9daa] { animation: 1s linear 0s infinite normal none running spin-185b9daa; }
@keyframes spin-185b9daa { 
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.modal-sidebar[data-v-185b9daa] { scroll-behavior: auto !important; mask-image: none !important; }
.flower-particle { position: fixed; top: -50px; z-index: 9999; pointer-events: none; animation: 3s linear 0s 1 normal forwards running fall; }
@keyframes fall { 
  100% { transform: translateY(100vh) translate(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; overflow: hidden; transition: 0.3s; }
.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 { padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; }
.announcement-header:hover { background: rgba(0, 122, 255, 0.02); }
.announcement-title-row { display: flex; align-items: center; gap: 10px; flex: 1 1 0%; }
.ann-badge { font-size: 0.7rem; padding: 2px 8px; border-radius: 4px; font-weight: 700; text-transform: uppercase; }
.ann-badge.info { background: rgba(0, 122, 255, 0.1); color: var(--color-primary); }
.ann-badge.success, .ann-badge.update { background: rgba(16, 185, 129, 0.1); color: rgb(16, 185, 129); }
.ann-badge.warning { background: rgba(245, 158, 11, 0.1); color: rgb(245, 158, 11); }
.ann-badge.important { background: rgba(239, 68, 68, 0.1); color: rgb(239, 68, 68); }
.ann-badge.new_feature { background: rgba(139, 92, 246, 0.1); color: rgb(139, 92, 246); }
.announcement-card.is-pinned { border-color: rgba(245, 158, 11, 0.3); background: linear-gradient(to right,rgba(245,158,11,.03),var(--bg-input)); }
.ann-pin-icon { color: rgb(245, 158, 11); display: flex; align-items: center; font-size: 1rem; }
.ann-badge.warning { background: rgba(255, 159, 67, 0.1); color: rgb(255, 159, 67); }
.ann-badge.important { background: rgba(255, 71, 87, 0.1); color: var(--color-danger); }
.ann-badge.new_feature { background: rgba(46, 213, 115, 0.1); color: rgb(46, 213, 115); }
.ann-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); }
.ann-new-tag { background: var(--color-danger); color: rgb(255, 255, 255); font-size: 0.65rem; padding: 1px 5px; border-radius: 3px; font-weight: 900; animation: 2s ease 0s infinite normal none running pulse; }
.announcement-meta { display: flex; align-items: center; gap: 12px; }
.ann-date { font-size: 0.8rem; color: var(--text-secondary); font-family: monospace; opacity: 0.7; }
@media (max-width: 600px) {
  .announcement-header { flex-direction: column; gap: 10px; align-items: flex-start !important; }
  .announcement-title-row { width: 100%; flex-wrap: wrap; }
  .announcement-meta { width: 100%; justify-content: space-between; padding-top: 8px; border-top: 1px dashed rgba(255, 255, 255, 0.05); }
}
.expand-icon { font-size: 1.2rem; color: var(--text-secondary); transition: transform 0.3s; }
.announcement-content { padding: 18px; font-size: 0.9rem; line-height: 1.6; color: var(--text-primary); border-top: 1px dashed var(--border-color); margin-top: 0px; }
.announcement-content img { max-width: 100%; display: block; margin: 12px auto; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; height: auto !important; }
.side-new-dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; background: var(--color-danger); border-radius: 50%; }
@keyframes pulse { 
  0% { opacity: 1; }
  50% { opacity: 0.6; }
  100% { opacity: 1; }
}
.expand-enter-active, .expand-leave-active { transition: 0.3s; max-height: 500px; opacity: 1; }
.expand-enter-from, .expand-leave-to { max-height: 0px; opacity: 0; padding-top: 0px; padding-bottom: 0px; overflow: hidden; }
.tab-content a:not(.btn), .announcement-content a:not(.btn) { color: var(--color-primary); text-decoration: none; font-weight: 500; transition: 0.2s; border-bottom: 1px dashed rgba(0, 122, 255, 0.2); padding: 0px 2px; }
.tab-content a:not(.btn):hover, .announcement-content a:not(.btn):hover { color: var(--color-primary-hover, #006ae6); background: rgba(0, 122, 255, 0.08); border-bottom-color: var(--color-primary-hover, #006ae6); border-radius: 4px; }
.tab-content a:not(.btn):active, .announcement-content a:not(.btn):active { opacity: 0.7; }
.avatar-glow-container { padding: 4px; border-radius: 50%; background: var(--bg-editor); border: 3px solid var(--color-primary); box-shadow: 0 0 15px var(--color-primary-40, rgba(0, 122, 255, .3)); transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; width: 86px; height: 86px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; margin: 0px auto; }
.avatar-glow-container:hover { transform: scale(1.08) rotate(3deg); box-shadow: 0 0 25px var(--color-primary-40, rgba(0, 122, 255, .5)); }
.about-author-avatar { width: 72px; height: 72px; flex-shrink: 0; border-radius: 50%; object-fit: cover; 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 { margin-top: 30px; padding-top: 20px; border-top: 1px dashed var(--border-color); }
.donation-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 15px; margin-top: 20px; }
.donation-card { background: var(--bg-card, rgba(255, 255, 255, .05)); backdrop-filter: blur(10px); border: 1px solid var(--border-color); border-radius: 12px; padding: 15px; display: flex; flex-direction: column; gap: 8px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); animation: 0.5s ease 0s 1 normal backwards running cardFadeIn; }
.donation-card:hover { transform: translateY(-4px); box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 20px; }
.donation-card.has-border { border-width: 2px; }
@property --border-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.donation-card.has-gradient-border { background-clip: padding-box, border-box; background-origin: padding-box, border-box; background-image: var(--custom-gradient); animation: 0.5s ease 0s 1 normal backwards running cardFadeIn, 4s linear 0s infinite normal none running spinConic; box-shadow: rgba(255, 154, 158, 0.2) 0px 4px 15px; border: 2px solid transparent !important; }
html[data-theme="dark"] .donation-card.has-gradient-border { background-image: var(--custom-gradient); box-shadow: rgba(161, 140, 209, 0.2) 0px 4px 15px; }
@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 { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.donor-nickname { font-weight: 700; font-size: 0.95rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.donor-amount { font-family: monospace; font-weight: 900; color: var(--color-primary); font-size: 0.9rem; flex-shrink: 0; }
.donor-remark { font-size: 0.8rem; color: var(--text-secondary); line-height: 1.4; word-break: break-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 2.8em; }
.donor-date { font-size: 0.7rem; color: var(--text-placeholder); font-family: monospace; margin-top: auto; text-align: right; opacity: 0.8; }
.donation-empty { text-align: center; padding: 40px; background: var(--bg-input); border-radius: 12px; color: var(--text-secondary); grid-column: 1 / -1; }
.modal-overlay[data-v-2beb523a] { position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; background: var(--bg-modal-overlay, rgba(0, 0, 0, .6)); align-items: center; justify-content: center; z-index: 10000; backdrop-filter: blur(5px); display: flex !important; }
.modal-container[data-v-2beb523a] { background: var(--bg-editor, #ffffff); border-radius: 16px; box-shadow: 0 10px 40px var(--shadow-heavy, rgba(0, 0, 0, .15)); padding: 25px; width: 90%; max-width: 440px; border: 1px solid var(--border-color, #e8e8e8); animation: 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running modalScaleIn-2beb523a; }
@keyframes modalScaleIn-2beb523a { 
  0% { transform: scale(0.96) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0px); opacity: 1; }
}
.modal-container h3[data-v-2beb523a] { margin-top: 0px; margin-bottom: 12px; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.modal-actions[data-v-2beb523a] { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }
.modal-actions .btn[data-v-2beb523a] { width: auto; min-width: 90px; padding: 10px 20px; border-radius: 10px; font-weight: 600; transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; border: none; font-size: 0.95rem; }
.modal-actions .btn[data-v-2beb523a]:hover { transform: translateY(-1px); filter: brightness(1.05); }
.modal-actions .btn[data-v-2beb523a]:active { transform: scale(0.96); filter: brightness(0.95); }
.btn-default[data-v-2beb523a] { background: var(--bg-section, #f3f3f3); color: var(--text-primary, #333); border: 1px solid var(--border-color) !important; }
.btn-primary[data-v-2beb523a] { 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-2beb523a] { background: linear-gradient(135deg, rgb(255, 77, 79), rgb(217, 54, 62)); color: rgb(255, 255, 255); box-shadow: rgba(255, 77, 79, 0.2) 0px 4px 12px; }
.btn-success[data-v-2beb523a] { background: linear-gradient(135deg, rgb(82, 196, 26), rgb(56, 158, 13)); color: rgb(255, 255, 255); }
.res-manager-modal[data-v-c7424a1f] { max-width: 850px; width: 90%; height: 85vh; display: flex; flex-direction: column; padding: 0px; overflow: hidden; border-radius: 12px; }
.modal-header[data-v-c7424a1f] { padding: 16px 20px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--border-color); background: var(--bg-editor); }
.modal-header h3[data-v-c7424a1f] { margin: 0px; font-size: 1.2rem; font-weight: 600; }
.close-icon-btn[data-v-c7424a1f] { background: none; border: none; font-size: 1.5rem; color: var(--text-secondary); cursor: pointer; line-height: 1; }
.tabs-container[data-v-c7424a1f] { background: var(--bg-editor); padding: 0px 10px; border-bottom: 1px solid var(--border-color); }
.tabs[data-v-c7424a1f] { display: flex; gap: 4px; }
.tab-btn[data-v-c7424a1f] { padding: 12px 20px; border-top: none; border-right: none; border-left: none; border-image: initial; background: none; cursor: pointer; color: var(--text-secondary); font-weight: 500; border-bottom: 3px solid transparent; display: flex; align-items: center; gap: 8px; transition: 0.2s; font-size: 0.95rem; }
.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] { flex: 1 1 0%; overflow-y: auto; background: var(--bg-input); padding: 0px; }
.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] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px dashed var(--border-color); }
.count-badge[data-v-c7424a1f] { display: block; font-weight: 700; font-size: 1rem; color: var(--text-primary); margin-bottom: 4px; }
.sub-text[data-v-c7424a1f] { font-size: 0.8rem; color: var(--text-secondary); }
.centered-state[data-v-c7424a1f] { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 80px 20px; text-align: center; color: var(--text-secondary); }
.centered-state .big-icon[data-v-c7424a1f] { font-size: 4rem; margin-bottom: 15px; opacity: 0.3; }
.loading-spinner[data-v-c7424a1f] { width: 30px; height: 30px; 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%; animation: 0.8s linear 0s infinite normal none running spin-c7424a1f; margin-bottom: 15px; }
@keyframes spin-c7424a1f { 
  100% { transform: rotate(360deg); }
}
.resource-grid[data-v-c7424a1f] { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.resource-item[data-v-c7424a1f] { background: var(--bg-card); border: 2px solid var(--border-color); border-radius: 8px; overflow: hidden; transition: 0.2s; }
.resource-item[data-v-c7424a1f]:hover { transform: translateY(-2px); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; border-color: var(--color-primary); }
.resource-item.in-use[data-v-c7424a1f] { border-color: var(--color-primary); }
.img-preview[data-v-c7424a1f] { height: 120px; background-color: rgb(26, 26, 26); background-size: cover; background-position: center center; position: relative; }
.in-use-badge[data-v-c7424a1f] { position: absolute; top: 6px; left: 6px; background: var(--color-primary); color: rgb(255, 255, 255); font-size: 0.65rem; padding: 2px 6px; border-radius: 4px; font-weight: 700; box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 4px; }
.item-action-btn[data-v-c7424a1f] { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border-radius: 50%; border: none; background: rgba(0, 0, 0, 0.6); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; transition: opacity 0.2s; backdrop-filter: blur(2px); }
.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] { padding: 6px 10px; background: var(--bg-section); text-align: center; border-top: 1px solid var(--border-color); }
.size-text[data-v-c7424a1f] { font-size: 0.75rem; color: var(--text-secondary); }
.font-sections[data-v-c7424a1f] { display: flex; flex-direction: column; gap: 30px; }
.section-title[data-v-c7424a1f] { font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 12px; padding-left: 4px; letter-spacing: 1px; }
.font-list[data-v-c7424a1f] { display: flex; flex-direction: column; gap: 8px; }
.font-item[data-v-c7424a1f] { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; transition: border-color 0.2s; }
.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] { font-size: 1.2rem; margin-bottom: 4px; color: var(--text-primary); }
.font-meta[data-v-c7424a1f] { font-size: 0.75rem; color: var(--text-secondary); }
.recycle-list[data-v-c7424a1f] { display: flex; flex-direction: column; gap: 8px; }
.recycle-item[data-v-c7424a1f] { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 8px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; }
.item-name[data-v-c7424a1f] { font-weight: 600; margin-bottom: 4px; }
.item-date[data-v-c7424a1f] { font-size: 0.75rem; color: var(--text-secondary); }
.recycle-actions[data-v-c7424a1f] { display: flex; gap: 12px; }
.modal-footer[data-v-c7424a1f] { padding: 16px 20px; border-top: 1px solid var(--border-color); background: var(--bg-editor); display: flex; justify-content: center; }
.btn-small[data-v-c7424a1f] { padding: 6px 12px; font-size: 0.85rem; }
.icon-btn[data-v-c7424a1f] { background: none; border: none; padding: 8px; border-radius: 6px; cursor: pointer; color: var(--text-secondary); 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] { display: flex; align-items: center; gap: 12px; }
.btn-text[data-v-c7424a1f] { background: none; border: none; color: var(--color-primary); text-decoration: underline; cursor: pointer; padding: 4px 8px; font-size: 0.85rem; }
.btn-text[data-v-c7424a1f]:hover { opacity: 0.8; }
.storage-status-banner[data-v-c7424a1f] { background: var(--bg-editor); padding: 12px 20px; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; gap: 8px; }
.storage-info-row[data-v-c7424a1f] { display: flex; justify-content: space-between; align-items: center; }
.storage-label[data-v-c7424a1f] { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); display: flex; align-items: center; gap: 6px; }
.storage-usage-text[data-v-c7424a1f] { font-size: 0.85rem; font-family: monospace; }
.storage-usage-text .used[data-v-c7424a1f] { color: var(--color-primary); font-weight: 700; }
.storage-usage-text .sep[data-v-c7424a1f] { margin: 0px 4px; opacity: 0.5; }
.storage-usage-text .percent[data-v-c7424a1f] { margin-left: 6px; font-weight: 700; }
.storage-progress[data-v-c7424a1f] { height: 6px; background: rgba(0, 0, 0, 0.1); border-radius: 3px; overflow: hidden; }
.storage-progress-fill[data-v-c7424a1f] { height: 100%; background: var(--color-primary); border-radius: 3px; 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] { font-size: 0.75rem; color: rgb(239, 68, 68); display: flex; align-items: center; gap: 4px; font-weight: 500; animation: 2.5s ease 0s infinite normal none running storagePulse-c7424a1f; }
@keyframes storagePulse-c7424a1f { 
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}
.premium-modal[data-v-02e5f725] { max-width: 500px; width: 90%; background: var(--bg-editor, #ffffff); border-radius: 16px; box-shadow: 0 10px 40px var(--shadow-medium, rgba(0,0,0,.1)); border: 1px solid var(--border-color, #e0e0e0); padding: 24px; animation: 0.2s cubic-bezier(0.16, 1, 0.3, 1) 0s 1 normal forwards running modalScaleIn-02e5f725; }
@keyframes modalScaleIn-02e5f725 { 
  0% { transform: scale(0.96) translateY(10px); opacity: 0; }
  100% { transform: scale(1) translateY(0px); opacity: 1; }
}
.modal-header h3[data-v-02e5f725] { margin: 0px 0px 15px; font-size: 1.2rem; font-weight: 700; color: var(--text-primary); }
.font-instructions[data-v-02e5f725] { background: var(--bg-input, #f8f9fa); padding: 12px; border-radius: 10px; font-size: 0.85rem; margin-bottom: 20px; line-height: 1.6; border: 1px solid var(--border-color); }
.font-instructions ol[data-v-02e5f725] { margin-left: 20px; margin-top: 8px; }
.font-code-textarea[data-v-02e5f725] { font-family: "Courier New", Courier, monospace; font-size: 0.85rem; width: 100%; border-radius: 8px; resize: vertical; }
.font-import-preview[data-v-02e5f725] { margin-top: 15px; padding: 10px; border: 1px dashed var(--color-primary); background: var(--color-primary-bg); border-radius: 8px; display: flex; align-items: center; gap: 8px; }
.modal-actions[data-v-02e5f725] { display: flex; justify-content: flex-end; gap: 12px; margin-top: 24px; }
.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-75b2c05e]:hover { transform: translateY(-4px) !important; box-shadow: rgba(0, 0, 0, 0.3) 0px 12px 24px !important; border-color: var(--color-primary) !important; }
#template-list-container[data-v-75b2c05e] { columns: 3; column-gap: 15px; overflow-y: auto; padding: 5px; flex-grow: 1; }
@media (max-width: 900px) {
  #template-list-container[data-v-75b2c05e] { columns: 2; }
}
@media (max-width: 600px) {
  #template-list-container[data-v-75b2c05e] { columns: 1; }
}
.template-card[data-v-75b2c05e] { break-inside: avoid; flex-direction: column; background: var(--bg-card, #23272f); border: 1px solid var(--border-color, #2d313a); border-radius: 12px; overflow: hidden; margin-bottom: 15px; transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: 100%; display: flex !important; }
.template-card-img-wrapper[data-v-75b2c05e] { background: var(--bg-section, #1a1c22); position: relative; overflow: hidden; min-height: 100px; }
.template-card-img-wrapper img[data-v-75b2c05e] { width: 100%; height: auto; display: block; }
.btn-tab[data-v-75b2c05e] { background: transparent; border: none; padding: 8px 16px; font-size: 0.9rem; font-weight: 600; color: var(--text-secondary); cursor: pointer; transition: 0.2s; border-radius: 8px; }
.btn-tab.active[data-v-75b2c05e] { background: var(--bg-section); color: var(--color-primary); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 8px; }
.create-page-overlay[data-v-2e261fab] { position: fixed; inset: 0px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(14px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.create-page-container[data-v-2e261fab] { width: 100%; max-width: 480px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.5) 0px 30px 60px; overflow: hidden; animation: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0s 1 normal none running modal-pop-2e261fab; color: var(--text-primary); }
@keyframes modal-pop-2e261fab { 
  0% { opacity: 0; transform: scale(0.9) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.modal-header[data-v-2e261fab] { padding: 24px 24px 16px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.header-content h2[data-v-2e261fab] { margin: 0px; font-size: 1.25rem; font-weight: 700; color: var(--text-primary); }
.header-content p[data-v-2e261fab] { margin: 4px 0px 0px; font-size: 0.85rem; color: var(--text-secondary); }
.close-icon-btn[data-v-2e261fab] { background: rgba(0, 0, 0, 0.2); border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text-secondary); }
.composer-body[data-v-2e261fab] { padding: 24px; }
.config-section[data-v-2e261fab] { margin-bottom: 24px; }
.section-label[data-v-2e261fab] { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; font-weight: 600; margin-bottom: 12px; color: var(--text-primary); }
.segmented-control[data-v-2e261fab] { display: flex; background: var(--bg-input); padding: 4px; border-radius: 12px; gap: 2px; }
.segmented-control button[data-v-2e261fab] { flex: 1 1 0%; padding: 10px; border: none; background: transparent; color: var(--text-secondary); border-radius: 8px; cursor: pointer; font-size: 0.85rem; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 500; transition: 0.2s; }
.segmented-control button.active[data-v-2e261fab] { background: var(--bg-card); color: var(--color-primary); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px; }
.layout-toggle-group[data-v-2e261fab] { display: flex; border: 1px solid var(--border-color); border-radius: 14px; padding: 3px; background: rgba(0, 0, 0, 0.1); }
.layout-btn[data-v-2e261fab] { flex: 1 1 0%; padding: 14px; border: none; background: transparent; color: var(--text-secondary); border-radius: 11px; font-size: 0.95rem; font-weight: 600; cursor: pointer; position: relative; transition: 0.2s; }
.layout-btn.active[data-v-2e261fab] { 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-2e261fab] { color: rgb(255, 177, 59); }
.badge-new[data-v-2e261fab] { position: absolute; top: 50%; right: 12px; transform: translateY(-50%); background: rgb(255, 77, 79); color: rgb(255, 255, 255); font-size: 8px; padding: 1px 5px; border-radius: 8px; }
.checkbox-container[data-v-2e261fab] { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 0.9rem; color: rgb(255, 177, 59); font-weight: 700; }
.checkbox-container input[data-v-2e261fab] { display: none; }
.checkmark[data-v-2e261fab] { width: 18px; height: 18px; border: 2px solid rgb(255, 177, 59); border-radius: 4px; position: relative; }
.checkbox-container input:checked + .checkmark[data-v-2e261fab]::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border-style: solid; border-color: rgb(255, 177, 59); border-image: initial; border-width: 0px 2px 2px 0px; transform: rotate(45deg); }
.config-section-advanced[data-v-2e261fab] { margin-bottom: 20px; background: rgba(0, 0, 0, 0.15); padding: 16px; border-radius: 12px; border: 1px dashed var(--border-color); }
.slider-header[data-v-2e261fab] { display: flex; justify-content: space-between; margin-bottom: 12px; font-size: 0.85rem; }
.slider-header .val[data-v-2e261fab] { color: var(--color-primary); }
.preset-group[data-v-2e261fab] { display: flex; gap: 8px; }
.preset-chip[data-v-2e261fab] { flex: 1 1 0%; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); padding: 8px; border-radius: 8px; color: var(--text-secondary); font-size: 0.85rem; cursor: pointer; transition: 0.2s; }
.preset-chip[data-v-2e261fab]:hover { background: rgba(255, 255, 255, 0.1); }
.preset-chip.active[data-v-2e261fab] { background: var(--color-primary); color: rgb(255, 255, 255); border-color: var(--color-primary); }
.slider-control[data-v-2e261fab] { display: flex; align-items: center; gap: 12px; }
.slider-control input[type="range"][data-v-2e261fab] { flex: 1 1 0%; accent-color: var(--color-primary); cursor: pointer; }
.reset-btn[data-v-2e261fab] { background: transparent; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.2rem; padding: 0px; }
.modal-footer-advanced[data-v-2e261fab] { padding: 12px 24px 24px; display: flex; gap: 12px; }
.btn-cancel[data-v-2e261fab] { flex: 1 1 0%; padding: 14px; border-radius: 12px; border: 1px solid var(--border-color); background: transparent; color: var(--text-secondary); cursor: pointer; font-weight: 500; }
.btn-primary-create[data-v-2e261fab] { flex: 2 1 0%; padding: 14px; border-radius: 12px; border: none; background: var(--color-primary); color: rgb(255, 255, 255); font-weight: 700; cursor: pointer; transition: filter 0.2s; }
.btn-primary-create[data-v-2e261fab]:hover { filter: brightness(1.1); }
.april-fools-overlay[data-v-dc793107] { position: fixed; inset: 0px; z-index: 9999; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(14px); display: flex; align-items: center; justify-content: center; padding: 20px; }
.april-fools-container[data-v-dc793107] { width: 100%; max-width: 500px; background: var(--bg-card, #ffffff); border-radius: 28px; position: relative; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.5) 0px 30px 60px -12px; display: flex; flex-direction: column; border: 1px solid var(--border-color, rgba(255,255,255,.1)); animation: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s 1 normal none running modal-pop-dc793107; }
@keyframes modal-pop-dc793107 { 
  0% { opacity: 0; transform: scale(0.9) translateY(20px); }
  100% { opacity: 1; transform: scale(1) translateY(0px); }
}
.paw-bouncer[data-v-dc793107] { position: absolute; width: 48px; height: 48px; background: rgba(255, 255, 255, 0.2); border: 2px solid rgba(255, 255, 255, 0.3); border-radius: 51%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 1000; transition: color 0.2s, box-shadow 0.2s; backdrop-filter: blur(6px); padding: 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 4px 15px; }
.paw-bouncer[data-v-dc793107]:active { transform: scale(0.9) !important; }
.dark-mode { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.2); box-shadow: currentcolor 0px 0px 15px; }
.modal-header[data-v-dc793107] { padding: 36px 32px 20px; text-align: center; }
.badge[data-v-dc793107] { display: inline-block; background: rgb(254, 226, 226); color: rgb(239, 68, 68); padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; margin-bottom: 14px; letter-spacing: 1px; }
.dark-mode { background: rgba(239, 68, 68, 0.2); color: rgb(255, 142, 142); }
h2[data-v-dc793107] { font-size: 22px; color: var(--text-primary, #111827); margin: 0px 0px 24px; font-weight: 800; line-height: 1.3; }
.tabs[data-v-dc793107] { display: flex; background: var(--bg-editor, #f3f4f6); padding: 5px; border-radius: 14px; }
.tabs button[data-v-dc793107] { flex: 1 1 0%; border: none; padding: 10px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; background: transparent; color: var(--text-secondary, #6b7280); transition: 0.25s; }
.tabs button.active[data-v-dc793107] { 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-dc793107] { height: clamp(240px, 50vh, 340px); overflow-y: auto; position: relative; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; }
.modal-content[data-v-dc793107] { padding: 24px 32px; position: relative; min-height: 100%; }
.letter-text[data-v-dc793107] { font-size: 15px; line-height: 1.8; color: var(--text-secondary, #4b5563); }
.letter-salutation[data-v-dc793107] { font-size: 19px; color: var(--text-primary, #111827); margin-bottom: 18px; font-weight: 700; }
.announcement-highlight[data-v-dc793107] { background: rgba(254, 249, 195, 0.25); border-left: 4px solid rgb(251, 191, 36); padding: 10px 14px; border-radius: 6px; color: var(--text-primary); font-weight: 600; margin: 16px 0px; }
.dark-mode { background: rgba(251, 191, 36, 0.1); border-left-color: rgb(251, 191, 36); color: rgb(251, 191, 36); }
.nyan-text[data-v-dc793107] { font-weight: 900; background: linear-gradient(to right, 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); }
.final-word[data-v-dc793107] { font-size: 24px; text-align: center; margin: 28px 0px; transform: rotate(-1.5deg); letter-spacing: -0.5px; }
.signature[data-v-dc793107] { margin-top: 36px; text-align: right; border-top: 1.5px dashed var(--border-color, #e5e7eb); padding-top: 20px; }
.signature .name[data-v-dc793107] { font-weight: 700; color: var(--text-primary, #111827); font-size: 17px; }
.cat-theme[data-v-dc793107] { background: var(--bg-editor, #fffaf0); }
.dark-mode { background: var(--bg-editor, #1a1c22); }
.cat-mode[data-v-dc793107] { color: var(--text-primary, #713f12); }
.cat-list[data-v-dc793107] { list-style: none; padding: 0px; margin: 20px 0px; }
.cat-list li[data-v-dc793107] { margin-bottom: 10px; padding-left: 24px; position: relative; font-weight: 500; }
.cat-list li[data-v-dc793107]::before { content: "🐟"; position: absolute; left: 0px; }
.cat-watermark-overlay[data-v-dc793107] { position: absolute; inset: 0px; pointer-events: none; z-index: 0; }
.paw-print[data-v-dc793107] { position: absolute; font-size: 44px; opacity: 0.12; filter: grayscale(1); }
.p1[data-v-dc793107] { top: 10%; left: 8%; transform: rotate(-12deg); }
.p2[data-v-dc793107] { top: 48%; right: 12%; transform: rotate(18deg); font-size: 64px; }
.p3[data-v-dc793107] { bottom: 12%; left: 28%; transform: rotate(-8deg); }
.nyan-trail[data-v-dc793107] { position: absolute; top: 0px; left: 0px; width: 100%; height: 6px; background: linear-gradient(to right, red, rgb(255, 153, 0), rgb(255, 255, 0), rgb(51, 255, 0), rgb(0, 153, 255), rgb(102, 51, 255)); opacity: 0.6; }
.modal-footer[data-v-dc793107] { padding: 16px 32px 36px; }
.action-btn[data-v-dc793107] { width: 100%; background: var(--text-primary, #111827); color: var(--bg-card, white); border: none; padding: 16px; border-radius: 16px; font-weight: 700; cursor: pointer; transition: 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.nyan-btn[data-v-dc793107] { background: linear-gradient(-45deg, rgb(238, 119, 82), rgb(231, 60, 126), rgb(35, 166, 213), rgb(35, 213, 171)) 0% 0% / 400% 400%; animation: 4s ease 0s infinite normal none running nyan-gradient-dc793107; box-shadow: rgba(231, 60, 126, 0.45) 0px 6px 20px; color: rgb(255, 255, 255) !important; }
@keyframes nyan-gradient-dc793107 { 
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
.action-btn[data-v-dc793107]:hover { transform: translateY(-3px) scale(1.03); }
.fade-in-enter-active[data-v-dc793107], .fade-in-leave-active[data-v-dc793107] { transition: opacity 0.35s; }
.fade-in-enter-from[data-v-dc793107], .fade-in-leave-to[data-v-dc793107] { opacity: 0; }
.slide-up-enter-active[data-v-dc793107], .slide-up-leave-active[data-v-dc793107] { transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); }
.slide-up-enter-from[data-v-dc793107] { opacity: 0; transform: translateY(15px); }
.slide-up-leave-to[data-v-dc793107] { opacity: 0; transform: translateY(-15px); }
.ucp-color-wheel-container[data-v-5fb55ff5] { width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 10px; }
.ucp-hue-ring[data-v-5fb55ff5] { width: 160px; height: 160px; position: relative; border-radius: 50%; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 15px; }
.hue-ring-gradient[data-v-5fb55ff5] { position: absolute; inset: 0px; border-radius: 50%; 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); mask: radial-gradient(transparent 55%, black 56%); }
.hue-ring-overlay[data-v-5fb55ff5] { position: absolute; inset: 0px; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 10px inset; pointer-events: none; }
.hue-cursor[data-v-5fb55ff5] { position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; margin-top: -10px; margin-left: -10px; border: 3px solid white; border-radius: 50%; box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 6px; pointer-events: none; z-index: 10; transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); will-change: transform; }
.ucp-sv-box-inner[data-v-5fb55ff5] { position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; transform: translate(-50%, -50%); border-radius: 12px; overflow: hidden; cursor: crosshair; background-color: red; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 20px; }
.sv-white[data-v-5fb55ff5] { position: absolute; inset: 0px; background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0)); }
.sv-black[data-v-5fb55ff5] { position: absolute; inset: 0px; background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)); }
.sv-cursor[data-v-5fb55ff5] { position: absolute; width: 14px; height: 14px; border: 2px solid white; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px; z-index: 5; 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; will-change: left, top; }
.ucp-sv-box[data-v-9dceac5d] { width: 100%; height: 130px; position: relative; border-radius: 12px; cursor: crosshair; margin-bottom: 5px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset; transition: background-color 0.1s linear; }
@media (max-width: 767px) {
  .ucp-sv-box[data-v-9dceac5d] { height: 115px; margin-bottom: 8px; }
}
.ucp-sv-white[data-v-9dceac5d] { position: absolute; inset: 0px; background: linear-gradient(to right, rgb(255, 255, 255), rgba(255, 255, 255, 0)); }
.ucp-sv-black[data-v-9dceac5d] { position: absolute; inset: 0px; background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0)); }
.ucp-sv-cursor[data-v-9dceac5d] { position: absolute; width: 16px; height: 16px; border: 2.5px solid white; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px; 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; will-change: left, top, transform; }
.ucp-hue-slider[data-v-bbf5f5ec] { width: 100%; height: 14px; border-radius: 7px; background: linear-gradient(to right, red, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255), rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, red); position: relative; cursor: pointer; margin-bottom: 20px; box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px inset; }
.ucp-hue-cursor[data-v-bbf5f5ec] { position: absolute; top: 50%; width: 22px; height: 22px; background: rgb(255, 255, 255); border: 1px solid rgba(0, 0, 0, 0.1); border-radius: 50%; transform: translate(-50%, -50%); box-shadow: rgba(0, 0, 0, 0.3) 0px 2px 6px; transition: left 0.15s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.1s ease-out; will-change: left, transform; }
.ucp-inputs[data-v-f0e0a9e4] { flex: 1 1 0%; display: flex; flex-direction: column; gap: 8px; }
.ucp-format-header[data-v-f0e0a9e4] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0px; }
.ucp-format-toggle[data-v-f0e0a9e4] { font-size: 11px; font-weight: 800; color: rgb(0, 122, 255); cursor: pointer; text-transform: uppercase; display: flex; align-items: center; gap: 4px; padding: 0px; min-width: 40px; }
.ucp-inline-hex[data-v-f0e0a9e4] { flex: 1 1 0%; margin: 0px 4px; max-width: 100px; }
.ucp-inline-hex input[data-v-f0e0a9e4] { width: 100%; padding: 4px 10px; border: 1px solid var(--ucp-border, rgba(0,0,0,.1)); border-radius: 8px; background: var(--ucp-input-bg, rgba(0,0,0,.05)); font-family: "SF Mono", Menlo, monospace; font-size: 13px; color: var(--ucp-text-main, #111); font-weight: 700; outline: none; transition: 0.2s; text-align: center; }
.ucp-inline-hex input[data-v-f0e0a9e4]:focus { border-color: rgb(0, 122, 255); background: color-mix(in srgb,var(--focus-color, #fff),transparent 92%); box-shadow: rgba(0, 122, 255, 0.1) 0px 0px 0px 3px; }
.ucp-inline-inputs[data-v-f0e0a9e4] { display: flex; margin-left: 4px; min-width: 0px; }
.ucp-inline-multi[data-v-f0e0a9e4] { display: flex; gap: 4px; width: 100%; max-width: 110px; }
.ucp-inline-multi input[data-v-f0e0a9e4] { flex: 1 1 0%; min-width: 0px; padding: 4px; border: 1px solid var(--ucp-border, rgba(0,0,0,.1)); border-radius: 6px; background: var(--ucp-input-bg, rgba(0,0,0,.05)); font-family: "SF Mono", Menlo, monospace; font-size: 11px; color: var(--ucp-text-main, #111); font-weight: 700; outline: none; text-align: center; transition: 0.2s; }
.ucp-inline-multi input[data-v-f0e0a9e4]:focus { border-color: rgb(0, 122, 255); background: var(--ucp-bg, #fff); flex: 1.5 1 0%; }
.ucp-input-group input[data-v-f0e0a9e4] { width: 100%; padding: 8px 12px; border: 1px solid var(--ucp-border, rgba(0,0,0,.1)); border-radius: 10px; background: var(--ucp-input-bg, rgba(0,0,0,.05)); font-family: "SF Mono", Menlo, monospace; font-size: 14px; color: var(--ucp-text-main, #111); font-weight: 600; outline: none; transition: 0.2s; }
.ucp-input-group input[data-v-f0e0a9e4]:focus { border-color: rgb(0, 122, 255); background: var(--ucp-bg, #fff); box-shadow: rgba(0, 122, 255, 0.1) 0px 0px 0px 3px; }
.multi-channel-inputs[data-v-f0e0a9e4] { display: flex; gap: 8px; }
.channel-field[data-v-f0e0a9e4] { flex: 1 1 0%; position: relative; display: flex; align-items: center; }
.channel-label[data-v-f0e0a9e4] { position: absolute; left: 10px; font-size: 9px; font-weight: 900; color: rgb(0, 122, 255); opacity: 0.6; pointer-events: none; }
.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, 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-2ea5650a] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 4px -4px; background: transparent; border-radius: 12px; cursor: pointer; transition: 0.2s; user-select: none; }
.ucp-section-header[data-v-2ea5650a]:hover { background: var(--ucp-input-bg, rgba(0,0,0,.05)); }
.ucp-section-header .section-icon[data-v-2ea5650a] { font-size: 16px; color: rgb(0, 122, 255); }
.ucp-section-header .section-title[data-v-2ea5650a] { font-size: 11px; font-weight: 800; color: var(--ucp-text-sub, #666); text-transform: uppercase; letter-spacing: 0.5px; }
.ucp-section-header .spacer[data-v-2ea5650a] { flex: 1 1 0%; }
.ucp-section-header .chevron[data-v-2ea5650a] { font-size: 18px; color: var(--ucp-text-sub, #666); transition: transform 0.2s; }
.ucp-section-header.is-collapsed[data-v-2ea5650a] { opacity: 0.7; }
.ucp-section-header[data-v-2ea5650a]:active { transform: scale(0.98); }
@media (max-width: 767px) {
  .ucp-section-header[data-v-2ea5650a] { margin: 4px 0px !important; padding: 8px 0px !important; }
}
.wcag-wrapper[data-v-2ea5650a] { margin-top: 4px; }
.wcag-advice-container[data-v-2ea5650a] { display: flex; align-items: stretch; padding: 10px; border-radius: 14px; background: var(--ucp-input-bg, rgba(0,0,0,.05)); border: 1px solid var(--ucp-border, rgba(0,0,0,.1)); min-height: 60px; }
@media (max-width: 767px) {
  .wcag-advice-container[data-v-2ea5650a] { padding: 6px 8px; min-height: 50px; }
}
.wcag-divider[data-v-2ea5650a] { width: 1px; background: var(--ucp-border, rgba(0,0,0,.1)); margin: 0px 8px; align-self: center; height: 30px; }
.wcag-side[data-v-2ea5650a] { flex: 1 1 0%; display: flex; flex-direction: column; justify-content: center; }
.wcag-label-row[data-v-2ea5650a] { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.bg-indicator[data-v-2ea5650a] { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.1); flex-shrink: 0; }
.bg-indicator.white[data-v-2ea5650a] { background: rgb(255, 255, 255); }
.bg-indicator.black[data-v-2ea5650a] { background: rgb(0, 0, 0); }
.wcag-val[data-v-2ea5650a] { font-size: 13px; font-weight: 800; color: var(--ucp-text-main, #111); display: inline-block; min-width: 45px; font-variant-numeric: tabular-nums; }
.wcag-icon[data-v-2ea5650a] { margin-left: auto; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgb(255, 152, 0); color: rgb(255, 255, 255); font-size: 10px; font-weight: 700; }
.pass .wcag-icon[data-v-2ea5650a] { background: rgb(76, 175, 80); }
.wcag-hint-min[data-v-2ea5650a] { font-size: 10px; color: var(--ucp-text-sub, #666); font-weight: 600; margin-top: 2px; }
.wcag-fix-min[data-v-2ea5650a] { display: flex; align-items: center; gap: 6px; background: rgba(0, 122, 255, 0.1); padding: 4px 8px; border-radius: 8px; cursor: pointer; width: fit-content; margin-top: 4px; transition: 0.2s; }
.wcag-fix-min[data-v-2ea5650a]:hover { background: rgba(0, 122, 255, 0.2); transform: translateY(-1px); }
.wcag-fix-min span[data-v-2ea5650a] { font-size: 10px; font-weight: 800; color: rgb(0, 122, 255); }
.fix-dot[data-v-2ea5650a] { width: 8px; height: 8px; border-radius: 50%; }
.bg-img-warning[data-v-2ea5650a] { font-size: 14px; color: rgb(255, 152, 0); margin-left: 2px; opacity: 0.8; }
.ucp-section-header[data-v-71fc4126] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 4px -4px; background: transparent; border-radius: 12px; cursor: pointer; transition: 0.2s; user-select: none; }
.ucp-section-header[data-v-71fc4126]:hover { background: var(--ucp-input-bg, rgba(0,0,0,.05)); }
.ucp-section-header .section-icon[data-v-71fc4126] { font-size: 16px; color: rgb(0, 122, 255); }
.ucp-section-header .section-title[data-v-71fc4126] { font-size: 11px; font-weight: 800; color: var(--ucp-text-sub, #666); text-transform: uppercase; letter-spacing: 0.5px; }
.ucp-section-header .spacer[data-v-71fc4126] { flex: 1 1 0%; }
.ucp-section-header .chevron[data-v-71fc4126] { font-size: 18px; color: var(--ucp-text-sub, #666); transition: transform 0.2s; }
.ucp-section-header.is-collapsed[data-v-71fc4126] { opacity: 0.7; }
.ucp-section-header[data-v-71fc4126]:active { transform: scale(0.98); }
@media (max-width: 767px) {
  .ucp-section-header[data-v-71fc4126] { margin: 4px 0px !important; padding: 8px 0px !important; }
}
.ucp-harmony-section[data-v-71fc4126] { margin-bottom: 5px; }
.harmony-grid[data-v-71fc4126] { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; padding: 4px 0px; }
.harmony-item[data-v-71fc4126] { display: flex; flex-direction: column; gap: 4px; }
.harmony-header[data-v-71fc4126] { display: flex; justify-content: space-between; align-items: center; }
.harmony-title[data-v-71fc4126] { font-size: 10px; color: var(--ucp-text-sub, #666); font-weight: 700; opacity: 0.8; }
.harmony-swatches[data-v-71fc4126] { display: flex; gap: 4px; }
.ucp-swatch[data-v-71fc4126] { width: 24px; height: 24px; border-radius: 6px; cursor: pointer; flex-shrink: 0; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; transition: 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.ucp-swatch[data-v-71fc4126]:hover { transform: scale(1.15) rotate(5deg); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; }
.ucp-palette-sidebar[data-v-afae7958] { display: flex; flex-direction: column; width: 180px; border-left: 1px solid var(--ucp-border, rgba(0,0,0,.1)); padding: 0px 12px; min-height: 0px; overflow: hidden; box-sizing: border-box; }
.palette-sidebar-header[data-v-afae7958] { display: flex; align-items: center; justify-content: space-between; padding: 8px 0px 6px; margin-bottom: 8px; border-bottom: 1px solid var(--ucp-border, rgba(0,0,0,.1)); }
.palette-title[data-v-afae7958] { font-size: 11px; font-weight: 800; color: var(--ucp-text-sub, #666); text-transform: uppercase; letter-spacing: 0.5px; }
.palette-header-actions[data-v-afae7958] { display: flex; align-items: center; gap: 4px; }
.palette-count[data-v-afae7958] { display: none; }
.sidebar-section[data-v-afae7958] { padding: 4px 0px; }
.section-header-compact[data-v-afae7958] { display: flex; align-items: center; gap: 6px; padding: 6px 4px; cursor: pointer; border-radius: 6px; transition: background 0.2s; }
.section-header-compact[data-v-afae7958]:hover { background: var(--ucp-input-bg, rgba(0,0,0,.05)); }
.section-header-compact .iconify[data-v-afae7958] { font-size: 14px; color: var(--ucp-text-sub, #666); }
.section-title-compact[data-v-afae7958] { flex: 1 1 0%; font-size: 11px; font-weight: 700; color: var(--ucp-text-main, #111); }
.section-count-compact[data-v-afae7958] { font-size: 9px; background: var(--ucp-input-bg, rgba(0,0,0,.05)); padding: 1px 4px; border-radius: 4px; color: var(--ucp-text-sub, #666); }
.fav-list-compact[data-v-afae7958] { padding: 4px; }
.fav-grid-compact[data-v-afae7958] { display: flex; flex-wrap: wrap; gap: 6px; }
.no-data-hint[data-v-afae7958] { font-size: 10px; color: var(--ucp-text-sub, #666); text-align: center; padding: 8px 0px; opacity: 0.6; }
.sidebar-divider[data-v-afae7958] { height: 1px; background: var(--ucp-border, rgba(0,0,0,.1)); margin: 8px 0px; opacity: 0.5; }
.fav-star-overlay[data-v-afae7958] { position: absolute; inset: 0px; display: flex; align-items: center; justify-content: center; color: rgb(255, 77, 79); font-size: 10px; pointer-events: none; }
.palette-collapse-btn[data-v-afae7958] { background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; color: var(--ucp-text-sub, #666); transition: 0.2s; }
.palette-create-container[data-v-afae7958] { margin-bottom: 8px; background: var(--ucp-input-bg, rgba(0,0,0,.03)); border-radius: 12px; padding: 8px; border: 1px solid var(--ucp-border, rgba(0,0,0,.05)); width: 100%; box-sizing: border-box; }
.create-label[data-v-afae7958] { font-size: 10px; font-weight: 800; color: rgb(0, 122, 255); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; }
.palette-create-compact[data-v-afae7958] { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.palette-input-compact[data-v-afae7958] { flex: 1 1 0%; width: 0px; min-width: 0px; padding: 6px 8px; border: 1px solid var(--ucp-border, rgba(0,0,0,.1)); border-radius: 8px; background: rgb(255, 255, 255); color: var(--ucp-text-main, #111); font-size: 11px; outline: none; transition: 0.2s; box-sizing: border-box; }
.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] { width: 28px; height: 28px; border-radius: 8px; background: rgb(0, 122, 255); border: none; color: rgb(255, 255, 255); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: 0.2s; flex-shrink: 0; }
.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(1); cursor: not-allowed; }
.palette-list-compact[data-v-afae7958] { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1 1 0%; padding-right: 4px; }
.palette-list-compact[data-v-afae7958]::-webkit-scrollbar { width: 4px; }
.palette-list-compact[data-v-afae7958]::-webkit-scrollbar-track { background: transparent; }
.palette-list-compact[data-v-afae7958]::-webkit-scrollbar-thumb { background: var(--ucp-border, rgba(0,0,0,.1)); border-radius: 2px; }
.palette-item-compact[data-v-afae7958] { padding: 8px; background: var(--ucp-input-bg, rgba(0,0,0,.05)); border-radius: 8px; border: 1px solid var(--ucp-border, rgba(0,0,0,.1)); cursor: pointer; }
.palette-item-compact.selected[data-v-afae7958] { border-color: rgb(0, 122, 255); background: rgba(0, 122, 255, 0.05); }
.palette-header-compact[data-v-afae7958] { display: flex; align-items: center; justify-content: space-between; }
.palette-name-compact[data-v-afae7958] { flex: 1 1 0%; font-size: 11px; font-weight: 600; color: var(--ucp-text-main, #111); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-rename-input[data-v-afae7958] { flex: 1 1 0%; width: 100%; font-size: 11px; font-weight: 600; border: 1px solid rgb(0, 122, 255); border-radius: 4px; background: rgb(255, 255, 255); padding: 2px 4px; outline: none; }
:root.dark-mode .palette-rename-input[data-v-afae7958] { background: rgba(255, 255, 255, 0.1); color: rgb(255, 255, 255); }
.palette-item-actions[data-v-afae7958] { display: flex; gap: 2px; }
.palette-action-btn[data-v-afae7958] { background: transparent; border: none; color: var(--ucp-text-sub, #666); cursor: pointer; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; font-size: 12px; border-radius: 4px; transition: 0.2s; }
.palette-action-btn[data-v-afae7958]:hover { background: rgba(0, 122, 255, 0.1); color: rgb(0, 122, 255); }
.palette-action-btn.delete[data-v-afae7958] { color: rgb(255, 152, 0); }
.palette-action-btn.delete[data-v-afae7958]:hover { background: rgba(255, 152, 0, 0.1); color: rgb(239, 108, 0); }
.no-palette-empty[data-v-afae7958] { flex: 1 1 0%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px 0px; opacity: 0.4; gap: 8px; }
.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] { display: flex; flex-wrap: wrap; gap: 4px; padding-top: 6px; }
.palette-color-mini[data-v-afae7958] { position: relative; width: 30px; height: 30px; border-radius: 6px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; cursor: pointer; }
.palette-color-remove-mini[data-v-afae7958] { position: absolute; top: -4px; right: -4px; width: 14px; height: 14px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); color: rgb(255, 255, 255); border: none; display: flex; align-items: center; justify-content: center; font-size: 8px; opacity: 0; transition: opacity 0.2s; }
.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] { width: 24px; height: 24px; border-radius: 5px; border: 1px dashed rgb(0, 122, 255); color: rgb(0, 122, 255); background: rgba(0, 122, 255, 0.05); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 10px; }
.ucp-preview-hero[data-v-3695313d] { width: 100%; height: 120px; border-radius: 12px; overflow: hidden; overscroll-behavior: contain; margin-bottom: 20px; background: var(--ucp-panel-bg); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 10px 0px; border: 1px solid var(--ucp-border); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 10px inset; transition: height 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.1); will-change: height; }
.ucp-preview-hero[data-v-3695313d]::-webkit-scrollbar { width: 4px; }
.ucp-preview-hero[data-v-3695313d]::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.1); border-radius: 10px; }
.ucp-preview-hero.is-expanded[data-v-3695313d] { height: 195px; }
@media (max-width: 767px) {
  .ucp-preview-hero[data-v-3695313d] { height: 160px; margin-bottom: 12px; }
  .ucp-preview-hero.is-expanded[data-v-3695313d] { height: 220px; }
}
.item-preview-sandbox[data-v-3695313d] { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: transparent; }
.mini-canvas-wrapper[data-v-3695313d] { width: 600px; flex-shrink: 0; background: transparent; pointer-events: none; }
.preview-item-mirror[data-v-3695313d] { width: 100%; background: transparent; }
[data-v-3695313d] .sandbox-env { background: transparent !important; box-shadow: none !important; padding: 0px !important; }
.page-preview-outer[data-v-3695313d], .page-preview-container[data-v-3695313d] { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.page-mini-content[data-v-3695313d] { width: 70px; height: 95px; border-radius: 8px; box-shadow: rgba(0, 0, 0, 0.3) 0px 5px 25px; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.mini-header[data-v-3695313d] { height: 14px; border-radius: 2px; }
.mini-items[data-v-3695313d] { flex: 1 1 0%; display: flex; flex-direction: column; gap: 6px; }
.mini-item[data-v-3695313d] { height: 14px; background: rgba(0, 0, 0, 0.1); border-radius: 3px; }
[data-v-3695313d] .preview-card-title, [data-v-3695313d] h1, [data-v-3695313d] h2 { text-overflow: ellipsis; overflow: hidden; white-space: nowrap !important; line-height: 1.35 !important; }
[data-v-3695313d] .preview-card-content, [data-v-3695313d] p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4 !important; }
.ucp-panel[data-v-0fb8fa86] { --ucp-bg: rgba(255, 255, 255, .88); --ucp-border: rgba(0, 0, 0, .08); --ucp-text-main: #111; --ucp-text-sub: #666; --ucp-input-bg: rgba(0, 0, 0, .04); --ucp-shadow: 0 20px 50px rgba(0, 0, 0, .15); }
:root.dark-mode .ucp-panel[data-v-0fb8fa86] { --ucp-bg: rgba(30, 34, 42, .9); --ucp-border: rgba(255, 255, 255, .1); --ucp-text-main: #eee; --ucp-text-sub: #aaa; --ucp-input-bg: rgba(255, 255, 255, .06); --ucp-shadow: 0 20px 50px rgba(0, 0, 0, .4); }
.ucp-overlay[data-v-0fb8fa86] { position: fixed; inset: 0px; z-index: 9999; display: flex; justify-content: center; align-items: flex-end; background: rgba(0, 0, 0, 0.05); }
@media (min-width: 768px) {
  .ucp-overlay[data-v-0fb8fa86] { align-items: center; }
}
.ucp-overlay[data-v-0fb8fa86] { position: fixed; inset: 0px; background: transparent; z-index: 99999; transition: opacity 0.3s; }
.ucp-overlay.is-pinned[data-v-0fb8fa86] { pointer-events: none; background: transparent; }
.ucp-panel[data-v-0fb8fa86] { position: absolute; background: var(--ucp-bg, #ffffff); backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--ucp-border, rgba(0, 0, 0, .1)); border-radius: 24px 24px 0px 0px; padding: 10px; box-shadow: rgba(0, 0, 0, 0.15) 0px 10px 40px; display: flex; flex-direction: column; transition: 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity 0.2s; z-index: 100000; overflow: hidden; pointer-events: auto; will-change: transform, top, left, box-shadow; animation: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.1) 0s 1 normal none running ucp-slide-up-0fb8fa86; }
@keyframes ucp-slide-up-0fb8fa86 { 
  0% { opacity: 0; transform: translateY(20px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0px) scale(1); }
}
.ucp-panel.is-dragging[data-v-0fb8fa86] { cursor: move; transition: none !important; }
@media (min-width: 768px) {
  .ucp-panel[data-v-0fb8fa86] { max-width: 1000px; border: 1px solid var(--ucp-border, rgba(0, 0, 0, .1)); border-radius: 20px; flex-direction: row; gap: 12px; }
}
.ucp-main-panel[data-v-0fb8fa86] { flex: 1 1 0%; display: flex; flex-direction: column; min-width: 0px; max-height: 80vh; overflow: hidden auto; padding-right: 4px; }
.ucp-main-panel[data-v-0fb8fa86]::-webkit-scrollbar { width: 4px; }
.ucp-main-panel[data-v-0fb8fa86]::-webkit-scrollbar-track { background: transparent; }
.ucp-main-panel[data-v-0fb8fa86]::-webkit-scrollbar-thumb { background: var(--ucp-border); border-radius: 2px; }
.ucp-header[data-v-0fb8fa86] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.header-title[data-v-0fb8fa86] { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 800; color: var(--ucp-text-main); white-space: nowrap; flex-shrink: 0; }
.title-icon[data-v-0fb8fa86] { color: rgb(0, 122, 255); font-size: 18px; flex-shrink: 0; }
.header-actions[data-v-0fb8fa86] { display: flex; align-items: center; gap: 4px; }
.ucp-fav-btn[data-v-0fb8fa86], .ucp-palette-toggle-btn[data-v-0fb8fa86], .ucp-pin-btn[data-v-0fb8fa86], .ucp-close-btn[data-v-0fb8fa86] { width: 28px; height: 28px; border-radius: 50%; border: none; background: var(--ucp-input-bg); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ucp-text-main); transition: 0.2s; }
.ucp-fav-btn[data-v-0fb8fa86]:hover, .ucp-palette-toggle-btn[data-v-0fb8fa86]:hover, .ucp-pin-btn[data-v-0fb8fa86]:hover, .ucp-close-btn[data-v-0fb8fa86]:hover { background: rgba(0, 122, 255, 0.1); color: rgb(0, 122, 255); }
.ucp-palette-toggle-btn.active[data-v-0fb8fa86] { color: rgb(0, 122, 255); background: rgba(0, 122, 255, 0.2); }
.ucp-fav-btn.active[data-v-0fb8fa86] { color: rgb(255, 64, 129); background: rgba(255, 64, 129, 0.1); }
.ucp-pin-btn.active[data-v-0fb8fa86] { color: rgb(255, 255, 255); background: rgb(0, 122, 255); }
.header-title[data-v-0fb8fa86] { cursor: move; position: relative; }
.drag-handle-hint[data-v-0fb8fa86] { font-size: 14px; opacity: 0; transition: opacity 0.2s; margin-left: 4px; color: var(--ucp-text-sub); }
.header-title:hover .drag-handle-hint[data-v-0fb8fa86] { opacity: 0.5; }
.ucp-mode-toggle-btn[data-v-0fb8fa86] { background: var(--ucp-input-bg); border: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ucp-text-main); transition: 0.2s; }
.ucp-mode-toggle-btn[data-v-0fb8fa86]:hover { background: rgba(0, 122, 255, 0.1); color: rgb(0, 122, 255); }
.ucp-main-interaction[data-v-0fb8fa86] { margin-bottom: 6px; display: flex; flex-direction: column; }
.ucp-order-hero-header[data-v-0fb8fa86] { order: 1; }
.ucp-order-hero-content[data-v-0fb8fa86] { order: 2; }
.ucp-order-picker[data-v-0fb8fa86] { order: 3; }
.ucp-order-inputs[data-v-0fb8fa86] { order: 4; }
.ucp-order-wcag[data-v-0fb8fa86] { order: 5; }
@media (max-width: 767px) {
  .ucp-order-inputs[data-v-0fb8fa86] { order: 3; margin: 4px 0px !important; }
  .ucp-order-wcag[data-v-0fb8fa86] { order: 4; }
  .ucp-order-picker[data-v-0fb8fa86] { order: 5; margin-top: 12px; }
}
.ucp-controls-v2[data-v-0fb8fa86] { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.ucp-top-row[data-v-0fb8fa86] { display: flex; gap: 4px; align-items: center; }
.ucp-preview-block[data-v-0fb8fa86] { display: flex; gap: 10px; align-items: center; }
.ucp-preview-swatch[data-v-0fb8fa86] { width: 40px; height: 40px; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px inset; cursor: copy; position: relative; transition: transform 0.2s; }
.ucp-preview-swatch[data-v-0fb8fa86]:hover { transform: scale(1.05); }
.copy-overlay[data-v-0fb8fa86] { position: absolute; inset: 0px; background: rgba(0, 0, 0, 0.6); color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; border-radius: 10px; animation: 0.2s ease 0s 1 normal none running fadeIn-0fb8fa86; }
.ucp-eyedropper-btn[data-v-0fb8fa86] { width: 32px; height: 40px; border-radius: 10px; border: none; background: var(--ucp-input-bg); cursor: pointer; color: var(--ucp-text-main); transition: 0.2s; }
.ucp-eyedropper-btn[data-v-0fb8fa86]:hover { background: rgba(0, 122, 255, 0.1); color: rgb(0, 122, 255); }
.ucp-section-label[data-v-0fb8fa86] { font-size: 10px; font-weight: 800; color: var(--ucp-text-sub); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.5px; opacity: 0.7; }
.ucp-history[data-v-0fb8fa86] { margin-top: 8px; margin-bottom: 12px; }
.ucp-history-grid[data-v-0fb8fa86], .ucp-colors-grid[data-v-0fb8fa86] { display: flex; gap: 10px; flex-wrap: wrap; }
.ucp-swatch[data-v-0fb8fa86], .color-swatch[data-v-0fb8fa86] { width: 32px; height: 32px; border-radius: 8px; cursor: pointer; flex-shrink: 0; box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 0px 1px inset; transition: 0.2s; }
.ucp-swatch[data-v-0fb8fa86]:hover, .color-swatch[data-v-0fb8fa86]:hover { transform: scale(1.1) translateY(-2px); box-shadow: rgba(0, 0, 0, 0.15) 0px 4px 12px; }
.color-card[data-v-0fb8fa86] { position: relative; }
.color-fav-mini[data-v-0fb8fa86] { position: absolute; right: -4px; top: -4px; width: 16px; height: 16px; border-radius: 50%; background: rgb(255, 77, 79); border: none; color: rgb(255, 255, 255); display: flex; align-items: center; justify-content: center; font-size: 10px; cursor: pointer; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 4px; z-index: 2; }
@keyframes fadeIn-0fb8fa86 { 
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@media (max-width: 767px) {
  .ucp-panel[data-v-0fb8fa86] { position: fixed !important; inset: auto 0px 0px !important; width: 100% !important; max-width: 100vw !important; transform: translateY(0px) scale(1) !important; border-radius: 20px 20px 0px 0px !important; padding: 12px 16px 30px !important; border-left: none !important; border-right: none !important; border-bottom: none !important; }
  .hidden-on-mobile[data-v-0fb8fa86] { display: none !important; }
  .ucp-history-grid[data-v-0fb8fa86] { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .ucp-history-grid[data-v-0fb8fa86]::-webkit-scrollbar { height: 0px; }
  .ucp-section-header[data-v-0fb8fa86] { margin: 4px 0px !important; padding: 8px 0px !important; }
}
.ucp-section-header[data-v-0fb8fa86] { display: flex; align-items: center; gap: 8px; padding: 8px 10px; margin: 4px -4px; background: transparent; border-radius: 12px; cursor: pointer; transition: 0.2s; user-select: none; }
.ucp-section-header[data-v-0fb8fa86]:hover { background: var(--ucp-input-bg, rgba(0,0,0,.05)); }
.ucp-section-header .section-icon[data-v-0fb8fa86] { font-size: 16px; color: rgb(0, 122, 255); }
.ucp-section-header .section-title[data-v-0fb8fa86] { font-size: 11px; font-weight: 800; color: var(--ucp-text-sub, #666); text-transform: uppercase; letter-spacing: 0.5px; }
.ucp-section-header .spacer[data-v-0fb8fa86] { flex: 1 1 0%; }
.ucp-section-header .chevron[data-v-0fb8fa86] { font-size: 18px; color: var(--ucp-text-sub, #666); transition: transform 0.2s; }
.ucp-section-header.is-collapsed[data-v-0fb8fa86] { opacity: 0.7; }
.ucp-section-header[data-v-0fb8fa86]:active { transform: scale(0.98); }
.icon-picker-tabs[data-v-10369435] { display: flex; gap: 10px; margin-bottom: 15px; background: var(--bg-inset); padding: 4px; border-radius: 8px; }
.picker-tab-btn[data-v-10369435] { flex: 1 1 0%; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px; border: none; background: transparent; color: var(--text-secondary); border-radius: 6px; cursor: pointer; font-size: 0.85rem; font-weight: 600; transition: 0.2s; }
.picker-tab-btn[data-v-10369435]:hover { background: rgba(0, 0, 0, 0.05); }
.picker-tab-btn.active[data-v-10369435] { background: var(--bg-card); color: var(--color-primary); box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 5px; }
.copyright-notice-banner[data-v-10369435] { background: rgb(255, 248, 225); color: rgb(168, 93, 0); padding: 8px 12px; border-radius: 6px; font-size: 0.75rem; margin-bottom: 15px; display: flex; align-items: center; gap: 6px; border: 1px solid rgb(255, 224, 130); }
.dark-mode .copyright-notice-banner[data-v-10369435], :host-context(.dark-mode) .copyright-notice-banner[data-v-10369435] { background: rgb(51, 43, 0); color: rgb(255, 213, 79); border-color: rgb(85, 68, 0); }
.ProseMirror { position: relative; }
.ProseMirror { overflow-wrap: break-word; white-space: break-spaces; font-variant-ligatures: none; font-feature-settings: "liga" 0; }
.ProseMirror [contenteditable="false"] { white-space: normal; }
.ProseMirror [contenteditable="false"] [contenteditable="true"] { white-space: pre-wrap; }
.ProseMirror pre { white-space: pre-wrap; }
img.ProseMirror-separator { display: inline !important; border: none !important; margin: 0px !important; width: 0px !important; height: 0px !important; }
.ProseMirror-gapcursor { display: none; pointer-events: none; position: absolute; margin: 0px; }
.ProseMirror-gapcursor::after { content: ""; display: block; position: absolute; top: -2px; width: 20px; border-top: 1px solid black; animation: 1.1s steps(2, start) 0s infinite normal none running ProseMirror-cursor-blink; }
@keyframes ProseMirror-cursor-blink { 
  100% { visibility: hidden; }
}
.ProseMirror-hideselection ::selection { background: transparent; }
.ProseMirror-hideselection * { caret-color: transparent; }
.ProseMirror-focused .ProseMirror-gapcursor { display: block; }