/**
 * Blokko Exported Styles
 * Generated: 2026-01-17T05:39:25.021Z
 */

/* === Local Fonts === */

@font-face {
    font-family: 'ximailike';
    src: url('../fonts/ximailike.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* === CSS Variables === */
:root {
    --app-height: 828px; --g-comp-scale: 1; --g-comp-bg-color: #ffffff; --g-comp-text-color: #1a1a1a; --g-comp-opacity: 0.45; --g-comp-border-radius: 12px; --g-comp-text-stroke: 0px transparent; --g-comp-padding: 15px; --g-comp-text-align: left; --g-comp-line-height: 1.5; --g-comp-title-font-size: 1.1em; --g-comp-content-font-size: 0.95em; --g-comp-gradient-bg: none; --g-border-width: 1px; --g-border-style: solid; --g-border-color: #e0e0e0; --g-border-shadow-offset: 4px; --g-border-shadow-color: #000000; --g-shadow-value: 0px 6px 14px rgba(0,0,0,0.08); --inspector-ui-opacity: 1; --preview-gap: 20px;
    --active-card-font-family: sans-serif !important;
}

/* === Base Styles === */
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;
}

body {
    font-family: var(--active-card-font-family), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* === Main Container === */
.preview-wrapper {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 80px;
    box-sizing: border-box;
    background-color: transparent;
    background-image: url("./assets/images/img_0_1768628364949.png");
    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 === */
.footer-credit {
    text-align: center;
    padding: 20px;
    color: #888;
    font-size: 12px;
    margin-top: 20px;
}

/* === Layout Toggle Button === */
#layout-toggle-btn {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    background: rgba(0,0,0,0.6);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 12px;
    cursor: pointer;
    backdrop-filter: blur(5px);
    transition: all 0.3s;
    display: flex;
    align-items: center;
    gap: 6px;
}

#layout-toggle-btn:hover {
    background: rgba(0,0,0,0.8);
}

/* === Lightbox === */
#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;
}

/* === Toast Notification === */
.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;
    font-size: 14px;
    font-weight: bold;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 2147483647;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    backdrop-filter: blur(4px);
}

.bk-toast.visible {
    opacity: 1;
}

/* === Interaction Elements === */
[data-action="link"],
[data-action="toggle-check"],
[data-action="cycle-check"],
[data-action="alert"] {
    cursor: pointer !important;
}

.spoiler-blur {
    filter: blur(8px);
    user-select: none;
    cursor: pointer;
    transition: filter 0.3s ease;
}

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

.spoiler-blur.revealed {
    filter: none;
    user-select: text;
    cursor: text;
}

/* === Original Styles === */










