[data-icon="pen"] { --ui-icon: url('../svg/icon-pen.svg'); }
[data-icon="marker"] { --ui-icon: url('../svg/icon-marker.svg'); }
[data-icon="eraser"] { --ui-icon: url('../svg/icon-eraser.svg'); }
[data-icon="layers"] { --ui-icon: url('../svg/icon-layers.svg'); }
[data-icon="text"] { --ui-icon: url('../svg/icon-text.svg'); }
[data-icon="spark"] { --ui-icon: url('../svg/icon-spark.svg'); }
[data-icon="book"] { --ui-icon: url('../svg/icon-book.svg'); }
[data-icon="save"] { --ui-icon: url('../svg/icon-save.svg'); }
[data-icon="reset"] { --ui-icon: url('../svg/icon-reset.svg'); }
[data-icon="download"] { --ui-icon: url('../svg/icon-download.svg'); }
[data-icon="upload"] { --ui-icon: url('../svg/icon-upload.svg'); }
[data-icon="copy"] { --ui-icon: url('../svg/icon-copy.svg'); }
[data-icon="plus"] { --ui-icon: url('../svg/icon-plus.svg'); }
[data-icon="minus"] { --ui-icon: url('../svg/icon-minus.svg'); }
[data-icon="trash"] { --ui-icon: url('../svg/icon-trash.svg'); }
[data-icon="image"] { --ui-icon: url('../svg/icon-image.svg'); }
[data-icon="undo"] { --ui-icon: url('../svg/icon-undo.svg'); }
[data-icon="redo"] { --ui-icon: url('../svg/icon-redo.svg'); }
[data-icon="eye"] { --ui-icon: url('../svg/icon-eye.svg'); }
[data-icon="hidden"] { --ui-icon: url('../svg/icon-hidden.svg'); }
[data-icon="lock"] { --ui-icon: url('../svg/icon-lock.svg'); }
[data-icon="unlock"] { --ui-icon: url('../svg/icon-unlock.svg'); }
[data-icon="up"] { --ui-icon: url('../svg/icon-up.svg'); }
[data-icon="down"] { --ui-icon: url('../svg/icon-down.svg'); }
[data-icon="move"] { --ui-icon: url('../svg/icon-move.svg'); }
[data-icon="board"] { --ui-icon: url('../svg/icon-board.svg'); }
[data-icon="fit"] { --ui-icon: url('../svg/icon-fit.svg'); }
[data-icon="close"] { --ui-icon: url('../svg/icon-close.svg'); }
[data-icon="check"] { --ui-icon: url('../svg/icon-check.svg'); }
[data-icon="filter"] { --ui-icon: url('../svg/icon-filter.svg'); }

:root {
  --trial-void: #100e14;
  --trial-panel: #1d1720;
  --trial-wine: #633140;
  --trial-wine-dark: #3e202c;
  --trial-paper: #decece;
  --trial-paper-light: #eee4e1;
  --trial-paper-deep: #c7b5b7;
  --trial-ink: #30242b;
  --trial-silver: #bdaeb1;
  --trial-ivory: #f3eae6;
  --trial-rose: #c67d98;
  --trial-mint: #9fbba8;
  --trial-border: #554750;
  color-scheme: dark;
}

html { scroll-behavior: smooth; }
body,
body.bg-loaded {
  padding: 14px 18px 22px;
  color: var(--trial-ivory);
  background-color: #100d14;
  background-image: linear-gradient(180deg, rgba(10, 8, 14, .86), rgba(16, 11, 19, .94) 48%, rgba(9, 8, 13, .96)), url('../images/bg.png?v=20260818-1');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('../svg/rose-window.svg') center -290px / min(1150px, 125vw) auto no-repeat;
  opacity: .25;
  filter: saturate(.65);
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% -10%, rgba(126, 73, 112, .19), transparent 48%), linear-gradient(90deg, rgba(0,0,0,.34), transparent 12%, transparent 88%, rgba(0,0,0,.34));
}
.binder-rings { display: none; }

.container {
  isolation: isolate;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 18px 18px;
  overflow: visible;
  color: var(--trial-ivory);
  background: linear-gradient(145deg, rgba(31, 23, 34, .98), rgba(15, 12, 21, .97) 62%, rgba(34, 18, 29, .98));
  border: 1px solid #9a858d;
  border-radius: 0;
  box-shadow: 0 25px 70px rgba(0,0,0,.72), inset 0 0 0 3px #100d14, inset 0 0 0 4px #6c5b63, inset 0 0 0 11px rgba(3,2,7,.28);
}
.container::before,
.container::after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  width: 126px;
  height: 126px;
  pointer-events: none;
  background: url('../svg/flourish.svg') 0 0 / contain no-repeat;
  opacity: .74;
}
.container::before { left: 0; }
.container::after { right: 0; transform: scaleX(-1); }

