@font-face { font-family: "Noto Sans Thai Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/noto-sans-thai-thai.woff2") format("woff2-variations"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Noto Sans Thai Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/noto-sans-thai-latin.woff2") format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Noto Sans Thai Looped Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/noto-sans-thai-looped-thai.woff2") format("woff2-variations"); unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC; }
@font-face { font-family: "Noto Sans Thai Looped Variable"; font-style: normal; font-display: swap; font-weight: 100 900; src: url("/fonts/noto-sans-thai-looped-latin.woff2") format("woff2-variations"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

:root {
  color-scheme: light;
  --accent: #ef2b20;
  --canvas: #f7f7f7;
  --surface: #fff;
  --surface-soft: #f0f0f0;
  --ink: #2f2e2e;
  --muted: #696868;
  --line: rgb(47 46 46 / 15%);
  --line-strong: rgb(47 46 46 / 32%);
  --glass: rgb(20 20 20 / 66%);
  --focus: var(--accent);
  --danger: #b42318;
  --success: #20754a;
  font-family: "Noto Sans Thai Variable", ui-sans-serif, sans-serif;
  font-synthesis: none;
  background: var(--canvas);
  color: var(--ink);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #111;
  --surface: #191919;
  --surface-soft: #222;
  --ink: #f2f2f2;
  --muted: #b5b5b5;
  --line: rgb(255 255 255 / 15%);
  --line-strong: rgb(255 255 255 / 30%);
  --glass: rgb(5 5 5 / 78%);
  --success: #70c899;
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; background: var(--canvas); color: var(--ink); font-family: "Noto Sans Thai Looped Variable", "Noto Sans Thai Variable", sans-serif; line-height: 1.65; }
::selection { color: #fff; background: var(--accent); }
button, input, select, textarea { color: inherit; font: inherit; }
button, label, select, input[type="range"] { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
summary { cursor: pointer; }

.skip-link { position: fixed; z-index: 100; top: .75rem; left: .75rem; padding: .7rem 1rem; color: #fff; background: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: none; }

.topbar {
  position: sticky; z-index: 30; top: 0; display: flex; min-height: 4.25rem; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .55rem max(1rem, calc((100% - 1160px) / 2)); color: #fff;
  background: color-mix(in srgb, var(--accent) 76%, transparent); backdrop-filter: blur(22px) saturate(145%); -webkit-backdrop-filter: blur(22px) saturate(145%);
  user-select: none; -webkit-user-select: none;
}
.brand-lockup { display: flex; align-items: baseline; gap: .8rem; min-width: 0; }
.brand-lockup strong { font-size: 1rem; font-weight: 760; letter-spacing: -.015em; }
.brand-lockup span { overflow: hidden; color: rgb(255 255 255 / 72%); font-size: .7rem; font-weight: 720; letter-spacing: .1em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.topbar-actions { display: flex; flex: 0 0 auto; align-items: center; gap: .3rem; }
.connection-status { display: inline-flex; align-items: center; gap: .45rem; color: rgb(255 255 255 / 76%); font-size: .72rem; white-space: nowrap; }
.connection-status::before { width: .5rem; height: .5rem; border: 1px solid rgb(255 255 255 / 70%); border-radius: 50%; background: #eab308; content: ""; }
.connection-status[data-state="ready"]::before { background: #8ee6ae; }
.connection-status[data-state="error"]::before { background: #ffb4ab; }
.theme-toggle { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; padding: 0; border: 0; color: rgb(255 255 255 / 78%); background: transparent; }
.theme-toggle:hover { color: #fff; background: rgb(255 255 255 / 12%); }
.theme-icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-linecap: square; stroke-linejoin: miter; stroke-width: 1.7; }
.theme-icon-sun { display: none; }
html[data-theme="dark"] .theme-icon-moon { display: none; }
html[data-theme="dark"] .theme-icon-sun { display: block; }

.workflow-nav { position: sticky; z-index: 25; top: 4.25rem; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 92%, transparent); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.workflow-nav > div { display: flex; width: min(1160px, calc(100% - 2rem)); margin: 0 auto; overflow-x: auto; scrollbar-width: none; }
.workflow-nav > div::-webkit-scrollbar { display: none; }
.workflow-nav a { display: inline-flex; min-height: 3.25rem; flex: 1 0 auto; align-items: center; justify-content: center; gap: .45rem; padding: .55rem .85rem; border-bottom: 2px solid transparent; color: var(--muted); font-family: "Noto Sans Thai Variable", sans-serif; font-size: .74rem; font-weight: 680; text-decoration: none; white-space: nowrap; }
.workflow-nav a span { display: grid; width: 1.35rem; height: 1.35rem; place-items: center; border: 1px solid var(--line-strong); font-size: .62rem; font-variant-numeric: tabular-nums; }
.workflow-nav a:hover { color: var(--ink); background: var(--surface-soft); }
.workflow-nav a[aria-current="step"] { border-bottom-color: var(--accent); color: var(--ink); }
.workflow-nav a[aria-current="step"] span { border-color: var(--accent); color: #fff; background: var(--accent); }

main { width: min(1160px, calc(100% - 2rem)); margin: 0 auto; }
form { display: grid; gap: 0; }
.target-section { padding: clamp(2.75rem, 6vw, 5rem) 0 2.25rem; border-bottom: 1px solid var(--line); scroll-margin-top: 8.5rem; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; }
.section-heading.compact { align-items: baseline; padding: 1.25rem 0 .85rem; border-bottom: 1px solid var(--line); }
.section-heading h1, .section-heading h2, .section-heading p, .crop-title h3, .crop-title p { margin: 0; }
.section-heading h1 { max-width: 12ch; font-family: "Noto Sans Thai Variable", sans-serif; font-size: clamp(2.75rem, 6vw, 4.75rem); font-weight: 650; line-height: 1.06; letter-spacing: -.025em; text-wrap: balance; }
.section-heading h2 { font-family: "Noto Sans Thai Variable", sans-serif; font-size: .76rem; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.section-heading p, .crop-title p { max-width: 48ch; margin-top: .5rem; color: var(--muted); font-size: .9rem; line-height: 1.65; }
.local-badge { flex: 0 0 auto; padding-top: .3rem; border-top: 2px solid var(--accent); color: var(--muted); font-family: "Noto Sans Thai Variable", sans-serif; font-size: .66rem; font-weight: 760; letter-spacing: .12em; }

fieldset { min-width: 0; margin: 2.25rem 0 0; padding: 0; border: 0; }
legend { margin-bottom: .75rem; color: var(--muted); font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.site-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.article-loader { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .65rem; align-items: end; margin-top: 1rem; }
.article-loader button { min-height: 2.75rem; padding: .55rem .8rem; border: 1px solid var(--line-strong); background: transparent; font-weight: 720; }
.article-loader button:hover:not(:disabled) { color: #fff; background: var(--ink); }
.article-loader button:disabled { opacity: .45; }
.editing-state { display: block; margin-top: .75rem; padding: .7rem .8rem; color: #fff; background: color-mix(in srgb, var(--accent) 82%, #111 18%); font-size: .76rem; }
.site-option { position: relative; display: grid; min-height: 5.5rem; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: 1rem 1.15rem; background: transparent; cursor: pointer; }
.site-option + .site-option { border-left: 1px solid var(--line-strong); }
.site-option input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--site-accent); }
.site-option strong, .site-option small { display: block; }
.site-option strong { font-family: "Noto Sans Thai Variable", sans-serif; font-size: 1.05rem; font-weight: 700; }
.site-option small { margin-top: .15rem; color: var(--muted); font-size: .72rem; }
.site-option code { color: var(--muted); font: .7rem/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; }
.site-option:has(input:checked) { color: #fff; background: var(--site-accent); }
.site-option:has(input:checked) :is(small, code) { color: rgb(255 255 255 / 78%); }
.site-option:has(input:checked) input { accent-color: #fff; }

.outline-import { border-bottom: 1px solid var(--line-strong); }
.outline-import > summary, .deploy-panel > details > summary { display: flex; min-height: 4.75rem; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 0; list-style: none; }
.outline-import > summary::-webkit-details-marker, .deploy-panel > details > summary::-webkit-details-marker { display: none; }
.outline-import > summary::after, .deploy-panel > details > summary::after { flex: 0 0 auto; width: .7rem; height: .7rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; color: var(--muted); content: ""; transform: rotate(45deg) translateY(-.2rem); transition: transform 160ms ease-out; }
.outline-import[open] > summary::after, .deploy-panel details[open] > summary::after { transform: rotate(225deg) translate(-.1rem, -.1rem); }
.outline-import > summary > span:first-child, .deploy-panel summary > span:first-child { display: grid; min-width: 0; gap: .15rem; }
.outline-import summary strong, .deploy-panel summary strong { font-family: "Noto Sans Thai Variable", sans-serif; font-size: .86rem; font-weight: 760; }
.outline-import summary small, .deploy-panel summary small { color: var(--muted); font-size: .72rem; font-weight: 400; }
.outline-import-body { padding: 0 0 1.5rem; }
.outline-controls { display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr) auto; align-items: end; gap: 1rem; padding-top: 1.25rem; }
.outline-controls > button { min-height: 3rem; padding: .65rem 1rem; border: 1px solid var(--line-strong); color: #fff; background: var(--ink); font-weight: 720; white-space: nowrap; }
.outline-controls > button:hover { background: var(--accent); }
.outline-controls > button:disabled { cursor: not-allowed; opacity: .48; }
.outline-status { flex: 0 0 auto; color: var(--muted); font-size: .72rem; }
.outline-status::before { display: inline-block; width: .5rem; height: .5rem; margin-inline-end: .45rem; border-radius: 50%; background: #d49b00; content: ""; }
.outline-status[data-state="ready"]::before { background: var(--success); }
.outline-status[data-state="error"]::before { background: var(--danger); }
.outline-help { margin: .75rem 0 0; color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }

.workspace { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(340px, .72fr); align-items: start; gap: clamp(1.5rem, 3.5vw, 3rem); padding: 2rem 0 3rem; }
.writing-column, .media-column { display: grid; gap: 3.5rem; min-width: 0; }
.editor-section { padding: 0 clamp(1rem, 2.25vw, 1.5rem) clamp(1.25rem, 2.5vw, 1.75rem); border: 1px solid var(--line); background: var(--surface); scroll-margin-top: 8.5rem; }
.editor-section .section-heading.compact { padding-top: 1.15rem; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem 1rem; padding-top: 1.5rem; }
.field { display: grid; align-content: start; gap: .4rem; min-width: 0; }
.field.span-2 { grid-column: span 2; }
.field > span, .crop-controls label > span { color: var(--ink); font-family: "Noto Sans Thai Variable", sans-serif; font-size: .76rem; font-weight: 700; }
.field small { color: var(--muted); font-size: .7rem; }
input, select, textarea { width: 100%; min-height: 3rem; border: 1px solid var(--line-strong); border-radius: 0; outline: 0; background: var(--surface); }
input, select { padding: .65rem .75rem; }
textarea { padding: .8rem; line-height: 1.7; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, .upload-zone:has(input:focus-visible) { border-color: var(--focus); outline: 3px solid color-mix(in srgb, var(--focus) 34%, transparent); outline-offset: 2px; }
input:user-invalid, textarea:user-invalid { border-color: var(--danger); }
.editor-heading output { color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

.markdown-toolbar { display: flex; flex-wrap: wrap; gap: 0; padding: 1rem 0 .75rem; }
.markdown-toolbar button { min-width: 2.7rem; min-height: 2.5rem; padding: 0 .7rem; border: 1px solid var(--line-strong); background: transparent; }
.markdown-toolbar button + button { border-left: 0; }
.markdown-toolbar button:hover { color: #fff; background: var(--ink); }
#inline-image-button { margin-inline-start: .65rem; border-left: 1px solid var(--line-strong); }
#inline-image-button:hover { color: #fff; border-color: var(--accent); background: var(--accent); }
.content-editor { display: block; min-height: 46rem; border-color: var(--line-strong); background: var(--surface); font-family: "Noto Sans Thai Looped Variable", sans-serif; font-size: 1rem; line-height: 1.9; }
.inline-image-manager { margin-top: 1.5rem; border-top: 1px solid var(--line-strong); }
.inline-image-manager .section-heading { padding-top: 1.2rem; }
.inline-image-manager h3 { font-family: "Noto Sans Thai Variable", sans-serif; font-size: 1rem; }
.inline-image-list { display: grid; }
.inline-image-row { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; padding: .85rem 0; border-bottom: 1px solid var(--line); }
.inline-image-row img { width: 6rem; height: 4.5rem; object-fit: cover; background: #222; }
.inline-image-row label, .inline-image-row label span, .inline-image-row small { display: block; }
.inline-image-row label span { margin-bottom: .3rem; font-size: .72rem; font-weight: 720; }
.inline-image-row input { min-height: 2.5rem; }
.inline-image-row small { margin-top: .3rem; color: var(--muted); font-size: .68rem; }
.inline-image-actions { display: flex; gap: 1px; }
.inline-image-actions button { min-height: 2.5rem; padding: .45rem .65rem; border: 1px solid var(--line-strong); background: transparent; }
.inline-image-actions button:hover:not(:disabled) { color: #fff; background: var(--ink); }
.inline-image-actions button:disabled { opacity: .3; }

.media-column { position: static; scroll-margin-top: 8.5rem; }
.media-section .field { margin-top: 1rem; }
.upload-zone { display: grid; min-height: 14rem; place-items: center; gap: .4rem; margin-top: 1.5rem; padding: 1.5rem; border: 1px solid var(--line-strong); color: var(--ink); background: var(--surface); text-align: center; cursor: pointer; }
.upload-zone:hover { border-color: var(--accent); color: var(--accent); }
.upload-zone svg { width: 2.25rem; fill: none; stroke: var(--accent); stroke-linecap: square; stroke-width: 1.5; }
.upload-zone strong { font-family: "Noto Sans Thai Variable", sans-serif; }
.upload-zone span { color: var(--muted); font-size: .72rem; }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.image-summary { padding: .8rem 0; border-bottom: 1px solid var(--line); color: var(--muted); font-size: .72rem; overflow-wrap: anywhere; }

.crop-workspace { display: grid; gap: 3rem; }
.crop-panel { border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); background: transparent; }
.crop-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1rem 0; }
.crop-title h3 { font-family: "Noto Sans Thai Variable", sans-serif; font-size: 1rem; font-weight: 720; }
.switch { display: inline-flex; min-height: 2.1rem; align-items: center; gap: .4rem; padding: 0 .55rem; border: 1px solid var(--line-strong); color: var(--muted); font-size: .72rem; cursor: pointer; }
.switch:has(input:checked) { border-color: var(--accent); color: #fff; background: var(--accent); }
.switch input { width: .9rem; min-height: auto; margin: 0; accent-color: currentColor; }
.crop-panel canvas { display: block; width: 100%; height: auto; max-height: 52vh; border: 0; background: #111; cursor: grab; object-fit: contain; touch-action: none; }
.crop-panel canvas:active { cursor: grabbing; }
.crop-panel[data-disabled="true"] canvas { cursor: default; }
.crop-controls { display: grid; gap: .85rem; padding: 1rem 0 1.25rem; }
.crop-controls > label:not(.field) { display: grid; grid-template-columns: 5rem minmax(0, 1fr); align-items: center; gap: .75rem; }
.crop-controls input[type="range"] { min-height: 1.5rem; padding: 0; border: 0; accent-color: var(--accent); }
.crop-panel[data-disabled="true"] .crop-controls { opacity: .46; }

.publish-bar { position: sticky; z-index: 20; bottom: .75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; padding: .75rem .8rem .75rem 1rem; color: #fff; background: color-mix(in srgb, var(--accent) 88%, #111 12%); box-shadow: 0 18px 50px rgb(0 0 0 / 24%); scroll-margin-top: 8.5rem; }
.publish-bar strong, .publish-bar span { display: block; }
.publish-bar strong { font-family: "Noto Sans Thai Variable", sans-serif; font-size: .78rem; }
.publish-bar > div > span { max-width: 68ch; margin-top: .15rem; color: rgb(255 255 255 / 72%); font-size: .68rem; }
.primary-action { display: inline-flex; min-height: 3rem; align-items: center; gap: 1.5rem; padding: .65rem .8rem .65rem 1rem; border: 1px solid rgb(255 255 255 / 60%); color: #fff; background: rgb(0 0 0 / 28%); font-family: "Noto Sans Thai Variable", sans-serif; font-weight: 740; }
.primary-action svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
.primary-action:hover { background: rgb(0 0 0 / 48%); }
.primary-action:disabled { cursor: wait; opacity: .55; }
.publish-actions { display: flex; gap: .6rem; align-items: stretch; }
.preview-action { display: inline-flex; min-height: 3rem; align-items: center; gap: .55rem; padding: .65rem .9rem; border: 1px solid rgb(255 255 255 / 60%); color: #fff; background: transparent; font-family: "Noto Sans Thai Variable", sans-serif; font-weight: 720; }
.preview-action svg { width: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.6; }
.preview-action:hover { background: rgb(255 255 255 / 14%); }
.preview-action:disabled { cursor: wait; opacity: .55; }

.result-panel { margin: 1rem 0 5rem; padding: clamp(1.5rem, 4vw, 3rem); border-top: 4px solid var(--success); background: var(--surface); }
.result-panel h2, .result-panel p { margin: 0; }
.result-panel h2 { font-family: "Noto Sans Thai Variable", sans-serif; font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 650; line-height: 1.1; }
.result-panel p { margin-top: .5rem; color: var(--muted); }
.result-panel ul { display: grid; gap: .35rem; padding-left: 1.2rem; font: .76rem/1.55 ui-monospace, SFMono-Regular, Consolas, monospace; }
.result-links { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.result-links a { padding: .65rem .8rem; border: 1px solid var(--line-strong); color: var(--ink); font-size: .78rem; font-weight: 720; text-decoration: none; }
.result-links a:hover { color: #fff; background: var(--ink); }
.command-block { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem; margin-top: 1.5rem; padding: .8rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.command-block span { color: var(--muted); font-size: .7rem; }
.command-block code { min-width: 0; overflow: auto; font-size: .72rem; white-space: nowrap; }
.command-block button, #new-article { min-height: 2.5rem; padding: .45rem .75rem; border: 1px solid var(--line-strong); background: transparent; font-weight: 700; }
.command-block button:hover, #new-article:hover { color: #fff; background: var(--ink); }
#new-article { margin-top: 1rem; }

.deploy-panel { margin: 2rem 0 7rem; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.deploy-panel > details > summary { padding-inline: .25rem; }
.deploy-panel > details > summary::after { order: 3; }
.details-action { margin-left: auto; color: var(--muted); font-size: .7rem; font-weight: 700; }
.deploy-panel details[open] .details-action { visibility: hidden; }
.deploy-panel-body { padding: .5rem 0 2rem; }
.deploy-intro { display: grid; max-width: 48rem; gap: .4rem; }
.deploy-intro h2, .deploy-dialog h2 { margin: 0; font-family: "Noto Sans Thai Variable", sans-serif; font-size: clamp(1.65rem, 3.5vw, 2.65rem); font-weight: 650; line-height: 1.15; letter-spacing: -.025em; }
.deploy-intro p, .deploy-dialog p { margin: 0; color: var(--muted); }
.deploy-intro code { font-size: .86em; }
.deploy-sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.deploy-site { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem; }
.deploy-site + .deploy-site { border-left: 1px solid var(--line-strong); }
.deploy-site strong, .deploy-site span, .deploy-site code { display: block; }
.deploy-site strong { font-family: "Noto Sans Thai Variable", sans-serif; font-size: 1.1rem; }
.deploy-site span { color: var(--muted); font-size: .76rem; }
.deploy-site code { margin-top: .3rem; color: var(--muted); font-size: .68rem; }
.deploy-site button, .dialog-actions > button:not(.primary-action) { min-height: 2.75rem; padding: .55rem .8rem; border: 1px solid var(--line-strong); background: transparent; font-weight: 720; white-space: nowrap; }
.deploy-site button:hover { color: #fff; border-color: var(--site-accent); background: var(--site-accent); }
.deploy-site button:disabled { cursor: wait; opacity: .5; }
.deploy-progress { margin-top: 1.5rem; border-top: 3px solid var(--accent); background: var(--surface); }
.deploy-progress[data-status="success"] { border-color: var(--success); }
.deploy-progress[data-status="error"] { border-color: var(--danger); }
.deploy-progress-heading { display: flex; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border-bottom: 1px solid var(--line); }
.deploy-progress-heading span { color: var(--muted); font-size: .72rem; }
.deploy-progress pre { max-height: 22rem; margin: 0; padding: 1rem; overflow: auto; color: var(--ink); font: .72rem/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere; }
.deploy-dialog { width: min(34rem, calc(100% - 2rem)); padding: 0; border: 0; border-top: 2px solid var(--accent); border-radius: 0; color: var(--ink); background: var(--surface); box-shadow: 0 30px 90px rgb(0 0 0 / 38%); }
.deploy-dialog::backdrop { background: rgb(0 0 0 / 58%); backdrop-filter: blur(8px); }
.deploy-dialog form { display: grid; gap: 1rem; padding: clamp(1.4rem, 5vw, 2.5rem); }
.deploy-dialog h2 { font-size: clamp(1.8rem, 5vw, 2.8rem); }
.confirm-row { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: .7rem; margin-top: .5rem; padding: 1rem; border: 1px solid var(--line-strong); cursor: pointer; }
.confirm-row input { width: 1rem; min-height: 1rem; margin: .3rem 0 0; accent-color: var(--accent); }
.publish-review-summary { display: grid; grid-template-columns: auto minmax(0, 1fr); margin: .5rem 0 0; border-top: 1px solid var(--line); }
.publish-review-summary dt, .publish-review-summary dd { margin: 0; padding: .65rem 0; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.publish-review-summary dt { padding-right: 1.5rem; color: var(--muted); font-size: .72rem; }
.publish-review-summary dd { font-size: .78rem; font-weight: 650; }
.dialog-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: .5rem; }
.dialog-actions .primary-action:disabled { cursor: not-allowed; }

.preview-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; color: var(--ink); background: #252525; }
.preview-dialog::backdrop { background: rgb(0 0 0 / 72%); }
.preview-toolbar { display: flex; min-height: 4rem; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem 1rem; color: #fff; background: #151515; }
.preview-toolbar strong, .preview-toolbar span { display: block; }
.preview-toolbar strong { font-family: "Noto Sans Thai Variable", sans-serif; font-size: .86rem; }
.preview-toolbar span { color: rgb(255 255 255 / 58%); font-size: .68rem; }
.preview-controls { display: flex; align-items: center; gap: 1px; }
.preview-controls button { min-height: 2.5rem; padding: .45rem .75rem; border: 1px solid rgb(255 255 255 / 22%); color: rgb(255 255 255 / 70%); background: transparent; }
.preview-controls button[aria-pressed="true"] { color: #fff; background: var(--accent); }
.preview-controls button:hover { color: #fff; border-color: rgb(255 255 255 / 58%); }
#preview-close { margin-left: .5rem; color: #fff; }
.preview-stage { display: grid; height: calc(100dvh - 4rem); place-items: start center; overflow: auto; background: #252525; }
.preview-stage iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.preview-stage[data-width="mobile"] { padding: 1rem; }
.preview-stage[data-width="mobile"] iframe { width: min(390px, 100%); height: calc(100dvh - 6rem); }

.toast { position: fixed; z-index: 80; right: 1rem; bottom: 1rem; max-width: min(28rem, calc(100vw - 2rem)); padding: .9rem 1rem; color: #fff; background: var(--glass); box-shadow: 0 16px 42px rgb(0 0 0 / 24%); font-size: .82rem; line-height: 1.5; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.toast[data-kind="error"] { background: var(--danger); }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; }
[hidden] { display: none !important; }

@media (max-width: 920px) {
  .workspace { grid-template-columns: 1fr; }
  .media-column { padding-top: 1rem; border-top: 1px solid var(--line); }
  .crop-workspace { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
  .topbar { min-height: 3.75rem; padding-inline: .75rem; }
  .workflow-nav { top: 3.75rem; }
  .workflow-nav > div { width: 100%; }
  .workflow-nav a { min-width: 0; flex: 1 1 20%; justify-content: center; gap: .25rem; padding-inline: .2rem; font-size: .65rem; }
  .workflow-nav a span { width: 1.2rem; height: 1.2rem; }
  .brand-lockup { display: grid; gap: 0; }
  .connection-status { width: .5rem; overflow: hidden; color: transparent; gap: 0; }
  .connection-status::before { flex: 0 0 auto; }
  main { width: min(100% - 1.5rem, 1160px); }
  .target-section { padding-top: 2.75rem; scroll-margin-top: 7.75rem; }
  .section-heading h1 { font-size: clamp(2.65rem, 13vw, 3.8rem); }
  .local-badge { display: none; }
  .site-options, .crop-workspace, .field-grid { grid-template-columns: 1fr; }
  .site-option { grid-template-columns: auto minmax(0, 1fr); }
  .site-option code { grid-column: 2; overflow-wrap: anywhere; }
  .article-loader { grid-template-columns: 1fr 1fr; }
  .article-loader .field { grid-column: 1 / -1; }
  .outline-controls { grid-template-columns: 1fr; }
  .outline-import > summary { align-items: flex-start; }
  .outline-status { margin-left: auto; white-space: nowrap; }
  .site-option + .site-option { border-top: 1px solid var(--line-strong); border-left: 0; }
  .field.span-2 { grid-column: auto; }
  .workspace { gap: 1rem; padding-top: 1rem; }
  .writing-column, .media-column { gap: 1rem; }
  .editor-section { padding-inline: .85rem; scroll-margin-top: 7.75rem; }
  .content-editor { min-height: 34rem; }
  .inline-image-row { grid-template-columns: 4.75rem minmax(0, 1fr); }
  .inline-image-row img { width: 4.75rem; height: 4.75rem; }
  .inline-image-actions { grid-column: 2; }
  .publish-bar { position: static; align-items: stretch; flex-direction: column; }
  .publish-actions { flex-direction: column; }
  .preview-action { justify-content: center; }
  .primary-action { justify-content: space-between; }
  .preview-toolbar { align-items: flex-start; padding: .5rem; }
  .preview-toolbar > div:first-child { display: none; }
  .preview-controls { width: 100%; }
  .preview-controls button { flex: 1; }
  .command-block { grid-template-columns: 1fr auto; }
  .command-block span { grid-column: 1 / -1; }
  .deploy-sites { grid-template-columns: 1fr; }
  .deploy-site + .deploy-site { border-top: 1px solid var(--line-strong); border-left: 0; }
  .deploy-site { align-items: stretch; flex-direction: column; }
  .details-action { display: none; }
  .dialog-actions { align-items: stretch; flex-direction: column-reverse; }
  .dialog-actions button { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }