:root { color: #172633; font: 14px/1.45 Inter, "Microsoft YaHei", sans-serif; background: #e8e5de; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 960px; }
.embedded .header { display: none; }
.embedded .url-entry { display: none; }
.embedded .workspace { height: 100vh; }
.header { height: 58px; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; background: #172633; color: #afc0cc; }
.header strong { color: #fff; font-size: 22px; letter-spacing: 0; }
.header b { color: #dc692d; padding: 0 8px; }
.workspace { display: grid; grid-template-columns: 308px minmax(440px, 1fr) 330px; height: calc(100vh - 58px); min-height: 660px; }
aside { overflow: auto; padding: 18px; background: #e8e5de; }
.parameters { border-right: 1px solid #d0ccc2; }
.document-panel { border-left: 1px solid #d0ccc2; }
h1 { font-size: 24px; margin: 8px 0 20px; } h2 { font-size: 15px; margin: 0 0 12px; }
section, details, .url-entry { background: #fffefb; border: 1px solid #d9d5cc; border-radius: 4px; padding: 14px; margin-bottom: 14px; }
summary { cursor: pointer; font-weight: 700; font-size: 16px; margin: 0 0 12px; }
details[open] summary { margin-bottom: 14px; }
label { display: grid; gap: 5px; margin: 0 0 11px; color: #394a56; }
label.checkbox { display: flex; align-items: center; gap: 8px; color: #172633; }
input, select, button { width: 100%; min-height: 36px; border: 1px solid #bdb9b0; border-radius: 2px; background: #fff; color: #172633; font: inherit; padding: 6px 8px; }
input:focus, select:focus { outline: 2px solid #7ca8c7; outline-offset: 1px; }
button { cursor: pointer; font-weight: 700; background: #f4f2ed; } button:hover:not(:disabled) { background: #e8e5de; } button:disabled { cursor: not-allowed; opacity: .55; }
.url-entry > div { display: grid; grid-template-columns: 1fr 62px; gap: 7px; }.url-entry button { background: #26465d; color: #fff; border-color: #26465d; }
.preview-panel { min-width: 0; display: grid; grid-template-rows: 58px 1fr 34px; background: #fff; padding: 14px; }
.preview-toolbar { display: flex; align-items: center; gap: 14px; padding: 0 14px; border: 1px solid #d9d5cc; border-bottom: 0; background: #fffefb; }.preview-toolbar h2 { margin-right: auto; }.preview-toolbar label { display: flex; align-items: center; gap: 7px; margin: 0; }.preview-toolbar select, .preview-toolbar button { width: auto; }
.canvas { position: relative; min-height: 0; overflow: hidden; display: grid; place-items: center; background: #14181e; border: 1px solid #27323c; }.canvas img { position: absolute; max-width: 92%; max-height: 92%; object-fit: contain; }.canvas #vector-preview { mix-blend-mode: normal; }.canvas p { color: #d7dee3; font-size: 18px; }
.status { background: #f3f1eb; border: 1px solid #d9d5cc; border-top: 0; color: #53616c; padding: 7px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.path { overflow-wrap: anywhere; font-weight: 600; }.muted { color: #53616c; }.section-row { display: flex; align-items: center; justify-content: space-between; }.section-row select { width: 86px; }.document-panel dl { display: grid; grid-template-columns: 1fr auto; gap: 3px 12px; margin: 0; }.document-panel dt, .document-panel dd { margin: 0; }.secondary { margin-top: 4px; }.primary { margin-top: 8px; background: #dc692d; border-color: #c85c27; color: white; }
@media (max-width: 1100px) { body { min-width: 0; }.workspace { grid-template-columns: 250px minmax(360px, 1fr) 270px; }.header { padding: 0 14px; }.header strong { font-size: 18px; } aside { padding: 12px; } }