h1 {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 74px;
  margin: 0 0 16px;
  padding: 12px 50px 12px 70px;
  color: var(--trial-ivory);
  border-bottom: 1px solid rgba(210, 189, 192, .5);
  font-family: 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', SimSun, serif;
  font-size: clamp(21px, 2.2vw, 27px);
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.3;
  text-shadow: 0 2px 2px #08070c, 0 0 20px rgba(183, 137, 153, .28);
}
h1::before {
  content: '';
  position: absolute;
  left: max(25px, calc(50% - 280px));
  top: 9px;
  width: 52px;
  height: 54px;
  background: url('../svg/crest.svg') center / contain no-repeat;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.8));
}
h1::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  width: 11px;
  height: 11px;
  transform: translateX(-50%) rotate(45deg);
  background: #c4b5b7;
  border: 2px solid #241821;
  box-shadow: 0 0 0 1px #c4b5b7;
}

.main-layout {
  position: relative;
  z-index: 1;
  gap: 16px;
}
@media (min-width: 968px) {
  .main-layout { grid-template-columns: minmax(0, 1fr) 420px; gap: 16px; }
  .preview-section {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #806375 transparent;
  }
}
.preview-section,
.controls-section {
  position: relative;
  border: 1px solid rgba(184, 161, 168, .7);
  border-radius: 0;
  box-shadow: inset 0 0 0 3px #151018, inset 0 0 0 4px rgba(176, 153, 162, .42), 0 12px 24px rgba(0,0,0,.3);
}
.preview-section {
  padding: 12px;
  background: radial-gradient(ellipse at 50% 25%, rgba(95, 47, 73, .21), transparent 63%), linear-gradient(155deg, rgba(36, 26, 40, .93), rgba(17, 14, 23, .96));
}
.preview-section::before { content: none; }
.controls-section {
  padding: 16px;
  color: var(--trial-ink);
  background-color: var(--trial-paper);
  background-image: linear-gradient(140deg, rgba(255,255,255,.35), rgba(180, 149, 156, .06) 38%, rgba(125, 91, 105, .13)), url('../svg/paper-grain.svg');
  background-size: cover, 240px 240px;
  background-repeat: no-repeat, repeat;
  border: 4px solid #141018;
  outline: 1px solid #b8a8aa;
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px #86767d, inset 0 0 0 7px rgba(39,28,36,.08), 0 13px 27px rgba(0,0,0,.45);
}
.controls-section::before { content: none; }


