:root {
  --ink: #242236;
  --muted: #6f6c7d;
  --purple: #0f7a8a;
  --purple-dark: #0a6270;
  --lavender: #eef8f7;
  --line: #e7e5ed;
  --paper: #fff;
  --bg: #f7f7fa;
  --danger: #c43d4d;
}

* { box-sizing: border-box; }
html, .design-studio-body { margin: 0; width: 100%; min-height: 100%; }
.design-studio-body { color: var(--ink); background: var(--bg); font: 15px/1.5 Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }
h1, h2, h3, p { margin-top: 0; }
h1 { font-size: clamp(2rem, 4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.04em; }
h2 { letter-spacing: -0.025em; }
.button { display: inline-flex; justify-content: center; align-items: center; border: 0; border-radius: 10px; padding: 12px 20px; color: #fff; background: var(--purple); font-weight: 750; box-shadow: 0 5px 15px rgba(15, 122, 138, 0.17); }
.button:hover { background: var(--purple-dark); }
.button-small { padding: 9px 15px; border-radius: 8px; }
.muted { color: var(--muted); }
.design-preset-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 1.25rem; }
.design-preset-card { height: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; display: grid; grid-template-rows: 150px auto auto; gap: 7px; text-align: left; color: var(--ink); box-shadow: 0 6px 18px rgba(20, 28, 38, 0.06); transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.design-preset-card:hover { border-color: var(--purple); transform: translateY(-2px); }
.design-preset-visual { min-height: 150px; display: grid; place-items: center; border-radius: 12px; background: #f2f3f5; overflow: hidden; }
.design-preset-shape { width: min(76%, 98px); max-height: 130px; justify-self: center; display: block; border-radius: 9px; background: linear-gradient(145deg, #dff3f1, #ffffff 55%, #bde6e1); border: 1px solid rgba(15, 122, 138, 0.15); box-shadow: 0 4px 12px rgba(19, 49, 63, 0.12); }
.design-preset-card strong { font-size: 1rem; }
.design-preset-card small { color: var(--muted); }
.design-preset-heading { margin: 2.25rem 0 0; }
.design-video-preset-shape { position: relative; display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #15313f, #0f7a8a); }
.design-video-preset-shape span { font-size: 24px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35)); }

.design-library-page .site-main, .design-new-page .site-main { width: min(1500px, 96vw); }
.design-dashboard, .design-create-shell { padding: 34px 8px 56px; }
.design-dashboard-header { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 30px; }
.design-dashboard-header h1, .design-create-header h1 { margin-bottom: 8px; font-size: clamp(2.2rem, 4vw, 4rem); }
.design-dashboard-header > div > p:last-child, .design-create-header > p:last-child, .custom-design-card p { margin-bottom: 0; color: var(--muted); }
.design-dashboard-eyebrow { margin-bottom: 8px !important; color: var(--purple) !important; font-size: 12px; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; }
.design-dashboard-new { flex: none; gap: 7px; }
.design-dashboard-new span { font-size: 20px; font-weight: 500; }
.design-dashboard-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.library-create-menu { position: relative; }
.library-create-menu summary { list-style: none; cursor: pointer; }
.library-create-menu summary::-webkit-details-marker { display: none; }
.library-create-menu > div { position: absolute; z-index: 20; top: calc(100% + 9px); right: 0; width: 250px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff; box-shadow: 0 16px 36px rgba(25, 29, 38, 0.2); }
.library-create-menu h3 { margin: 0 0 11px; font-size: 16px; }
.library-create-menu form { display: grid; gap: 9px; }
.library-create-menu input[type=text] { min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; }
.library-create-menu input[type=submit] { width: 100%; }
.design-library-nav { position: sticky; z-index: 8; top: 0; margin: -10px 0 38px; padding: 8px; display: flex; gap: 7px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 8px 22px rgba(20, 28, 38, 0.08); backdrop-filter: blur(12px); }
.design-library-nav a { padding: 9px 13px; display: flex; align-items: center; gap: 8px; border-radius: 8px; color: var(--ink); font-size: 13px; font-weight: 800; }
.design-library-nav a:hover { color: var(--purple); background: var(--lavender); }
.design-library-nav span { min-width: 23px; padding: 2px 6px; border-radius: 99px; color: var(--muted); background: #eeeef2; text-align: center; font-size: 10px; }
.design-library-section { margin-bottom: 52px; scroll-margin-top: 70px; }
.design-library-section-heading { margin-bottom: 18px; display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.design-library-section-heading h2 { margin: 0 0 4px; font-size: 25px; }
.design-library-section-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.design-library-empty-row { padding: 27px; border: 1px dashed #cfd1d8; border-radius: 14px; color: var(--muted); background: #fff; text-align: center; }
.design-folder-groups { display: grid; gap: 35px; }
.design-folder-group { padding: 20px; border: 1px solid var(--line); border-radius: 18px; background: #f8f8fb; }
.design-folder-group h3 { margin: 0 0 18px; font-size: 18px; }
.design-folder-group h3 span { color: var(--purple); }
.design-folder-group h3 small { margin-left: 7px; color: var(--muted); font-size: 11px; font-weight: 650; }
.design-project-group { border-color: #b9dcff; background: #f3f9ff; }
.design-dashboard-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 30px 22px; }
.design-dashboard-card { min-width: 0; }
.design-dashboard-preview { position: relative; height: 230px; display: grid; place-items: center; overflow: hidden; border-radius: 15px; background: #edeef1; }
.design-dashboard-preview-link { width: 100%; height: 100%; padding: 20px; display: grid; place-items: center; }
.design-dashboard-preview img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 3px 12px rgba(20, 25, 34, 0.12); }
.design-dashboard-placeholder { width: min(70%, 150px); max-height: 190px; display: grid; place-items: center; color: #767986; background: linear-gradient(145deg, #fff, #dff3f1); border: 1px solid #d8dcdf; border-radius: 5px; box-shadow: 0 3px 12px rgba(20, 25, 34, 0.1); }
.design-dashboard-placeholder span { padding: 8px; font-size: 11px; text-align: center; }
.design-private-badge { position: absolute; z-index: 2; top: 11px; left: 11px; padding: 3px 8px; border-radius: 99px; color: #fff; background: rgba(47, 48, 55, 0.7); font-size: 10px; font-weight: 750; backdrop-filter: blur(6px); }
.design-favorite-badge { position: absolute; z-index: 2; right: 12px; bottom: 11px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; color: #7c3aed; background: rgba(255, 255, 255, 0.95); box-shadow: 0 3px 10px rgba(30, 31, 38, 0.18); font-size: 17px; }
.design-card-menu { position: absolute; z-index: 3; top: 10px; right: 10px; }
.design-card-menu summary { width: 38px; height: 32px; display: grid; place-items: center; list-style: none; border: 1px solid rgba(36, 34, 54, 0.1); border-radius: 9px; background: rgba(255, 255, 255, 0.94); box-shadow: 0 3px 10px rgba(30, 31, 38, 0.12); cursor: pointer; letter-spacing: 2px; }
.design-card-menu summary::-webkit-details-marker { display: none; }
.design-card-menu > div { position: absolute; top: 38px; right: 0; width: 220px; padding: 6px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 14px 30px rgba(30, 31, 38, 0.18); }
.design-card-menu form { margin: 0; }
.design-card-menu a, .design-card-menu button { width: 100%; padding: 8px 9px; display: block; border: 0; border-radius: 6px; color: var(--ink); background: transparent; text-align: left; font-size: 12px; }
.design-card-menu a:hover, .design-card-menu button:hover { color: var(--purple); background: var(--lavender); }
.design-card-menu .design-card-delete { color: var(--danger); }
.design-folder-form { padding: 6px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.design-folder-form input[type=text] { min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: #fff; font-size: 11px; }
.design-folder-form input[type=submit] { width: auto; padding-inline: 8px; color: #fff; background: var(--purple); font-size: 10px; }
.design-dashboard-details { min-width: 0; padding-top: 11px; display: grid; gap: 4px; }
.design-dashboard-details strong, .design-dashboard-details span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-dashboard-details strong { font-size: 15px; }
.design-dashboard-details span { color: var(--muted); font-size: 11px; }
.design-dashboard-details .design-folder-label { color: #6d28d9; font-weight: 750; }
.design-kind-icon { margin-right: 5px; color: var(--purple); font-style: normal; }
.design-dashboard-empty { min-height: 380px; padding: 40px; display: grid; place-items: center; align-content: center; gap: 8px; border: 1px dashed #cfd1d8; border-radius: 18px; background: #fff; text-align: center; }
.design-dashboard-empty > span { color: var(--purple); font-size: 44px; }
.design-dashboard-empty h2, .design-dashboard-empty p { margin-bottom: 4px; }
.design-dashboard-empty p { color: var(--muted); }

.design-create-shell { max-width: 1200px; margin: 0 auto; }
.design-create-header { max-width: 760px; margin-bottom: 38px; }
.design-create-back { display: inline-block; margin-bottom: 30px; color: var(--purple); font-weight: 750; }
.design-create-section-title { margin: 36px 0 -8px; font-size: 20px; }
.design-create-help { margin: 14px 0 -6px; color: var(--muted); }
.design-create-errors { margin-bottom: 28px; }
.custom-design-card { margin-top: 42px; padding: 28px; display: grid; grid-template-columns: minmax(240px, 0.8fr) minmax(440px, 1.2fr); align-items: center; gap: 35px; border: 1px solid #cde5e3; border-radius: 18px; background: linear-gradient(135deg, #fff, #eef8f7); }
.custom-design-card h2 { margin-bottom: 7px; }
.custom-design-form { display: grid; grid-template-columns: minmax(110px, 1fr) 20px minmax(110px, 1fr) auto; align-items: end; gap: 10px; }
.custom-design-form label { position: relative; color: var(--muted); font-size: 11px; font-weight: 700; }
.custom-design-form label span { position: absolute; right: 10px; bottom: 10px; color: #999ca8; }
.custom-design-form input[type=number] { width: 100%; margin-top: 5px; padding: 10px 34px 10px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fff; }
.custom-size-times { padding-bottom: 10px; color: var(--muted); text-align: center; }
.custom-design-form .button { min-height: 43px; padding: 10px 15px; }

.design-studio-flash { position: fixed; z-index: 100; top: 18px; left: 50%; transform: translateX(-50%); padding: 10px 18px; border-radius: 9px; color: #fff; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2); }
.design-studio-flash-notice { background: #242236; }
.design-studio-flash-alert { background: var(--danger); }

.editor { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; background: #1f1e29; }
.editor-header { height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 18px; color: #fff; background: linear-gradient(90deg, #15313f, #0f7a8a); }
.editor-back { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; background: rgba(255, 255, 255, 0.08); font-size: 26px; }
.editor-brand { flex: none; font-size: 19px; font-weight: 850; letter-spacing: -0.04em; color: #fff; white-space: nowrap; }
.editor-primary-actions { min-width: 0; display: flex; align-items: center; gap: 6px; }
.title-input { width: min(300px, 22vw); padding: 8px 11px; border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 8px; color: #172554; background: #fff; box-shadow: 0 2px 8px rgba(4, 31, 42, 0.18); font-weight: 700; }
.title-input:hover, .title-input:focus { border-color: #c4b5fd; outline: 2px solid rgba(196, 181, 253, 0.36); outline-offset: 1px; }
.editor-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.save-status { min-width: 54px; margin-left: 3px; color: #e4fbff; font-size: 12px; white-space: nowrap; }
.toolbar-button { border: 1px solid #69b5ff; border-radius: 7px; padding: 7px 10px; color: #fff; background: #1e90ff; box-shadow: 0 2px 8px rgba(0, 73, 146, 0.28); font-weight: 750; white-space: nowrap; }
.toolbar-button:hover { color: #fff; border-color: #9ccfff; background: #087bed; }
.toolbar-icon-button { min-width: 34px; padding-inline: 8px; font-size: 17px; line-height: 1; }
.toolbar-button-form form { display: inline; }
.file-menu { position: relative; }
.file-menu summary { list-style: none; cursor: pointer; }
.file-menu summary::-webkit-details-marker { display: none; }
.file-menu[open] summary { color: #fff; border-color: #b9dcff; background: #087bed; }
.file-menu-popover { position: absolute; z-index: 30; top: calc(100% + 10px); left: 0; width: 235px; padding: 7px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; box-shadow: 0 18px 42px rgba(10, 20, 35, 0.28); }
.file-menu-popover a, .file-menu-popover button { width: 100%; min-height: 36px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 0; border-radius: 7px; color: var(--ink); background: transparent; text-align: left; font: inherit; font-size: 12px; cursor: pointer; }
.file-menu-popover a:hover, .file-menu-popover button:hover { color: #5b21b6; background: #f2edff; }
.file-menu-popover button span:last-child { max-width: 105px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.file-menu-form { margin: 0; }
.file-menu-separator { height: 1px; margin: 4px 5px; background: var(--line); }
.export-menu { position: relative; }
.export-menu summary { list-style: none; cursor: pointer; }
.export-menu summary::-webkit-details-marker { display: none; }
.export-menu-popover { position: absolute; z-index: 20; top: calc(100% + 8px); right: 0; width: 170px; padding: 7px; display: grid; gap: 3px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 10px; color: var(--ink); background: #fff; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25); }
.export-menu-popover button { padding: 9px 10px; border: 0; border-radius: 7px; color: var(--ink); background: transparent; text-align: left; }
.export-menu-popover button:hover { color: var(--purple); background: var(--lavender); }

.editor-body { min-height: 0; display: grid; grid-template-columns: 74px clamp(280px, 24vw, 340px) minmax(0, 1fr); height: calc(100vh - 60px); height: calc(100dvh - 60px); overflow: hidden; }
.tool-rail { min-height: 0; padding: 10px 7px; overflow-y: auto; background: #262530; }
.tool-rail button { width: 60px; min-height: 66px; padding: 5px 2px; border: 0; border-radius: 8px; color: #d9d7e1; background: transparent; font-size: 11px; line-height: 1.15; }
.tool-rail button:hover { background: #3a3848; }
.tool-rail span { display: block; font-size: 24px; line-height: 28px; }
.tool-panel { min-height: 0; padding: 24px 18px; color: var(--ink); background: #fff; overflow: auto; }
.tool-panel h2 { font-size: 18px; }
.panel-action { width: 100%; margin-bottom: 10px; padding: 17px 12px; border: 1px solid var(--line); border-radius: 8px; text-align: left; background: #fff; }
.panel-action:hover { border-color: var(--purple); }
.panel-action.heading { font-size: 22px; font-weight: 800; }
.panel-action.subheading { font-size: 17px; font-weight: 650; }
.studio-panel-button { width: 100%; margin-bottom: 14px; }
.shape-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shape-grid button { height: 90px; border: 1px solid var(--line); border-radius: 8px; background: #fafafd; }
.upload-button { width: 100%; margin-top: 16px; }
.design-library-list { display: grid; gap: 10px; }
.studio-settings-section { margin-bottom: 18px; }
.studio-size-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
.studio-size-grid label, .studio-settings-section .select-label { font-size: 11px; color: var(--muted); }
.studio-settings-section input { width: 100%; margin-top: 6px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fafafd; color: var(--ink); font-size: 13px; }
.studio-title-setting { margin-bottom: 18px; }
.studio-title-setting input { width: 100%; margin-top: 6px; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fafafd; color: var(--ink); font-size: 13px; }
.resize-preset-list { display: grid; gap: 7px; margin: 15px 0 22px; }
.resize-preset-button { min-width: 0; min-height: 62px; padding: 8px 10px; display: grid; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: #fafafd; text-align: left; }
.resize-preset-button:hover { color: var(--purple); border-color: var(--purple); background: var(--lavender); }
.resize-preset-icon { width: 31px; max-height: 43px; justify-self: center; display: block; border: 1px solid #b8d9d6; border-radius: 3px; background: #dff3f1; }
.resize-preset-button > span:last-child { min-width: 0; display: grid; }
.resize-preset-button strong, .resize-preset-button small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resize-preset-button strong { font-size: 12px; }
.resize-preset-button small { color: var(--muted); font-size: 10px; }
.resize-custom-section { margin-top: 0; }
.resize-status { min-height: 20px; margin: -5px 0 0; color: var(--purple); font-size: 11px; }
.design-library-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fafafd; }
.design-library-card.is-active { border-color: var(--purple); box-shadow: 0 0 0 1px rgba(15, 122, 138, 0.2); }
.design-library-link { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; padding: 10px; align-items: center; }
.design-library-thumb { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: linear-gradient(145deg, #ece9ff, #faf9ff); overflow: hidden; color: var(--muted); font-size: 11px; text-align: center; }
.design-library-thumb img { width: 100%; height: 100%; object-fit: cover; }
.design-library-meta { min-width: 0; display: grid; gap: 4px; }
.design-library-meta strong, .design-library-meta small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.design-library-meta small { color: var(--muted); }

.workspace { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden; background: #e9e9ee; }
.context-bar { min-height: 48px; padding: 7px 14px; display: flex; align-items: center; justify-content: center; gap: 8px; overflow-x: auto; background: #fff; border-bottom: 1px solid #d6d5dc; }
.control-group { flex: none; display: flex; align-items: center; gap: 5px; padding-right: 8px; border-right: 1px solid var(--line); }
.control-group:last-child { border: 0; }
.context-bar button { height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; background: #fff; font-size: 12px; white-space: nowrap; }
.context-bar.is-text-mode { padding-block: 8px; flex-direction: column; overflow-x: visible; }
.context-bar.is-text-mode .object-actions { order: 2; justify-content: center; padding: 2px 0 0; border: 0; }
.rich-text-toolbar { min-width: 0; max-width: 100%; position: relative; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px; padding: 4px 6px; border: 1px solid #d9d6e3; border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(29, 26, 45, 0.12); }
.rich-text-toolbar[hidden] { display: none; }
.rich-text-toolbar > button, .rich-toolbar-menu > summary { min-width: 32px; height: 34px; padding: 5px 8px; display: grid; place-items: center; border: 0; border-radius: 7px; color: var(--ink); background: #fff; font-size: 14px; list-style: none; cursor: pointer; }
.rich-text-toolbar > button:hover, .rich-toolbar-menu > summary:hover, .rich-text-toolbar .format-toggle.active { color: #5b21b6; background: #eee9ff; }
.rich-font-picker { width: 150px; height: 34px; padding: 4px 26px 4px 9px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fff; font-size: 12px; font-weight: 700; }
.font-size-stepper { height: 34px; display: grid; grid-template-columns: 29px 45px 29px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.font-size-stepper button { height: 32px; padding: 0; border: 0; border-radius: 0; font-size: 16px; }
.font-size-stepper input { width: 45px; border: 0; border-inline: 1px solid var(--line); text-align: center; font-size: 12px; font-weight: 750; appearance: textfield; }
.font-size-stepper input::-webkit-inner-spin-button { display: none; }
.text-color-toolbar-button { position: relative; grid-template-rows: 17px 4px; gap: 1px; font-weight: 850; }
.text-color-toolbar-button i { width: 20px; height: 4px; display: block; border-radius: 4px; background: #000; }
.rich-toolbar-word { padding-inline: 11px !important; font-size: 12px !important; font-weight: 750; }
.rich-toolbar-menu { position: relative; }
.rich-toolbar-menu > summary::-webkit-details-marker { display: none; }
.rich-toolbar-menu[open] > summary { color: #5b21b6; background: #eee9ff; }
.rich-toolbar-menu > div { position: absolute; z-index: 40; top: calc(100% + 9px); left: 50%; width: 150px; padding: 6px; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 14px 32px rgba(30, 28, 45, 0.2); transform: translateX(-50%); }
.rich-toolbar-menu > div button { width: 100%; border: 0; text-align: left; }
.transparency-toolbar-menu > div { width: 230px; padding: 12px; }
.transparency-toolbar-menu label { display: grid; grid-template-columns: 1fr auto; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 750; }
.transparency-toolbar-menu input { grid-column: 1 / -1; width: 100%; accent-color: #7c3aed; }
.rich-text-toolbar [data-tooltip] { position: relative; }
.rich-text-toolbar [data-tooltip]::after { content: attr(data-tooltip); pointer-events: none; position: absolute; z-index: 90; top: calc(100% + 7px); left: 50%; padding: 5px 7px; border-radius: 5px; color: #fff; background: rgba(25, 24, 32, 0.96); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); font-size: 10px; font-weight: 700; line-height: 1; white-space: nowrap; opacity: 0; transform: translate(-50%, -3px); transition: opacity 70ms ease, transform 70ms ease; }
.rich-text-toolbar [data-tooltip]:hover::after, .rich-text-toolbar [data-tooltip]:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.copy-style-tool[data-tooltip]::after { right: 0; left: auto; transform: translate(0, -3px); }
.copy-style-tool[data-tooltip]:hover::after, .copy-style-tool[data-tooltip]:focus-visible::after { transform: translate(0, 0); }
.copy-style-tool svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.danger-text { color: var(--danger); }

.text-color-library { padding-bottom: 36px; }
.text-color-heading { margin-bottom: 15px; display: flex; align-items: center; justify-content: space-between; }
.text-color-heading h2 { margin: 0; }
.text-color-heading button { width: 32px; height: 32px; border: 0; border-radius: 7px; color: var(--ink); background: transparent; font-size: 26px; line-height: 1; }
.text-color-heading button:hover { background: #f1f0f5; }
.text-color-search { height: 45px; margin-bottom: 22px; padding: 0 12px; display: flex; align-items: center; gap: 8px; border: 1px solid #d7d6df; border-radius: 10px; background: #fff; }
.text-color-search span { font-size: 25px; line-height: 1; transform: rotate(-20deg); }
.text-color-search input { min-width: 0; flex: 1; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 12px; }
.text-color-section { margin-bottom: 24px; }
.text-color-section h3 { margin: 0 0 11px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.text-color-section h3 small { color: var(--muted); font-size: 9px; font-weight: 650; }
.text-color-grid, .text-color-custom-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px 7px; }
.text-color-swatch, .custom-color-wheel { position: relative; width: 100%; aspect-ratio: 1; min-width: 0; display: grid; place-items: center; border: 1px solid rgba(36, 34, 54, 0.12); border-radius: 50%; background: var(--swatch); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25); }
.text-color-swatch:hover, .text-color-swatch.is-selected { outline: 3px solid #7c3aed; outline-offset: 2px; transform: scale(1.04); }
.text-color-swatch[hidden] { display: none; }
.text-color-swatch.is-gradient { border-color: rgba(36, 34, 54, 0.18); }
.gradient-text-settings { margin-top: 16px; padding: 13px; display: grid; gap: 12px; border: 1px solid #d9d6e3; border-radius: 12px; background: #faf9fd; }
.gradient-text-settings[hidden] { display: none; }
.gradient-text-settings h4 { margin: 0; font-size: 13px; }
.gradient-text-settings > label, .gradient-color-pair label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; color: var(--ink); font-size: 11px; font-weight: 750; }
.gradient-text-settings > label input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: #7c3aed; }
.gradient-text-settings output { color: var(--muted); font-variant-numeric: tabular-nums; }
.gradient-color-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.gradient-color-pair label { grid-template-columns: 1fr; }
.gradient-color-pair input { width: 100%; height: 34px; padding: 2px; border: 1px solid var(--line); border-radius: 7px; background: #fff; }
.custom-color-wheel { overflow: hidden; border: 0; color: #fff; background: conic-gradient(#ef4444, #facc15, #22c55e, #06b6d4, #3b82f6, #a855f7, #ec4899, #ef4444); font-size: 21px; font-weight: 700; cursor: pointer; }
.custom-color-wheel::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: #fff; }
.custom-color-wheel span { position: relative; z-index: 1; color: var(--ink); }
.custom-color-wheel input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dynamic-color-grid .muted { grid-column: 1 / -1; margin: 0; font-size: 11px; }
.canvas-scroll { min-width: 0; min-height: 0; position: relative; overflow: auto; overscroll-behavior: contain; }
.canvas-pasteboard { box-sizing: border-box; width: max-content; min-width: 100%; min-height: 100%; padding: 260px; display: grid; place-items: center; background: #e9e9ee; }
.editor.is-loading .canvas-stage { visibility: hidden; }
.editor.is-loading .canvas-scroll::after { content: "Loading design…"; position: absolute; z-index: 20; inset: 0; display: grid; place-items: center; color: #686675; background: #e9e9ee; font-size: 13px; font-weight: 750; letter-spacing: 0.02em; }
.canvas-stage { flex: none; position: relative; margin: 0; background: #fff; box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2); }
.canvas-stage.is-edge-snapping { box-shadow: inset 0 0 0 6px #1e90ff, 0 0 0 4px #1e90ff, 0 8px 34px rgba(30, 144, 255, 0.34); }
.canvas-stage.is-edge-snapping::before { content: attr(data-snap-label); pointer-events: none; position: absolute; z-index: 20; top: 12px; left: 50%; padding: 7px 11px; border-radius: 7px; color: #fff; background: #087bed; box-shadow: 0 4px 12px rgba(0, 73, 146, 0.25); font-size: 11px; font-weight: 850; transform: translateX(-50%); }
.overflow-preview { pointer-events: none; position: absolute; z-index: 8; box-sizing: border-box; border: 2px solid #1e90ff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.82); }
.overflow-preview[hidden] { display: none; }
.overflow-preview img { width: 100%; height: 100%; display: block; opacity: 0.28; object-fit: fill; }
.overflow-handle { position: absolute; width: 14px; height: 14px; border: 2px solid #087bed; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0, 73, 146, 0.3); transform: translate(-50%, -50%); }
.overflow-handle[data-corner] { pointer-events: auto; cursor: nwse-resize; }
.overflow-handle[data-side] { pointer-events: auto; }
.overflow-handle[data-side="ml"], .overflow-handle[data-side="mr"] { cursor: ew-resize; }
.overflow-handle[data-side="mt"], .overflow-handle[data-side="mb"] { cursor: ns-resize; }
.overflow-handle.handle-tr, .overflow-handle.handle-bl { cursor: nesw-resize; }
.overflow-handle.handle-tl { top: 0; left: 0; }
.overflow-handle.handle-tr { top: 0; left: 100%; }
.overflow-handle.handle-bl { top: 100%; left: 0; }
.overflow-handle.handle-br { top: 100%; left: 100%; }
.overflow-handle.handle-t, .overflow-handle.handle-b { width: 22px; height: 8px; border-radius: 4px; }
.overflow-handle.handle-l, .overflow-handle.handle-r { width: 8px; height: 22px; border-radius: 4px; }
.overflow-handle.handle-t { top: 0; left: 50%; }
.overflow-handle.handle-r { top: 50%; left: 100%; }
.overflow-handle.handle-b { top: 100%; left: 50%; }
.overflow-handle.handle-l { top: 50%; left: 0; }
.overflow-rotate { pointer-events: auto; position: absolute; top: calc(100% + 34px); left: 50%; width: 34px; height: 34px; padding: 0; display: grid; place-items: center; border: 2px solid #087bed; border-radius: 50%; color: #172554; background: #fff; box-shadow: 0 2px 7px rgba(0, 73, 146, 0.3); font-size: 21px; font-weight: 800; line-height: 1; transform: translateX(-50%); cursor: grab; }
.overflow-rotate:active { cursor: grabbing; }
.overflow-rotate::before { content: ""; position: absolute; bottom: 100%; left: 50%; width: 2px; height: 34px; background: #1e90ff; transform: translateX(-50%); }
.overflow-rotate [data-rotation-degrees] { position: absolute; top: calc(100% + 7px); left: 50%; min-width: 42px; padding: 5px 7px; border-radius: 6px; color: #fff; background: rgba(23, 37, 84, 0.94); font-size: 11px; line-height: 1; transform: translateX(-50%); }
.overflow-rotate [data-rotation-degrees]:empty { display: none; }
.canvas-stage.is-library-drag-over { box-shadow: 0 0 0 4px #38bdf8, 0 5px 30px rgba(0, 0, 0, 0.2); }
.canvas-stage.is-library-drag-over::after { content: "Drop to upload and add to canvas"; pointer-events: none; position: absolute; z-index: 12; inset: 18px; display: grid; place-items: center; border: 3px dashed #0ea5e9; border-radius: 14px; color: #075985; background: rgba(224, 242, 254, 0.88); font-size: clamp(14px, 2vw, 26px); font-weight: 850; text-align: center; }
.canvas-stage.is-overflow-editing { background: #c9c9d1; box-shadow: inset 0 0 0 1px #92909e, 0 5px 30px rgba(0, 0, 0, 0.2); }
.export-render-cover { pointer-events: none; position: absolute; z-index: 8; inset: 0; width: 100%; height: 100%; object-fit: fill; background: #fff; }
.canvas-container { position: absolute !important; left: 0; top: 0; z-index: 1; }
.zoom-bar { min-width: 0; min-height: 46px; padding: 7px 18px; display: flex; align-items: center; justify-content: end; gap: 14px; overflow-x: auto; background: #fff; border-top: 1px solid #d6d5dc; font-size: 12px; scrollbar-width: thin; }
.zoom-control { min-width: 190px; display: grid; grid-template-columns: auto minmax(100px, 1fr) 42px; align-items: center; gap: 8px; color: var(--muted); font-weight: 700; }
.zoom-control input[type=range] { width: 100%; height: 18px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.zoom-control input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 999px; background: #d7e8ee; }
.zoom-control input[type=range]::-webkit-slider-thumb { width: 17px; height: 17px; margin-top: -6px; appearance: none; border: 2px solid #fff; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 0 1px #0783a5, 0 2px 5px rgba(0, 0, 0, 0.2); }
.zoom-control input[type=range]::-moz-range-track { height: 5px; border: 0; border-radius: 999px; background: #d7e8ee; }
.zoom-control input[type=range]::-moz-range-thumb { width: 15px; height: 15px; border: 2px solid #fff; border-radius: 50%; background: #38bdf8; box-shadow: 0 0 0 1px #0783a5, 0 2px 5px rgba(0, 0, 0, 0.2); }
.zoom-control input[type=range]:focus-visible { outline: 2px solid #0783a5; outline-offset: 2px; border-radius: 999px; }
.zoom-control output { color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; }
.canvas-size { flex: none; font-variant-numeric: tabular-nums; }
.upload-progress { min-height: 24px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.upload-drop-zone { padding: 18px 13px; display: grid; place-items: center; gap: 7px; border: 2px dashed #aaa6bb; border-radius: 14px; background: #fafafd; text-align: center; transition: 150ms ease; }
.upload-drop-zone:hover, .upload-drop-zone:focus-visible, .upload-drop-zone.is-drag-over { outline: 0; border-color: var(--purple); background: var(--lavender); box-shadow: 0 0 0 4px rgba(15, 122, 138, 0.12); transform: translateY(-1px); }
.upload-drop-zone strong { color: var(--ink); font-size: 13px; }
.upload-drop-zone small { color: var(--muted); font-size: 10px; }
.upload-drop-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--purple); font-size: 23px; font-weight: 800; }
.upload-drop-zone .upload-button { width: auto; margin-top: 4px; padding: 8px 15px; cursor: pointer; }
.asset-library-item.is-new { animation: uploadedAssetArrival 700ms ease both; }
@keyframes uploadedAssetArrival { from { opacity: 0; transform: translateY(-8px) scale(.92); } to { opacity: 1; transform: none; } }
.panel-section-title { margin: 24px 0 9px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.panel-hint { margin: -3px 0 10px; color: var(--muted); font-size: 12px; }
.draggable-library-item { cursor: grab; }
.draggable-library-item:active { cursor: grabbing; }
.element-grid { grid-template-columns: repeat(3, 1fr); gap: 7px; }
.element-grid button { height: 72px; padding: 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--ink); }
.element-grid button:hover, .grid-library button:hover { color: var(--purple); border-color: var(--purple); background: var(--lavender); }
.element-grid button span { font-size: 26px; line-height: 30px; }
.element-grid button small { max-width: 62px; overflow: hidden; text-overflow: ellipsis; font-size: 10px; white-space: nowrap; }
.frame-category-title { margin: 14px 0 7px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.frames-grid { margin-bottom: 4px; }
.frames-grid button span { position: relative; width: 36px; height: 31px; display: grid; place-items: center; color: #817b9a; border: 2px solid currentColor; font-size: 0; line-height: 1; background: linear-gradient(#bceaff 0 58%, #b6d96c 59% 75%, #78a900 76%); }
.frames-grid .frame-kind-rounded span { border-radius: 8px; }
.frames-grid .frame-kind-circle span { width: 32px; height: 32px; border-radius: 50%; }
.frames-grid .frame-kind-oval span { border-radius: 50%; }
.frames-grid .frame-kind-portrait span, .frames-grid .frame-kind-phone span, .frames-grid .frame-kind-tablet span { width: 24px; height: 36px; }
.frames-grid .frame-kind-phone span { border: 4px solid #34313f; border-radius: 8px; }
.frames-grid .frame-kind-tablet span { width: 28px; border: 4px solid #53505e; border-radius: 5px; }
.frames-grid .frame-kind-phone span::before { content: ""; position: absolute; top: -2px; left: 50%; width: 11px; height: 4px; border-radius: 0 0 4px 4px; background: #34313f; transform: translateX(-50%); }
.frames-grid .frame-kind-tablet span::after { content: ""; position: absolute; top: -3px; left: 50%; width: 3px; height: 3px; border-radius: 50%; background: #fff; transform: translateX(-50%); }
.frames-grid .frame-kind-monitor span, .frames-grid .frame-kind-laptop span, .frames-grid .frame-kind-browser span { border: 4px solid #34313f; border-radius: 3px; }
.frames-grid .frame-kind-monitor span::before { content: ""; position: absolute; left: 50%; bottom: -10px; width: 4px; height: 8px; background: #34313f; transform: translateX(-50%); }
.frames-grid .frame-kind-monitor span::after { content: ""; position: absolute; left: 50%; bottom: -12px; width: 18px; height: 3px; border-radius: 3px; background: #34313f; transform: translateX(-50%); }
.frames-grid .frame-kind-laptop span::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 46px; height: 6px; border-radius: 1px 1px 5px 5px; background: #34313f; transform: translateX(-50%) perspective(20px) rotateX(35deg); }
.frames-grid .frame-kind-browser span::before { content: "•••"; position: absolute; top: -4px; left: 2px; width: calc(100% - 4px); height: 8px; color: #fff; background: #4f55a4; font-size: 7px; line-height: 6px; text-align: left; letter-spacing: 0; }
.frames-grid .frame-kind-film span { border-width: 6px 4px; border-color: #171921; }
.frames-grid .frame-kind-landscape span, .frames-grid .frame-kind-monitor span, .frames-grid .frame-kind-laptop span { width: 42px; height: 26px; }
.frames-grid .frame-kind-monitor span { border: 4px solid #34313f; border-radius: 3px; }
.frames-grid .frame-kind-laptop span { border: 3px solid #5d596a; border-bottom-width: 6px; }
.frames-grid .frame-kind-arch span { height: 36px; border-radius: 18px 18px 2px 2px; }
.frames-grid .frame-kind-capsule span { width: 42px; height: 24px; border-radius: 99px; }
.frames-grid .frame-kind-diamond span { width: 28px; height: 28px; transform: rotate(45deg); }
.frames-grid .frame-kind-hexagon span { border: 0; background: #817b9a; clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%); }
.frames-grid .frame-kind-ticket span { border-radius: 5px; border-style: dashed; }
.frames-grid .frame-kind-browser span { width: 42px; border-width: 5px 2px 2px; border-color: #555ca5; border-radius: 4px; }
.frames-grid .frame-kind-film span { border: 5px solid #24232d; border-radius: 3px; }
.grid-library { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.grid-library button { padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fafafd; font-size: 10px; }
.grid-icon { width: 72px; height: 48px; margin: 0 auto 5px; display: grid; gap: 3px; }
.grid-icon i { display: block; background: #bdb9cd; border-radius: 2px; }
.grid-two { grid-template-columns: 1fr 1fr; }
.grid-three { grid-template-columns: repeat(3, 1fr); }
.grid-quad { grid-template: 1fr 1fr / 1fr 1fr; }
.grid-hero { grid-template: 1fr 1fr / 2fr 1fr; }
.grid-hero i:first-child { grid-row: 1 / 3; }
.grid-six { grid-template: repeat(2, 1fr) / repeat(3, 1fr); }
.grid-strip { grid-template-columns: repeat(4, 1fr); }
.grid-filmstrip { padding: 4px 12px; grid-template-rows: repeat(3, 1fr); background: #24232d; }
.grid-filmstrip i { background: #d7d5df; }
.context-bar .font-picker { max-width: 160px; }
.asset-library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.asset-library-item { padding: 6px; border: 1px solid var(--line); border-radius: 10px; background: #fafafd; display: grid; gap: 6px; color: var(--ink); text-align: left; }
.asset-library-item:hover { border-color: var(--purple); background: var(--lavender); }
.asset-library-item img, .asset-library-item video { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 8px; background: #ece9f2; }
.asset-library-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); }
.stock-search-form { display: grid; gap: 7px; }
.stock-search-form label { margin-top: 5px; color: var(--muted); font-size: 11px; font-weight: 700; }
.stock-search-form input, .stock-search-form select { width: 100%; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: #fafafd; }
.stock-search-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
.stock-search-row button, .stock-pagination button { padding: 8px 10px; border: 0; border-radius: 8px; color: #fff; background: var(--purple); font-weight: 700; }
.stock-search-row button:hover, .stock-pagination button:hover { background: var(--purple-dark); }
.stock-status { min-height: 20px; margin: 14px 0 10px; color: var(--muted); font-size: 12px; }
.stock-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.stock-result-card { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fafafd; }
.stock-result-image { position: relative; width: 100%; padding: 0; display: block; overflow: hidden; border: 0; background: #ece9f2; }
.stock-result-image:hover img { transform: scale(1.035); }
.stock-result-image:disabled { cursor: wait; opacity: 0.65; }
.stock-result-image img { width: 100%; height: 105px; display: block; object-fit: cover; transition: transform 160ms ease; }
.stock-video-badge { position: absolute; right: 6px; bottom: 6px; padding: 3px 6px; border-radius: 5px; color: #fff; background: rgba(0, 0, 0, 0.72); font-size: 10px; font-weight: 750; }
.stock-result-details { min-width: 0; padding: 7px; display: grid; gap: 3px; }
.stock-result-details small { overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.stock-result-details a { overflow: hidden; color: var(--purple); font-size: 9px; text-decoration: underline; text-overflow: ellipsis; white-space: nowrap; }
.stock-pagination { margin-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 7px; font-size: 11px; }
.stock-pagination[hidden] { display: none; }
.stock-pagination button:disabled { cursor: default; opacity: 0.4; }
.pixabay-credit { margin-top: 16px; color: var(--muted); font-size: 10px; text-align: center; }
.pixabay-credit a { color: var(--purple); text-decoration: underline; }
.stock-configuration-notice { padding: 13px; border: 1px solid #efd58b; border-radius: 10px; color: #5d4710; background: #fff9e8; font-size: 12px; }
.stock-configuration-notice p { margin: 5px 0 0; }
.stock-configuration-notice code { font-size: 11px; }
.safe-zone { pointer-events: none; position: absolute; z-index: 3; inset: 5%; border: 2px dashed rgba(230, 70, 96, 0.72); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.53); }
.safe-zone[hidden] { display: none; }
.safe-zone.is-transient { border-width: 3px; border-color: #1e90ff; background: rgba(30, 144, 255, 0.055); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.88), 0 0 18px rgba(30, 144, 255, 0.25); }
.safe-zone.is-transient::before { color: #087bed; content: "SAFE ZONE"; }
.safe-zone::before { content: "SAFE ZONE"; position: absolute; top: 6px; left: 8px; padding: 2px 5px; color: #d53e58; background: rgba(255, 255, 255, 0.8); font: 700 10px/1 sans-serif; letter-spacing: 0.08em; }
.snap-guide { pointer-events: none; position: absolute; z-index: 4; background: #1e90ff; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.75); }
.guide-v { top: 0; bottom: 0; width: 2px; }
.guide-h { left: 0; right: 0; height: 2px; }
.safe-toggle { margin-right: auto; display: flex; align-items: center; gap: 5px; }
.shortcut-hint { color: var(--muted); }
.inspector-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.eyebrow { margin-bottom: 10px; color: var(--purple); font-size: 12px; font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; }
.inspector-heading .eyebrow { margin: 0 0 3px; }
.inspector-heading h2 { margin: 0; font-size: 21px; }
.selection-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--purple); box-shadow: 0 0 0 5px var(--lavender); }
.inspector-section { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.inspector-section h3 { margin: 0 0 14px; color: var(--muted); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; }
.color-control { height: 42px; margin-bottom: 6px; padding: 0 10px; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 8px; background: #fafafd; }
.color-control label { font-size: 12px; font-weight: 650; }
.color-control input { width: 30px; height: 26px; padding: 0; border: 0; background: none; }
.slider-field { margin: 15px 0; }
.slider-field > div:first-child { margin-bottom: 7px; display: flex; justify-content: space-between; align-items: center; }
.slider-field label { font-size: 12px; font-weight: 650; }
.slider-field output { color: var(--muted); font-size: 11px; }
.slider-inputs { display: grid; grid-template-columns: minmax(0, 1fr) 58px; align-items: center; gap: 9px; }
.slider-inputs input[type=range] { width: 100%; accent-color: var(--purple); }
.slider-inputs input[type=number], .position-grid input { width: 100%; padding: 7px; border: 1px solid var(--line); border-radius: 7px; background: #fafafd; font-size: 12px; }
.position-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.position-grid label { font-size: 11px; color: var(--muted); }
.position-grid input { margin-top: 4px; color: var(--ink); }
.select-label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.select-label select { width: 100%; padding: 9px; border: 1px solid var(--line); border-radius: 8px; background: #fafafd; color: var(--ink); font-size: 12px; }
.text-inspector .select-label + .select-label { margin-top: 12px; }
.effect-outline-heading { margin-top: 22px !important; padding-top: 18px; border-top: 1px solid var(--line); }
.effect-card-library { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.effect-card { min-width: 0; min-height: 96px; padding: 7px 3px; display: grid; grid-template-rows: 58px auto; place-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 12px; color: var(--ink); background: #fff; }
.effect-card:hover, .effect-card.is-active { color: var(--purple); border-color: #8b5cf6; background: #faf8ff; box-shadow: inset 0 0 0 2px #8b5cf6; }
.effect-card i { position: relative; display: grid; place-items: center; color: #7c3aed; font: 800 29px/1 Arial, sans-serif; font-style: normal; letter-spacing: -4px; }
.effect-card span { max-width: 72px; overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.effect-card-shadow i { text-shadow: 7px 8px 8px rgba(76, 29, 149, .38); }
.effect-card-glow i { text-shadow: 0 0 10px #8b5cf6, 0 0 18px #c4b5fd; }
.effect-card-echo i { text-shadow: 5px 5px #c4b5fd, 10px 10px #e9d5ff; }
.effect-card-outline i { color: #fff; -webkit-text-stroke: 2px #7c3aed; }
.effect-card-background i { padding: 7px 9px; border-radius: 7px; background: #d8b4fe; }
.effect-card-splice i { color: #fff; -webkit-text-stroke: 2px #7c3aed; text-shadow: 5px 5px #c4b5fd; }
.effect-card-hollow i { color: transparent; -webkit-text-stroke: 2px #7c3aed; }
.effect-card-neon i, .effect-card-neonLights i, .effect-card-aerobics i { color: #fff; -webkit-text-stroke: 1px #c026d3; text-shadow: 0 0 6px #e879f9, 0 0 13px #d946ef; }
.effect-card-glitch i, .effect-card-tvStatic i { color: #111827; text-shadow: -3px 0 #00e5ff, 3px 0 #ff00b8; }
.effect-card-seventies i { color: #f59e0b; text-shadow: 3px 4px #7c2d12; }
.effect-card-sciFi i { color: #d9f99d; text-shadow: 0 0 7px #65a30d; }
.effect-card-screenprint i { color: transparent; -webkit-text-stroke: 1px #9d174d; text-shadow: 5px 5px rgba(236, 72, 153, .35); }
.effect-card-western i { color: #f59e0b; -webkit-text-stroke: 1px #7c2d12; text-shadow: 2px 3px #78350f; }
.effect-card-graffiti i { color: #f0fdf4; -webkit-text-stroke: 3px #14532d; }
.effect-card-bubble i { color: #67e8f9; -webkit-text-stroke: 3px #155e75; }
.effect-card-none i { color: #a1a1aa; text-decoration: line-through; }
.effect-settings-title { margin: 18px 0 5px; color: var(--ink); font-size: 13px; }
.effect-category-heading { margin-top: 23px !important; }
.effect-slider-stepper { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 8px; }
.effect-slider-stepper > input[type=range] { width: 100%; accent-color: #8b5cf6; }
.effect-slider-stepper > span { height: 38px; display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.effect-slider-stepper button { height: 100%; padding: 0; border: 0; color: var(--ink); background: transparent; font-size: 19px; }
.effect-slider-stepper button:hover { color: #fff; background: #8b5cf6; }
.effect-slider-stepper input[type=number] { width: 100%; min-width: 0; padding: 0; border: 0; color: var(--ink); background: transparent; text-align: center; -moz-appearance: textfield; }
.effect-slider-stepper input::-webkit-inner-spin-button { appearance: none; }
.effect-color-control { height: 48px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700; }
.effect-color-control input { width: 38px; height: 38px; padding: 0; overflow: hidden; border: 2px solid #fff; border-radius: 50%; background: none; box-shadow: 0 0 0 1px var(--line); }
.animation-library { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.animation-library button { min-width: 0; min-height: 72px; padding: 7px 3px; display: grid; place-items: center; gap: 4px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: #fafafd; font-size: 10px; }
.animation-library button:hover, .animation-library button.is-active { color: var(--purple); border-color: var(--purple); background: var(--lavender); box-shadow: inset 0 0 0 1px var(--purple); }
.animation-library i { position: relative; width: 28px; height: 24px; display: block; border-radius: 6px; background: linear-gradient(135deg, #c4b5fd, #7c3aed); }
.animation-library [data-animation-kind="rise"] i::after { content: "↑"; position: absolute; right: -13px; color: #7c3aed; font: 800 17px/24px sans-serif; }
.animation-library [data-animation-kind="pan"] i::after, .animation-library [data-animation-kind="drift"] i::after { content: "→"; position: absolute; right: -14px; color: #7c3aed; font: 800 17px/24px sans-serif; }
.animation-library [data-animation-kind="fade"] i { background: linear-gradient(90deg, #ede9fe, #7c3aed); }
.animation-library [data-animation-kind="pop"] i, .animation-library [data-animation-kind="pulse"] i { box-shadow: 0 0 0 5px #ddd6fe, 0 0 0 9px #f3f0ff; }
.animation-library [data-animation-kind="neon"] i { box-shadow: 0 0 12px #7c3aed; }
.animation-library [data-animation-kind="none"] i { background: linear-gradient(135deg, transparent 44%, #ef4444 45% 55%, transparent 56%); border: 1px solid var(--line); }
.animation-direction { margin-top: 12px; }
.animation-preview { margin-top: 14px; text-align: center; }
.canvas-stage.is-frame-editing { box-shadow: 0 0 0 4px rgba(244, 114, 233, 0.3), 0 5px 30px rgba(0, 0, 0, 0.2); }
.format-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; margin: 12px 0; }
.format-row button { height: 34px; border: 1px solid var(--line); border-radius: 7px; background: #fafafd; }
.format-row button:hover, .format-row button.active { color: #fff; border-color: var(--purple); background: var(--purple); }

.video-template-action { margin-top: 10px; text-align: center; font-weight: 700; }
.video-timeline { position: relative; height: 190px; min-height: 126px; padding: 14px 14px 10px; display: grid; grid-template-rows: auto 28px minmax(38px, 1fr) auto; color: #ebeaf2; background: #24232d; border-top: 1px solid #3c3a48; overflow: hidden; }
.video-timeline[hidden] { display: none; }
.timeline-resize-handle { position: absolute; z-index: 4; top: 0; left: 0; width: 100%; height: 12px; padding: 0; border: 0; background: transparent; cursor: ns-resize; touch-action: none; }
.timeline-resize-handle span { position: absolute; top: 4px; left: 50%; width: 54px; height: 4px; border-radius: 99px; background: #696674; transform: translateX(-50%); }
.timeline-resize-handle:hover span, .timeline-resize-handle:focus-visible span { background: #38bdf8; }
.timeline-toolbar { display: grid; grid-template-columns: 34px 84px minmax(120px, 1fr); align-items: center; gap: 9px; margin-bottom: 8px; }
.timeline-toolbar button { width: 32px; height: 28px; border: 1px solid #555261; border-radius: 6px; color: #fff; background: #35333f; }
.timeline-toolbar output { font-size: 11px; font-variant-numeric: tabular-nums; }
.timeline-toolbar input { width: 100%; accent-color: #38bdf8; }
.timeline-ruler { position: relative; height: 28px; margin-left: 116px; border-bottom: 1px solid #514f5c; }
.timeline-ruler-mark { position: absolute; top: 0; bottom: 0; width: 1px; color: #aaa8b5; transform: translateX(-0.5px); }
.timeline-ruler-mark i { position: absolute; bottom: 0; width: 1px; height: 8px; background: #777482; }
.timeline-ruler-mark small { position: absolute; top: 0; left: 4px; font-size: 9px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.timeline-ruler-mark:last-child small { left: auto; right: 4px; }
.timeline-snap-guide { pointer-events: none; position: absolute; z-index: 3; top: 50px; bottom: 10px; width: 1px; background: #f472e9; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2); }
.timeline-snap-guide[hidden] { display: none; }
.timeline-tracks { min-height: 0; display: grid; align-content: start; gap: 5px; padding: 5px 0; overflow-x: hidden; overflow-y: scroll; scrollbar-gutter: stable; scrollbar-color: #7c7889 #292832; scrollbar-width: auto; }
.timeline-tracks::-webkit-scrollbar { width: 13px; }
.timeline-tracks::-webkit-scrollbar-track { border-radius: 8px; background: #292832; }
.timeline-tracks::-webkit-scrollbar-thumb { border: 3px solid #292832; border-radius: 8px; background: #7c7889; }
.timeline-row { min-height: 32px; display: grid; grid-template-columns: 110px minmax(0, 1fr) 30px; gap: 6px; }
.timeline-row-label { min-width: 0; padding: 4px 7px; overflow: hidden; border: 1px solid #4b4956; border-radius: 5px; color: #d7d5df; background: #302f39; font-size: 10px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.timeline-row-label.is-active { color: #fff; border-color: #38bdf8; }
.timeline-lane { position: relative; min-width: 0; border-radius: 5px; background: repeating-linear-gradient(90deg, #302f39 0, #302f39 calc(10% - 1px), #45434f 10%); }
.timeline-track { position: absolute; top: 2px; height: 28px; min-width: 18px; display: grid; grid-template-columns: 9px minmax(0, 1fr) 9px; overflow: hidden; border: 1px solid #43aeb9; border-radius: 5px; color: #eaffff; background: #0f6f7c; }
.timeline-track.is-active { border-color: #fff; box-shadow: 0 0 0 1px #38bdf8; background: #1394a5; }
.timeline-add-layer { width: 28px; min-width: 28px; height: 28px; align-self: center; padding: 0; border: 1px solid #666274; border-radius: 50%; color: #fff; background: #3a3845; font-size: 19px; line-height: 1; }
.timeline-add-layer:hover, .timeline-add-layer:focus-visible { border-color: #38bdf8; background: #087bed; }
.timeline-track-select { min-width: 0; padding: 3px 4px; overflow: hidden; border: 0; color: inherit; background: transparent; font-size: 10px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.timeline-clip-handle { position: relative; z-index: 2; display: block; background: rgba(255, 255, 255, 0.18); cursor: ew-resize; touch-action: none; }
.timeline-clip-handle::after { content: ""; position: absolute; top: 7px; bottom: 7px; width: 2px; border-radius: 2px; background: rgba(255, 255, 255, 0.8); }
.timeline-clip-handle.is-start::after { left: 3px; }
.timeline-clip-handle.is-end::after { right: 3px; }
.timeline-clip-handle:hover { background: #38bdf8; }
.timeline-trim { margin-top: 7px; display: flex; justify-content: end; gap: 10px; }
.timeline-trim[hidden] { display: none; }
.timeline-trim label { color: #bbb9c6; font-size: 10px; }
.timeline-trim input { width: 66px; margin-left: 4px; padding: 3px 5px; border: 1px solid #555261; border-radius: 5px; color: #fff; background: #35333f; }

.layers-list { display: grid; gap: 7px; margin-top: 15px; }
.layer-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center; gap: 4px; padding: 5px; border: 1px solid var(--line); border-radius: 9px; background: #fafafd; cursor: grab; }
.layer-row.is-active { border-color: var(--purple); box-shadow: 0 0 0 1px rgba(15, 122, 138, 0.2); background: var(--lavender); }
.layer-row.is-dragging { opacity: 0.42; cursor: grabbing; }
.layer-row.is-drop-target { border-color: #38bdf8; box-shadow: 0 -3px 0 #38bdf8; }
.layer-row button { border: 0; color: var(--ink); background: transparent; }
.layer-drag-handle { color: #aaa7b5; font-size: 15px; line-height: 1; cursor: grab; user-select: none; }
.layer-select { min-width: 0; padding: 3px; display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 4px; text-align: left; }
.layer-select strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer-select strong { font-size: 11px; }
.layer-type-icon { width: 24px; color: var(--purple); font-weight: 800; text-align: center; }
.layer-order-controls { display: grid; grid-template-columns: 25px 25px; }
.layer-order-controls button { height: 30px; border-radius: 5px; }
.layer-order-controls button:hover:not(:disabled) { color: #fff; background: var(--purple); }
.layer-order-controls button:disabled { opacity: 0.25; cursor: default; }

.canvas-context-menu { position: fixed; z-index: 1000; width: 224px; max-height: 82vh; padding: 7px; overflow: auto; border: 1px solid #d8d6df; border-radius: 11px; color: var(--ink); background: #fff; box-shadow: 0 18px 55px rgba(20, 18, 30, 0.28); }
.canvas-context-menu[hidden] { display: none; }
.canvas-context-menu > button, .canvas-context-menu summary, .context-submenu button { width: 100%; min-height: 34px; padding: 7px 9px; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: 6px; color: var(--ink); background: transparent; font-size: 12px; text-align: left; list-style: none; }
.canvas-context-menu summary { cursor: pointer; }
.canvas-context-menu summary::-webkit-details-marker { display: none; }
.canvas-context-menu > button:hover, .canvas-context-menu summary:hover, .context-submenu button:hover { background: var(--lavender); color: var(--purple); }
.canvas-context-menu kbd { color: var(--muted); font: 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; }
.context-menu-separator { height: 1px; margin: 5px 3px; background: var(--line); }
.context-submenu { margin: 0 0 4px 13px; padding-left: 5px; border-left: 2px solid var(--line); }
.context-menu-danger { color: var(--danger) !important; }

@media (max-width: 1050px) {
  .custom-design-card { grid-template-columns: 1fr; }
  .editor-body { grid-template-columns: 64px 280px minmax(0, 1fr); }
  .tool-panel { padding: 18px 14px; }
  .editor-brand { display: none; }
  .editor-primary-actions { overflow-x: auto; scrollbar-width: none; }
  .context-bar .object-actions button { padding: 5px 7px; font-size: 11px; }
  .shortcut-hint { display: none; }
}

@media (max-width: 720px) {
  .design-dashboard, .design-create-shell { padding-top: 20px; }
  .design-dashboard-header { align-items: start; flex-direction: column; gap: 18px; }
  .design-dashboard-actions { width: 100%; flex-wrap: wrap; justify-content: flex-start; }
  .design-dashboard-new { width: 100%; }
  .design-dashboard-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 24px 14px; }
  .design-dashboard-preview { height: 190px; }
  .design-preset-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .design-preset-card { grid-template-rows: 125px auto auto; }
  .design-preset-visual { min-height: 125px; }
  .custom-design-card { padding: 21px; }
  .custom-design-form { grid-template-columns: 1fr 18px 1fr; }
  .custom-design-form .button { grid-column: 1 / -1; }
  .editor-header { gap: 7px; padding: 0 8px; }
  .editor-primary-actions .save-status, .editor-primary-actions > a { display: none; }
  .title-input { width: 34vw; }
  .editor-body { grid-template-columns: 56px 240px minmax(340px, 1fr); overflow-x: auto; }
  .tool-rail { padding-inline: 3px; }
  .tool-rail button { width: 50px; }
  .canvas-pasteboard { padding: 150px; }
  .zoom-bar { padding-inline: 10px; gap: 10px; }
  .zoom-control { min-width: 170px; }
  .canvas-size { display: none; }
}

@media (max-width: 440px) {
  .design-dashboard-grid, .design-preset-grid { grid-template-columns: 1fr; }
  .design-dashboard-preview { height: 230px; }
  .custom-design-form { grid-template-columns: 1fr; }
  .custom-size-times { display: none; }
}

@media (max-height: 650px) {
  .editor-header { height: 52px; }
  .editor-body { height: calc(100vh - 52px); height: calc(100dvh - 52px); }
  .tool-rail { padding-block: 5px; }
  .tool-rail button { min-height: 58px; }
  .canvas-pasteboard { padding: 120px; }
}