/* Scoped palette: the existing studios retain their own themes. */
.art-mosaic{--am-accent:#5969DD;--am-deep:#3E4DB5;--am-soft:#EDF0FF;--am-line:#AAB5F5;--am-ink:#242944;--am-muted:#767D99;--am-white:#fff;width:100%;min-width:0;margin:0 0 20px;border:1px solid var(--am-line);border-left:5px solid var(--am-accent);border-radius:16px;background:var(--am-white);color:var(--am-ink);font:13px/1.55 inherit;overflow:hidden;box-sizing:border-box}
.art-mosaic *{box-sizing:border-box}
.art-mosaic button,.art-mosaic input,.art-mosaic select{font:inherit;accent-color:var(--am-accent)}
.art-mosaic button{cursor:pointer}
.art-mosaic button:disabled{opacity:.45;cursor:default}
.art-mosaic button:focus-visible,.art-mosaic input:focus-visible,.art-mosaic select:focus-visible,.art-mosaic summary:focus-visible{outline:2px solid var(--am-accent);outline-offset:3px}
.art-mosaic .am-heading{display:grid;grid-template-columns:40px minmax(0,1fr) auto 18px;gap:9px 12px;align-items:center;width:100%;min-height:96px;padding:18px 20px 14px;border:0;border-radius:0;background:var(--am-soft);color:var(--am-ink);text-align:left}
.am-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:var(--am-accent);color:#fff}
.am-icon svg{width:27px;height:27px}
.am-heading-copy{min-width:0;display:grid;gap:3px}
.am-title{font-size:17px;font-weight:600;line-height:1.4}
.am-title small{display:inline-block;vertical-align:middle;margin-left:5px;padding:1px 5px;border:1px solid var(--am-line);border-radius:4px;font-size:9px;font-weight:600;letter-spacing:.8px;color:var(--am-deep)}
.am-subtitle{font-size:12px;line-height:1.45;color:var(--am-muted);overflow-wrap:anywhere}
.am-status{font-size:11px;color:var(--am-muted);white-space:nowrap}
.am-status.is-on{color:var(--am-deep);font-weight:600}
.am-chevron{font:24px/1 sans-serif;color:var(--am-deep);text-align:center;transition:transform 220ms ease-in-out}
.is-expanded .am-chevron{transform:rotate(180deg)}
.am-ribbon{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;grid-column:1/-1;width:100%;height:7px;margin-top:4px}
.am-ribbon i{display:block;border-radius:4px}
.am-collapse{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows 250ms ease-in-out,visibility 250ms}
.is-expanded .am-collapse{grid-template-rows:1fr;visibility:visible}
.am-collapse-inner{min-height:0;overflow:hidden}
.am-body{display:grid;gap:22px;padding:22px 20px}
.am-enable{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}
.am-enable input{appearance:none;width:40px;height:24px;border:0;border-radius:20px;background:#bec3d4;position:relative;cursor:pointer;flex:none;transition:background-color .2s}
.am-enable input::after{content:'';position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s}
.am-enable input:checked{background:var(--am-accent)}
.am-enable input:checked::after{transform:translateX(16px)}
.am-section{display:grid;gap:10px;min-width:0}
.art-mosaic h3{font-size:13px;font-weight:600;margin:0;color:var(--am-ink)}
.am-color-modes,.am-actions{display:flex;flex-wrap:wrap;gap:7px}
.art-mosaic .am-color-modes button,.art-mosaic .am-actions button{min-height:38px;padding:7px 10px;border:1px solid #d7dbec;border-radius:7px;background:var(--am-white);color:var(--am-ink);font-size:12px;line-height:1.4}
.art-mosaic [aria-pressed="true"]{border-color:var(--am-accent)!important;background:var(--am-soft)!important;color:var(--am-deep)!important}
.am-feedback{margin:0;font-size:12px;color:var(--am-muted)}
.am-feedback:empty{display:none}
.am-styles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}
.art-mosaic .am-styles button{padding:5px;border:1px solid #d7dbec;border-radius:9px;background:var(--am-white);color:var(--am-ink);min-width:0;overflow:hidden}
.am-styles canvas{display:block;width:100%;height:auto;aspect-ratio:200/112;border-radius:5px;background:var(--am-soft)}
.am-styles span{display:block;font-size:11px;line-height:1.5;padding:6px 0 2px}
.am-sliders{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 20px}
.am-sliders label{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 8px;align-items:center;font-size:12px}
.am-sliders output{font-variant-numeric:tabular-nums;color:var(--am-deep);min-width:24px;text-align:right}
.am-sliders input[type="range"]{grid-column:1/-1;display:block;width:100%;min-width:0;height:28px;margin:0;cursor:pointer}
.am-colors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.art-mosaic .am-colors button{height:34px;background:var(--am-swatch);border:3px solid transparent;border-radius:6px;box-shadow:inset 0 0 0 1px #00000015}
.art-mosaic .am-colors button[aria-pressed="true"]{outline:2px solid var(--am-accent);outline-offset:2px;background:var(--am-swatch)!important;border:3px solid var(--am-white)!important}
.am-custom-color,.am-preset-label{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px}
.am-custom-color input{width:48px;height:34px;padding:2px;border:1px solid var(--am-line);border-radius:5px;background:var(--am-white)}
.am-advanced{border-block:1px solid #d7dbec;padding:12px 0}
.am-advanced summary{cursor:pointer;font-size:13px;min-height:28px}
.am-advanced-controls{padding-top:12px}
.am-advanced-controls p{margin:0;font-size:12px;color:var(--am-muted);grid-column:1/-1}
.art-mosaic select{min-width:0;max-width:100%;min-height:38px;border:1px solid #d7dbec;border-radius:7px;padding:5px 9px;color:var(--am-ink);background:var(--am-white)}
.am-actions button{flex:1 1 auto}
.am-preset-label select{flex:1}
.am-note{font-size:12px;line-height:1.6;color:var(--am-muted);margin:0}
.am-watermark-preview{display:flex;align-items:center;gap:12px;min-width:0;font-size:12px;color:var(--am-muted);overflow-wrap:anywhere}
.am-watermark-preview img{width:64px;height:64px;object-fit:contain;flex:none;border:1px solid var(--am-line);border-radius:7px;background:repeating-conic-gradient(#e6e8f1 0 25%,#fff 0 50%) 0/12px 12px}
.art-mosaic [hidden]{display:none!important}
/* 不可移動 Day Night 的預覽位置：卡片放在 .panel 最上面，預覽與分頁列維持原樣。 */
@media(max-width:580px){
  .art-mosaic{border-radius:14px;margin-bottom:18px}
  .workspace>.art-mosaic{grid-column:1;margin-bottom:0}
  .art-mosaic .am-heading{min-height:92px;padding:14px 14px 12px;grid-template-columns:36px minmax(0,1fr) auto 14px;gap:8px}
  .am-icon{width:36px;height:36px;border-radius:10px}.am-icon svg{width:24px;height:24px}.am-title{font-size:16px}.am-title small{font-size:8px;margin-left:2px;padding:1px 3px}.am-status{font-size:10px}.am-subtitle{font-size:12px}.am-ribbon{height:6px}.am-body{padding:18px 14px;gap:20px}.am-styles{grid-template-columns:repeat(2,minmax(0,1fr))}.am-styles span{font-size:12px}.am-sliders{grid-template-columns:minmax(0,1fr)}
  .art-mosaic .am-color-modes button,.art-mosaic .am-actions button{min-height:42px}.am-sliders input[type="range"]{height:34px}
}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .art-mosaic{--am-soft:#252b4b;--am-line:#59628b;--am-ink:#e6e9fa;--am-muted:#a7aecb;--am-white:#191e30;--am-deep:#b1bcff}}
:root[data-theme="dark"] .art-mosaic{--am-soft:#252b4b;--am-line:#59628b;--am-ink:#e6e9fa;--am-muted:#a7aecb;--am-white:#191e30;--am-deep:#b1bcff}
@media(prefers-reduced-motion:reduce){.art-mosaic *{transition:none!important;animation:none!important}}