.btn,
.workspace-action,
.filter-preset-btn,
.custom-image-btn,
.text-layer-btn,
.layer-mini-btn,
.project-file-btn,
.changelog-inline-btn,
.effect-item,
.preset-item,
.update-actions button,
.update-tool-link,
.ios-install-close,
.install-btn-primary,
.install-btn-dismiss {
  min-height: 32px;
  height: auto;
  padding: 6px 9px;
  color: var(--trial-ink);
  background-color: var(--trial-paper-light);
  background-image: linear-gradient(165deg, rgba(255,255,255,.46), rgba(168, 137, 148, .15)), url('../svg/paper-grain.svg');
  border: 1px solid #44353c;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px rgba(252, 244, 240, .7), inset 0 0 0 3px rgba(70, 48, 58, .29), 0 2px 0 rgba(8,5,9,.43);
  font-family: 'Noto Serif SC', 'Songti SC', SimSun, serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, color .16s ease;
}
.btn:hover,
.workspace-action:hover,
.filter-preset-btn:hover,
.custom-image-btn:hover,
.text-layer-btn:hover:not(:disabled),
.layer-mini-btn:hover:not(:disabled),
.project-file-btn:hover,
.changelog-inline-btn:hover,
.effect-item:hover,
.preset-item:hover,
.update-actions button:hover,
.update-tool-link:hover,
.ios-install-close:hover,
.install-btn-primary:hover,
.install-btn-dismiss:hover {
  color: #231822;
  background-color: #f6e8e5;
  transform: none;
  box-shadow: inset 0 0 0 2px rgba(255,251,247,.9), inset 0 0 0 3px rgba(70,48,58,.38), 0 5px 10px rgba(0,0,0,.24);
}
.btn:active,
.workspace-action:active,
.filter-preset-btn:active,
.custom-image-btn:active { transform: translateY(1px); }
.btn:disabled,
.text-layer-btn:disabled,
.layer-mini-btn:disabled { opacity: .42; filter: grayscale(.7); cursor: not-allowed; transform: none; }
.btn-large { min-height: 38px; font-size: 12px; letter-spacing: .03em; text-transform: none; }
.controls-section > .row-2col:first-child .btn,
#downloadBtn,
#saveSettingsBtn,
.workspace-action.primary,
.text-layer-btn.primary,
.param-confirm,
.update-start,
.update-tool-link,
.install-btn-primary {
  color: var(--trial-ivory);
  background-color: var(--trial-wine-dark);
  background-image: linear-gradient(125deg, #744051, #3e202e 68%, #2a1722), url('../svg/paper-grain.svg');
  border-color: #291b24;
  box-shadow: inset 0 0 0 1px rgba(235, 213, 214, .69), inset 0 0 0 4px rgba(205, 167, 179, .17), 0 3px 5px rgba(0,0,0,.23);
}
.controls-section > .row-2col:first-child .btn:hover,
#downloadBtn:hover,
#saveSettingsBtn:hover,
.workspace-action.primary:hover,
.text-layer-btn.primary:hover,
.param-confirm:hover,
.update-start:hover,
.update-tool-link:hover,
.install-btn-primary:hover { color: #fff9f6; background-color: #824b5d; }
.btn.success { color: #eff5ec; background: #3d6656; border-color: #254334; }
.btn.error { color: #fff1ee; background: #8d4353; border-color: #54202f; }
.controls-section .row-2col,
.settings-row,
.project-file-tools { gap: 7px; margin-bottom: 10px; }

.preview-section > .legacy-version-btn,
.preview-section > .preview-filter-box,
.preview-section > .workspace-actions,
.preview-section > .layer-box,
.preview-section > .focus-mode-row,
.preview-section > .preview-controls,
.preview-section > .preview-history-row,
.preview-section > .transform-hint { width: 100%; max-width: 535px; }
.legacy-version-btn {
  min-height: 29px;
  margin-bottom: 12px;
  color: #ddd0d1;
  background: rgba(12, 9, 17, .75);
  border: 1px solid #817079;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px #1f1722;
  font-family: 'Noto Serif SC', 'Songti SC', SimSun, serif;
}
.legacy-version-btn:hover { color: white; background: rgba(69,35,53,.8); opacity: 1; }
.filter-box,
.layer-box,
.focus-mode-row,
.preview-controls {
  padding: 8px 10px;
  color: var(--trial-ivory);
  background: linear-gradient(145deg, rgba(55, 35, 52, .75), rgba(19, 16, 25, .89));
  border: 1px solid rgba(195, 174, 179, .75);
  border-radius: 0;
  box-shadow: inset 0 0 0 3px #201823, inset 0 0 0 4px rgba(171, 149, 155, .27);
}
.filter-box .box-label,
.layer-box-header,
.focus-mode-label,
.preview-control-label,
.layer-opacity-label {
  color: var(--trial-ivory);
  font-family: 'Noto Serif SC', 'Songti SC', SimSun, serif;
  font-size: 12px;
  letter-spacing: .04em;
}
.filter-box .box-label::before,
.layer-box-header::before,
.focus-mode-label::before,
.custom-image-box .box-label::before {
  content: '';
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-right: 7px;
  vertical-align: -2px;
  background: url('../svg/diamond.svg') center / contain no-repeat;
}
.filter-box .box-label { justify-content: flex-start; gap: 7px; }
.filter-toggle-arrow { margin-left: auto; color: var(--trial-paper-deep); }
.filter-body,
.layer-box-body { border-top: 1px solid rgba(206,181,187,.28); padding-top: 8px; margin-top: 8px; }
.filter-presets { gap: 5px; margin-bottom: 9px; }
.filter-preset-btn { min-height: 29px; padding: 4px; font-size: 12px; }
.filter-preset-btn.active { color: #fff1ef; background: var(--trial-wine); border-color: #dbb6bf; box-shadow: inset 0 0 0 2px #4a2334; }
.filter-slider-row { gap: 10px; margin-top: 8px; }
.filter-slider-row label,
.filter-slider-row span { color: #ded1d2; font-size: 12px; }
.focus-mode-row { min-height: 36px; padding: 7px 10px; }
.focus-mode-row:hover { background: #423040; }
.focus-mode-toggle { background: #4e3a4a; border: 1px solid #bea9ae; box-shadow: inset 0 0 0 2px #201723; }
.focus-mode-toggle::after { width: 14px; height: 14px; background: var(--trial-paper-light); box-shadow: 0 0 0 1px #4d3440; }
body.focus-mode .focus-mode-toggle { background: var(--trial-wine); }
.layer-count { background: var(--trial-wine); color: white; border: 1px solid #a88e97; }
.layer-item {
  min-height: 35px;
  color: var(--trial-ink);
  background: #e4d5d4;
  border: 1px solid #77656d;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.34);
}
.layer-item.selected { border: 2px solid #9d5471; box-shadow: inset 0 0 0 1px #fff0ec, 0 0 0 1px #412233; }
.layer-eye, .layer-move, .layer-lock { color: #3a2632; border-radius: 0; }
.layer-eye:hover, .layer-move:hover, .layer-lock:hover { background: rgba(97,46,66,.13); }
.layer-name { font-size: 12px; }
.layer-kind { color: #62515b; font-size: 10px; }
.layer-controls { border-top-color: rgba(205,187,190,.32); }
.layer-opacity { accent-color: #c886a0; }
.layer-mini-btn { min-height: 32px; padding: 7px 10px; font-size: 11px; }
.muted-inline { color: #b3a3ac; }

.canvas-wrapper {
  width: min(100%, 440px);
  max-width: 440px;
  margin: 3px auto 12px;
  background: #e2d4d1;
  border: 0;
  border-radius: 0;
  outline: 1px solid #c8b6b9;
  outline-offset: 3px;
  box-shadow: 0 0 0 3px #100e15, 0 5px 18px #0005;
}
@media (min-width: 968px) and (max-height: 850px) {
  .canvas-wrapper { width: min(100%, 440px, calc((100dvh - 345px) * .835)); }
}
.canvas-wrapper canvas,
#interactionCanvas { border-radius: 0; }
.canvas-wrapper.loading::after { color: #493241; }
.preview-controls { margin-top: 6px; }
.preview-control-label { font-size: 12px; }
.preview-control-value { color: #efc6d3; font-family: 'Noto Serif SC', SimSun, serif; }
.position-hint,
.transform-hint { color: #c5b5bb; font-size: 12px; font-style: normal; font-weight: 400; }
.transform-hint { margin: 0 0 9px; line-height: 1.6; }
.preview-history-row { margin-top: 10px; }
.preview-history-row .btn { color: #e6d9dc; background: #342431; border-color: #ab939d; }
.preview-history-row .btn:hover { background: #674157; color: #fff; }

input[type='range'] { accent-color: #ad697f; }
.preview-slider,
.filter-slider-row input[type='range'] {
  height: 7px;
  background: linear-gradient(180deg, #211722, #70465e 50%, #291927);
  border: 1px solid #b18c9b;
  border-radius: 0;
  box-shadow: inset 0 1px 3px rgba(0,0,0,.45);
}
.preview-slider::-webkit-slider-thumb,
.filter-slider-row input[type='range']::-webkit-slider-thumb {
  width: 16px;
  height: 16px;
  background: #e3d3d3;
  border: 2px solid #513243;
  border-radius: 0;
  transform: rotate(45deg);
  box-shadow: 0 0 0 1px #d4afb9, 0 2px 3px #0a070d;
}
.preview-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: #e3d3d3;
  border: 2px solid #513243;
  border-radius: 0;
  transform: rotate(45deg);
}

.control-group { margin-bottom: 11px; }
.control-group label,
.row-3col label {
  margin-bottom: 5px;
  color: #412c39;
  font-family: 'Noto Serif SC', 'Songti SC', SimSun, serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: none;
}
.control-group label::before { content: none; }
.row-3col .control-group label::before { margin-right: 4px; }
textarea,
select,
input[type='number'],
.param-number-input,
.param-selected-text {
  width: 100%;
  min-height: 34px;
  height: auto;
  padding: 7px 9px;
  color: #302129;
  background: rgba(246, 237, 233, .84);
  border: 1px solid #76616c;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.42), inset 0 0 0 3px rgba(108,75,89,.21);
  font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
  font-size: 12px;
}
textarea { min-height: 84px; max-height: 250px; padding: 9px; line-height: 1.6; resize: vertical; }
textarea::placeholder { color: #66535e; }
select { padding-right: 33px; cursor: pointer; }
input[type='number'] { text-align: center; }
select:focus,
textarea:focus,
input:focus,
.param-number-input:focus { outline: 2px solid #9f5978; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(166, 98, 128, .16); }
input[type='color'] {
  width: 100%;
  height: 34px;
  padding: 4px;
  background: #e7d6d5;
  border: 1px solid #76616c;
  border-radius: 0;
  cursor: pointer;
}
input[type='color']::-webkit-color-swatch { border-radius: 0; }
.row-3col { gap: 7px; }
.row-3col select,
.row-3col input { height: 34px; padding: 8px 10px; font-size: 12px; }
.zoom-percent { right: 10px; color: #66505b; }
.font-preview,
.image-filename,
.project-save-status,
.param-hint,
.preset-help { color: #66525e; font-size: 12px; }
.font-preview {
  margin-top: 8px;
  padding: 7px 9px;
  background: rgba(248,239,235,.55);
  border: 1px solid #aa939a;
  border-radius: 0;
}
.project-save-status { margin: -5px 0 11px; background: rgba(247,233,226,.55); border: 1px solid rgba(124,88,100,.28); }
.project-save-status.dirty { color: #755628; background: #f1dfbd; }
.project-save-status.saved { color: #365746; background: #dbe8d9; }
#saveSettingsBtn.unsaved { box-shadow: inset 0 0 0 1px #f4e8ce, inset 0 0 0 4px #9a755a, 0 0 0 1px #795439; }
.project-file-btn { font-size: 12px; }
.long-press-hint { color: #8b344b; }

.custom-image-box,
.text-layer-toolbar,
.welcome-box,
.image-layout-box {
  color: var(--trial-ink);
  background: rgba(192, 168, 174, .34);
  border: 1px solid #8e737f;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px rgba(239,224,220,.48);
}
.custom-image-box { padding: 9px; margin-bottom: 11px; }
.custom-image-box .box-label { margin-bottom: 10px; font-family: 'Noto Serif SC', SimSun, serif; font-size: 14px; font-weight: 700; }
.custom-image-box .muted-inline { color: #75616a; }
.image-filename { margin-top: 8px; }
.image-layout-box { padding: 9px; }
.text-layer-toolbar { min-height: 34px; margin-bottom: 11px; padding: 5px; gap: 5px; }
.active-text-layer { color: #412d38; font-family: 'Noto Serif SC', SimSun, serif; font-size: 12px; }
.text-layer-btn { min-height: 32px; padding: 7px 8px; font-size: 11px; }
.welcome-box { padding: 11px; margin-top: 17px; font-size: 12px; }
.changelog-inline-btn { min-height: 28px; padding: 4px 7px; font-size: 11px; }
.warning-box,
.mobile-warning { color: #6f2638; background: #eddbdc; border: 1px solid #ad697e; border-radius: 0; }
.site-footer { position: relative; z-index: 1; max-width: 1300px; margin: 10px auto 0; color: #d3c4c9; font-size: 12px; text-shadow: 0 2px 3px #000; }
.site-footer-link { color: #f3d5df; }


.effect-modal,
.changelog-modal,
.ios-install-modal,
.update-modal,
.loading-overlay { background: rgba(7,5,10,.82); backdrop-filter: blur(5px); }
.effect-content,
.changelog-content,
.ios-install-content,
.update-card,
.loading-content {
  color: var(--trial-ink);
  background-color: var(--trial-paper);
  background-image: linear-gradient(145deg, rgba(255,255,255,.28), rgba(138,99,116,.15)), url('../svg/paper-grain.svg');
  background-size: cover, 240px 240px;
  border: 4px solid #130f16;
  border-radius: 0;
  outline: 1px solid #b8a8ab;
  box-shadow: inset 0 0 0 1px #9e888f, inset 0 0 0 7px rgba(49,30,42,.09), 0 22px 75px rgba(0,0,0,.6);
}
.effect-content,
.changelog-content { max-width: 540px; padding: 19px; }
.effect-header,
.changelog-header { border-bottom: 1px solid #9d858d; }
.effect-title,
.changelog-title,
.effect-section-title,
.changelog-version-title,
.param-label,
.ios-install-title,
.update-title { color: #3c2634; font-family: 'Noto Serif SC', 'Songti SC', SimSun, serif; }
.effect-title,
.changelog-title { font-size: 18px; }
.effect-close,
.changelog-close { color: #442c3b; border: 1px solid #8c6e7b; border-radius: 0; }
.effect-close:hover,
.changelog-close:hover { background: #eadadd; }
.effect-section-title { font-size: 14px; text-transform: none; border-left: 3px solid #89516b; padding-left: 9px; }
.effect-tip,
.effect-help-note,
.preset-help,
.param-selected-text { color: #55414c; background: rgba(250,243,239,.45); border: 1px solid #b59da5; border-radius: 0; }
.effect-tip code,
.inline-code { color: #412937; background: #f3e6e2; border-color: #b8a5a8; border-radius: 0; }
.effect-grid { gap: 9px; }
.effect-item,
.preset-item { min-height: 34px; border-radius: 0; box-shadow: inset 0 0 0 2px #eee1dd; }
.effect-item:hover,
.preset-item:hover { border-color: #854a64; }
.effect-item.style-magic { color: #fff4ee; background: #583249; }
.preset-item .preset-preview { color: #66515d; }
.changelog-version-title { border-bottom-color: #ac929c; font-size: 14px; }
.changelog-version ul, .changelog-version ol { color: #513f49; font-size: 12px; }
.param-number-input { font-size: 12px; }
.param-label { font-size: 12px; }
.loading-content { min-width: 180px; padding: 23px 34px; }
.spinner { border-color: #d7c2c8; border-top-color: #7e405b; }

.paint-modal { color: var(--trial-ivory); background: #120e17; }
.paint-topbar,
.paint-bottombar {
  background: linear-gradient(100deg, rgba(31,20,32,.98), rgba(20,16,25,.98));
  border-color: #806978;
  box-shadow: inset 0 0 0 3px rgba(5,3,8,.5);
}
.paint-title { font-family: 'Noto Serif SC', SimSun, serif; font-size: 16px; }
.paint-status,
.paint-control { color: #d6c5cd; }
.paint-stage {
  background-color: #15111b;
  background-image: radial-gradient(ellipse at center, rgba(114,67,94,.24), transparent 66%), url('../svg/rose-window.svg');
  background-size: cover, min(850px, 110vw) auto;
  background-position: center;
  background-repeat: no-repeat;
}
.paint-canvas-stack { border: 3px solid #0a0810; border-radius: 0; outline: 1px solid #c1aeb7; box-shadow: 0 0 0 5px #302531, 0 18px 47px #000; }
.paint-tool,
.paint-icon-btn,
.paint-finish {
  color: #e9d9dd;
  background: #392836;
  border: 1px solid #b5a0a9;
  border-radius: 0;
  font-family: 'Noto Serif SC', SimSun, serif;
  font-size: 12px;
}
.paint-tool.active,
.paint-view-toggle.active,
#paintPanBtn.active,
.paint-finish { color: #281b26; background: #e1cfce; border-color: #fff0eb; }
.paint-icon-btn:hover:not(:disabled),
.paint-tool:hover { background: #70435b; color: #fff; }
.paint-control input[type='color'] { width: 35px; height: 35px; background: #e2d1d2; border-radius: 0; }
.pressure-pill { background: #3a2938; border: 1px solid #796471; border-radius: 0; color: #e4d2da; }
.pressure-pill.active .pressure-dot { background: var(--trial-mint); }

.update-card { width: min(480px, 100%); overflow: hidden; }





.update-body { padding: 23px; }

.update-title { font-size: 25px; }
.update-subtitle { color: #58444e; font-size: 12px; }
.update-feature { color: #48353f; background: rgba(248,239,235,.5); border-color: #b69ca5; border-radius: 0; }
.update-feature strong { color: #552d40; }
.update-actions button,
.update-tool-link { border-radius: 0; font-size: 12px; }
.update-tool-link { min-height: 35px; }
.install-banner { background: rgba(23,15,25,.98); border-top: 1px solid #ad8e9c; }
.install-banner-inner { max-width: 1150px; }
.install-banner-title { color: #f1e2e2; font-family: 'Noto Serif SC', SimSun, serif; }
.install-banner-desc { color: #beabb6; }
.install-btn-dismiss { color: #e6d8dc; background: #382735; border-color: #8f7381; }
.ios-install-content { max-width: 470px; }
.ios-install-title { font-size: 17px; }
.ios-install-steps li { color: #503c48; border-bottom-color: rgba(96,61,78,.26); }
.ios-step-num { color: #f8e9e7; background: #663b4d; border-radius: 0; }


#saveSettingsBtn.success,
#copyBtn.success {
  color: #f5f8ef;
  background: #3d6656;
  border: 1px solid #254334;
  box-shadow: inset 0 0 0 2px rgba(239,248,235,.27), 0 2px 5px rgba(0,0,0,.2);
}
#saveSettingsBtn.error,
#copyBtn.error {
  color: #fff2f1;
  background: #8d4353;
  border: 1px solid #54202f;
  box-shadow: inset 0 0 0 2px rgba(255,236,237,.25), 0 2px 5px rgba(0,0,0,.2);
}
select option,
select optgroup { color: #302129; background: #eee1de; }

:where(button, a, input, select, textarea, [role='button']):focus-visible {
  outline: 2px solid #e5a8c2;
  outline-offset: 3px;
}
@media (max-width: 1100px) {
  .container { padding-inline: 18px; }
  .main-layout { gap: 16px; }
  .controls-section { padding-inline: 17px; }
}
@media (min-width: 968px) {
  .preview-section {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #806375 transparent;
  }
  .preview-section > * { flex-shrink: 0; }
}
@media (max-width: 967px) {
  .main-layout { display: flex; flex-direction: column; }
  .preview-section { order: -1; }
  .preview-section > .legacy-version-btn,
  .preview-section > .preview-filter-box,
  .preview-section > .workspace-actions,
  .preview-section > .layer-box,
  .preview-section > .focus-mode-row,
  .preview-section > .preview-controls,
  .preview-section > .preview-history-row,
  .preview-section > .transform-hint { max-width: 600px; }
}
@media (max-width: 600px) {
  body,
  body.bg-loaded { padding: 8px 7px 15px; background-attachment: scroll; }
  body::before { background-position: center -40px; background-size: 700px auto; }
  .container { padding: 0 10px 15px; margin-top: 0; }
  .container::before,
  .container::after { width: 110px; height: 110px; opacity: .4; }
  h1 { min-height: 59px; padding: 12px 0 12px 36px; margin-bottom: 10px; font-size: clamp(15px, 4.1vw, 21px); letter-spacing: .04em; }
  h1::before { left: 0; top: 10px; width: 35px; height: 39px; }
  .preview-section { padding: 9px; }
  .controls-section { padding: 13px 11px; }
  .canvas-wrapper { width: min(100%, 340px); }
  .row-3col { gap: 6px; }
  .row-3col label { font-size: 11px; }
  .row-3col select,
  .row-3col input { height: 34px; font-size: 12px; padding: 7px 5px; }
  .text-layer-toolbar { grid-template-columns: minmax(0,1fr) auto auto auto; gap: 4px; padding: 6px; }
  .text-layer-btn { padding: 6px; font-size: 10px; }
  .active-text-layer { font-size: 10px; }
  .transform-hint { font-size: 12px; }
  .paint-tool,
  .paint-icon-btn { min-height: 36px; height: 36px; font-size: 10px; padding-inline: 5px; }
  .paint-finish { min-height: 36px; height: 36px; }
  .paint-title { font-size: 12px; }
  .paint-control input[type='color'] { width: 28px; height: 28px; }
  .update-feature { min-height: 47px; }
  
}
@media (max-width: 390px) {
  .controls-section > .row-2col:first-child { gap: 5px; }
  .controls-section > .row-2col:first-child .btn { padding-inline: 5px; font-size: 11px; }
  .text-layer-toolbar { grid-template-columns: repeat(3, 1fr); }
  .active-text-layer { grid-column: 1 / -1; padding: 3px 2px; font-size: 12px; }
  .row-3col label { font-size: 10px; }
  .effect-grid { grid-template-columns: repeat(2, 1fr); }
}

[data-icon]::before {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  margin-right: 6px;
  vertical-align: -3px;
  background: currentColor;
  mask: var(--ui-icon) center / contain no-repeat;
}
.layer-eye::before, .layer-lock::before, .layer-move::before { margin: 0; }
.install-banner-icon::before { width: 28px; height: 28px; }
.text-layer-btn[data-icon]::before { width: 12px; height: 12px; margin-right: 3px; }
body .container { box-shadow: inset 0 0 0 3px #100d14, inset 0 0 0 4px #4e3f49, 0 12px 40px #0006; }
body .preview-section { box-shadow: none; }
body .controls-section { border-width: 1px; outline: 0; box-shadow: inset 0 0 0 3px #30212c, inset 0 0 0 4px #b49aa3; }
body .filter-box, body .layer-box, body .focus-mode-row, body .preview-controls { box-shadow: none; margin-bottom: 8px; }
body .workspace-actions { margin-bottom: 8px; }
body .btn, body .text-layer-btn, body .custom-image-btn, body .project-file-btn { font-size: 12px; }
body .text-layer-btn { min-height: 28px; padding: 5px 6px; font-size: 11px; }
body .transform-hint, body .position-hint { font-size: 10px; }
body .btn-large { font-size: 13px; }
body .font-preview, body .image-filename, body .project-save-status { font-size: 11px; }
body .effect-item.color-red { color: #b8393d; }
body .effect-item.color-blue { color: #326cb6; }
body .effect-item.color-green { color: #3b8152; }
body .effect-item.color-yellow { color: #97701c; }
body .effect-item.color-purple { color: #854a9d; }
body .effect-item.color-pink { color: #b75a84; }
body .update-card { animation: none; }
body .update-title { margin-top: 0; }
body .paint-modal { color: #e4d7dc; background: #151017; height: 100dvh; }
body .paint-topbar, body .paint-bottombar { background: #231a26; border-color: #725a6b; box-shadow: none; }
body .paint-topbar { padding: 7px 16px; gap: 10px; padding-top: max(7px, env(safe-area-inset-top)); }
body .paint-title { font: 700 14px 'Noto Serif SC', SimSun, serif; }
body .paint-status { color: #b29ca9; font-size: 11px; }
body .paint-stage { padding: 12px; background: radial-gradient(ellipse at center, #49304155, transparent 70%), #151017; }
body .paint-canvas-stack { border: 0; border-radius: 0; outline: 1px solid #ac899d; box-shadow: 0 4px 24px #0006; }
body .paint-canvas-stack.board-only { clip-path: inset(66.358% 20.148% 1.543% 16.266%); }
body .paint-bottombar { display: grid; grid-template-columns: auto auto; justify-content: center; gap: 8px 18px; padding: 10px 16px max(10px, env(safe-area-inset-bottom)); }
body .paint-control-group { display: flex; gap: 6px; align-items: center; }
body .paint-tool, body .paint-icon-btn, body .paint-finish {
  height: 34px;
  min-height: 34px;
  padding: 0 9px;
  color: #d8c2cf;
  background: #342335;
  border: 1px solid #8b6c80;
  border-radius: 0;
  box-shadow: inset 0 0 0 2px #342335;
  font: 600 11px 'Noto Serif SC', SimSun, serif;
}
body .paint-tool.active, body .paint-view-toggle.active, body #paintPanBtn.active, body .paint-finish { color: #432c3a; background: #e2ced3; border-color: #f1e0e4; box-shadow: inset 0 0 0 2px #e2ced3, inset 0 0 0 3px #97718166; }
body .paint-tool:hover, body .paint-icon-btn:hover:not(:disabled) { border-color: #e1bccd; }
body .paint-control { color: #cbb2c0; gap: 5px; font-size: 11px; min-width: 0; }
body .paint-control input[type='range'] { accent-color: #ca93ab; width: 70px; min-width: 25px; }
body .paint-control input[type='color'] { width: 30px; height: 30px; border-radius: 0; background: #ddc9d0; border: 1px solid #957083; }
body .paint-control b { color: #e1c8d5; font-size: 10px; min-width: 20px; font-variant-numeric: tabular-nums; }
body .paint-toolbar-divider { background: #6e5064; height: 22px; }
body .pressure-pill { color: #ab92a1; background: none; border: 0; border-radius: 0; }
body .pressure-dot { background: #927f8a; }
body .pressure-pill.active .pressure-dot { background: #adbea2; box-shadow: none; }
.paint-view-options { grid-column: 1 / -1; min-width: 0; border-top: 1px solid #574053; padding-top: 6px; }
.paint-view-options summary { width: fit-content; margin: 0 auto; color: #b49ba9; cursor: pointer; list-style: none; font: 11px/24px 'Noto Serif SC', SimSun, serif; }
.paint-view-options summary::-webkit-details-marker { display: none; }
.paint-view-options summary::after { content: ''; display: inline-block; width: 12px; height: 12px; vertical-align: -2px; margin-left: 7px; background: currentColor; mask: url('../svg/icon-down.svg') center / contain no-repeat; }
.paint-view-options[open] summary::after { transform: rotate(180deg); }
body .paint-zoom-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 6px; }
body .paint-view-group { display: flex; align-items: center; gap: 5px; }
body .paint-zoom-step { width: 32px; padding: 0; }
body .paint-zoom-step::before { margin: 0; }
body .paint-zoom-control input[type='range'], body .paint-rotate-control input[type='range'] { width: 105px; }
.paint-toolbar-toggle[aria-expanded='false']::before { transform: rotate(180deg); }
@media (max-width: 967px) {
  body .paint-bottombar { grid-template-columns: 1fr; gap: 7px; }
  body .paint-control-group { justify-content: center; }
}
@media (max-width: 600px) {
  body .container { padding: 0 9px 11px; }
  body .btn, body .project-file-btn, body .custom-image-btn { min-height: 36px; }
  body .text-layer-toolbar { grid-template-columns: minmax(0, 1fr) auto auto auto; gap: 4px; }
  body .text-layer-btn { font-size: 10px; padding-inline: 5px; }
  body .text-layer-btn::before { display: none; }
  body .active-text-layer { grid-column: auto; font-size: 10px; }
  body .paint-topbar { gap: 7px; padding: 6px 9px; padding-top: max(6px, env(safe-area-inset-top)); }
  body .paint-title { font-size: 12px; white-space: nowrap; }
  body .paint-status, body .pressure-pill { display: none; }
  body .paint-toolbar-toggle, body .paint-finish { padding: 0 8px; font-size: 11px; height: 34px; min-height: 34px; }
  body .paint-toolbar-toggle::before { width: 12px; margin-right: 3px; }
  body .paint-finish::before { display: none; }
  body .paint-bottombar { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 8px 9px max(8px, env(safe-area-inset-bottom)); }
  body .paint-primary-controls { display: grid; grid-template-columns: 1fr 1fr 1fr 34px; gap: 6px; }
  body .paint-primary-controls .paint-control:nth-last-child(2) { grid-column: 1 / 3; }
  body .paint-primary-controls .paint-control:last-child { grid-column: 3 / 5; }
  body .paint-primary-controls .paint-control:nth-child(4) > span { display: none; }
  body .paint-control { gap: 5px; font-size: 11px; }
  body .paint-control span { display: inline; white-space: nowrap; }
  body .paint-control input[type='range'] { flex: 1; width: 100%; min-width: 0; height: 24px; }
  body .paint-control b { font-size: 10px; min-width: 28px; text-align: right; }
  body .paint-control input[type='color'] { width: 34px; height: 34px; }
  body .paint-edit-controls { display: grid; grid-template-columns: auto auto auto 1fr; gap: 5px; }
  body .paint-tool, body .paint-icon-btn { height: 34px; min-height: 34px; padding: 0 7px; font-size: 11px; }
  body .paint-tool::before, body .paint-icon-btn::before { width: 13px; height: 13px; margin-right: 4px; }
  body .paint-view-toggle { padding-inline: 5px; font-size: 10px; }
  body .paint-view-toggle::before { display: none; }
  body .paint-toolbar-divider { display: none; }
  .paint-view-options { padding-top: 3px; }
  .paint-view-options summary { line-height: 24px; }
  body .paint-zoom-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  body .paint-view-group { display: grid; gap: 5px; }
  body .paint-zoom-group { grid-template-columns: auto 30px minmax(0, 1fr) 30px; }
  body .paint-rotate-group { grid-template-columns: 30px minmax(0, 1fr) 30px auto auto; }
  body .paint-zoom-step { width: 30px; padding: 0; }
  body .paint-zoom-step::before { margin: 0; }
  body .paint-rotate-group .paint-control span { display: none; }
  body .paint-rotate-group #paintFitBtn::before, body .paint-rotate-group #paintResetViewBtn::before { display: none; }
  body .paint-zoom-control input[type='range'], body .paint-rotate-control input[type='range'] { width: 100%; min-width: 0; }
}
@media (max-width: 360px) {
  body .paint-edit-controls .paint-icon-btn::before { display: none; }
  body .paint-rotate-group { grid-template-columns: 28px minmax(0, 1fr) 28px auto auto; gap: 3px; }
  body .paint-rotate-group .paint-icon-btn { padding-inline: 4px; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}

.effect-close::before, .changelog-close::before, .filter-toggle-arrow::before { margin: 0; }
.update-feature strong::before { width: 13px; height: 13px; margin-right: 4px; }
.emotion-picker { position: relative; width: 100%; }
#emotionSelect[hidden], .emotion-options[hidden] { display: none; }
.emotion-trigger, .emotion-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 5px 9px;
  color: #302129;
  background: #eee3df;
  border: 1px solid #957b85;
  border-radius: 0;
  font: 12px/1.5 'Noto Serif SC', SimSun, serif;
  text-align: left;
  cursor: pointer;
}
.emotion-trigger { box-shadow: inset 0 0 0 2px #fff7f044; }
.emotion-trigger span, .emotion-option span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emotion-trigger img, .emotion-option img { flex: 0 0 24px; }
.emotion-trigger::after {
  content: '';
  width: 13px;
  height: 13px;
  background: currentColor;
  mask: url('../svg/icon-down.svg') center / contain no-repeat;
}
.emotion-trigger[aria-expanded='true']::after { transform: rotate(180deg); }
.emotion-options {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: min(320px, 45dvh);
  padding: 4px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: #decece;
  border: 1px solid #513645;
  box-shadow: 0 0 0 1px #c3abb5, 0 8px 18px #1a0e2640;
  scrollbar-width: thin;
  scrollbar-color: #9b7b8b #decece;
}
.emotion-option { border-color: transparent; background: transparent; }
.emotion-options.opens-up { top: auto; bottom: calc(100% + 4px); }
.emotion-option:hover, .emotion-option:focus-visible { background: #f6e9e4; border-color: #b695a4; outline: none; }
.emotion-option[aria-selected='true'] { color: #502f40; background: #c5a6b333; }
.emotion-option[aria-selected='true']::after {
  content: '';
  width: 15px;
  height: 15px;
  background: currentColor;
  mask: url('../svg/icon-check.svg') center / contain no-repeat;
}
@media (max-width: 600px) {
  .emotion-option { min-height: 40px; }
}