/* Focused usability pass using the existing palette, controls and card canvas. */
.easy-mode { --sans: 'Microsoft YaHei UI','Microsoft YaHei',sans-serif; font-size: 14px; }
.easy-mode [hidden] { display: none !important; }
.easy-mode .app-shell { max-width: 1740px; margin: 0 auto; padding: 0 24px 20px; }
.easy-mode .topbar { gap: 20px; height: 84px; }
.easy-mode .brand-lockup { flex-shrink: 0; gap: 12px; }
.easy-mode .brand-title { font-size: 21px; letter-spacing: 1px; }
.easy-mode .brand-mark { height: 39px; width: 39px; }
.easy-mode .top-actions { gap: 9px; flex-wrap: nowrap; }
.easy-mode .button { font-size: 13px; height: 40px; padding: 0 15px; gap: 6px; }
.easy-mode .easy-secondary { border: 1px solid var(--panel-border-strong); background: #29222e; }
.easy-mode .button-primary { background: #d77860; color: #fff; box-shadow: none; border-color: #e18a74; }
.easy-mode .button-primary:hover { background: #e08871; }
.easy-mode #undoButton { font-size: 12px; padding: 0 8px; }
.easy-mode #duplicateButton { display: none; }
.easy-mode #exportScaleSelect { height: 40px; font-size: 12px; }
.easy-mode .workspace { display: grid; grid-template-columns: minmax(400px,1fr) 440px; gap: 18px; height: calc(100dvh - 104px); min-height: 580px; }
.easy-mode .canvas-panel { border-radius: 16px; background: #1a171d; min-height: 0; }
.easy-mode .canvas-heading { height: 66px; padding: 0 24px; border-bottom: 1px solid var(--panel-border); }
.easy-mode .canvas-heading h2 { font-size: 17px; letter-spacing: 0; }
.easy-mode .section-kicker,.easy-mode .section-index,.easy-mode .stage-note,.easy-mode .preview-ruler,.easy-mode .eyebrow { display: none; }
.easy-mode .canvas-actions { gap: 8px; }
.easy-mode .canvas-actions .icon-button { width: 30px; }
.easy-mode #easyArtShortcut { height: 31px; padding: 0 10px; font-size: 12px; margin-right: 8px; }
.easy-mode .canvas-stage { min-height: 250px; background: radial-gradient(ellipse at 50% 40%,#2a2530 0%,#1a171d 75%); transition: background .15s; }
.easy-mode .card-preview-wrap { filter: drop-shadow(0 15px 25px #0006); }
.easy-mode .card-preview { border-radius: 12px; }
.easy-mode .card-canvas { pointer-events: auto; cursor: pointer; }
.easy-mode .card-canvas.drag-art-enabled { cursor: grab; }
.easy-mode .easy-preview-hint { flex-shrink: 0; text-align: center; color: #aaa1ad; font-size: 12px; line-height: 1.6; padding: 8px 18px; margin: 0; }
.easy-mode .render-feedback { font-size: 12px; padding: 8px 18px; color: #b9c6b5; }
.easy-mode .render-feedback.has-warning { color: #ffd298; }
.easy-mode .easy-font-notice { font-size: 11px; line-height: 1.6; color: #c4a994; margin: 0; padding: 7px 18px; background: #282128; flex-shrink: 0; }
.easy-mode .canvas-footer { padding: 12px 18px; font-size: 12px; min-height: 43px; height: auto; gap: 12px; }
.easy-mode .footer-meta { font-size: 11px; gap: 6px; }
.easy-mode .footer-meta:last-child > span:first-child,.easy-mode .footer-meta:last-child > strong:first-of-type,.easy-mode .meta-separator { display: none; }
.easy-mode .inspector-panel { display: flex; flex-direction: column; border-radius: 16px; padding: 0; min-height: 0; grid-column: auto; }
.easy-mode .inspector-heading { padding: 20px 24px 14px; height: auto; min-height: 73px; flex-shrink: 0; }
.easy-mode .inspector-heading h2 { font-size: 17px; }
.easy-mode .inspector-heading p { margin: 6px 0 0; color: #aaa0ae; font-size: 12px; }
.easy-mode .easy-tabs { padding: 0 24px; display: flex; border-bottom: 1px solid var(--panel-border); flex-shrink: 0; }
.easy-mode .easy-tabs button { flex: 1; border: 0; background: none; color: #a398a6; height: 43px; font-size: 13px; border-bottom: 2px solid transparent; }
.easy-mode .easy-tabs button.is-active { color: #f1b09c; border-bottom-color: #db846c; }
.easy-mode .inspector-scroll { display: block; overflow-y: auto; min-height: 0; padding: 20px 24px; flex: 1; scrollbar-width: thin; scrollbar-color: #54465a transparent; }
.easy-mode .easy-pane { display: flex; flex-direction: column; gap: 17px; }
.easy-mode .easy-template-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #c6b6cc; font-size: 12px; }
.easy-mode .easy-template-summary button { background: none; border: 0; color: #d19c8c; font-size: 12px; padding: 3px 0; }
.easy-mode .easy-field { display: flex; flex-direction: column; gap: 8px; color: #e7dfe9; font-size: 13px; min-width: 0; margin: 0; }
.easy-mode .easy-field-name { font-weight: 600; }
.easy-mode .easy-field small { font-size: 11px; color: #9d92a1; }
.easy-mode .easy-input,.easy-mode .text-input { width: 100%; height: 42px; background: #19161e; border: 1px solid #463b4b; border-radius: 8px; color: #f2eaf3; padding: 9px 12px; font-size: 14px; letter-spacing: 0; }
.easy-mode .easy-input::placeholder { color: #83788a; }
.easy-mode textarea.easy-input { height: 151px; min-height: 135px; resize: vertical; line-height: 1.8; font-family: var(--sans); }
.easy-mode #titleInput { font-size: 18px; height: 47px; }
.easy-mode .easy-type-buttons { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.easy-mode .easy-type-buttons button { height: 35px; border: 1px solid #443849; border-radius: 7px; background: #241f29; color: #bcb0c3; font-size: 13px; }
.easy-mode .easy-type-buttons button.is-active { background: #593d3a; border-color: #ae7360; color: #ffd4c4; }
.easy-mode .easy-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.easy-mode .easy-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.easy-mode .easy-stats:empty { display: none; }
.easy-mode .rule-tools { margin: -6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.easy-mode .rule-tools button { height: 29px; font-size: 11px; padding: 4px 8px; }
.easy-mode .move-insert { margin: -5px 0 0; font-size: 12px; color: #d7b3a6; border-top: 1px solid var(--panel-border); }
.easy-mode .move-insert summary { padding: 11px 0 0; }
.easy-mode .move-selects { margin-top: 12px; grid-template-columns: 1fr 52px 1fr 58px; }
.easy-mode .move-selects .text-input { font-size: 12px; padding: 4px; }
.easy-mode .easy-counter { color: #8d8194; font-size: 11px; text-align: right; margin-top: -10px; }
.easy-mode .easy-step-footer { padding: 14px 24px; border-top: 1px solid var(--panel-border); flex-shrink: 0; }
.easy-mode .easy-step-footer button { width: 100%; }
.easy-mode .easy-section-heading h3 { font-size: 17px; margin: 0; }
.easy-mode .easy-section-heading p { font-size: 12px; color: #a89baa; margin: 8px 0 0; line-height: 1.8; }
.easy-mode .easy-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 23px 12px; border: 1px dashed #6b526c; border-radius: 12px; background: #29222e; gap: 9px; color: #c8bacd; }
.easy-mode .easy-dropzone strong { font-size: 15px; color: #e9dfed; }
.easy-mode .easy-dropzone > span:not(.drop-plus) { font-size: 11px; }
.easy-mode .drop-plus { font-size: 29px; color: #c28f7d; }
.easy-mode .upload-button,.easy-mode .example-art-button { height: 35px; font-size: 12px; padding: 0 12px; }
.easy-mode .easy-dropzone .upload-button { background: #4a3639; border: 1px solid #9b6659; color: #f4c7b8; margin-top: 4px; }
.easy-mode .easy-art-status { color: #a599aa; text-align: center; font-size: 12px; }
.easy-mode .easy-art-zoom { display: flex; justify-content: center; gap: 27px; align-items: center; }
.easy-mode .easy-art-zoom button { width: 37px; height: 37px; border: 1px solid #4b3d51; border-radius: 8px; background: #2b222f; color: #e4d3e8; font-size: 21px; }
.easy-mode .easy-art-zoom span { min-width: 60px; text-align: center; font-size: 18px; }
.easy-mode .range-row { margin: 0; color: #cbbdce; font-size: 12px; gap: 12px; }
.easy-mode .range-row input { height: 5px; background: #54425a; }
.easy-mode .range-row input::-webkit-slider-thumb { width: 17px; height: 17px; }
.easy-mode .easy-art-actions { display: flex; justify-content: center; gap: 10px; }
.easy-mode .easy-details { border-top: 1px solid var(--panel-border); padding-top: 12px; font-size: 12px; color: #b9a9c0; }
.easy-mode .easy-details summary { cursor: pointer; margin-bottom: 15px; }
.easy-mode .easy-details .range-row,.easy-mode .easy-details .easy-field { margin-bottom: 21px; }
.easy-mode .simple-check { font-size: 12px; line-height: 1.6; margin: 0; }
.easy-mode .toggle-row { padding: 8px 0; }
.easy-mode .toggle-row strong { font-size: 12px; }
.easy-mode .easy-source-actions { display: flex; justify-content: center; }
.easy-mode .is-drag-over { outline: 3px solid #d3937b; outline-offset: -3px; background: #483139; }
.easy-mode .easy-dialog { border: 1px solid #57455d; border-radius: 18px; padding: 26px; color: #f0e6f2; background: #231d29; width: min(760px,calc(100vw - 36px)); max-height: calc(100dvh - 60px); box-shadow: 0 25px 100px #000b; overflow-y: auto; }
.easy-mode .easy-dialog::backdrop { background: #07040dcc; backdrop-filter: blur(5px); }
.easy-mode .dialog-header { display: flex; justify-content: space-between; gap: 20px; align-items: flex-start; margin-bottom: 22px; }
.easy-mode .dialog-header h2 { margin: 0 0 9px; font-size: 22px; }
.easy-mode .dialog-header p { color: #aea0b5; font-size: 13px; margin: 0; line-height: 1.7; }
.easy-mode .dialog-close { height: 30px; width: 30px; background: transparent; border: 0; color: #c7b9cd; font-size: 26px; }
.easy-mode .template-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.easy-mode .template-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; background: #2c2532; border: 1px solid #4b3d52; border-radius: 11px; padding: 18px; color: #eae0ed; text-align: left; }
.easy-mode .template-choice:hover { border-color: #d2927a; background: #3a2b35; }
.easy-mode .template-choice strong { font-size: 15px; }
.easy-mode .template-choice small { font-size: 11px; color: #afa0b8; line-height: 1.6; }
.easy-mode .template-symbol { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 9px; font: 700 19px 'SimSun',serif; }
.easy-mode .type-attack { color: #ecc0b7; background: #663e3d; }
.easy-mode .type-action { color: #c0c6fa; background: #3d3d66; }
.easy-mode .type-enhance { color: #b7ddc0; background: #365644; }
.easy-mode .psd-template-choice { display: flex; gap: 20px; align-items: center; width: 100%; margin-top: 19px; padding: 17px; border: 1px solid #71584c; border-radius: 11px; color: #f0ddc7; background: #352b2d; text-align: left; }
.easy-mode .psd-template-choice img { width: 69px; height: 97px; object-fit: cover; border-radius: 5px; }
.easy-mode .psd-template-choice span { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.easy-mode .psd-template-choice strong { font-size: 16px; }
.easy-mode .psd-template-choice small { font-size: 12px; line-height: 1.7; color: #cbb5ad; }
.easy-mode .psd-template-choice em { font-size: 11px; font-style: normal; color: #b19792; }
.easy-mode .psd-template-choice b { font-size: 22px; }
.easy-mode .library-dialog { width: min(700px,calc(100vw - 36px)); }
.easy-mode .library-dialog .library-panel { border: 0; padding: 0; height: 430px; min-height: 0; max-height: none; box-shadow: none; background: transparent; border-radius: 0; }
.easy-mode .library-dialog .search-field { height: 43px; margin: 0 0 14px; }
.easy-mode .library-dialog .search-field input { font-size: 14px; }
.easy-mode .library-dialog .segmented-control { margin-bottom: 14px; }
.easy-mode .library-dialog .segment { height: 35px; font-size: 13px; }
.easy-mode .library-dialog .library-filter-row { margin-bottom: 12px; }
.easy-mode .library-dialog .card-list { padding: 0 5px 0 0; overflow-x: hidden; }
.easy-mode .library-dialog .library-card { min-height: 61px; }
.easy-mode .library-dialog .library-card-title { font-size: 14px; }
.easy-mode .library-dialog .library-card-meta { font-size: 11px; }
.easy-mode .library-file-row { display: flex; justify-content: flex-end; margin-top: 18px; padding-top: 15px; border-top: 1px solid var(--panel-border); }
@media(max-width:1150px){
 .easy-mode .app-shell { padding: 0 15px 15px; }
 .easy-mode .workspace { grid-template-columns:minmax(320px,1fr) 400px; gap:12px; }
 .easy-mode .brand-title { font-size:18px; }
 .easy-mode .top-actions { gap:5px; }
 .easy-mode .button { padding:0 10px; }
 .easy-mode #undoButton { display:none; }
}
@media(max-width:850px){
 .easy-mode .topbar { height:auto; padding:16px 0; min-height:90px; flex-wrap:wrap; gap:12px; }
 .easy-mode .top-actions { flex-wrap:wrap; }
 .easy-mode .workspace { height:auto; min-height:0; grid-template-columns:minmax(280px,1fr) 370px; align-items:start; }
 .easy-mode .canvas-panel { position:sticky; top:10px; height:calc(100dvh - 40px); min-height:450px; }
 .easy-mode .inspector-panel { max-height:none; min-height:700px; }
 .easy-mode .inspector-scroll { overflow:visible; }
 .easy-mode .canvas-actions #zoomOutButton,.easy-mode .canvas-actions #zoomInButton,.easy-mode .zoom-label,.easy-mode .action-divider,.easy-mode #centerButton { display:none; }
 .easy-mode .canvas-heading { padding:0 15px; }
}
@media(max-width:700px){
 .easy-mode .app-shell { padding:0 10px 15px; }
 .easy-mode .topbar { padding:14px 4px; align-items:center; flex-direction:row; }
 .easy-mode .brand-mark { width:32px;height:32px; }
 .easy-mode .top-actions { width:100%;justify-content:flex-start;gap:6px; }
 .easy-mode .button { height:36px;font-size:12px; }
 .easy-mode #exportScaleSelect { height:36px; }
 .easy-mode .workspace { display:flex;flex-direction:column;gap:12px; }
 .easy-mode .canvas-panel { position:relative;top:0;height:520px;min-height:0;width:100%; }
 .easy-mode .inspector-panel { width:100%; min-height:0; }
 .easy-mode .inspector-scroll { padding:19px; }
 .easy-mode .inspector-heading,.easy-mode .easy-step-footer { padding-left:19px;padding-right:19px; }
 .easy-mode .easy-tabs { padding:0 19px; }
 .easy-mode .canvas-heading { height:51px; }
 .easy-mode .canvas-heading h2 { font-size:15px; }
 .easy-mode .easy-preview-hint { font-size:11px; }
 .easy-mode .canvas-footer { flex-direction:row;align-items:center; }
 .easy-mode .template-grid { grid-template-columns:1fr 1fr;gap:9px; }
 .easy-mode .template-choice { padding:13px; }
 .easy-mode .easy-dialog { padding:20px; }
 .easy-mode .dialog-header h2 { font-size:19px; }
 .easy-mode .psd-template-choice { gap:12px;padding:12px; }
 .easy-mode .psd-template-choice img { width:50px;height:70px; }
 .easy-mode .psd-template-choice strong { font-size:14px; }
 .easy-mode .psd-template-choice b { display:none; }
 .easy-mode .easy-font-notice { font-size:10px; }
}

/* Keep the effect editor in reach on common 1366 ? 768 / 1280 ? 720 screens. */
@media (min-width: 701px) {
 .easy-mode .inspector-heading { padding: 14px 20px 10px; min-height: 63px; }
 .easy-mode .easy-tabs { padding: 0 20px; }
 .easy-mode .inspector-scroll { padding: 13px 20px; }
 .easy-mode #easy-content { gap: 11px; }
 .easy-mode #easy-content .easy-field { gap: 5px; }
 .easy-mode #easy-content .easy-input { height: 36px; padding: 6px 9px; }
 .easy-mode #easy-content #titleInput { height: 41px; }
 .easy-mode #easy-content .easy-field small { display: none; }
 .easy-mode #easy-content textarea.easy-input { height: 117px; min-height: 100px; line-height: 1.65; }
 .easy-mode .easy-step-footer { padding: 10px 20px; }
}
.easy-mode .easy-grid-2:has(.only-special:not([hidden])) { grid-template-columns: 1fr 1fr 74px; }

.easy-mode #easy-advanced #duplicateButton {display:inline-flex;align-self:flex-start;}

/* Font schemes and crystal moves: plain-language editors, not syntax knobs. */
.easy-mode .easy-tabs {padding:0 12px;}
.easy-mode .easy-tabs button {font-size:13px;}
.easy-mode .effect-editor-actions {display:flex;gap:8px;flex-wrap:wrap;}
.easy-mode .effect-editor-actions button {border:1px solid #785746;color:#f1cbb2;background:#392a2c;border-radius:7px;padding:8px 10px;font-size:12px;}
.easy-mode .font-scheme-list {display:grid;gap:9px;}
.easy-mode .font-scheme {display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;border:1px solid #4c4054;border-radius:9px;padding:12px 14px;color:#e5d9eb;background:#241e2a;}
.easy-mode .font-scheme[aria-pressed=true] {border-color:#edaa8e;background:#473034;box-shadow:inset 3px 0 #edaa8e;}
.easy-mode .font-scheme strong {font-size:13px;}.easy-mode .font-scheme-sample {font-size:23px;line-height:1.5;}
.easy-mode .font-scheme small {font-size:11px;color:#bcaebf;line-height:1.7;}
.easy-mode .move-fields {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.easy-mode .move-size-editor {display:flex;flex-direction:column;gap:12px;}
.easy-mode .move-size-label {display:flex;justify-content:space-between;gap:12px;align-items:center;font-size:13px;}
.easy-mode .move-size-label small {display:block;font-size:11px;color:#afa0b6;margin-top:5px;}
.easy-mode #moveHeightInput {background:#19161e;color:#eee;border:1px solid #5d4963;border-radius:6px;width:78px;height:36px;padding:6px;}
.easy-mode #moveSizeSlider,.easy-mode #moveGapInput {width:100%;accent-color:#e09a7e;}
.easy-mode .move-size-presets {display:flex;gap:7px;}.easy-mode .move-size-presets button {flex:1;font-size:12px;color:#dec6bd;border:1px solid #635057;border-radius:6px;background:#322630;padding:7px 4px;}
.easy-mode .move-live-preview {background:#e5ddd0;border:1px solid #8b796c;border-radius:10px;padding:12px;color:#342722;overflow:auto;}
.easy-mode #moveVisualPreview {display:flex;align-items:center;justify-content:center;min-height:64px;width:max-content;min-width:100%;}
.easy-mode #moveVisualPreview img {width:auto;max-width:none;max-height:none;flex-shrink:0;}
.easy-mode #moveVisualCaption {text-align:center;margin:8px 0 0;font-size:12px;white-space:nowrap;}
.easy-mode .move-edit-actions {display:flex;gap:8px;flex-wrap:wrap;}
.easy-mode .move-edit-actions #insertMoveButton {height:39px;padding:0 15px;background:#d77860;color:white;border-color:#dd8d71;font-size:13px;}
.easy-mode .existing-moves h3 {font-size:14px;margin:10px 0;}
.easy-mode #moveExistingList {display:grid;gap:8px;}
.easy-mode .move-entry {display:flex;gap:5px;}.easy-mode .move-entry-select {display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:7px;background:#2a222e;color:#d7c7db;border:1px solid #594561;border-radius:8px;padding:10px;font-size:11px;text-align:left;}
.easy-mode .move-entry-select[aria-pressed=true] {border-color:#e9aa87;background:#433037;}
.easy-mode .move-entry-images {display:flex;align-items:center;gap:0;background:#d9d0c2;padding:4px 8px;border-radius:5px;}
.easy-mode .move-entry-images img {width:auto;}
.easy-mode .move-delete {font-size:12px;border:0;background:none;color:#d99791;padding:5px;}
.easy-mode #easy-moves .editor-help,.easy-mode #easy-fonts .editor-help {font-size:12px;line-height:1.8;color:#b6a7bf;}
.easy-mode #easy-moves .easy-details {padding-top:7px;}.easy-mode #easy-moves .easy-details summary {margin-bottom:8px;}

.easy-mode #easy-moves {gap:11px;}
.easy-mode #easy-moves > .easy-section-heading h3 {display:none;}
.easy-mode #easy-moves > .easy-section-heading p {margin:0;line-height:1.65;}
.easy-mode #easy-moves .easy-field {gap:5px;}
.easy-mode #easy-moves .easy-input {height:36px;padding:6px 9px;}
.easy-mode #easy-moves #insertMoveButton {display:none;}
.easy-mode #easy-moves .move-size-editor {gap:9px;}
.easy-mode #easy-moves .move-live-preview {padding:9px;}
.easy-mode #easy-moves .move-live-preview p {font-size:11px;}

.easy-mode .move-target-row {display:flex;gap:10px;align-items:center;font-size:12px;color:#d9c4d7;}
.easy-mode #moveTargetSelect {flex:1;min-width:0;background:#342732;border:1px solid #9b6e5e;color:#f0d8c9;padding:6px 7px;border-radius:6px;font-size:12px;}
.easy-mode #easy-moves {gap:9px;}
.easy-mode #easy-moves > .easy-section-heading p {font-size:11px;line-height:1.5;}
.easy-mode #easy-moves .move-fields {gap:9px;}
.easy-mode #easy-moves .move-live-preview {padding:6px 9px;}
.easy-mode #easy-moves #moveVisualPreview {min-height:52px;}

.easy-mode #moveGapNumber {width:80px;background:#19161e;border:1px solid #66516a;border-radius:6px;padding:6px;color:#eee;}

.easy-mode .font-scheme-list {grid-template-columns:1fr 1fr;gap:9px;}
.easy-mode .font-scheme {padding:10px;min-width:0;gap:7px;}
.easy-mode .font-scheme[data-font-preset="auto"] {grid-column:1/-1;}
.easy-mode .font-scheme[data-font-preset="auto"] .font-scheme-sample {display:none;}
.easy-mode .font-scheme-sample {font-size:20px;line-height:1.35;}
.easy-mode .font-scheme strong {font-size:12px;line-height:1.5;}
.easy-mode .font-scheme small {font-size:11px;line-height:1.55;}

/* Whole-card suites, with optional per-region controls. */
.easy-mode .suite-builtins {display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.easy-mode .suite-builtins button {display:flex;flex-direction:column;gap:8px;text-align:left;padding:13px 11px;background:#36282e;border:1px solid #916758;border-radius:9px;color:#f3dbcf;}
.easy-mode .suite-builtins strong {font-size:14px;}.easy-mode .suite-builtins span {font-size:11px;line-height:1.7;color:#c7b3ba;}
.easy-mode .suite-current {margin:0;font-size:12px;color:#e4bdab;line-height:1.6;}
.easy-mode .suite-font-warning {margin:0;font-size:11px;line-height:1.7;color:#d2b08f;background:#35292b;padding:8px 10px;border-radius:7px;}
.easy-mode .suite-region-row {display:flex;align-items:center;gap:8px;font-size:12px;}
.easy-mode .suite-region-row select {flex:1;min-width:0;padding:8px 6px;color:#efe1ef;background:#251c2b;border:1px solid #6c4e6d;border-radius:6px;font-size:12px;}
.easy-mode .suite-region-row button {border:0;background:transparent;color:#dba991;white-space:nowrap;padding:6px;font-size:12px;}
.easy-mode .suite-control-grid {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.easy-mode .suite-control-grid .easy-field {font-size:12px;gap:6px;}
.easy-mode .suite-control-grid .easy-input {height:36px;padding:6px 8px;font-size:13px;}
.easy-mode .suite-control-grid input[type=checkbox] {height:18px;width:18px;accent-color:#d78c74;}
.easy-mode #suiteRegionHint {margin:0;font-size:11px;line-height:1.65;}
.easy-mode .suite-saved .easy-field {margin:12px 0;}.easy-mode .suite-saved .easy-input {height:37px;font-size:13px;}
.easy-mode .suite-saved-actions {display:flex;flex-wrap:wrap;gap:7px;}
.easy-mode #easy-fonts {gap:13px;}
.easy-mode #easy-fonts > .easy-section-heading h3 {font-size:15px;}
.easy-mode #easy-fonts > .easy-section-heading p {font-size:11px;line-height:1.65;margin-top:5px;}
.easy-mode .suite-compat > *:not(summary) {margin-top:14px;}

.easy-mode #easy-fonts > .easy-section-heading h3 {display:none;}
.easy-mode #easy-fonts > .easy-section-heading p {margin:0;}
.easy-mode .suite-builtins button[aria-pressed=true] {border-color:#edb093;background:#493039;box-shadow:inset 0 2px #edb093;}
.easy-mode .suite-region-row {position:sticky;top:-13px;background:#241d2a;z-index:2;padding:7px 0;}

.easy-mode #suiteReferenceCode {align-self:flex-start;color:#f0c8b0;border:1px solid #946a55;background:#3b2b31;}

/* Standalone Web Edition 2026-09: calmer studio UI, fewer competing borders. */
:root { --paper:#f5f1ea; --ink:#2d2630; --muted:#776d77; --line:#ded5cc; --plum:#4b334b; --coral:#ba6f5c; --coral-dark:#8d4f47; }
body.easy-mode { background:var(--paper); color:var(--ink); font-family:"Microsoft YaHei UI","Microsoft YaHei",sans-serif; }
.easy-mode .app-shell {max-width:1500px;padding:0 34px 34px;}
.easy-mode .topbar {height:76px;background:transparent;color:var(--ink);border-bottom:1px solid #ded6ce;}
.easy-mode .brand-title {color:var(--plum);font-size:20px;font-weight:800;letter-spacing:0;}
.easy-mode .brand-mark {background:var(--plum);box-shadow:0 7px 18px #4b334b25;border:0;}
.easy-mode .brand-mark svg {stroke:#fff0e8;}
.easy-mode .top-actions {gap:8px;}
.easy-mode .button,.easy-mode #exportScaleSelect {height:38px;border-radius:9px;border:1px solid var(--line);background:#fffdf9;color:var(--plum);box-shadow:0 2px 8px #47333b0a;}
.easy-mode .button:hover {border-color:#c59d91;background:#fff8f1;}
.easy-mode .button-primary {background:var(--coral);border-color:var(--coral);color:#fff;box-shadow:0 8px 18px #ba6f5c35;}
.easy-mode .button-primary:hover {background:#a95f50;}
.easy-mode .workspace {grid-template-columns:minmax(0,1.15fr) minmax(420px,.85fr);gap:24px;height:calc(100dvh - 110px);min-height:650px;}
.easy-mode .canvas-panel,.easy-mode .inspector-panel {background:#fffdf9;border:1px solid #e2d9d1;border-radius:18px;box-shadow:0 12px 35px #35253b10;}
.easy-mode .canvas-heading {height:64px;padding:0 25px;border-bottom:1px solid #eee7df;}
.easy-mode .canvas-heading h2,.easy-mode .inspector-heading h2 {color:var(--plum);font-weight:800;}
.easy-mode .canvas-stage {background:radial-gradient(ellipse at center,#eee8e1 0,#f9f5ef 66%,#fffdf9 100%);}
.easy-mode .card-preview-wrap {filter:drop-shadow(0 20px 26px #3c29372e);}
.easy-mode .easy-preview-hint {color:#887c83;}
.easy-mode .render-feedback {background:#faf6f1;color:#71806e;border-top:1px solid #eee7df;}
.easy-mode .easy-font-notice {background:#fff7ea;color:#8e6a4c;border-top:1px solid #f1dfc7;}
.easy-mode .canvas-footer {color:#887b83;background:#fffdf9;}
.easy-mode .inspector-heading {padding:22px 26px 16px;}
.easy-mode .inspector-heading h2 {font-size:18px;}
.easy-mode .easy-tabs {padding:0 22px;border-bottom:1px solid #eee7df;}
.easy-mode .easy-tabs button {height:46px;color:#9b8f98;font-weight:700;}
.easy-mode .easy-tabs button.is-active {color:var(--coral-dark);border-bottom-color:var(--coral);}
.easy-mode .inspector-scroll {padding:21px 26px;scrollbar-color:#d6bbb2 transparent;}
.easy-mode .easy-pane {gap:16px;}
.easy-mode .easy-template-summary {background:#f7f1ed;border:1px solid #eaded7;border-radius:10px;padding:10px 12px;color:#745c68;}
.easy-mode .easy-template-summary button {font-weight:700;color:var(--coral-dark);}
.easy-mode .easy-field-name {color:#493c48;font-size:12px;letter-spacing:.02em;}
.easy-mode .easy-input,.easy-mode .text-input {height:42px;border:1px solid #dcd1cc;border-radius:9px;background:#fff;color:#352d37;box-shadow:inset 0 1px 2px #47333b08;}
.easy-mode .easy-input:focus,.easy-mode .text-input:focus {border-color:#cb8b78;box-shadow:0 0 0 3px #cb8b7825;outline:none;}
.easy-mode textarea.easy-input {min-height:142px;line-height:1.8;}
.easy-mode .easy-type-buttons button {height:40px;background:#fbf8f5;border:1px solid #dfd4cf;color:#84757e;border-radius:9px;font-weight:700;}
.easy-mode .easy-type-buttons button.is-active {background:#f5e2dc;border-color:#d58b79;color:#8b4e48;box-shadow:inset 0 2px #cf806e;}
.easy-mode .easy-grid-2,.easy-mode .easy-stats {gap:13px;}
.easy-mode .rule-tools button,.easy-mode .effect-editor-actions button {border:1px solid #e4d5d0;background:#fff7f3;color:#9b5e55;border-radius:7px;}
.easy-mode .easy-step-footer {padding:14px 26px;border-top:1px solid #eee7df;background:#fffdf9;border-radius:0 0 18px 18px;}
.easy-mode .easy-step-footer button {height:45px;border-radius:10px;font-weight:800;}
.easy-mode .easy-dropzone {background:#fbf6f1;border:1px dashed #d0a295;color:#917775;}
.easy-mode .easy-dropzone strong {color:#593e4b;}
.easy-mode .easy-dialog {background:#fffdf9;color:var(--ink);border-color:#e0d6ce;box-shadow:0 30px 100px #3d293766;}
.easy-mode .template-choice {background:#fcf8f5;border-color:#e7dcd5;color:#4b3a48;}
.easy-mode .template-choice:hover {background:#f8ece7;border-color:#ce8979;}
.easy-mode .psd-template-choice {background:#f5e9e3;border-color:#c89b8e;color:#563d46;}
.easy-mode .font-scheme,.easy-mode .suite-builtins button {background:#fcf8f5;border-color:#e4d8d1;color:#4a3847;}
.easy-mode .font-scheme[aria-pressed=true],.easy-mode .suite-builtins button[aria-pressed=true] {background:#f5e2dc;border-color:#cf806e;box-shadow:inset 3px 0 #cf806e;}
.easy-mode .suite-region-row {background:#fffdf9;}
.easy-mode #moveTargetSelect {background:#fff;color:#403542;border-color:#d5c5bf;}
.easy-mode .move-live-preview {background:#f1ebe3;border-color:#dacbc2;}
.easy-mode .move-entry-select {background:#fbf6f1;border-color:#ded0ca;color:#5b4652;}
.easy-mode .move-entry-select[aria-pressed=true] {background:#f5e2dc;border-color:#cf806e;}
.easy-mode .suite-font-warning {background:#fff7ea;color:#8d6b4d;}
@media (max-width:1150px){.easy-mode .workspace{grid-template-columns:minmax(360px,1fr) 410px;gap:16px}.easy-mode .app-shell{padding-left:18px;padding-right:18px}.easy-mode .top-actions .button{padding-left:10px;padding-right:10px}}
@media (max-width:780px){.easy-mode .topbar{height:auto;min-height:76px;flex-wrap:wrap;padding:12px 0;gap:12px}.easy-mode .top-actions{width:100%;overflow:auto}.easy-mode .workspace{height:auto;min-height:0;display:flex;flex-direction:column}.easy-mode .canvas-panel{height:570px;min-height:570px}.easy-mode .inspector-panel{min-height:620px}.easy-mode .inspector-scroll{padding:18px}.easy-mode .suite-control-grid{grid-template-columns:1fr}.easy-mode .font-scheme-list{grid-template-columns:1fr 1fr}.easy-mode .app-shell{padding:0 12px 20px}}

/* 2026-09 utility-editor refinement: restrained, readable, non-card-stack UI. */
.easy-mode {
  --ink: #2b2530;
  --muted-ink: #6f626d;
  --panel-border: #d8cec6;
  background: #f1ede7;
  color: var(--ink);
}
.easy-mode .app-shell { max-width: 1460px; }
.easy-mode .topbar { border-bottom: 1px solid #d8cec6; }
.easy-mode .canvas-panel,
.easy-mode .inspector-panel {
  border-radius: 10px;
  border-color: #d3c8c0;
  box-shadow: 0 5px 14px rgba(58, 42, 52, .07);
}
.easy-mode .canvas-stage { background: #ebe6df; }
.easy-mode .card-preview-wrap { filter: drop-shadow(0 12px 16px rgba(55, 40, 49, .2)); }
.easy-mode .button,
.easy-mode #exportScaleSelect,
.easy-mode .easy-step-footer button { border-radius: 6px; box-shadow: none; }
.easy-mode .button-primary { box-shadow: none; }
.easy-mode .easy-tabs { gap: 4px; }
.easy-mode .easy-tabs button { border-radius: 0; color: #655864; }
.easy-mode .easy-tabs button.is-active { color: #9a5147; }
.easy-mode .easy-section-heading h3,
.easy-mode .inspector-heading h2 { color: #302633; }
.easy-mode .easy-section-heading p,
.easy-mode .editor-help,
.easy-mode .easy-field small,
.easy-mode .font-scheme small,
.easy-mode .suite-builtins span { color: #70636e !important; }
.easy-mode .easy-field,
.easy-mode .easy-field-name,
.easy-mode .suite-region-row,
.easy-mode .easy-details,
.easy-mode .easy-details summary { color: #453746 !important; }
.easy-mode .easy-input,
.easy-mode .text-input,
.easy-mode select,
.easy-mode .suite-region-row select,
.easy-mode #moveTargetSelect {
  color: #29232d !important;
  background: #fffdfa !important;
  border-color: #cfc3bb;
}
.easy-mode select option { color: #29232d; background: #fffdfa; }
.easy-mode .easy-input::placeholder { color: #8a7d84 !important; }
.easy-mode .easy-input:disabled,
.easy-mode select:disabled { color: #766b73 !important; background: #eee9e3 !important; opacity: 1; }
.easy-mode .suite-region-row {
  position: sticky;
  top: -13px;
  z-index: 2;
  padding: 9px 0;
  background: #fffdfa;
  border-bottom: 1px solid #e3d9d1;
}
.easy-mode .suite-region-row button { color: #a95c50; font-weight: 700; }
.easy-mode .suite-current {
  padding: 9px 11px;
  border-left: 3px solid #ba6f5c;
  background: #f0e3dc;
  color: #714c4e !important;
}
.easy-mode .suite-font-warning {
  border: 1px solid #e1c5a7;
  background: #f8ecda;
  color: #654a35 !important;
}
.easy-mode .suite-builtins { gap: 8px; }
.easy-mode .suite-builtins button,
.easy-mode .font-scheme {
  border-radius: 6px;
  background: #fffdfa;
  border-color: #d6cbc3;
  color: #40323f;
  box-shadow: none;
}
.easy-mode .suite-builtins button[aria-pressed=true],
.easy-mode .font-scheme[aria-pressed=true] {
  background: #f2dfd9;
  border-color: #bc7464;
  box-shadow: inset 4px 0 #bc7464;
  color: #4a3038;
}
.easy-mode [data-suite-control] { border-radius: 5px; }
.easy-mode .move-live-preview { background: #ebe5de; border-color: #d1c4bb; }
.easy-mode .easy-details { border-top-color: #d8cec6; }
.easy-mode .easy-details summary { font-weight: 700; }
.easy-mode .easy-step-footer { border-radius: 0 0 10px 10px; box-shadow: none; }
@media (max-width: 780px) {
  .easy-mode .suite-region-row { top: -18px; }
}

/* Utility-editor controls: compact rows instead of decorative nested cards. */
.easy-mode .move-entry { gap: 8px; align-items: stretch; }
.easy-mode .move-entry-select {
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 5px;
  background: #fffdfa;
  border: 1px solid #d6cbc3;
  color: #40323f;
  box-shadow: none;
}
.easy-mode .move-entry-select[aria-pressed=true] {
  background: #f2dfd9;
  border-color: #bc7464;
  box-shadow: inset 4px 0 #bc7464;
}
.easy-mode .move-entry-images { background: #ebe5de; border: 1px solid #d9cec5; }
.easy-mode .move-delete {
  min-width: 46px;
  border: 1px solid #d6cbc3;
  border-radius: 5px;
  background: #fffdfa;
  color: #9a5147;
}
.easy-mode .move-delete:hover { background: #f8e9e3; border-color: #bc7464; }
.easy-mode .suite-builtins button { min-height: 72px; padding: 11px 12px; }
.easy-mode .suite-builtins strong { color: #3e3040; }
.easy-mode .suite-builtins span { color: #6f626d !important; }
.easy-mode .suite-current { margin-top: 3px; }
.easy-mode .editor-help { color: #70636e !important; }

/* Brand asset refinement: quiet editorial mark, not a generic app icon. */
.easy-mode .brand-lockup { gap: 14px; align-items: center; }
.easy-mode .brand-mark {
  width: 46px; height: 46px; display: grid; place-items: center;
  background: #f7efe8; border: 1px solid #c88976; border-radius: 50%;
  box-shadow: none; color: #a85f52;
}
.easy-mode .brand-mark svg { width: 31px; height: 31px; stroke: currentColor; }
.easy-mode .brand-lockup > div:nth-child(2) { display: flex; flex-direction: column; gap: 2px; }
.easy-mode .eyebrow { color: #8d716e; font-size: 9px; letter-spacing: .18em; line-height: 1; }
.easy-mode .brand-title {
  color: #342838; font-family: "Noto Serif SC", "Source Han Serif SC", "STSong", serif;
  font-size: 22px; font-weight: 700; letter-spacing: .08em; line-height: 1.15;
}
.easy-mode .connection-pill {
  margin-left: 8px; padding-left: 13px; border-left: 1px solid #d7c8c0;
  background: none; border-radius: 0; color: #75666e; font-size: 11px;
}
.easy-mode .status-dot { background: #b86f5e; box-shadow: none; }
@media (max-width: 780px) {
  .easy-mode .brand-mark { width: 40px; height: 40px; }
  .easy-mode .brand-title { font-size: 18px; }
  .easy-mode .connection-pill { display: none; }
}

/* Final visual pass: editorial card-workbench, less SaaS chrome. */
.easy-mode body { background: #eee9e1; }
.easy-mode .app-shell { padding-top: 10px; }
.easy-mode .topbar {
  height: 72px; padding: 0 4px 0 2px; background: transparent;
  border-bottom: 1px solid #d2c6bc; box-shadow: none;
}
.easy-mode .brand-lockup { gap: 12px; }
.easy-mode .brand-mark { width: 42px; height: 42px; border-radius: 12px; background: #4e354a; border: 0; color: #efaa91; }
.easy-mode .brand-mark svg { width: 29px; height: 29px; }
.easy-mode .eyebrow { font-size: 8px; letter-spacing: .22em; color: #8d746f; }
.easy-mode .brand-title { font-size: 20px; letter-spacing: .12em; color: #342838; }
.easy-mode .connection-pill { font-size: 10px; color: #75666e; }
.easy-mode .top-actions { gap: 6px; }
.easy-mode .top-actions .button-quiet { background: transparent; border: 1px solid #d4c8bf; color: #544651; }
.easy-mode .top-actions .button-quiet:hover { background: #f8f3ed; border-color: #b98a7d; }
.easy-mode #exportScaleSelect { border: 1px solid #d4c8bf; background: #f8f4ee; }
.easy-mode .button-primary { background: #a65f53; border-color: #a65f53; color: #fffaf6; }
.easy-mode .workspace { gap: 18px; }
.easy-mode .canvas-panel, .easy-mode .inspector-panel { background: #fbf9f5; border-radius: 8px; border-color: #d4c9c0; box-shadow: 0 3px 10px rgba(49,36,42,.06); }
.easy-mode .canvas-heading { height: 58px; padding: 0 20px; }
.easy-mode .canvas-heading h2, .easy-mode .inspector-heading h2 { font-size: 16px; letter-spacing: .04em; }
.easy-mode .inspector-heading { padding: 18px 22px 12px; }
.easy-mode .inspector-heading p { color: #766a70; font-size: 11px; }
.easy-mode .easy-tabs { padding: 0 18px; background: #f5f0ea; }
.easy-mode .easy-tabs button { height: 42px; font-size: 12px; font-weight: 700; }
.easy-mode .easy-tabs button.is-active { background: transparent; border-bottom-width: 2px; }
.easy-mode .inspector-scroll { padding: 18px 22px; }
.easy-mode .easy-section-heading { padding-bottom: 5px; border-bottom: 1px solid #e2d8d0; }
.easy-mode .easy-section-heading h3 { font-size: 14px; }
.easy-mode .easy-section-heading p { color: #756972 !important; font-size: 11px; }
.easy-mode .easy-template-summary { border-radius: 5px; background: #f4eee8; border-color: #ddd0c7; }
.easy-mode .easy-input, .easy-mode .text-input, .easy-mode select { border-radius: 5px; box-shadow: none; }
.easy-mode .easy-input:focus, .easy-mode .text-input:focus { box-shadow: 0 0 0 2px rgba(166,95,83,.2); }
.easy-mode .easy-type-buttons button { border-radius: 5px; }
.easy-mode .easy-step-footer { padding: 12px 22px; }
.easy-mode .easy-step-footer button { border-radius: 5px; }
.easy-mode .easy-dialog { border-radius: 8px; }
.easy-mode .template-grid { gap: 8px; }
.easy-mode .template-choice { border-radius: 5px; box-shadow: none; }

/* Toast should read as a status message, not an unexplained black popup. */
.easy-mode .toast {
  right: 22px; bottom: 20px; max-width: 360px; padding: 11px 14px;
  color: #49363f; background: #fff8f1; border: 1px solid #c99583;
  border-left: 4px solid #a65f53; border-radius: 5px;
  box-shadow: 0 8px 20px rgba(58, 40, 44, .14); font-size: 12px; line-height: 1.5;
}

/* Artwork-only feather controls; keep the existing editor theme. */
.easy-mode .art-blend-panel {border-top:1px solid #d8cec6;padding-top:14px;color:#453746;}
.easy-mode .art-blend-panel h3 {margin:0;font-size:14px;}
.easy-mode .art-blend-panel p {font-size:12px;line-height:1.7;color:#70636e;margin:8px 0 12px;}
.easy-mode .art-blend-panel .easy-field {margin:10px 0;}
.easy-mode #artBlendControls[hidden] {display:none;}

.startup-failure {position:fixed;inset:25% 10% auto;z-index:1000;padding:24px;background:#fff8f1;color:#453746;border:2px solid #a65f53;border-radius:6px;box-shadow:0 0 0 100vmax #19121bcc;font:16px/1.6 sans-serif;}
.startup-failure button {padding:10px 20px;background:#a65f53;color:white;border:0;border-radius:4px;cursor:pointer;}