.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; }
::-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 { --bg-editor: #ffffff; --bg-preview-pane: #E3E3E3; --bg-preview-page: #ffffff; --bg-card: #ffffff; --bg-input: #f9f9f9; --bg-section: #fdfdfd; --bg-modal-overlay: rgba(0,0,0,0.6); --bg-inset: #f0f2f5; --bg-image-thumb: #eeeeee; --bg-image-upload-hover: #eef5ff; --text-primary: #1a1a1a; --text-secondary: #555555; --text-label: #333333; --text-placeholder: #999; --text-on-primary: #ffffff; --text-action: #007AFF; --border-color: #e8e8e8; --border-input: #d1d5db; --border-dashed: #cccccc; --shadow-light: rgba(0,0,0,0); --shadow-medium: rgba(0,0,0,0); --preset-text-shadow: none; --color-primary: #007AFF; --color-primary-hover: #0056CC; --color-danger: #ff4757; --color-danger-hover: #e03c48; --color-secondary: #8e8e93; --color-secondary-hover: #636366; --header-height: 55px; --transition-speed: 0.3s; --transition-short: 0.2s; --layer-panel-width: 280px; --inspector-panel-width: 380px; --inspector-ui-opacity: 1; --preview-gap: 20px; --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-font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --g-comp-title-font-size: 1.1em; --g-comp-content-font-size: 0.95em; --g-comp-text-stroke: 0px transparent; --g-comp-padding: 15px; --g-border-width: 1px; --g-border-color: transparent; --g-border-shadow-offset: 4px; --g-border-shadow-color: #000; --active-card-shadow: none; --active-card-border: none; --active-card-text-shadow: none; --active-card-font-family: var(--g-comp-font-family); }
html.dark-mode { --bg-editor: #1f2229; --bg-preview-pane: #1c1c1c; --bg-preview-page: #1f2229; --bg-card: #2c303a; --bg-input: #2b2f36; --bg-section: #252830; --bg-modal-overlay: rgba(0,0,0,0.7); --bg-inset: #2c2c2e; --bg-image-thumb: #3e4451; --bg-image-upload-hover: #2c3e50; --text-primary: #f0f2f5; --text-secondary: #a0aec0; --text-label: #e2e8f0; --text-placeholder: #777; --text-on-primary: #ffffff; --text-action: #3498db; --border-color: #3e4451; --border-input: #4a5160; --border-dashed: #555; --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; }
#storage-warning-banner { display: none; position: fixed; top: 0px; left: 0px; width: 100%; background-color: var(--color-danger); color: white; 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: white; font-weight: bold; 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: 0px; left: 0px; width: 100%; height: 26px; background-color: rgb(243, 156, 18); color: white; 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: translateX(0px); }
  100% { transform: translateX(-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: 35px; }
body.storage-warning.page-limit-warning .app-header, body.storage-warning.page-limit-warning .app-container { top: 61px; }
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: 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: var(--app-height,100vh); padding-top: var(--header-height); position: relative; top: 0px; transition: top 0.3s; }
.layer-panel, .inspector-panel { background: var(--bg-editor); height: calc(100dvh - var(--header-height)); padding-bottom: env(safe-area-inset-bottom); overflow-y: auto; flex-shrink: 0; transition: all var(--transition-speed) ease; position: relative; }
.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; 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%; 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); 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(4, 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); 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); }
.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); }
.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); font-weight: bold; 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 .advanced-setting { display: none !important; }
.inspector-panel.simple-mode .editor-section { padding-bottom: 10px; }
.inspector-panel .input-group { max-width: 100%; }
.inspector-tabs { display: flex; flex-shrink: 0; border-bottom: 1px solid var(--border-color); }
.inspector-tab-btn { flex: 1 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(--g-theme-accent,var(--text-action)); border-bottom-color: var(--g-theme-accent,var(--text-action)); }
.inspector-tab-content { display: none; padding: 25px; overflow-y: auto; flex-grow: 1; }
.inspector-tab-content.active { display: block; }
.resizer { width: 5px; height: calc(100vh - var(--header-height)); background: var(--border-color); cursor: col-resize; z-index: 50; flex-shrink: 0; position: relative; transition: all var(--transition-speed) ease; }
.resizer:hover { background: var(--color-primary); }
.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: bold; 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; }
.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: bold; font-size: 0.95rem; margin-bottom: 5px; color: var(--text-primary); }
.res-page-meta { font-size: 0.75rem; color: var(--text-secondary); }
.res-page-actions { display: flex; gap: 8px; margin-top: 10px; border-top: 1px solid var(--border-color); padding-top: 10px; }
.preview-wrapper { width: 100%; position: relative; transform-origin: 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: normal; color: var(--text-action); cursor: pointer; background: none; border: none; padding: 4px 8px; }
.back-to-global-btn:hover { text-decoration: underline; }
.layer-item-container { margin-bottom: 5px; }
.layer-list .layer-item { display: flex; align-items: center; gap: 4px; padding: 8px 10px; border-radius: 6px; cursor: pointer; transition: background-color var(--transition-short),border-color var(--transition-short); background-color: var(--bg-section); border: 1px solid var(--border-color); margin-bottom: 4px; }
.layer-list .layer-item:hover { background-color: var(--bg-input); border-color: var(--text-secondary); }
.layer-list .layer-item.selected { background-color: var(--bg-image-upload-hover); border-color: var(--color-primary); font-weight: 600; border-left-width: 4px; padding-left: 7px; }
html.dark-mode .layer-list .layer-item.selected { background-color: rgba(52, 152, 219, 0.15); border-color: 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: 10; }
.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%; max-width: 600px; 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 0.4s cubic-bezier(0.25,0.8,0.25,1),max-width 0.4s cubic-bezier(0.25,0.8,0.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: white; }
.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-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 0px; margin: 0px 0px 16px; box-shadow: rgba(0, 0, 0, 0.03) 0px 2px 6px; overflow: hidden; transition: 0.2s; }
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: 12px 16px; background: var(--bg-section); border-bottom: 1px solid var(--border-color); font-size: 0.95rem; font-weight: 600; color: var(--text-primary); cursor: pointer; box-sizing: border-box; float: none; transition: background 0.2s; }
.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: normal; 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; font-size: 14px; background: var(--bg-input); border: 1px solid var(--border-input); border-radius: 6px; color: var(--text-primary); transition: all var(--transition-short) ease; max-width: 100%; overflow-wrap: break-word; }
.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: center; gap: 0px; border: 1px solid var(--border-input); border-radius: 6px; overflow: hidden; }
.input-group:focus-within { border-color: var(--color-primary); box-shadow: rgba(0, 122, 255, 0.2) 0px 0px 0px 3px; }
.input-group.simple { border: none; border-radius: 0px; gap: 10px; }
.input-group.simple:focus-within { box-shadow: none; }
.input-group input[type="color"] { flex-shrink: 0; width: 40px; height: 38px; border: none; background: transparent; cursor: pointer; }
.input-group input[type="text"].color-hex-input { flex-grow: 1; border-top: none; border-right: none; border-bottom: none; border-image: initial; border-left: 1px solid var(--border-input); border-radius: 0px; padding-left: 10px; background-color: var(--bg-input); color: var(--text-primary); }
.input-group input[type="text"].color-hex-input:focus { outline: none; box-shadow: none; }
.input-group input[type="range"] { flex-grow: 1; height: 20px; cursor: pointer; min-width: 100px; }
.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: 32px; height: 32px; padding: 0px; font-size: 1.2rem; line-height: 30px; border-radius: 50%; background: var(--bg-section); border: 1px solid var(--border-color); color: var(--text-primary); align-items: center; justify-content: center; cursor: pointer; user-select: none; }
.btn-stepper:active { background: var(--bg-image-upload-hover); transform: scale(0.9); }
@media (max-width: 1024px) {
  .btn-stepper { display: flex !important; }
}
.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); 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: normal; 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: normal; 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); 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 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: white; font-size: 10px; font-weight: bold; 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-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-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-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; }
.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; gap: 6px; padding: 4px 12px; 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; }
.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; }
.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 { transform: scale(1.05); }
.thumbnail-wrapper:hover img { transform: scale(1.05); }
.thumbnail-actions { position: absolute; top: 3px; right: 3px; display: flex; gap: 4px; opacity: 0; transition: opacity var(--transition-short) ease; }
.thumbnail-wrapper:hover .thumbnail-actions { opacity: 1; }
.thumbnail-actions .btn { width: 24px; height: 24px; padding: 0px; font-size: 0.8rem; line-height: 24px; border-radius: 50%; background: rgba(0, 0, 0, 0.6); color: white; border: none; }
.thumbnail-actions .btn:hover { background: rgba(0, 0, 0, 0.8); }
.editor-item-header { display: flex; align-items: center; padding: 0px 10px; background: var(--bg-section); border-bottom: 1px solid var(--border-color); border-radius: 8px 8px 0px 0px; }
.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, width, margin; overflow: visible !important; transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), width 0.4s cubic-bezier(0.25, 1, 0.5, 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); }
.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 center; border-radius: inherit; opacity: var(--card-bg-opacity,1); transition: background var(--transition-speed) ease; }
.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: translateX(-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: translateX(-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: translateX(-50%) rotate(10deg); }
.preview-card-sticker.pushpin::before { content: ""; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 6px; height: 6px; background: 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, .dialogue-preview-container, .preview-header, .preview-items-container figure, .todo-preview-container, .calendar-preview, .qa-preview, .achievement-preview, .letter-preview { will-change: transform; transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s !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, .dialogue-preview-container: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 { transform: translateY(-4px) scale(1.01); z-index: 5; box-shadow: rgba(0, 0, 0, 0.12) 0px 12px 24px !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: center; gap: 8px; }
.preview-card-title .iconify, .tag-pill .iconify { font-size: 1.1em; line-height: 1; vertical-align: middle; }
.preview-card-content { font-size: var(--g-comp-content-font-size); line-height: inherit; white-space: pre-wrap; font-variant-ligatures: none; overflow-wrap: break-word; text-rendering: geometricprecision !important; width: 100.5% !important; }
.preview-card-content p { margin: 0px; padding: 0px; }
.preview-card-content strong, .preview-card-content b { font-weight: bold; }
.preview-card-content em, .preview-card-content i { font-style: italic; }
.ql-align-center { text-align: center; }
.ql-align-right { text-align: right; }
.ql-align-justify { text-align: justify; }
.ql-indent-1 { padding-left: 2em; }
.ql-indent-2 { padding-left: 4em; }
.ql-indent-3 { padding-left: 6em; }
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ul { padding-left: 1.4em !important; margin: 0.5em 0px !important; list-style-type: disc !important; }
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ol { padding-left: 1.4em !important; margin: 0.5em 0px !important; 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; list-style-image: none !important; margin: 0.1em 0px !important; padding: 0px !important; list-style-type: inherit !important; }
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content li[data-list="bullet"] { list-style-type: disc !important; }
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content li[data-list="ordered"] { list-style-type: decimal !important; }
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ul ul { list-style-type: circle !important; }
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content ul ul ul { list-style-type: square !important; }
.preview-card-inner:not(.is-editing-rich-text) .preview-card-content li::before, .preview-card-inner:not(.is-editing-rich-text) .preview-card-content li::after { content: none !important; display: none !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: 0px !important; line-height: 1 !important; }
.tag-pill .iconify, .tag-pill .custom-svg-icon { 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: auto; 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; }
.preview-items-container figure figcaption strong { display: block; font-weight: 600; margin-bottom: 3px; }
.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: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; 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,0.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: normal; 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: rgb(192, 192, 192) !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 0px !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: rgb(0, 0, 128); color: rgb(255, 255, 255); width: 100%; padding: 2px 6px; font-size: 0.8em; font-weight: bold; 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"]) > .preview-card > .preview-card-inner, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .music-card-preview, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .showcase-card, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .timeline-preview, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .progress-bar-preview, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .rpg-card-preview, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .dialogue-preview-container, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .social-card-preview, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .preview-button, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > figure, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .grid-preview-wrapper, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .stat-block-preview, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .preview-header, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .todo-preview-container, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .calendar-preview, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .qa-preview, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .achievement-preview, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .letter-preview, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .ranking-preview, .apply-global-border:not([data-border-style="pixel"]):not([data-border-style="neo-brutalism"]):not([data-border-style="double-offset"]) > .relationship-preview { border-radius: inherit; box-sizing: border-box; width: 100%; height: 100%; 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: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[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: padding-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[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: bold; }
.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 { display: none !important; }
  .flyout-panel { display: none !important; }
  .mobile-only-visible { display: inline-block !important; }
}
.music-card-preview { display: flex; gap: 15px; padding: 20px; background-color: var(--music-bg-color); border-radius: var(--music-radius); color: var(--music-text-color); position: relative; overflow: hidden; align-items: stretch; min-height: 140px; width: 100%; height: 100%; }
.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-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: bold; 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); }
.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: bold !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 { font-family: 栗壳坚坚体, LikeJianJianTi, "LikeJianJianTi Regular", cursive; 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; }
.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) 0%, 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 0px 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-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; padding: 15px; 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 M 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: bold; font-size: 12px; }
.MP3-ctrl.top { top: 10px; }
.MP3-ctrl.bottom { bottom: 10px; }
.MP3-ctrl.left { left: 10px; }
.MP3-ctrl.right { right: 10px; }
.progress-bar-preview { display: flex; flex-direction: column; gap: 8px; width: 100%; }
.progress-bar-header { display: flex; justify-content: space-between; font-size: 0.9em; color: var(--g-comp-text-color); }
.progress-bar-label { font-weight: 600; }
.progress-bar-value { opacity: 0.8; }
.progress-bar-track { width: 100%; border-radius: 4px; overflow: hidden; }
.progress-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s, 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: 20px; 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: bold; margin-bottom: 15px; z-index: 2; text-align: center; }
.rpg-radar-container { width: 100%; max-width: 240px; aspect-ratio: 1 / 1; position: relative; z-index: 2; }
.rpg-radar-container svg { width: 100%; height: 100%; overflow: visible; }
.rpg-card-preview[data-style="default"] .radar-grid { stroke: rgba(128, 128, 128, 0.3); stroke-width: 1; fill: none; }
.rpg-card-preview[data-style="default"] .radar-axis { stroke: rgba(128, 128, 128, 0.3); stroke-width: 1; }
.rpg-card-preview[data-style="default"] .radar-area { fill: var(--rpg-fill-color); stroke: var(--rpg-stroke-color); stroke-width: 2; }
.rpg-card-preview[data-style="default"] .radar-label { font-size: 12px; fill: var(--rpg-text-color); font-weight: 600; }
.rpg-card-preview[data-style="red"] { 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: skewX(-15deg) rotate(-2deg); box-shadow: rgb(211, 13, 25) 3px 3px 0px; 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="bule"] { background: linear-gradient(160deg, rgb(238, 251, 252) 0%, rgb(196, 233, 250) 100%); 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="bule"]::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="bule"] .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="bule"] .radar-grid { stroke: rgba(0, 183, 246, 0.3); stroke-width: 1; fill: none; }
.rpg-card-preview[data-style="bule"] .radar-area { fill: url("#bule-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="bule"] .radar-label { font-size: 12px; fill: rgb(0, 64, 128); font-weight: 700; }
.timeline-preview { position: relative; padding: 20px 20px 20px 40px; background-color: var(--g-comp-bg-color); border-radius: var(--g-comp-border-radius); 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: 1000; 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); }
#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: white; text-decoration: none; padding: 12px 20px; border-radius: 8px; font-size: 1rem; font-weight: 600; margin-bottom: 20px; transition: background-color var(--transition-short) ease; }
#download-modal-content a:hover { background-color: var(--color-primary-hover); }
.crop-ratios { margin-bottom: 15px; }
.crop-ratios label { margin-right: 10px; font-size: 0.9rem; cursor: pointer; }
.error-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-editor); color: var(--text-primary); padding: 25px; border-radius: 12px; box-shadow: 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: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; color: white; font-size: 1.2rem; backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: opacity 0.3s, 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: 9999; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast-notification { background-color: var(--bg-card); color: var(--text-primary); padding: 12px 18px; border-radius: 8px; box-shadow: 0 4px 12px var(--shadow-medium); border: 1px solid var(--border-color); opacity: 0; transform: translateX(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.9rem; }
.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: white; padding: 4px 6px; font-size: 0.7rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#texture-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
.icon-grid-item { display: flex; align-items: center; justify-content: center; height: 50px; font-size: 1.5rem; color: var(--text-primary); border-radius: 6px; cursor: pointer; transition: background-color var(--transition-short); position: relative; }
.icon-grid-item:hover, .texture-grid-item:hover { background-color: var(--border-color); }
.icon-grid-item .delete-custom-icon-btn { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 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: bold; }
.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; border-bottom: none !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 { border-radius: 16px; min-height: auto; flex-direction: column !important; height: auto !important; max-height: 80vh !important; width: 92% !important; max-width: 480px !important; }
  .modal-sidebar { width: 100%; flex-direction: row; overflow-x: auto; padding: 0px; border-right: none; border-bottom: 1px solid var(--border-color); background: var(--bg-section); scrollbar-width: none; display: flex; flex-shrink: 0; }
  .modal-sidebar::-webkit-scrollbar { display: none; }
  .modal-sidebar .tab-btn { border-left: none; white-space: nowrap; padding: 10px 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: bold; }
  .modal-tab-container { padding: 15px !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: translateX(-50%); background: var(--bg-card); color: var(--text-primary); padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; white-space: nowrap; box-shadow: var(--shadow-medium); opacity: 0; visibility: hidden; transition: opacity var(--transition-short); }
.palette-color:hover .color-tooltip { opacity: 1; visibility: visible; }
#color-context-menu { position: fixed; z-index: 10000; background: var(--bg-editor); border: 1px solid var(--border-color); border-radius: 8px; box-shadow: var(--shadow-medium); padding: 5px; display: none; min-width: 180px; }
#color-context-menu ul { list-style: none; margin: 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: normal; 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: translateX(0px); }
}
@keyframes toast-out { 
  100% { opacity: 0; transform: translateX(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: white; 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: 100; 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; }
  .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: 0px !important; }
  .preview-panel { height: 100%; padding: 20px 10px; overflow-y: auto; font-variant-ligatures: none; letter-spacing: -0.015em !important; }
  body.export-mode .preview-panel { letter-spacing: normal !important; }
  .layer-panel { position: fixed; left: 0px; height: calc(var(--app-height,100vh) - 55px); width: 85%; max-width: 350px; transform: translateX(-100%); border-right: 1px solid var(--border-color); z-index: 200; transition: transform 0.3s ease-in-out; padding-bottom: 20px; top: 0px !important; }
  .layer-panel.is-open { transform: translateX(0px); }
  .inspector-panel { position: fixed; inset: auto 0px 0px; width: 100%; max-width: none; height: 50vh; transform: translateY(100%); border-left: none; border-top: 1px solid var(--border-color); border-radius: 20px 20px 0px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px -10px 40px; z-index: 201; transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); display: flex; flex-direction: column; touch-action: none; max-height: calc(var(--app-height,100vh) - 55px) !important; padding-bottom: 0px !important; }
  .inspector-drag-handle-bar { width: 100%; height: 24px; 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; }
  .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: 100%; 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: translateX(-120%); 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 { display: none; }
  #mobile-simulation-controls .for-mobile-only { display: block; }
  #mobile-simulation-controls .for-desktop-only { display: none; }
  .inspector-panel.is-dragging-slider { opacity: 0.05 !important; pointer-events: none; }
}
@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) 100%); 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; }
.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) 0%, rgba(127, 127, 127, 0) 100%); 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%; }
.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: white; backdrop-filter: blur(4px); }
.showcase-card.ticket-style { background-color: var(--card-bg-color,#ffffff); 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: 80px; 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; }
.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; }
.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: bold; 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; }
.ticket-barcode { display: none !important; }
.preview-header[data-style="id-card-v"] svg.real-barcode { margin-top: auto; opacity: 0.8; mix-blend-mode: multiply; }
.ticket-barcode-wrapper { width: 30px; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.showcase-card.ticket-style svg.real-barcode { position: absolute; top: 50%; left: 50%; 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; }
.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 6px,black 6.5px),radial-gradient(circle at calc(100% - var(--stub-width)) 100%,transparent 6px,black 6.5px); mask-composite: intersect; padding: 0px !important; flex-direction: row !important; background-color: var(--card-bg-color,#ffffff) !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: bold; 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: rgb(210, 180, 140) !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) 0%, rgba(184, 134, 11, 0.1) 40%, rgba(139, 69, 19, 0.3) 100%), radial-gradient(circle at 10% 90%, rgba(255, 255, 210, 0.3) 0%, rgba(184, 134, 11, 0.1) 50%, rgba(139, 69, 19, 0.2) 100%) !important; background-size: 150px 150px, cover, cover !important; background-blend-mode: multiply, overlay, normal !important; box-shadow: 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 M 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="win95"] { overflow: hidden; display: flex; flex-direction: column; background-color: rgb(192, 192, 192) !important; color: rgb(0, 0, 0) !important; border: 2px solid rgb(223, 223, 223) !important; box-shadow: rgb(255, 255, 255) 1px 1px 0px inset, rgb(0, 0, 0) -1px -1px 0px inset, rgb(128, 128, 128) -2px -2px 0px 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: rgb(0, 0, 128); color: rgb(255, 255, 255); padding: 2px 4px; font-family: "Fusion Pixel 12px M latin", Consolas, sans-serif; font-weight: bold; font-size: 14px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; white-space: nowrap; }
.preview-card-inner[data-card-style="win95"] .win95-controls { display: flex; gap: 2px; }
.preview-card-inner[data-card-style="win95"] .win95-btn { width: 16px; height: 14px; background: rgb(192, 192, 192); 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: rgb(128, 128, 128) -1px -1px 0px 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 M 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: bold; border-bottom: 1px dashed rgba(255, 255, 255, 0.2); padding-bottom: 8px; margin-bottom: 10px; }
.preview-card-inner[data-card-style="terminal"] .preview-card-title::before { content: "> "; opacity: 0.6; }
.preview-card-inner[data-card-style="terminal"] .preview-card-content::after { content: "▋"; animation: 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) 0%, rgba(0, 0, 0, 0) 100%); 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: normal; color: rgb(255, 255, 255) !important; }
.showcase-card[data-style="steam"] .showcase-rating { display: none; }
.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: normal; 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; }
.dialogue-preview-container { display: flex; flex-direction: column; gap: 20px; }
.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: bold; color: white; 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-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-avatar-editor { flex-shrink: 0; }
.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-avatar-thumb { width: 100%; height: 100%; object-fit: cover; }
.dialogue-entry-editor .card-drag-handle { cursor: grab; color: var(--text-placeholder); font-size: 1.5rem; padding: 8px 4px; }
.dialogue-editor-content { flex-grow: 1; }
.dialogue-entry-editor .card-delete-btn { flex-shrink: 0; width: 32px; height: 32px; padding: 0px; }
.preview-items-container figure.polaroid-style { background-color: rgb(255, 255, 255); padding: 12px 12px 15px; 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; overflow: visible; display: flex; flex-direction: column; 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; overflow: hidden; background: rgb(238, 238, 238); border: 1px solid rgba(0, 0, 0, 0.05); }
.preview-items-container figure.polaroid-style img { border-radius: 0px; height: 100% !important; }
.preview-items-container figure.polaroid-style figcaption { position: static; margin-top: 5px; 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; }
.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: bold; font-size: 1.05em; margin-bottom: 4px; line-height: 1.2; }
.social-card-preview[data-style="moments"] .social-content { margin-bottom: 8px; line-height: 1.5; white-space: pre-wrap; }
.social-card-preview[data-style="moments"] .social-images-grid { display: grid; gap: 4px; margin-bottom: 10px; width: 100%; max-width: 300px; }
.social-card-preview[data-style="moments"] .social-images-grid[data-count="1"] { grid-template-columns: 1fr; max-width: 200px; }
.social-card-preview[data-style="moments"] .social-images-grid[data-count="1"] .social-img { max-height: 250px; object-fit: cover; }
.social-card-preview[data-style="moments"] .social-images-grid[data-count="2"], .social-card-preview[data-style="moments"] .social-images-grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); }
.social-card-preview[data-style="moments"] .social-images-grid[data-count="3"], .social-card-preview[data-style="moments"] .social-images-grid[data-count="5"], .social-card-preview[data-style="moments"] .social-images-grid[data-count="6"], .social-card-preview[data-style="moments"] .social-images-grid[data-count="7"], .social-card-preview[data-style="moments"] .social-images-grid[data-count="8"], .social-card-preview[data-style="moments"] .social-images-grid[data-count="9"] { grid-template-columns: repeat(3, 1fr); }
.social-img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background-color: rgb(240, 240, 240); cursor: pointer; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.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; }
.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: bold; font-size: 1.1em; }
.social-card-preview[data-style="feed"] .social-handle { font-size: 0.9em; opacity: 0.6; font-weight: normal; }
.social-card-preview[data-style="feed"] .social-images-grid { border-radius: 12px; overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.1); display: grid; gap: 2px; margin-top: 8px; grid-template-columns: repeat(3, minmax(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; }
.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-comment-item { background: var(--bg-input); padding: 8px; border-radius: 4px; margin-bottom: 5px; border: 1px solid var(--border-color); }
#mobile-theme-fab { display: none; position: fixed; top: 85px; right: 15px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-card); border: 1px solid var(--border-color); box-shadow: 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: rgb(255, 215, 0); border-color: rgb(85, 85, 85); }
.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: white; }
.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: white; 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: white; 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; }
@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; }
.preview-card-content .ql-editor p { margin: 0px !important; padding: 0px !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: translate3d(0px, 0px, 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: translateX(-50%) !important; width: auto !important; min-width: 280px !important; max-width: 95vw !important; display: flex !important; flex-wrap: wrap !important; justify-content: center !important; padding: 8px 12px !important; border-radius: 12px !important; background-color: 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-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 0px 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: rgb(192, 192, 192) !important; height: 24px !important; }
.progress-bar-preview[data-style="retro"] .progress-bar-fill { background-size: 100% 100%; border-radius: 0px !important; background-color: rgb(0, 0, 128) !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 M 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: normal; 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: bold; color: rgb(255, 255, 255) !important; }
.timeline-preview[data-style="metro"] .timeline-content { font-weight: bold; font-size: 1.05em; }
.grid-preview-container { display: grid; gap: 10px; width: 100%; }
.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-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; 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", cursive; margin-top: 8px; }
.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-content.column { flex-direction: column; align-items: stretch; gap: 8px; }
.unified-thumb { width: 48px; height: 48px; min-width: 48px; flex-shrink: 0; border-radius: 6px; background: var(--bg-image-thumb); border: 1px solid var(--border-input); overflow: hidden; cursor: pointer; position: relative; }
.unified-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.unified-thumb .placeholder-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: 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: white !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, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0) 100%); }
.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: 4px 6px; font-size: 0.85rem; border: 1px solid var(--border-input); background: var(--bg-input); color: var(--text-primary); border-radius: 4px; text-align: center; font-family: monospace; }
.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: translateX(-50%); cursor: grab; background: var(--color-primary); }
.handle-rot::after { content: ""; position: absolute; top: 10px; left: 50%; width: 1px; height: 15px; background: var(--color-primary); transform: translateX(-50%); z-index: -1; }
.sticker-content { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; font-size: inherit; line-height: 1; white-space: nowrap; }
.sticker-content img { width: 100%; height: 100%; object-fit: contain; }
.sticker-content .iconify, .sticker-content svg { width: 100%; height: 100%; fill: currentcolor; stroke: currentcolor; font-size: inherit; display: block; }
.sticker-content svg.stroked { fill: none; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.custom-svg-icon { 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; }
.dialogue-preview-container[data-style="wechat"] { background-color: rgb(245, 245, 245) !important; padding: 20px 15px !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-avatar { width: 40px; height: 40px; border-radius: 6px !important; box-shadow: none !important; }
.dialogue-preview-container[data-style="wechat"] .dialogue-right .dialogue-speaker { display: none; }
.dialogue-preview-container[data-style="wechat"] .dialogue-left .dialogue-speaker { 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 { 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 { 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::before { top: 14px; border-width: 6px; }
.dialogue-preview-container[data-style="wechat"] .dialogue-left .dialogue-bubble::before { border-right-color: rgb(255, 255, 255) !important; left: -11px; }
.dialogue-preview-container[data-style="wechat"] .dialogue-right .dialogue-bubble::before { border-left-color: rgb(149, 236, 105) !important; right: -11px; }
body.export-mode .cut-line-preview { visibility: hidden !important; opacity: 0 !important; }
.calendar-preview { display: flex; flex-direction: column; width: 100%; height: 100%; background: var(--cal-bg); color: var(--cal-text); border-radius: var(--cal-radius); padding: var(--g-comp-padding); box-sizing: border-box; }
.calendar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; font-weight: bold; font-size: 1.1em; border-bottom: 2px solid transparent; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.cal-day-name { font-size: 0.75em; opacity: 0.6; margin-bottom: 5px; }
.cal-day-cell { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 4px; font-size: 0.9em; position: relative; background: rgba(0, 0, 0, 0.02); }
.cal-day-cell.active { background: var(--cal-accent); color: rgb(255, 255, 255); font-weight: bold; }
.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; }
.calendar-week-list { display: flex; flex-direction: column; gap: 8px; }
.cal-week-item { display: flex; align-items: center; gap: 10px; padding: 8px; background: rgba(0, 0, 0, 0.03); border-radius: 6px; }
.cal-week-label { font-weight: bold; width: 40px; flex-shrink: 0; color: var(--cal-accent); }
.cal-week-content { flex: 1 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: translateX(-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: bold; 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: bold; font-size: 1.1em; line-height: 1; }
.calendar-preview[data-style="cute"] .cal-day-cell.active .cal-num { color: rgb(255, 255, 255); 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: normal; 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 M 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-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: bold; text-transform: uppercase; letter-spacing: 1px; }
.qa-content { font-size: 1.1em; font-weight: 600; line-height: 1.4; }
.qa-answer-img { display: block; max-width: 100%; border-radius: 8px; margin-top: 10px; object-fit: cover; }
.qa-preview[data-style="default"] { background: var(--qa-container-bg); border-radius: var(--qa-radius); overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.05); }
.qa-preview[data-style="default"] .qa-box-q { background: var(--qa-q-bg,rgba(0,0,0,0.03)); color: var(--qa-q-text); border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
.qa-preview[data-style="default"] .qa-box-a { background: var(--qa-a-bg,transparent); color: var(--qa-a-text); }
.qa-preview[data-style="marshmallow"] { gap: 15px; }
.qa-preview[data-style="marshmallow"] .qa-box-q { background: var(--qa-q-bg); color: var(--qa-q-text); border-radius: 16px; box-shadow: 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 0px; }
.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) rgb(128, 128, 128) rgb(128, 128, 128) rgb(223, 223, 223); border-image: initial; box-shadow: rgb(0, 0, 0) 1px 1px 0px; 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, rgb(0, 0, 128), rgb(16, 132, 208)); color: white; padding: 4px 6px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; margin-bottom: 4px; }
.letter-preview[data-style="email98"] .letter-meta-row { display: flex; font-size: 0.8rem; margin-bottom: 2px; align-items: baseline; }
.letter-preview[data-style="email98"] .letter-meta-label { width: 60px; color: var(--letter-text,#444); opacity: 0.8; text-align: right; padding-right: 8px; }
.letter-preview[data-style="email98"] .letter-meta-content { flex: 1 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: bold; letter-spacing: 2px; margin-bottom: 5px; }
.letter-preview[data-style="wax_seal"] .letter-date { font-size: 0.8rem; opacity: 0.6; font-style: italic; }
.letter-preview[data-style="wax_seal"] .letter-body { line-height: 1.8; font-size: 1rem; text-align: justify; }
.letter-preview[data-style="wax_seal"] .letter-footer { margin-top: 20px; text-align: right; font-style: italic; font-weight: bold; }
.letter-preview[data-style="airmail"] { background-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: white; height: 100%; width: 100%; display: flex; flex-direction: column; }
.letter-preview[data-style="airmail"] .letter-stamp-area { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.letter-preview[data-style="airmail"] .letter-stamp { border: 2px dotted rgb(204, 204, 204); padding: 5px 10px; font-size: 0.7rem; color: rgb(204, 204, 204); transform: rotate(-5deg); font-weight: bold; text-transform: uppercase; }
.letter-preview[data-style="airmail"] .letter-address-row { display: flex; font-family: "Courier New", monospace; margin-bottom: 15px; font-size: 0.9rem; border-bottom: 1px dashed rgb(238, 238, 238); padding-bottom: 5px; }
.letter-preview[data-style="airmail"] .letter-label { width: 60px; color: rgb(153, 153, 153); font-weight: bold; }
.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; }
.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: bold; font-size: 1.1rem; line-height: 1.2; margin-bottom: 2px; }
.ach-desc { font-size: 0.85rem; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ach-score { font-size: 0.9rem; font-weight: bold; display: flex; align-items: center; gap: 4px; }
.achievement-preview[data-style="steam"] { background: linear-gradient(to right, rgb(27, 40, 56) 0%, rgb(42, 71, 94) 100%); border: 1px solid rgb(60, 93, 126); border-radius: 2px; font-family: Arial, sans-serif; box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px; }
.achievement-preview[data-style="steam"] .ach-icon-wrapper { border-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 M 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: bold; 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"][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: translateX(-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; box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 6px; 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) 0%, rgba(0, 0, 0, 0.01) 100%); 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 rgba(0,0,0,0.12),0 0 0 4px rgba(var(--g-theme-primary-rgb,0,122,255),0.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-radius: 20px 20px 0px 0px; z-index: 0; transition: border-radius 0.3s, -webkit-mask 0.3s; }
.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: 280px; 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) 0%, rgb(226, 232, 240) 100%); 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: bold; color: rgb(30, 64, 175); letter-spacing: 2px; }
.ticket-flight-no { font-size: 0.9rem; color: rgb(100, 116, 139); font-weight: bold; }
.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: bold; 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: bold; 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: translateX(0px); }
  50% { transform: translateX(5px); }
}
.ticket-details { display: flex; gap: 20px; margin-top: 4px; }
.ticket-detail-item { display: flex; flex-direction: column; gap: 2px; }
.ticket-tags-container { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ticket-tags-container .tag-item { background: rgba(30, 64, 175, 0.1); color: 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: bold; 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: bold; letter-spacing: 1px; }
.ticket-stub-flight { font-size: 0.7rem; opacity: 0.8; letter-spacing: 1px; }
.music-card-preview[data-style="lockscreen"] { flex-direction: column; align-items: center; text-align: center; justify-content: center; padding: 30px 20px; overflow: hidden; text-shadow: 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; }
.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: left; background: rgb(249, 249, 249) !important; }
@keyframes toast-in-left { 
  0% { opacity: 0; transform: translateX(-100%); }
  100% { opacity: 1; transform: translateX(0px); }
}
@keyframes toast-out-left { 
  0% { opacity: 1; transform: translateX(0px); }
  100% { opacity: 0; transform: translateX(-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 0px, 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; }
.dialogue-preview-container[data-style="discord"] { gap: 2px; background-color: rgb(49, 51, 56) !important; color: rgb(219, 222, 225) !important; padding: 10px 16px !important; border-radius: 4px !important; }
.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: normal; }
.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; }
.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: bold; text-transform: uppercase; will-change: transform; -webkit-font-smoothing: antialiased; backface-visibility: hidden; transform: translate3d(0px, 0px, 0px); }
.marquee-text-block { flex-shrink: 0; padding-right: 50px; display: inline-block; }
.marquee-container[data-style="led"] { border: 4px solid rgb(51, 51, 51); box-shadow: rgba(0, 0, 0, 0.8) 0px 0px 10px inset; background-color: rgb(0, 0, 0) !important; }
.marquee-container[data-style="led"] .marquee-content { font-family: "Fusion Pixel 12px M 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: translate3d(0px, 0px, 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 0px 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 M 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; }
.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: bold; font-size: 1.05em; line-height: 1.2; margin-bottom: 2px; }
.rank-desc { font-size: 0.85em; opacity: 0.7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-score { font-weight: bold; font-family: "Fusion Pixel 12px M 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; outline: 2px dashed var(--color-primary) !important; }
.preview-item-wrapper.multi-selected::after { content: "✔"; position: absolute; top: -10px; right: -10px; width: 20px; height: 20px; background: var(--color-primary); color: white; border-radius: 50%; font-size: 12px; display: flex; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 5px; pointer-events: none; }
#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 .workspace-tabs-container, body.native-screenshot-mode .mobile-edit-pencil, body.native-screenshot-mode .preview-overlay, body.native-screenshot-mode #mobile-theme-fab, body.native-screenshot-mode .toast-notification-container, body.native-screenshot-mode .save-status-badge, body.native-screenshot-mode #storage-warning-banner { 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, body.native-screenshot-mode .dialogue-text { -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: bold !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; }
body.native-screenshot-mode .preview-panel { padding: max(40px,env(safe-area-inset-top)) 20px 100px 20px !important; }
body.native-screenshot-mode .preview-wrapper { background-clip: padding-box; 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: "— 双击屏幕任意位置退出预览 —"; display: block; text-align: center; padding: 30px; color: var(--text-secondary); opacity: 0.5; font-size: 13px; width: 100%; }
.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: white; font-size: 0.65rem; padding: 2px 8px; border-radius: 0px 0px 0px 8px; font-weight: bold; }
.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: skewX(-15deg) translateX(10px); }
.theme-swatch.active { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--bg-editor),0 0 0 4px var(--color-primary); }
.theme-label { grid-column: 1 / -1; font-size: 0.85rem; font-weight: bold; color: var(--text-secondary); margin-bottom: 5px; display: flex; align-items: center; gap: 5px; }
.export-menu-list { background: var(--bg-input); border-radius: 12px; border: 1px solid var(--border-color); overflow: hidden; }
.export-menu-item { padding: 12px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; border-bottom: 1px solid var(--border-color); transition: background 0.2s; color: var(--text-primary); text-decoration: none; }
.export-menu-item:last-child { border-bottom: none; }
.export-menu-item:hover { background: var(--bg-editor); }
.export-menu-item .menu-icon { font-size: 1.4rem; color: var(--text-secondary); flex-shrink: 0; display: flex; align-items: center; }
.export-menu-item .text-col { flex: 1 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,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: bold; border-color: transparent; }
.checklist-preview[data-style="tag"] .checklist-item[data-state="checked"] { background-color: var(--accent-color); }
.checklist-preview[data-style="tag"] .checklist-item[data-state="crossed"] { background-color: var(--crossed-color); }
.checklist-preview[data-style="tag"] .checklist-item[data-state="heart"] { background-color: var(--heart-color); }
.checklist-preview[data-style="tag"] .checklist-icon { display: none; }
.checklist-preview[data-style="bingo"] .checklist-grid { gap: 4px; }
.checklist-preview[data-style="bingo"] .checklist-item { aspect-ratio: 1 / 1; flex-direction: column; text-align: center; background-color: var(--chk-item-bg,var(--bg-card)); border: 2px solid var(--border-color); padding: 4px; justify-content: center; }
.checklist-preview[data-style="bingo"] .checklist-icon { margin-right: 0px; margin-bottom: 4px; font-size: 1.5em; }
.checklist-preview[data-style="bingo"] .checklist-item:not([data-state="none"]) { font-weight: bold; background-color: var(--chk-item-bg,var(--bg-input)); }
.checklist-preview[data-style="bingo"] .checklist-item[data-state="checked"] { border-color: var(--accent-color); color: var(--accent-color); }
.checklist-preview[data-style="bingo"] .checklist-item[data-state="crossed"] { border-color: var(--color-danger); color: var(--color-danger); }
.checklist-preview[data-style="bingo"] .checklist-item[data-state="heart"] { border-color: rgb(233, 30, 99); color: rgb(233, 30, 99); }
.container-shape-win95 { position: relative; background-color: rgb(192, 192, 192); border: 2px solid rgb(223, 223, 223) !important; box-shadow: rgb(255, 255, 255) 2px 2px 0px inset, rgb(128, 128, 128) -2px -2px 0px 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, rgb(0, 0, 128), rgb(16, 132, 208)); color: white; font-family: "Fusion Pixel 12px M latin", Consolas, sans-serif; font-weight: bold; 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: rgb(192, 192, 192); color: black; border: 1px outset rgb(255, 255, 255); box-shadow: rgb(0, 0, 0) 1px 1px 0px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; line-height: 16px; z-index: 101; pointer-events: none; }
.container-shape-torn { --mask-torn: radial-gradient(circle at 10px 0,transparent 8px,black 9px) 0 0 / 20px 20px repeat-x,linear-gradient(black 0 0) 0 10px / 100% 100% no-repeat; 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; }
.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); }
#template-library-modal .modal-container { max-width: 900px; height: 80vh; display: flex; flex-direction: column; transition: 0.3s; }
#template-list-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 15px; align-content: start; padding: 5px; overflow-y: auto; flex: 1 1 0%; }
.template-card { border: 1px solid var(--border-color); border-radius: 8px; background: var(--bg-input); display: flex; flex-direction: column; overflow: hidden; }
.template-card-img-wrapper { width: 100%; background: rgb(240, 242, 245); position: relative; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--border-color); }
.template-card-img-wrapper img { width: 100%; display: block; }
@media (min-width: 769px) {
  .template-card-img-wrapper { height: 160px; overflow: hidden; }
  .template-card-img-wrapper img { height: 100%; object-fit: cover; object-position: center top; }
}
@media (max-width: 768px) {
  #template-library-modal .modal-container { width: 95% !important; height: 85vh !important; padding: 15px !important; }
  #template-list-container { grid-template-columns: 1fr !important; gap: 20px !important; padding: 2px !important; }
  .template-card { flex-shrink: 0; height: auto !important; overflow: visible !important; }
  .template-card-img-wrapper { height: auto !important; min-height: 100px; }
  .template-card-img-wrapper img { height: auto !important; object-fit: contain; }
}