/* publish.css - 本地发布台；沿用 home.css 的主题令牌。 */
.publish-main { width: min(1220px, calc(100% - 40px)); margin: 0 auto; padding: 140px 0 68px; }
.publish-intro { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding-bottom: 42px; border-bottom: 1px solid var(--home-line); }
.publish-intro h1 { margin-top: 12px; color: var(--home-ink); font-size: clamp(42px, 6vw, 70px); line-height: 1.03; letter-spacing: 0; }
.publish-intro p { margin-top: 17px; color: var(--home-muted); font-size: 15px; }
.publish-local-state { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 36px; margin: 0; padding: 0 12px; border: 1px solid color-mix(in srgb, var(--home-mint) 32%, var(--home-line)); border-radius: 8px; color: var(--home-mint); background: color-mix(in srgb, var(--home-mint) 8%, var(--home-panel)); font-size: 11px; font-weight: 720; }
.local-state-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 4px color-mix(in srgb, var(--home-mint) 13%, transparent); }
.publish-auth { display: grid; gap: 9px; justify-items: end; flex: 0 0 min(100%, 360px); color: var(--home-muted); font-size: 11px; }
.publish-auth-state { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; }
.publish-auth.unlocked .publish-auth-state { color: var(--home-mint); }
.publish-auth.locked .publish-auth-state { color: var(--red); }
.publish-auth-actions { display: flex; align-items: center; gap: 7px; width: 100%; }
.publish-auth-actions input { min-width: 0; flex: 1; height: 34px; padding: 0 9px; border: 1px solid var(--home-line); border-radius: 7px; color: var(--home-ink); background: var(--home-panel); font: inherit; font-size: 11px; }
.publish-auth-actions input:focus { outline: 0; border-color: var(--home-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-blue) 13%, transparent); }
.publish-auth-actions button, .publish-auth-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 0 10px; border: 1px solid var(--home-line); border-radius: 7px; color: var(--home-blue); background: var(--home-panel); font: inherit; font-size: 10px; font-weight: 720; text-decoration: none; cursor: pointer; white-space: nowrap; }
.publish-auth-actions button:hover, .publish-auth-actions a:hover { border-color: var(--home-blue); background: color-mix(in srgb, var(--home-blue) 7%, var(--home-panel)); }
.editor-actions-main #publishPost:disabled { cursor: not-allowed; opacity: .48; filter: saturate(.45); transform: none; }

.publish-workspace { display: grid; grid-template-columns: minmax(180px, 224px) minmax(340px, 1.08fr) minmax(295px, .86fr); min-height: 670px; margin-top: 30px; overflow: hidden; border: 1px solid var(--home-line); border-radius: 16px; background: var(--home-panel); box-shadow: 0 16px 42px rgba(30, 44, 74, .07); }
.draft-rail, .editor-panel, .preview-panel { min-width: 0; padding: 23px; }
.draft-rail, .editor-panel { border-right: 1px solid var(--home-line); }
.draft-rail { display: flex; flex-direction: column; background: color-mix(in srgb, var(--home-paper) 62%, var(--home-panel)); }
.draft-rail-head, .panel-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.panel-kicker { display: block; color: var(--home-blue); font-size: 10px; font-weight: 760; letter-spacing: .13em; }
.draft-rail h2, .panel-head h2 { margin-top: 6px; color: var(--home-ink); font-size: 18px; letter-spacing: 0; }
.icon-action, .preview-focus { display: inline-grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid var(--home-line); border-radius: 8px; color: var(--home-muted); background: var(--home-panel); cursor: pointer; transition: color .2s var(--trans), border-color .2s var(--trans), background .2s var(--trans), transform .2s var(--trans); }
.icon-action:hover, .preview-focus:hover { color: var(--home-blue); border-color: color-mix(in srgb, var(--home-blue) 48%, var(--home-line)); background: color-mix(in srgb, var(--home-blue) 7%, var(--home-panel)); transform: translateY(-1px); }
.icon-action:focus-visible, .preview-focus:focus-visible, .draft-item:focus-visible, .editor-clear:focus-visible { outline: 3px solid color-mix(in srgb, var(--home-blue) 30%, transparent); outline-offset: 2px; }

