.m3e-appearance { color:var(--md-on-surface); background:var(--m3e-surface); }
dialog.m3e-appearance { width:min(600px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; padding:28px; border:0; border-radius:28px; box-shadow:0 20px 80px #17251f26; }
dialog.m3e-appearance::backdrop { background:#17251f66; }
.m3e-appearance header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.m3e-appearance h2 { margin:0; font-size:28px; line-height:1.3; }
.m3e-appearance p { margin:12px 0 20px; color:var(--md-muted); font-size:15px; line-height:1.6; }
.m3e-appearance fieldset { min-width:0; margin:0; padding:0; border:0; }
.m3e-appearance legend { margin-bottom:12px; font-size:14px; font-weight:600; }
.m3e-theme-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.m3e-theme-option { position:relative; display:flex; align-items:center; gap:12px; min-height:72px; padding:14px; border:1px solid var(--md-outline); border-radius:20px; color:var(--md-on-surface); background:var(--md-surface); cursor:pointer; font-size:14px; }
.m3e-theme-option:has(input:checked) { border-color:var(--md-primary); background:var(--md-primary-container); box-shadow:inset 0 0 0 1px var(--md-primary); color:var(--md-on-primary-container); font-weight:700; }
.m3e-theme-option input { flex:0 0 auto; width:20px; height:20px; margin:0; accent-color:var(--md-primary); }
.m3e-theme-option:focus-within { outline:2px solid var(--md-primary); outline-offset:3px; }
.m3e-theme-swatch { flex:0 0 28px; height:32px; border-radius:12px 12px 6px 12px; background:linear-gradient(135deg,var(--swatch) 60%,var(--swatch-accent) 60%); }
.m3e-theme-option:has([value="teal-apricot"]) { --swatch:#155d4d; --swatch-accent:#ffdbbd; }
.m3e-theme-option:has([value="indigo-mist"]) { --swatch:#244eb4; --swatch-accent:#f4dfc2; }
.m3e-theme-option:has([value="berry-pink"]) { --swatch:#6f3d83; --swatch-accent:#ffdde7; }
.m3e-theme-option:has([value="terracotta-sand"]) { --swatch:#8c4a25; --swatch-accent:#dfe8c8; }
.m3e-appearance footer { display:flex; justify-content:flex-end; margin-top:24px; }
.m3e-appearance .m3e-done { min-height:48px; padding:12px 28px; border:0; border-radius:28px; background:var(--md-primary); color:var(--md-on-primary); font:inherit; font-weight:700; cursor:pointer; }
.m3e-icon-button { display:grid; place-items:center; flex:0 0 44px; width:44px; height:44px; min-height:44px; padding:0; border:0; border-radius:50%; background:var(--md-surface-container); color:var(--md-on-surface); font:inherit; font-size:22px; cursor:pointer; }
.m3e-icon-button:hover { background:var(--md-surface-high); }
.m3e-icon-button:active { border-radius:16px; }
html[data-m3e-theme] body:has(#m3eAppearance:modal) .workspace-character { visibility:hidden; }
@media(max-width:599px) {
 dialog.m3e-appearance { width:100%; max-height:calc(100dvh - 12px); margin:auto 0 0; padding:24px 20px max(24px,env(safe-area-inset-bottom)); border-radius:28px 28px 0 0; }
 .m3e-theme-options { grid-template-columns:1fr; }
 .m3e-appearance h2 { font-size:24px; }
}
@media(prefers-reduced-motion:no-preference) {
 .m3e-icon-button,.m3e-theme-option { transition:background-color 160ms var(--m3e-ease),border-radius 120ms var(--m3e-ease); }
 dialog.m3e-appearance[open] { animation:m3e-appearance-enter 240ms var(--m3e-ease); }
 @keyframes m3e-appearance-enter { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
}