/* The editor uses its own palette so even a draft cannot hide its controls. */
#ysAppearanceEditor{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:12px;background:#07111acc;direction:rtl}
#ysAppearanceEditor>div{width:100%;max-width:680px;max-height:92dvh;overflow:auto;background:#fffdf8!important;color:#241e16!important;border:1px solid #b19a74;border-radius:20px;padding:22px;box-shadow:0 20px 70px #0006;font:16px/1.7 system-ui,Tahoma,sans-serif}
#ysAppearanceEditor :is(h2,h3,label,p,small,span,output){color:#241e16!important;opacity:1!important;font-family:inherit}
#ysAppearanceEditor h2{font-size:22px!important;margin:0}
#ysAppearanceEditor label{display:block;font-size:15px!important;font-weight:600;margin:12px 0 6px}
#ysAppearanceEditor :is(button,input,select){font:600 16px/1.5 system-ui,Tahoma,sans-serif!important;color:#241e16!important;background:#fff!important;border:1px solid #a08b6a!important;border-radius:10px;padding:10px;min-height:46px}
#ysAppearanceEditor button{cursor:pointer;white-space:normal}
#ysAppearanceEditor button[data-save]{background:#51341b!important;color:#fff!important}
#ysAppearanceEditor button:disabled{opacity:.6!important}
#ysAppearanceEditor input[type=color]{width:100%;height:50px;padding:5px}
#ysAppearanceEditor input[type=range]{width:100%;padding:0;accent-color:#78582e}
#ysAppearanceEditor .ya-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#ysAppearanceEditor .ya-head,#ysAppearanceEditor .ya-actions{display:flex;gap:10px;justify-content:space-between;flex-wrap:wrap;align-items:center}
#ysAppearanceEditor .ya-actions{position:sticky;bottom:-22px;background:#fffdf8;padding:14px 0;margin-top:16px;border-top:1px solid #d9ccb8}
#ysAppearanceEditor [data-preview]{margin-top:18px;border:2px solid #a08b6a;overflow-wrap:anywhere}
#ysAppearanceEditor [data-status]{min-height:28px;white-space:pre-wrap}
#ysAppearanceEditor [data-error=true]{color:#a11524!important}
#ysAppearanceEditor [data-help]{font-size:14px!important}
#ysAppearanceEditor.ya-picking{inset:auto 8px 8px;padding:0;background:transparent;pointer-events:none}
#ysAppearanceEditor.ya-picking>div{pointer-events:auto;padding:12px;max-width:680px;max-height:150px;box-shadow:0 5px 35px #0007}
#ysAppearanceEditor.ya-picking [data-editor-form],#ysAppearanceEditor.ya-picking .ya-actions{display:none}
body.ya-picking #app :is(input,select,textarea,button,label,h1,h2,h3,p,small,td,th,.meta,.card,.stat){cursor:crosshair!important;outline:1px dashed #e78518;outline-offset:2px}
@media(max-width:480px){#ysAppearanceEditor>div{padding:16px}#ysAppearanceEditor .ya-actions{bottom:-16px}#ysAppearanceEditor .ya-grid{gap:8px}}