.draft-list { display: grid; gap: 7px; margin-top: 24px; overflow: auto; scrollbar-width: thin; }
.draft-row { position: relative; }
.draft-item { width: 100%; position: relative; display: grid; gap: 7px; padding: 12px 35px 12px 12px; border: 1px solid transparent; border-radius: 8px; color: var(--home-muted); background: transparent; text-align: left; cursor: pointer; transition: border-color .2s var(--trans), background .2s var(--trans), color .2s var(--trans), transform .2s var(--trans); }
.draft-item:hover { background: color-mix(in srgb, var(--home-blue) 6%, transparent); color: var(--home-ink); }
.draft-item.active { border-color: color-mix(in srgb, var(--home-blue) 36%, var(--home-line)); color: var(--home-ink); background: color-mix(in srgb, var(--home-blue) 10%, var(--home-panel)); }
.draft-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 720; }
.draft-item-meta { display: flex; align-items: center; gap: 6px; color: var(--home-muted); font-size: 10px; }
.draft-item-chip { color: var(--home-blue); font-size: 9px; font-weight: 750; }
.draft-delete { position: absolute; top: 9px; right: 6px; display: inline-grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: 7px; color: var(--home-muted); background: transparent; cursor: pointer; opacity: 0; transition: color .18s var(--trans), background .18s var(--trans), opacity .18s var(--trans); }
.draft-row:hover .draft-delete, .draft-row:focus-within .draft-delete, .draft-delete:focus-visible { opacity: 1; }
.draft-delete:hover { color: var(--red); background: color-mix(in srgb, var(--red) 10%, transparent); }
.draft-empty { padding: 21px 8px; color: var(--home-muted); font-size: 12px; line-height: 1.7; text-align: center; }
.draft-rail-note { margin: auto 0 0; padding-top: 20px; color: var(--home-muted); font-size: 10px; line-height: 1.7; }

.editor-panel { display: flex; flex-direction: column; }
.save-state { display: inline-flex; align-items: center; min-height: 25px; padding: 0 8px; border-radius: 6px; color: var(--home-muted); background: color-mix(in srgb, var(--home-paper) 70%, transparent); font-size: 10px; font-weight: 680; }
.save-state.saving { color: var(--home-blue); background: color-mix(in srgb, var(--home-blue) 9%, transparent); }
.save-state.saved { color: var(--home-mint); background: color-mix(in srgb, var(--home-mint) 9%, transparent); }
.field-group { min-width: 0; margin-top: 21px; }
.field-group label { display: block; margin-bottom: 8px; color: var(--home-ink); font-size: 12px; font-weight: 720; }
.field-group input, .field-group select, .field-group textarea { width: 100%; border: 1px solid var(--home-line); border-radius: 8px; outline: 0; color: var(--home-ink); background: color-mix(in srgb, var(--home-paper) 26%, var(--home-panel)); font: inherit; font-size: 13px; transition: border-color .18s var(--trans), box-shadow .18s var(--trans), background .18s var(--trans); }
.field-group input, .field-group select { height: 41px; padding: 0 11px; }
.field-group textarea { min-height: 210px; padding: 12px; resize: vertical; line-height: 1.8; }
.field-group input::placeholder, .field-group textarea::placeholder { color: var(--text-mute); }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus { border-color: var(--home-blue); background: var(--home-panel); box-shadow: 0 0 0 3px color-mix(in srgb, var(--home-blue) 15%, transparent); }
.field-group [aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 13%, transparent); }
.field-row { display: grid; grid-template-columns: minmax(125px, .42fr) minmax(0, .58fr); gap: 14px; }
.field-meta { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--home-muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.field-error { margin-top: 7px; color: var(--red); font-size: 11px; }
.editor-body-field { flex: 1; display: flex; flex-direction: column; }
.editor-body-field textarea { flex: 1; }
.editor-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--home-line); }
.editor-actions-main { display: flex; align-items: center; justify-content: end; gap: 8px; }
.editor-actions-main .btn { min-height: 40px; padding: 0 12px; border: 1px solid transparent; flex: initial; white-space: nowrap; }
.editor-actions-main .home-btn-quiet { border-color: var(--home-line); }
.editor-clear { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; border: 0; color: var(--home-muted); background: transparent; cursor: pointer; font-size: 11px; font-weight: 680; transition: color .18s var(--trans), background .18s var(--trans); }
.editor-clear:hover { color: var(--red); }

