/* Wide, purpose-built editing surface; controls stay next to the working preview. */
.ds { --ds-line:#654d7d; --ds-panel:#251d34; color:#f6f1fc; max-width:1640px; margin:auto; padding:20px; }
.ds * { box-sizing:border-box; }
.ds .ds-hero { padding:30px; border:1px solid var(--ds-line); border-radius:18px; background:linear-gradient(120deg,#402959,#211a30); margin-bottom:20px; }
.ds .ds-eyebrow { color:#d5b9f6; letter-spacing:.1em; font-size:12px; font-weight:700; }
.ds h1 { font-size:clamp(26px,3vw,40px); line-height:1.2; margin:12px 0; }
.ds h2 { font-size:21px; margin:0 0 16px; }
.ds h3 { font-size:17px; margin:14px 0; }
.ds p { line-height:1.65; }
.ds .ds-toolbar,.ds .ds-actions { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:14px 0; }
.ds .ds-toolbar { padding:14px; background:var(--ds-panel); border:1px solid var(--ds-line); border-radius:12px; }
.ds button,.ds .ds-file { background:#3b2a50; color:#fff; border:1px solid #8e70ab; border-radius:8px; padding:11px 15px; min-height:44px; font:600 14px system-ui; cursor:pointer; margin:0; }
.ds button:hover,.ds .ds-file:hover { background:#5b3c7b; }
.ds button:disabled { opacity:.45; cursor:not-allowed; }
.ds .ds-primary { background:#8050c5; }
.ds .ds-file input { width:1px; height:1px; opacity:0; position:absolute; }
.ds :focus-visible,.ds .ds-file:focus-within { outline:3px solid #c6a1ff; outline-offset:3px; }
.ds .ds-layout { display:grid; grid-template-columns:minmax(280px,350px) minmax(0,1fr); gap:20px; align-items:start; }
.ds .ds-controls,.ds .ds-preview { min-width:0; border:1px solid var(--ds-line); border-radius:14px; background:var(--ds-panel); padding:20px; }
.ds .ds-controls { max-height:85vh; overflow:auto; }
.ds .ds-preview { min-height:500px; overflow:auto; }
.ds .ds-field { display:block; margin:0 0 16px; font-size:14px; font-weight:600; }
.ds .ds-field > span { display:block; margin-bottom:7px; }
.ds input,.ds textarea,.ds select { width:100%; min-height:44px; background:#171222; color:#faf6ff; border:1px solid #7d668f; padding:10px; border-radius:7px; font:14px system-ui; }
.ds textarea { resize:vertical; min-height:100px; }
.ds input[type=color] { padding:3px; }
.ds .ds-status { padding:14px 18px; background:#30223e; border:1px solid var(--ds-line); border-radius:10px; margin-bottom:20px; }
.ds .ds-error { color:#ffd0d8; border-color:#e591a3; }
.ds .ds-card { border:1px solid var(--ds-line); border-radius:10px; padding:15px; margin:14px 0; background:#1c1628; }
.ds .ds-note { color:#c7b7d7; font-size:13px; line-height:1.6; }
.ds canvas,.ds video,.ds img { max-width:100%; height:auto; }
.ds canvas { display:block; background:#fff; touch-action:none; }
.ds .ds-paper { background:white; color:#20202b; padding:42px; min-height:600px; max-width:850px; margin:16px auto; font:15px/1.6 Georgia,serif; overflow-wrap:anywhere; }
.ds .ds-paper h1 { font-size:30px; }
.ds .ds-paper h2 { font-size:19px; margin-top:24px; }
.ds .ds-paper p { white-space:pre-wrap; }
.ds table { width:100%; border-collapse:collapse; }
.ds th,.ds td { text-align:left; padding:10px; border-bottom:1px solid #766584; overflow-wrap:anywhere; }
.ds .ds-scroll { overflow:auto; max-height:600px; }
.ds pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:500px; overflow:auto; }
.ds .ds-board { display:grid; grid-template-columns:repeat(3,minmax(200px,1fr)); gap:15px; overflow:auto; }
.ds .ds-badges { display:flex; gap:10px; flex-wrap:wrap; }
.ds .ds-badges span { padding:5px 10px; border:1px solid #795895; border-radius:15px; font-size:12px; }
.ds:fullscreen { max-width:none; background:#15111e; overflow:auto; }
.ds:fullscreen .ds-hero { padding:16px 22px; }
@media(max-width:850px) { .ds{padding:10px}.ds .ds-layout{grid-template-columns:1fr}.ds .ds-controls{max-height:none}.ds .ds-hero{padding:22px}.ds .ds-paper{padding:24px}.ds .ds-board{grid-template-columns:1fr}.ds .ds-preview{padding:12px} }
@media print {
  body *:not(:has(.ds-paper)):not(.ds-paper):not(.ds-paper *) { display:none !important; }
  body,.ds,.ds .ds-layout,.ds .ds-preview { display:block !important; margin:0 !important; padding:0 !important; border:0 !important; min-height:0 !important; max-height:none !important; overflow:visible !important; background:white !important; }
  .ds .ds-paper { position:static; width:100%; max-width:none; min-height:0; margin:0; padding:0; color:#222; }
  .ds .ds-paper section { break-inside:avoid; }
}
/* Keep file inputs and standalone actions spaced as generously as toolbar buttons. */
.ds .ds-file { display:inline-flex; align-items:center; justify-content:center; }
.ds .ds-controls > .ds-file { margin:8px 0 20px; }
.ds .ds-controls > button,.ds .ds-card > button,.ds .ds-preview > button { margin:8px 8px 12px 0; }
.ds .ds-paper[data-layout="modern"] { font-family:Arial,sans-serif; }
.ds .ds-paper[data-layout="modern"] header { background:#f3eef8; padding:20px; }
.ds .ds-paper[data-layout="compact"] { font-size:13px; line-height:1.4; padding:28px; }
.ds .ds-paper[data-layout="compact"] h2 { margin-top:14px; }