/* 通知公文排版: page layout only. Colors and shared components come from /_suite/suite.css. */
.page{max-width:1120px;margin:0 auto;padding:28px 24px 48px}

.workflow{display:flex;align-items:center;gap:10px;list-style:none;padding:0;margin:0 0 22px;flex-wrap:wrap}
.step{display:flex;align-items:center;gap:8px;color:var(--ink-soft);font-size:13px;background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:6px 14px 6px 6px}
.step-dot{height:26px;width:26px;border-radius:50%;display:grid;place-items:center;background:#f4ece0;color:var(--muted);font-size:12px;font-weight:600}
.step.done .step-dot{background:var(--primary-soft);color:var(--primary)}
.step.current{border-color:var(--primary-line);color:var(--primary-dark);font-weight:600}
.step.current .step-dot{background:var(--primary);color:#fff}
.step-line{width:22px;height:1px;background:var(--line-strong)}

/* layout */
.layout{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:20px;align-items:start}
.side{display:flex;flex-direction:column;gap:16px}
/* drop zone + chosen file */
.dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:38px 20px;border:2px dashed var(--line-strong);border-radius:var(--r-lg);background:var(--paper-warm);cursor:pointer;transition:border-color .15s,background .15s,transform .15s}
.dropzone:hover,.dropzone.dragover{border-color:var(--primary);background:var(--primary-soft)}
.dropzone.dragover{transform:translateY(-1px)}
.dropzone strong{font-size:15px}
.dropzone > span:last-child{font-size:12px;color:var(--muted)}
.drop-icon{width:54px;height:54px;border-radius:18px;display:grid;place-items:center;background:var(--paper);color:var(--primary);box-shadow:0 6px 16px #2f8a7424;margin-bottom:8px}
.drop-icon svg{width:26px;height:26px}
.file-chip{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--primary-line);border-radius:var(--r-lg);background:var(--primary-soft)}
.file-icon{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--paper);color:var(--primary);flex:none}
.file-meta{display:flex;flex-direction:column;min-width:0;flex:1}
.file-meta strong{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-meta small{font-size:12px;color:var(--primary-dark);opacity:.8}

/* font choice */
.field{margin-top:20px}
.field-label{display:block;font-size:13px;font-weight:600;margin-bottom:8px}
.field-hint{display:block;margin-top:8px;font-size:12px;color:var(--muted)}
/* buttons */
.actions{margin-top:22px}
.button.large{width:100%;padding:13px 22px;font-size:15px;font-weight:600}
.button.loading svg{animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}

/* rules + guides */
.rule-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.rule-list li{display:grid;grid-template-columns:76px 1fr;gap:12px;padding:10px 0;border-top:1px solid #f6efe4;font-size:13px}
.rule-list li:first-child{border-top:0;padding-top:0}
.rule-list b{font-weight:600;color:var(--ink)}
.rule-list span{color:var(--ink-soft);line-height:1.7}
.footer{margin-top:28px;text-align:center;color:var(--faint);font-size:12px}
@media (max-width:900px){.layout{grid-template-columns:1fr}}
@media (max-width:560px){
  .page{padding:20px 16px 36px}
  .page-heading h1{font-size:24px}
  .step-line{display:none}
  .workflow{gap:6px}
  .step{font-size:12px;padding:4px 10px 4px 4px;gap:6px}
  .step-dot{width:22px;height:22px;font-size:11px}
  .panel{padding:18px}
  .rule-list li{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}