/* Draw Emoji page */
.de-card{display:grid;grid-template-columns:1fr 1fr;gap:22px;background:var(--bg-card);border:1px solid var(--border);border-radius:24px;padding:22px;box-shadow:var(--shadow)}
.de-panel{display:flex;flex-direction:column;gap:10px;min-width:0}
.de-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.de-head b{font-size:17px;color:var(--text)}
.de-head span{font-size:13px;color:var(--text-muted)}
.de-pad,.de-out{position:relative;aspect-ratio:1/1;width:100%;border-radius:20px;border:2px dashed var(--border);overflow:hidden}
.de-pad{background:#fff;touch-action:none;cursor:crosshair}
.de-pad.erasing{cursor:cell}
[data-theme=dark] .de-pad{background:#f8fafc}
.de-pad canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.de-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#94a3b8;font-size:15px;pointer-events:none;text-align:center;padding:20px}
.de-empty span{font-size:42px}
.de-empty[hidden]{display:none}
.de-out{border-style:solid;background-color:#fff;background-image:linear-gradient(45deg,#eef0f4 25%,transparent 25%),linear-gradient(-45deg,#eef0f4 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eef0f4 75%),linear-gradient(-45deg,transparent 75%,#eef0f4 75%);background-size:22px 22px;background-position:0 0,0 11px,11px -11px,-11px 0;display:flex;align-items:center;justify-content:center}
.de-out svg{width:88%;height:88%;display:block}
.de-out svg [data-sid]{cursor:pointer}
.de-out svg [data-sid]:hover{filter:brightness(1.06)}
.de-wait{color:#94a3b8;font-size:15px}
.de-out.pop svg{animation:dePop .28s ease}
@keyframes dePop{from{transform:scale(.94);opacity:.6}to{transform:none;opacity:1}}
.de-tools{display:flex;gap:8px;flex-wrap:wrap}
.de-tool{padding:8px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:14px;cursor:pointer}
.de-tool:hover{border-color:var(--primary);color:var(--primary)}
.de-tool.on{border-color:var(--primary);background:rgba(99,102,241,.12);color:var(--primary);font-weight:600}
.de-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted)}
.de-label span{text-transform:none;letter-spacing:0;font-weight:500}
.de-colors{display:flex;flex-wrap:wrap;gap:7px;align-items:center}
.de-sw{width:32px;height:32px;border-radius:50%;border:2px solid var(--border);cursor:pointer;padding:0;position:relative;transition:transform .1s}
.de-sw:hover{transform:scale(1.1)}
.de-sw.on{border-color:var(--primary);box-shadow:0 0 0 3px rgba(99,102,241,.3)}
.de-sw.auto{width:auto;padding:0 12px;border-radius:16px;background:var(--bg);color:var(--text);font-size:13px;font-weight:600}
.de-pick{overflow:hidden;background:conic-gradient(from 0deg,#ef4444,#f59e0b,#eab308,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444)}
.de-pick input{position:absolute;inset:-8px;width:calc(100% + 16px);height:calc(100% + 16px);opacity:0;cursor:pointer;border:0;padding:0}
.de-pick::after{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font:800 16px/1 system-ui,sans-serif;text-shadow:0 1px 3px rgba(0,0,0,.5);pointer-events:none}
.de-actions{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.de-actions .btn{justify-content:center;padding:10px 8px;font-size:14px}
.de-wide{grid-column:1/-1;font-size:15px!important;padding:12px!important}
#de-edit.on{border-color:var(--primary);color:var(--primary)}
.de-try{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:16px 0 4px;font-size:13px;color:var(--text-muted)}
#de-samples{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.de-sample{padding:6px 12px;border-radius:16px;border:1px solid var(--border);background:var(--bg-card);color:var(--text);font-size:13px;cursor:pointer}
.de-sample:hover{border-color:var(--primary);color:var(--primary)}
.de-editor{background:var(--bg-card);border:1px solid var(--border);border-radius:24px;padding:18px 22px 22px;box-shadow:var(--shadow);margin-top:18px;scroll-margin-top:12px}
.de-editor[hidden]{display:none}
.de-editor-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.de-editor-head b{display:block;font-size:18px;color:var(--text)}
.de-editor-head span{font-size:13px;color:var(--text-muted)}
.mx-credit{font-size:12px;color:var(--text-muted);margin-top:14px}
.de-mini{display:none}
@media (max-width:820px){
  .de-mini:not(:empty){display:block;position:absolute;top:8px;right:8px;width:26%;aspect-ratio:1/1;border-radius:14px;background:#fff;box-shadow:0 4px 14px rgba(15,23,42,.18);padding:4px;pointer-events:none}
  .de-mini svg{width:100%;height:100%;display:block}
  .de-card{grid-template-columns:1fr;padding:14px;gap:16px;border-radius:18px}
  .de-pad,.de-out{max-width:440px;margin:0 auto}
  .de-editor{padding:14px;border-radius:18px}
}
.de-head-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.de-toggle{padding:5px 11px;border-radius:14px;border:1px solid var(--border);background:var(--bg);color:var(--text);font-size:13px;cursor:pointer;white-space:nowrap}
.de-toggle:hover{border-color:var(--primary);color:var(--primary)}
.de-toggle.on{border-color:var(--primary);background:rgba(99,102,241,.12);color:var(--primary);font-weight:600}
.de-styles{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.de-styles:empty{display:none}
.de-st{display:flex;flex-direction:column;align-items:center;gap:2px;padding:5px 3px 4px;border-radius:12px;border:2px solid var(--border);background:var(--bg-card);color:var(--text-muted);font-size:11px;font-weight:600;cursor:pointer}
.de-st img{width:100%;aspect-ratio:1/1;display:block}
.de-st:hover{border-color:var(--primary-light)}
.de-st.on{border-color:var(--primary);background:rgba(99,102,241,.1);color:var(--primary)}