.x-tool { border:1px solid #dbe2ea; border-radius:8px; background:#fff; color:#34445b; padding:8px 11px; font-size:12px; cursor:pointer; white-space:nowrap; }
.x-tool:hover { border-color:#94a3b8; background:#f8fafc; }
.x-dialog { width:min(760px,calc(100vw - 24px)); max-height:80vh; margin:auto; padding:20px; border:1px solid #e2e8f0; border-radius:16px; box-shadow:0 24px 70px #0f172a40; color:#1e293b; }
.x-dialog::backdrop { background:#0f172a66; }
.x-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px; }
.x-dialog-head h2 { font-size:17px; }.x-dialog-head p { color:#64748b; font-size:12px; margin-top:5px; }
.x-dialog-close { border:0; background:#f1f5f9; border-radius:8px; padding:8px 12px; cursor:pointer; }
.x-style-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.x-style-card { display:block; min-width:0; padding:8px; border:1px solid #e2e8f0; border-radius:10px; background:white; text-align:left; cursor:pointer; }
.x-style-card[aria-pressed="true"] { border-color:#60a5fa; background:#eff6ff; }
.x-thumb { height:90px; overflow:hidden; border:1px solid #e2e8f0; border-radius:6px; }
.x-style-name { display:block; margin-top:8px; color:#334155; font-size:12px; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.x-style-type { display:block; margin-top:3px; color:#94a3b8; font-size:10px; }
.x-status { position:fixed; bottom:20px; right:20px; max-width:min(420px,90vw); padding:12px 16px; color:#fff; background:#1e293b; border-radius:10px; font-size:13px; z-index:100; line-height:1.5; }
@media(max-width:650px){ .x-style-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .header-actions{overflow-x:auto;} }