.dedicated-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr);
  gap: 20px;
  margin-top: 52px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 18px 45px rgba(31, 41, 55, .07);
}

.dedicated-workspace .utility-card { min-height: 0; padding: 24px; border: 1px solid var(--line); border-radius: 15px; background: var(--surface); box-shadow: none; }
.dedicated-workspace .utility-card h2 { margin: 0 0 18px; font-size: 1.08rem; letter-spacing: -.025em; }
.utility-single-form { display: grid; gap: 14px; }
.utility-single-form label { display: grid; gap: 6px; color: var(--muted); font-size: .82rem; font-weight: 800; }
.utility-single-form input, .utility-single-form select, .utility-single-form textarea { width: 100%; min-height: 44px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); font: inherit; transition: border-color .15s ease, box-shadow .15s ease; }
.utility-single-form input:focus, .utility-single-form select:focus, .utility-single-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.utility-single-form textarea { min-height: 180px; resize: vertical; line-height: 1.6; }
.utility-single-form button { justify-self: start; }
.utility-single-output { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; }
.utility-single-output pre { min-height: 72px; margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.utility-single-output button { min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: .82rem; font-weight: 800; }
.utility-preview { min-height: 180px; width: 100%; line-height: 1.65; overflow-wrap: anywhere; }
.utility-preview h1, .utility-preview h2, .utility-preview h3 { margin: 0 0 10px; }
.utility-preview p { margin: 0 0 10px; }
.utility-preview br { display: block; content: ''; margin: 6px 0; }
.utility-preview code { padding: 2px 5px; border-radius: 4px; background: var(--accent-soft); color: var(--accent); }
.utility-preview li { margin-left: 20px; }
.dedicated-output { min-height: 220px; display: grid; align-content: start; text-align: left; background: var(--code) !important; border-color: var(--code) !important; color: var(--code-ink); }
.dedicated-output::before { content: 'RESULT'; display: block; margin-bottom: 16px; color: #aebce1; font: 800 .7rem/1 ui-monospace, monospace; letter-spacing: .13em; }
.dedicated-output pre { width: 100%; height: auto; max-height: 330px; margin: 0; padding: 0; color: var(--code-ink); white-space: pre-wrap; overflow: auto; }
.dedicated-output > div { width: 100%; color: var(--code-ink); line-height: 1.65; }
.dedicated-output > div > p { margin: 0; color: #aebce1; }
.dedicated-output canvas { display: block; margin: 10px auto 0; padding: 12px; border-radius: 12px; background: #fff; }
.dedicated-output canvas, .dedicated-output img { max-width: 100%; height: auto; }
.dedicated-control-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: end; }
.dedicated-control-row label { display: grid; gap: 6px; color: var(--muted); font-size: .78rem; font-weight: 800; }
.dedicated-control-row label:last-child { width: 112px; }
.dedicated-checks { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 12px 0 16px; color: var(--muted); font-size: .82rem; font-weight: 700; }
.dedicated-checks label { display: inline-flex; align-items: center; gap: 6px; }
.dedicated-checks input { accent-color: var(--accent); }
.dedicated-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dedicated-actions button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-weight: 800; }
.dedicated-actions button.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.dedicated-actions button:disabled { cursor: default; opacity: .5; }
.dedicated-status { min-height: 24px; margin: 12px 0 0; color: var(--muted); font-size: .86rem; font-weight: 700; }
.dedicated-status.error { color: #d1495b; }
.dedicated-status.success { color: #168568; }
.dedicated-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 32px; }
.dedicated-links a { padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.dedicated-links a:hover { border-color: var(--accent); transform: translateY(-2px); }
.dedicated-links strong { display: block; margin-bottom: 5px; }
.dedicated-links span { color: var(--muted); font-size: .82rem; line-height: 1.5; }
:root[data-theme="dark"] .dedicated-workspace { border-color: #33425d; background: #10192b; box-shadow: 0 22px 48px rgba(0, 0, 0, .28); }
:root[data-theme="dark"] .dedicated-workspace .utility-card { border-color: #3a4a66; background: #172238; }
:root[data-theme="dark"] .utility-single-form input, :root[data-theme="dark"] .utility-single-form select, :root[data-theme="dark"] .utility-single-form textarea { border-color: #40516f; background: #0d1525; }
:root[data-theme="dark"] .utility-single-form input:focus, :root[data-theme="dark"] .utility-single-form select:focus, :root[data-theme="dark"] .utility-single-form textarea:focus { border-color: #aaa5ff; box-shadow: 0 0 0 3px rgba(155, 148, 255, .22); }
:root[data-theme="dark"] .dedicated-actions button, :root[data-theme="dark"] .utility-single-output button { border-color: #475a7b; background: #202e47; color: #f3f6ff; }
:root[data-theme="dark"] .dedicated-actions button.primary { border-color: #aaa5ff; background: #8179f7; color: #0b1020; }
:root[data-theme="dark"] .dedicated-output { background: #070d18 !important; border-color: #3b4c6b !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
@media (max-width: 720px) {
  .dedicated-workspace { grid-template-columns: 1fr; gap: 12px; margin-top: 38px; padding: 12px; border-radius: 16px; }
  .dedicated-workspace .utility-card { padding: 18px; }
  .dedicated-control-row { grid-template-columns: 1fr; }
  .dedicated-links { grid-template-columns: 1fr; }
  .utility-single-output { grid-template-columns: 1fr; }
}