.preview-panel { display: flex; flex-direction: column; background: color-mix(in srgb, var(--home-paper) 40%, var(--home-panel)); }
.publish-preview { flex: 1; min-height: 500px; margin-top: 22px; padding: 25px; overflow: auto; border: 1px solid var(--home-line); border-radius: 10px; color: var(--home-ink); background: var(--home-panel); }
.preview-empty { color: var(--home-muted); font-size: 13px; line-height: 1.8; }
.preview-category { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 6px; color: var(--home-blue); background: color-mix(in srgb, var(--home-blue) 11%, transparent); font-size: 10px; font-weight: 750; }
.preview-title { margin-top: 18px; color: var(--home-ink); font-size: clamp(27px, 3vw, 39px); line-height: 1.22; letter-spacing: 0; }
.preview-meta { margin-top: 11px; color: var(--home-muted); font-size: 10px; }
.preview-excerpt { margin: 23px 0 0; color: var(--home-muted); font-size: 14px; line-height: 1.75; }
.preview-rule { width: 44px; height: 2px; margin: 27px 0; border: 0; background: var(--home-coral); }
.preview-body { max-width: 640px; color: var(--home-ink); font-size: 15px; line-height: 2; }
.preview-body h1, .preview-body h2, .preview-body h3 { margin: 31px 0 13px; color: var(--home-ink); line-height: 1.3; letter-spacing: 0; }
.preview-body h1 { font-size: 27px; }.preview-body h2 { font-size: 22px; }.preview-body h3 { font-size: 18px; }
.preview-body p { margin: 0 0 17px; }.preview-body ul, .preview-body ol { margin: 0 0 17px; padding-left: 23px; }.preview-body blockquote { margin: 21px 0; padding: 8px 0 8px 17px; border-left: 3px solid var(--home-coral); color: var(--home-muted); }.preview-body code { padding: 2px 5px; border-radius: 4px; color: var(--home-blue); background: color-mix(in srgb, var(--home-blue) 10%, transparent); font: .88em ui-monospace, SFMono-Regular, Menlo, monospace; }.preview-body pre { margin: 20px 0; padding: 14px; overflow: auto; border-radius: 8px; color: #dce6ff; background: #182034; font-size: 12px; line-height: 1.65; }.preview-body pre code { padding: 0; color: inherit; background: transparent; }.preview-body a { color: var(--home-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }

@media (max-width: 1080px) { .publish-workspace { grid-template-columns: 190px minmax(0, 1fr); }.preview-panel { grid-column: 2; border-top: 1px solid var(--home-line); }.preview-panel .publish-preview { min-height: 320px; }.editor-panel { border-right: 0; } }
@media (max-width: 760px) { .publish-main { width: calc(100% - 28px); padding-top: 118px; }.publish-intro { align-items: start; flex-direction: column; padding-bottom: 31px; }.publish-auth { width: 100%; justify-items: start; flex-basis: auto; }.publish-local-state { margin-top: 3px; }.publish-workspace { grid-template-columns: 1fr; margin-top: 22px; border-radius: 12px; }.draft-rail, .editor-panel, .preview-panel { padding: 18px; border-right: 0; }.draft-rail { border-bottom: 1px solid var(--home-line); }.draft-list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 16px; overflow: visible; }.draft-rail-note { display: none; }.preview-panel { grid-column: auto; }.field-row { grid-template-columns: 1fr; gap: 0; }.publish-preview { min-height: 360px; }.editor-actions { align-items: stretch; flex-direction: column-reverse; }.editor-actions-main { justify-content: stretch; }.editor-actions-main .btn { flex: 1; }.editor-clear { align-self: start; } }
@media (max-width: 460px) { .draft-list { grid-template-columns: 1fr; }.publish-intro h1 { font-size: clamp(38px, 13vw, 53px); }.publish-auth-actions { align-items: stretch; flex-wrap: wrap; }.publish-auth-actions input { flex-basis: 100%; }.publish-auth-actions button, .publish-auth-actions a { flex: 1; }.editor-actions-main { flex-direction: column; }.editor-actions-main .btn { width: 100%; }.publish-preview { padding: 19px; } }
@media (prefers-reduced-motion: reduce) { .draft-item, .icon-action, .preview-focus, .editor-clear, .field-group input, .field-group select, .field-group textarea { transition: none; } }