.beautifier-app { display:grid; grid-template-columns:310px minmax(0,1fr); min-height:690px; overflow:hidden; border:1px solid var(--yk-line); border-radius:22px; background:var(--yk-surface); box-shadow:var(--yk-shadow-md); }
.beautifier-controls { border-right:1px solid var(--yk-line); background:var(--yk-surface); }
.control-head { padding:17px 16px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--yk-line); }
.control-head h2 { margin:3px 0 0; color:var(--yk-ink); font-size:17px; letter-spacing:-.02em; }
.beautifier-tool .studio-primary,.beautifier-tool .studio-secondary {
  min-height:38px !important; width:auto !important; margin:0 !important; padding:0 12px !important; display:inline-flex !important; align-items:center; justify-content:center; gap:7px;
  border-radius:10px !important; font-size:11px !important; font-weight:760 !important; box-shadow:none !important; cursor:pointer; transition:transform .16s var(--yk-ease),background .16s,border-color .16s !important;
}
.beautifier-tool .studio-primary { border:1px solid var(--yk-primary) !important; background:var(--yk-primary) !important; color:#fff !important; }
.beautifier-tool .studio-primary:hover:not(:disabled) { background:var(--yk-primary-600) !important; transform:translateY(-1px); }
.beautifier-tool .studio-secondary { border:1px solid var(--yk-line) !important; background:var(--yk-surface) !important; color:var(--yk-text) !important; }
.beautifier-tool .studio-secondary:hover:not(:disabled) { background:var(--yk-surface-muted) !important; border-color:var(--yk-line-strong) !important; transform:translateY(-1px); }
.beautifier-tool .studio-primary:disabled,.beautifier-tool .studio-secondary:disabled { opacity:.42 !important; cursor:not-allowed !important; transform:none !important; }
.beautifier-tool button svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.beautifier-tool .icon-only { width:38px !important; padding:0 !important; }
.control-block { padding:15px 16px; border-bottom:1px solid var(--yk-line); }
.control-label { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:9px; color:var(--yk-muted); font-size:10px; font-weight:750; }
.control-label b { color:var(--yk-ink); font-size:9px; }
.background-presets { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.beautifier-tool .bg-preset { width:38px !important; height:38px !important; min-height:38px !important; padding:3px !important; border:2px solid transparent !important; border-radius:11px !important; background:transparent !important; box-shadow:none !important; }
.bg-preset span { display:block; width:100%; height:100%; border:1px solid rgba(15,23,42,.08); border-radius:8px; background:var(--bg); }
.beautifier-tool .bg-preset.is-active { border-color:var(--yk-primary) !important; }
.background-custom { display:grid; grid-template-columns:1fr 1fr 72px; gap:7px; margin-top:11px; }
.background-custom label { min-width:0; display:flex; align-items:center; justify-content:space-between; gap:5px; padding:6px 7px; border:1px solid var(--yk-line); border-radius:9px; background:var(--yk-surface-soft); color:var(--yk-muted); font-size:8.5px; font-weight:700; }
.background-custom input[type="color"] { width:25px !important; height:25px !important; min-height:25px !important; border-radius:7px !important; }
.background-custom .switch-row input { width:17px !important; height:17px !important; }
.beautifier-tool input[type="range"] { min-height:20px !important; }
.control-two { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.control-two label { color:var(--yk-muted); font-size:9.5px; font-weight:700; }
.control-two select { width:100%; min-height:38px !important; margin-top:6px; font-size:10.5px !important; }
.switches { display:grid; gap:7px; }
.switch-card { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 11px; border:1px solid var(--yk-line); border-radius:11px; background:var(--yk-surface-soft); cursor:pointer; }
.switch-card span { min-width:0; }
.switch-card strong,.switch-card small { display:block; }
.switch-card strong { color:var(--yk-ink); font-size:10.5px; }
.switch-card small { margin-top:2px; color:var(--yk-muted); font-size:8.5px; }
.switch-card input { width:18px !important; height:18px !important; min-height:18px !important; }
.beautifier-controls .yk-local-note { margin:14px 16px; }

.beautifier-preview { min-width:0; display:flex; flex-direction:column; background:var(--yk-surface-soft); }
.preview-toolbar { min-height:60px; padding:10px 12px; display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid var(--yk-line); background:var(--yk-surface); }
.preview-file,.preview-actions,.workflow-links { display:flex; align-items:center; gap:7px; min-width:0; }
.preview-file > span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--yk-muted); font-size:9.5px; }
.preview-stage { position:relative; flex:1; min-height:560px; overflow:hidden; display:grid; place-items:center; padding:28px; background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--yk-primary-soft) 45%,transparent),transparent 55%),var(--yk-bg); }
.preview-stage::after { content:""; position:absolute; inset:0; pointer-events:none; opacity:.3; background-image:linear-gradient(rgba(148,163,184,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.08) 1px,transparent 1px); background-size:24px 24px; mask-image:radial-gradient(circle at center,#000,transparent 75%); }
.preview-empty { position:relative; z-index:2; width:min(460px,100%); text-align:center; }
.empty-card-demo { position:relative; width:260px; height:166px; margin:0 auto; overflow:hidden; border:1px solid rgba(255,255,255,.7); border-radius:18px; background:linear-gradient(135deg,#dbeafe,#ede9fe 55%,#fce7f3); box-shadow:0 24px 50px rgba(37,99,235,.18); transform:rotate(-1deg); }
.demo-window { position:absolute; inset:28px 30px auto; height:24px; display:flex; align-items:center; gap:5px; padding:0 9px; border-radius:9px 9px 0 0; background:#fff; }
.demo-window i { width:5px; height:5px; border-radius:50%; background:#fb7185; }.demo-window i:nth-child(2){background:#fbbf24}.demo-window i:nth-child(3){background:#4ade80}
.demo-content { position:absolute; left:30px; right:30px; top:52px; bottom:27px; padding:16px; display:grid; gap:9px; border-radius:0 0 9px 9px; background:#fff; }
.demo-content span { height:8px; border-radius:999px; background:#e2e8f0; }.demo-content span:nth-child(1){width:58%}.demo-content span:nth-child(2){width:82%}.demo-content span:nth-child(3){width:70%}
.preview-empty h2 { margin:22px 0 7px; color:var(--yk-ink); font-size:20px; letter-spacing:-.025em; }
.preview-empty p { margin:0 0 16px; color:var(--yk-muted); font-size:11px; }
.canvas-holder { position:relative; z-index:2; max-width:100%; max-height:100%; overflow:auto; padding:10px; }
#previewCanvas { display:block; max-width:min(100%,900px); max-height:640px; width:auto; height:auto; box-shadow:0 18px 54px rgba(15,23,42,.13); }
.drop-overlay { position:absolute; inset:18px; z-index:10; display:none; place-items:center; border:2px dashed var(--yk-primary); border-radius:18px; background:color-mix(in srgb,var(--yk-primary-soft) 90%,transparent); color:var(--yk-primary); font-size:16px; font-weight:800; pointer-events:none; }
.preview-stage.is-dragging .drop-overlay { display:grid; }
.preview-footer { min-height:55px; padding:9px 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-top:1px solid var(--yk-line); background:var(--yk-surface); }
.preview-footer > span { color:var(--yk-muted); font-size:9.5px; }
.workflow-links button { min-height:34px !important; font-size:9.5px !important; }

@media (max-width:900px){
  .beautifier-app { grid-template-columns:1fr; }
  .beautifier-controls { border-right:0; border-bottom:1px solid var(--yk-line); display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  .control-head,.beautifier-controls .yk-local-note { grid-column:1/-1; }
  .control-block { border-right:1px solid var(--yk-line); }
  .control-block:nth-of-type(even){ border-right:0; }
  .preview-stage { min-height:500px; }
}
@media (max-width:600px){
  .beautifier-container { width:calc(100% - 12px); }
  .beautifier-app { border-radius:17px; }
  .beautifier-controls { grid-template-columns:1fr; }
  .control-block { border-right:0 !important; }
  .preview-toolbar { align-items:flex-start; }
  .preview-file > span { display:none; }
  .preview-file .studio-secondary span,.preview-actions .studio-secondary span { display:none; }
  .preview-file .studio-secondary,.preview-actions .studio-secondary { width:38px !important; padding:0 !important; }
  .preview-stage { min-height:410px; padding:16px; }
  .preview-footer { align-items:flex-start; flex-direction:column; }
  .workflow-links { width:100%; }
  .workflow-links button { flex:1; }
}