/* ==========================================================================
   DocFlow · 文档管理系统
   A quiet, paper-inspired interface for a local document register.
   ========================================================================== */

:root {
  --ink: #173d35;
  --ink-deep: #0f2d27;
  --ink-soft: #31584d;
  --ink-muted: #647c73;
  --sage: #8ba79b;
  --sage-soft: #dce7e0;
  --paper: #fffdf8;
  --canvas: #f3f5f0;
  --surface: #ffffff;
  --surface-soft: #f8faf7;
  --line: #e3e9e3;
  --line-strong: #d2ddd6;
  --accent: #b9784a;
  --accent-soft: #f3e5d8;
  --danger: #a74c3f;
  --danger-soft: #fbebe7;
  --success: #3f7566;
  --shadow-sm: 0 1px 2px rgba(23, 61, 53, 0.04), 0 4px 14px rgba(23, 61, 53, 0.04);
  --shadow-md: 0 2px 4px rgba(23, 61, 53, 0.04), 0 16px 44px rgba(23, 61, 53, 0.08);
  --shadow-paper: 0 2px 4px rgba(31, 49, 42, 0.05), 0 28px 72px rgba(31, 49, 42, 0.11);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 26px;
  --font-sans: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Heiti SC", sans-serif;
  --font-serif: "Songti SC", "STSong", "Noto Serif SC", "SimSun", serif;
  --font-mono: "SFMono-Regular", "Cascadia Mono", "Menlo", "Consolas", monospace;
  --header-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--canvas);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

a {
  color: inherit;
}

svg {
  display: block;
}

[hidden] {
  display: none !important;
}

::selection {
  color: #fff;
  background: rgba(31, 78, 70, 0.82);
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.svg-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ==========================================================================
   Shared primitives
   ========================================================================== */

.section-label,
.side-label {
  margin: 0 0 8px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.13em;
  line-height: 1.4;
  text-transform: uppercase;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 19px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition:
    transform 0.22s var(--ease),
    background-color 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease,
    color 0.22s ease;
}

.btn .icon {
  width: 17px;
  height: 17px;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn:active {
  transform: translateY(0);
}

.btn:focus-visible,
.icon-button:focus-visible,
.format-button:focus-visible,
.text-button:focus-visible,
.back-link:focus-visible,
.nav-link:focus-visible,
.auth-tab:focus-visible,
.filter-tab:focus-visible {
  outline: 2px solid var(--ink-soft);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--ink);
  color: #fbfaf5;
  box-shadow: 0 8px 22px rgba(23, 61, 53, 0.18);
}

.btn--primary:hover {
  background: #1d4a40;
  box-shadow: 0 11px 28px rgba(23, 61, 53, 0.24);
}

.btn--secondary {
  border-color: var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 1px 1px rgba(23, 61, 53, 0.02);
}

.btn--secondary:hover {
  border-color: var(--sage);
  background: var(--surface-soft);
}

.btn--ghost {
  border-color: transparent;
  color: var(--ink-soft);
}

.btn--ghost:hover {
  background: rgba(23, 61, 53, 0.055);
}

.btn--compact {
  min-height: 39px;
  padding: 0 14px;
  font-size: 12.5px;
}

.btn--full {
  width: 100%;
}

.btn.is-loading .btn-label,
.btn.is-loading > .icon {
  opacity: 0.45;
}

.btn.is-loading {
  pointer-events: none;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 39px;
  height: 39px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  background: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.icon-button:hover {
  border-color: var(--line);
  background: var(--surface);
  color: var(--ink);
}

.spinner {
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 2px solid rgba(23, 61, 53, 0.16);
  border-top-color: var(--ink);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

.spinner--large {
  width: 30px;
  height: 30px;
  border-width: 2.5px;
}

.spinner--tiny {
  width: 14px;
  height: 14px;
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.meta-dot {
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 10px;
  border-radius: 50%;
  background: var(--sage);
  vertical-align: middle;
}

/* ==========================================================================
   Brand
   ========================================================================== */

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
}

.brand--button {
  border-radius: 10px;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 39px;
  height: 39px;
  border-radius: 12px;
  color: #fffdf7;
  background: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09);
}

.brand-mark .icon {
  width: 20px;
  height: 20px;
  stroke-width: 1.45;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  line-height: 1.08;
}

.brand-copy strong {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand-copy small {
  margin-top: 5px;
  color: var(--ink-muted);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.brand--light .brand-mark {
  color: var(--ink);
  background: #f1e9d9;
  box-shadow: none;
}

.brand--light .brand-copy strong {
  color: #fffdf6;
}

.brand--light .brand-copy small {
  color: rgba(246, 241, 231, 0.55);
}

/* ==========================================================================
   Auth
   ========================================================================== */

.auth-view {
  min-height: 100dvh;
  background: #f4f2eb;
}

.auth-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(460px, 0.92fr);
  width: 100%;
  max-width: 1680px;
  min-height: 100dvh;
  margin: 0 auto;
}

.auth-brand {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: clamp(30px, 4vw, 52px) clamp(34px, 5.4vw, 86px) clamp(28px, 3vw, 42px);
  overflow: hidden;
  color: #f6f1e7;
  background:
    radial-gradient(1000px 680px at 18% 22%, rgba(88, 132, 113, 0.42), transparent 60%),
    radial-gradient(720px 600px at 88% 88%, rgba(185, 120, 74, 0.15), transparent 60%),
    linear-gradient(145deg, #153d34 0%, #102f29 55%, #0d2823 100%);
}

.auth-brand::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.23;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, #000 4%, transparent 78%);
  pointer-events: none;
}

.auth-brand::after {
  position: absolute;
  top: -90px;
  right: -100px;
  width: 440px;
  height: 440px;
  content: "";
  border: 1px solid rgba(241, 233, 217, 0.11);
  border-radius: 50%;
  box-shadow:
    0 0 0 70px rgba(241, 233, 217, 0.025),
    0 0 0 140px rgba(241, 233, 217, 0.018);
  pointer-events: none;
}

.auth-brand-top {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auth-env {
  padding: 7px 11px;
  border: 1px solid rgba(246, 241, 231, 0.18);
  border-radius: 100px;
  color: rgba(246, 241, 231, 0.66);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.auth-story {
  position: relative;
  z-index: 3;
  width: min(600px, 94%);
  margin-top: clamp(52px, 9.5vh, 112px);
}

.auth-kicker {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 24px;
  color: rgba(241, 233, 217, 0.58);
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
}

.auth-kicker span {
  width: 26px;
  height: 1px;
  background: var(--accent);
}

.auth-story h1 {
  margin: 0;
  color: #f7f1e5;
  font-family: var(--font-serif);
  font-size: clamp(46px, 4.4vw, 68px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.22;
}

.auth-story h1 em {
  color: #d7b896;
  font-style: normal;
}

.auth-intro {
  width: min(470px, 92%);
  margin: 28px 0 0;
  color: rgba(244, 239, 227, 0.62);
  font-size: 14px;
  line-height: 1.9;
}

.auth-features {
  display: grid;
  gap: 0;
  width: min(500px, 95%);
  margin: 42px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(243, 235, 222, 0.12);
}

.auth-features li {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 13px;
  padding: 17px 0 16px;
  border-bottom: 1px solid rgba(243, 235, 222, 0.1);
}

.feature-index {
  padding-top: 2px;
  color: #c89b71;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
}

.auth-features strong {
  display: block;
  color: rgba(251, 247, 238, 0.91);
  font-size: 13.5px;
  font-weight: 600;
}

.auth-features p {
  margin: 4px 0 0;
  color: rgba(244, 239, 227, 0.45);
  font-size: 11.5px;
  line-height: 1.65;
}

.auth-visual {
  position: absolute;
  right: 30px;
  bottom: 84px;
  z-index: 2;
  width: 440px;
  height: 300px;
  pointer-events: none;
  opacity: 0.94;
}

.visual-halo {
  position: absolute;
  right: 30px;
  bottom: 0;
  width: 330px;
  height: 240px;
  border-radius: 50%;
  background: rgba(197, 163, 123, 0.12);
  filter: blur(52px);
}

.mini-paper {
  position: absolute;
  right: 95px;
  bottom: 0;
  width: 240px;
  height: 285px;
  padding: 25px 24px;
  border: 1px solid rgba(250, 246, 236, 0.35);
  border-radius: 3px;
  color: #32483f;
  background: #fbf7ed;
  box-shadow:
    0 32px 60px rgba(2, 18, 14, 0.35),
    0 2px 0 rgba(255, 255, 255, 0.45) inset;
  transform: rotate(-3.5deg);
}

.mini-paper-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #96a097;
  font-family: var(--font-mono);
  font-size: 5.5px;
  letter-spacing: 0.1em;
}

.mini-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #89a18f;
}

.mini-paper-title {
  margin: 22px 0 20px;
  color: #173d35;
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-align: center;
}

.mini-line {
  width: 100%;
  height: 3px;
  margin-bottom: 8px;
  border-radius: 4px;
  background: #dfe5dd;
}

.mini-line--long { width: 88%; }
.mini-line--short { width: 58%; }

.mini-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  margin: 17px 0;
}

.mini-grid div {
  padding: 8px 8px 9px;
  border: 1px solid #e0e5dc;
  background: #f5f5ed;
}

.mini-grid span {
  display: block;
  margin-bottom: 4px;
  color: #9aa59d;
  font-size: 5px;
  letter-spacing: 0.12em;
}

.mini-grid strong {
  color: #2a473d;
  font-family: var(--font-mono);
  font-size: 6.5px;
  font-weight: 600;
}

.mini-signature {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  padding-top: 10px;
  border-top: 1px solid #e5e7df;
  color: #a3ab9f;
  font-family: var(--font-mono);
  font-size: 5px;
  letter-spacing: 0.11em;
}

.mini-signature i {
  display: block;
  width: 23px;
  height: 2px;
  background: #c2cec5;
}

.mini-ledger {
  position: absolute;
  right: 0;
  bottom: 27px;
  width: 186px;
  padding: 16px;
  border: 1px solid rgba(37, 64, 54, 0.1);
  border-radius: 10px;
  background: rgba(251, 248, 240, 0.97);
  box-shadow: 0 20px 44px rgba(2, 18, 14, 0.3);
  transform: rotate(2.5deg);
}

.mini-ledger-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #547061;
  font-size: 8px;
  font-weight: 600;
}

.mini-ledger-head .icon {
  width: 12px;
  height: 12px;
  color: #7c9686;
}

.mini-ledger-head b {
  margin-left: auto;
  color: #1f4d40;
  font-family: var(--font-mono);
  font-size: 11px;
}

.mini-ledger-row {
  display: grid;
  grid-template-columns: 1fr 0.55fr 0.4fr;
  gap: 5px;
  margin-top: 9px;
}

.mini-ledger-row i {
  display: block;
  height: 3px;
  border-radius: 3px;
  background: #e1e7df;
}

.mini-ledger-row i:first-child {
  background: #cbd8cf;
}

.auth-footer {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: auto;
  padding-top: 34px;
  color: rgba(245, 239, 227, 0.35);
  font-size: 10px;
  letter-spacing: 0.04em;
}

.auth-footer-dot {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(245, 239, 227, 0.25);
}

.auth-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px clamp(28px, 5vw, 78px);
  background:
    radial-gradient(650px 460px at 80% 10%, rgba(221, 230, 217, 0.5), transparent 60%),
    #f5f3ec;
}

.auth-card {
  width: min(430px, 100%);
}

.auth-card-head h2 {
  margin: 0 0 9px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(28px, 2.2vw, 34px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

.auth-card-head > p:last-child {
  margin: 0;
  color: var(--ink-muted);
  font-size: 13px;
}

.auth-tabs {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin: 30px 0 26px;
  padding: 4px;
  border: 1px solid rgba(31, 72, 60, 0.07);
  border-radius: 12px;
  background: rgba(227, 232, 224, 0.64);
}

.auth-tab-slider {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 0;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  border-radius: 9px;
  background: #fffdf8;
  box-shadow: 0 2px 8px rgba(26, 53, 44, 0.08);
  transition: transform 0.35s var(--ease);
}

.auth-tabs.is-register .auth-tab-slider {
  transform: translateX(100%);
}

.auth-tab {
  position: relative;
  z-index: 1;
  height: 39px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  color: var(--ink-muted);
  background: transparent;
  font-size: 12.5px;
  font-weight: 600;
  transition: color 0.2s ease;
}

.auth-tab.is-active {
  color: var(--ink);
}

.auth-form {
  display: grid;
  gap: 17px;
}

.field {
  display: block;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px;
}

.field-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  color: var(--ink-soft);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.field-label i {
  color: var(--accent);
  font-size: 9.5px;
  font-style: normal;
  font-weight: 500;
}

.field-input {
  display: flex;
  align-items: center;
  min-height: 48px;
  border: 1px solid #dce3dc;
  border-radius: 11px;
  background: rgba(255, 255, 252, 0.88);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}

.field-input:focus-within {
  border-color: #8ba79b;
  background: #fffefa;
  box-shadow: 0 0 0 3px rgba(139, 167, 155, 0.16);
}

.field-input input,
.field-input select {
  width: 100%;
  min-width: 0;
  height: 46px;
  padding: 0 14px;
  border: 0;
  border-radius: inherit;
  outline: none;
  color: var(--ink);
  background: transparent;
  font-size: 13.5px;
}

.field-input input::placeholder {
  color: #a8b3ab;
}

.field-input input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 60px #fffefa inset;
  -webkit-text-fill-color: var(--ink);
}

.password-toggle {
  align-self: stretch;
  flex: 0 0 auto;
  padding: 0 14px;
  border: 0;
  color: var(--ink-muted);
  background: transparent;
  font-size: 11px;
  font-weight: 500;
}

.password-toggle:hover {
  color: var(--ink);
}

.field-hint {
  margin: -7px 0 0;
  color: #89978f;
  font-size: 10.5px;
  line-height: 1.6;
}

.form-message {
  padding: 10px 12px;
  border: 1px solid rgba(167, 76, 63, 0.16);
  border-radius: 9px;
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 11.5px;
  line-height: 1.6;
}

.form-message.is-success {
  border-color: rgba(63, 117, 102, 0.18);
  color: var(--success);
  background: #eef6f1;
}

.auth-form .btn--primary {
  min-height: 49px;
  margin-top: 2px;
  justify-content: space-between;
  padding: 0 18px;
}

.auth-form .btn--primary .btn-label {
  flex: 1;
  text-align: left;
}

.auth-switch {
  margin: 22px 0 0;
  color: var(--ink-muted);
  font-size: 11.5px;
  text-align: center;
}

.auth-switch button {
  padding: 0;
  border: 0;
  color: var(--ink);
  background: transparent;
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #b4c5bb;
}

.auth-note {
  position: absolute;
  bottom: 25px;
  width: min(430px, calc(100% - 56px));
  margin: 0;
  color: #98a49c;
  font-size: 9.5px;
  letter-spacing: 0.01em;
  text-align: center;
}

.auth-panel {
  position: relative;
}

/* ==========================================================================
   App shell / header
   ========================================================================== */

.app-view {
  min-height: 100dvh;
  background:
    radial-gradient(900px 550px at 93% -10%, rgba(216, 228, 213, 0.62), transparent 65%),
    var(--canvas);
}

.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  height: var(--header-h);
  border-bottom: 1px solid rgba(215, 224, 216, 0.78);
  background: rgba(250, 251, 247, 0.87);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
}

.header-inner {
  display: flex;
  align-items: center;
  width: min(1260px, 100%);
  height: 100%;
  margin: 0 auto;
  padding: 0 30px;
}

.app-nav {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 40px;
}

.nav-link {
  position: relative;
  height: 40px;
  padding: 0 13px;
  border: 0;
  border-radius: 8px;
  color: var(--ink-muted);
  background: transparent;
  font-size: 12.5px;
  font-weight: 500;
  transition: color 0.18s ease, background-color 0.18s ease;
}

.nav-link:hover {
  color: var(--ink);
  background: rgba(23, 61, 53, 0.045);
}

.nav-link.is-active {
  color: var(--ink);
  font-weight: 600;
}

.nav-link.is-active::after {
  position: absolute;
  right: 13px;
  bottom: 1px;
  left: 13px;
  height: 2px;
  content: "";
  border-radius: 2px;
  background: var(--ink);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-left: auto;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  margin-left: 9px;
  padding-left: 15px;
  border-left: 1px solid var(--line);
}

.user-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid #d5e0d8;
  border-radius: 50%;
  color: var(--ink);
  background: #eaf1eb;
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 700;
}

.user-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.user-meta strong {
  max-width: 120px;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-meta small {
  color: #8d9b93;
  font-family: var(--font-mono);
  font-size: 8.5px;
  line-height: 1.2;
}

.app-main {
  width: min(1260px, 100%);
  min-height: calc(100dvh - var(--header-h));
  margin: 0 auto;
  padding: 38px 30px 82px;
}

.view {
  animation: view-enter 0.38s var(--ease) both;
}

@keyframes view-enter {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   Dashboard
   ========================================================================== */

.dashboard-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding: 7px 2px 29px;
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 15px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.eyebrow-line {
  width: 23px;
  height: 1px;
  background: var(--accent);
}

.dashboard-intro h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.28;
}

.dashboard-sub {
  margin: 12px 0 0;
  color: var(--ink-muted);
  font-size: 12px;
  letter-spacing: 0.01em;
}

.btn--hero {
  display: flex;
  flex: 0 0 auto;
  gap: 12px;
  min-width: 258px;
  min-height: 66px;
  padding: 0 17px;
  border-radius: 16px;
  text-align: left;
  box-shadow: 0 14px 32px rgba(23, 61, 53, 0.2);
}

.btn--hero:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 42px rgba(23, 61, 53, 0.25);
}

.hero-btn-icon {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.11);
}

.hero-btn-icon .icon {
  width: 18px;
  height: 18px;
}

.btn--hero > span:nth-child(2) {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.btn--hero strong {
  font-size: 13.5px;
  font-weight: 600;
}

.btn--hero small {
  color: rgba(251, 250, 245, 0.57);
  font-size: 9.5px;
  font-weight: 400;
}

.hero-arrow {
  width: 17px !important;
  height: 17px !important;
  color: rgba(255, 255, 255, 0.48);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.stat-card {
  position: relative;
  min-height: 156px;
  padding: 20px 21px 17px;
  overflow: hidden;
  border: 1px solid rgba(220, 228, 220, 0.9);
  border-radius: var(--radius-lg);
  background: rgba(255, 255, 252, 0.8);
  box-shadow: var(--shadow-sm);
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease, border-color 0.25s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  border-color: #cad9d0;
  box-shadow: var(--shadow-md);
}

.stat-card--tint {
  background:
    radial-gradient(280px 160px at 95% 0%, rgba(196, 215, 202, 0.45), transparent 70%),
    rgba(255, 255, 252, 0.86);
}

.stat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat-label {
  color: var(--ink-muted);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.stat-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  color: var(--ink-soft);
  background: #f0f4ef;
}

.stat-icon .icon {
  width: 15px;
  height: 15px;
}

.stat-value {
  display: block;
  margin-top: 14px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.stat-caption {
  display: block;
  margin-top: 11px;
  color: #97a39b;
  font-size: 9.5px;
}

.ledger-panel {
  overflow: hidden;
  border: 1px solid rgba(218, 227, 219, 0.95);
  border-radius: var(--radius-xl);
  background: rgba(255, 255, 252, 0.9);
  box-shadow: var(--shadow-md);
}

.panel-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  padding: 25px 26px 18px;
}

.panel-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.count-badge {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 20px;
  padding: 0 7px;
  border: 1px solid #d7e2da;
  border-radius: 100px;
  color: var(--ink-muted);
  background: #f4f8f3;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0;
}

.panel-toolbar {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 0 26px 17px;
}

.search-box {
  display: flex;
  align-items: center;
  flex: 1 1 300px;
  gap: 9px;
  max-width: 390px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcf9;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.search-box:focus-within {
  border-color: #a5bbaf;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(139, 167, 155, 0.12);
}

.search-box .icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #8b9b92;
}

.search-box input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 12px;
}

.search-box input::placeholder {
  color: #a7b2ab;
}

.search-box input::-webkit-search-cancel-button {
  opacity: 0.45;
}

.search-box kbd {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid #e2e8e2;
  border-radius: 5px;
  color: #a1ada5;
  background: #fff;
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1;
}

.filter-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid #e4eae4;
  border-radius: 9px;
  background: #f6f9f5;
}

.filter-tab {
  height: 31px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  color: #819087;
  background: transparent;
  font-size: 11px;
  font-weight: 500;
  transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.filter-tab.is-active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 4px rgba(28, 55, 46, 0.08);
}

.toolbar-hint {
  margin-left: auto;
  color: #98a49c;
  font-size: 10px;
  white-space: nowrap;
}

.table-wrap {
  position: relative;
  min-height: 194px;
  border-top: 1px solid #edf1ec;
}

.ledger-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.ledger-table th {
  padding: 11px 14px;
  border-bottom: 1px solid #e9eee8;
  color: #97a39b;
  background: #fafbf8;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: left;
  white-space: nowrap;
}

.ledger-table th:first-child,
.ledger-table td:first-child {
  padding-left: 26px;
}

.ledger-table th:last-child,
.ledger-table td:last-child {
  padding-right: 26px;
}

.ledger-table th.col-index { width: 48px; }
.ledger-table th.col-title { width: 31%; }
.ledger-table th.col-action { width: 74px; }
.ledger-table th:nth-child(2) { width: 143px; }
.ledger-table th:nth-child(4) { width: 91px; }
.ledger-table th:nth-child(5) { width: 102px; }
.ledger-table th:nth-child(6),
.ledger-table th:nth-child(7) { width: 128px; }

.ledger-table tbody tr {
  border-bottom: 1px solid #eef2ed;
  cursor: pointer;
  transition: background-color 0.16s ease;
}

.ledger-table tbody tr:last-child {
  border-bottom: 0;
}

.ledger-table tbody tr:hover {
  background: #f8faf6;
}

.ledger-table td {
  height: 64px;
  padding: 10px 14px;
  color: var(--ink-soft);
  font-size: 11.5px;
  vertical-align: middle;
}

.row-index {
  color: #b0bbb3;
  font-family: var(--font-mono);
  font-size: 9.5px;
}

.doc-number {
  color: #315f51;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.doc-title-cell {
  min-width: 0;
}

.doc-title-primary {
  display: block;
  overflow: hidden;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.55;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.doc-title-excerpt {
  display: block;
  margin-top: 3px;
  overflow: hidden;
  color: #9aa79f;
  font-size: 9px;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.type-pill {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  border: 1px solid #e4eae3;
  border-radius: 6px;
  color: #677c72;
  background: #f7faf6;
  font-size: 9.5px;
  white-space: nowrap;
}

.owner-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.owner-mini-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  color: #557266;
  background: #ebf2ec;
  font-family: var(--font-serif);
  font-size: 8.5px;
  font-weight: 700;
}

.owner-name {
  overflow: hidden;
  color: #61766c;
  font-size: 10.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.date-cell {
  color: #87968d;
  font-family: var(--font-mono);
  font-size: 9.5px;
  line-height: 1.55;
  white-space: nowrap;
}

.date-cell small {
  display: block;
  color: #afbab3;
  font-size: 8.5px;
}

.row-open {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  margin-left: auto;
  border: 1px solid #e5ebe5;
  border-radius: 8px;
  color: #95a39b;
  background: #fff;
  transition: color 0.18s ease, border-color 0.18s ease, background-color 0.18s ease, transform 0.18s ease;
}

.ledger-table tr:hover .row-open {
  color: var(--ink);
  border-color: #c5d5ca;
  background: #f6faf5;
  transform: translateX(2px);
}

.row-open .icon {
  width: 14px;
  height: 14px;
}

.panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 26px;
  border-top: 1px solid #edf1ec;
  color: #9aa69e;
  background: #fbfcf9;
  font-size: 9.5px;
}

.panel-foot-actions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.sync-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #8a9a90;
}

.sync-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #77a18c;
  box-shadow: 0 0 0 3px rgba(119, 161, 140, 0.11);
}

.text-button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
  border: 0;
  color: #71877b;
  background: transparent;
  font-size: 10px;
}

.text-button .icon {
  width: 13px;
  height: 13px;
}

.text-button:hover {
  color: var(--ink);
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 42px 24px;
  text-align: center;
}

.empty-icon {
  display: grid;
  place-items: center;
  width: 55px;
  height: 55px;
  margin-bottom: 16px;
  border: 1px solid #dde7de;
  border-radius: 17px;
  color: #7d9689;
  background: #f4f8f2;
  transform: rotate(-3deg);
}

.empty-icon .icon {
  width: 24px;
  height: 24px;
}

.empty-state h3 {
  margin: 0 0 7px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
}

.empty-state p {
  max-width: 330px;
  margin: 0 0 18px;
  color: #91a096;
  font-size: 11px;
  line-height: 1.75;
}

.table-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #85968c;
  background: rgba(253, 253, 250, 0.75);
  font-size: 11px;
  backdrop-filter: blur(2px);
}

/* ==========================================================================
   Editor
   ========================================================================== */

.editor-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 48px;
  margin-bottom: 19px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 6px 0;
  border: 0;
  color: #73877c;
  background: transparent;
  font-size: 11.5px;
  transition: color 0.18s ease, gap 0.18s ease;
}

.back-link:hover {
  gap: 8px;
  color: var(--ink);
}

.back-link .icon {
  width: 15px;
  height: 15px;
}

.editor-crumb {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.editor-crumb-number {
  overflow: hidden;
  color: #6f8278;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.editor-save-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px;
  border: 1px solid #e0e8e1;
  border-radius: 100px;
  color: #70877a;
  background: rgba(250, 252, 248, 0.8);
  font-size: 9px;
  white-space: nowrap;
}

.editor-save-state i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #78a08b;
  box-shadow: 0 0 0 3px rgba(120, 160, 139, 0.11);
}

.editor-save-state[data-state="saving"] i {
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(185, 120, 74, 0.12);
  animation: save-pulse 1.2s ease-in-out infinite;
}

.editor-save-state[data-state="error"] {
  color: var(--danger);
  border-color: #efd4cd;
  background: #fdf3f0;
}

.editor-save-state[data-state="error"] i {
  background: var(--danger);
  box-shadow: 0 0 0 3px rgba(167, 76, 63, 0.1);
}

@keyframes save-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.editor-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: start;
}

.paper-stage {
  min-width: 0;
}

.paper {
  position: relative;
  width: 100%;
  max-width: 880px;
  min-height: 900px;
  margin: 0 auto;
  padding: clamp(38px, 5.2vw, 64px) clamp(32px, 5.7vw, 68px) 36px;
  overflow: hidden;
  border: 1px solid rgba(226, 226, 214, 0.88);
  border-radius: 5px;
  background:
    linear-gradient(90deg, rgba(250, 247, 237, 0.65), transparent 14%, transparent 86%, rgba(250, 247, 237, 0.55)),
    var(--paper);
  box-shadow: var(--shadow-paper);
}

.paper::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: 0.28;
  background-image: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(92, 80, 55, 0.018) 3px,
    rgba(92, 80, 55, 0.018) 4px
  );
  pointer-events: none;
}

.paper > * {
  position: relative;
  z-index: 1;
}

.paper-accent {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ink) 0 58%, #c8a47e 58% 64%, transparent 64%);
}

.paper-eyebrow {
  margin: 0 0 18px;
  color: #8c9990;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
}

.paper-eyebrow span {
  padding: 0 5px;
  color: #b8a487;
}

.paper-title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(28px, 3vw, 36px);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-align: center;
}

.paper-subtitle {
  margin: 9px 0 0;
  color: #a0a99f;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.16em;
  text-align: center;
}

.paper-rule {
  height: 2px;
  margin: 25px 0 24px;
  background: var(--ink);
}

.paper-meta {
  display: grid;
  grid-template-columns: 84px minmax(0, 1.12fr) 84px minmax(0, 0.88fr);
  border-top: 1px solid #d7e0d8;
  border-left: 1px solid #d7e0d8;
}

.meta-label,
.meta-value {
  min-width: 0;
  min-height: 49px;
  padding: 11px 13px;
  border-right: 1px solid #d7e0d8;
  border-bottom: 1px solid #d7e0d8;
}

.meta-label {
  display: flex;
  align-items: center;
  color: #536b60;
  background: #f0f4ee;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.07em;
}

.meta-value {
  display: flex;
  align-items: center;
  color: #2b3b33;
  background: rgba(255, 253, 247, 0.54);
  font-size: 11.5px;
  line-height: 1.5;
}

.meta-value.span-3 {
  grid-column: span 3;
}

.meta-title-cell {
  padding: 6px 11px;
}

.meta-select-cell {
  position: relative;
  padding: 0 7px;
}

.doc-number {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.paper-title-input {
  width: 100%;
  padding: 8px 1px;
  border: 0;
  border-bottom: 1px solid transparent;
  outline: none;
  color: var(--ink);
  background: transparent;
  font-size: clamp(14px, 1.55vw, 17px);
  font-weight: 600;
  line-height: 1.5;
  transition: border-color 0.2s ease;
}

.paper-title-input::placeholder {
  color: #b4bcb2;
  font-weight: 400;
}

.paper-title-input:focus {
  border-bottom-color: #9bb4a5;
}

.paper-select {
  width: 100%;
  padding: 8px 19px 8px 1px;
  border: 0;
  outline: none;
  color: #2b3b33;
  background: transparent;
  font-size: 11.5px;
  appearance: none;
  cursor: pointer;
}

.select-chevron {
  position: absolute;
  top: 50%;
  right: 8px;
  width: 12px;
  height: 12px;
  color: #95a299;
  pointer-events: none;
  transform: translateY(-50%);
}

.body-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-top: 26px;
  padding-bottom: 9px;
  border-bottom: 1px solid #dfe6df;
}

.body-heading span {
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
}

.body-heading small {
  color: #adb7ad;
  font-family: var(--font-mono);
  font-size: 6.5px;
  letter-spacing: 0.13em;
}

.editor-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 10px;
  padding: 5px 6px;
  border: 1px solid #e8ede6;
  border-radius: 7px;
  background: #fafcf8;
}

.format-button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 27px;
  padding: 0;
  border: 0;
  border-radius: 5px;
  color: #60766b;
  background: transparent;
  font-family: var(--font-serif);
  font-size: 12px;
  transition: color 0.16s ease, background-color 0.16s ease;
}

.format-button:hover {
  color: var(--ink);
  background: #edf3ed;
}

.format-button .icon {
  width: 14px;
  height: 14px;
}

.toolbar-divider {
  width: 1px;
  height: 15px;
  margin: 0 3px;
  background: #e1e8e1;
}

.toolbar-spacer {
  flex: 1;
}

.char-count {
  padding-right: 4px;
  color: #a3ada5;
  font-family: var(--font-mono);
  font-size: 8px;
  white-space: nowrap;
}

.paper-body {
  min-height: 330px;
  padding: 19px 3px 12px;
  outline: none;
  color: #2c342f;
  font-size: 14px;
  line-height: 1.95;
  word-break: break-word;
}

.paper-body:empty::before {
  content: attr(data-placeholder);
  color: #b4bbb3;
  pointer-events: none;
}

.paper-body:focus {
  outline: none;
}

.paper-body p,
.paper-body div {
  margin: 0 0 0.55em;
}

.paper-body h2,
.paper-body h3 {
  margin: 1em 0 0.45em;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
}

.paper-body h3 {
  font-size: 14.5px;
}

.paper-body ul,
.paper-body ol {
  margin: 0.35em 0 0.7em;
  padding-left: 1.6em;
}

.paper-body li {
  margin: 0.15em 0;
}

.paper-body blockquote {
  margin: 0.6em 0;
  padding: 2px 0 2px 13px;
  border-left: 2px solid #cfdcd2;
  color: #617267;
}

.paper-body strong,
.paper-body b {
  color: #1f3128;
  font-weight: 600;
}

.paper-body:empty::after,
.paper-body p:empty {
  min-height: 1em;
}

.paper-foot {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  padding-top: 12px;
  border-top: 1px solid #e5e9e1;
  color: #a1aaa1;
  font-family: var(--font-mono);
  font-size: 7px;
  letter-spacing: 0.04em;
}

.paper-foot-line {
  flex: 1;
  height: 1px;
  background: #eef0e9;
}

/* Editor sidebar */

.editor-sidebar {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  display: grid;
  gap: 13px;
}

.autosave-card {
  position: relative;
  padding: 20px;
  overflow: hidden;
  border-radius: 18px;
  color: #eef4ed;
  background:
    radial-gradient(280px 200px at 100% 0%, rgba(110, 153, 133, 0.33), transparent 70%),
    linear-gradient(145deg, #1a443a, #123830);
  box-shadow: 0 16px 34px rgba(23, 61, 53, 0.16);
}

.autosave-card::after {
  position: absolute;
  right: -22px;
  bottom: -25px;
  width: 110px;
  height: 110px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 24px rgba(255, 255, 255, 0.025);
  pointer-events: none;
}

.autosave-head {
  display: flex;
  align-items: center;
  gap: 11px;
}

.autosave-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 33px;
  height: 33px;
  border: 1px solid rgba(232, 241, 232, 0.38);
  border-radius: 10px;
  color: #dcebdc;
  background: rgba(255, 255, 255, 0.06);
}

.autosave-icon .icon {
  width: 16px;
  height: 16px;
}

.autosave-card .side-label {
  margin: 0 0 4px;
  color: rgba(235, 244, 234, 0.42);
  font-size: 8px;
}

.autosave-card h3 {
  margin: 0;
  color: #f5f8f1;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4;
}

.autosave-copy {
  position: relative;
  z-index: 1;
  margin: 13px 0 15px;
  color: rgba(236, 244, 234, 0.55);
  font-size: 10px;
  line-height: 1.65;
}

.autosave-readiness {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 9px;
}

.readiness-bar {
  flex: 1;
  height: 3px;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(239, 245, 236, 0.14);
}

.readiness-bar i {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: #b6cfb9;
  transition: width 0.3s var(--ease), background-color 0.2s ease;
}

.autosave-card[data-state="saving"] .readiness-bar i {
  width: 54%;
  background: #d5b289;
  animation: saving-bar 1.1s ease-in-out infinite alternate;
}

.autosave-card[data-state="error"] .readiness-bar i {
  width: 100%;
  background: #e4a393;
}

@keyframes saving-bar {
  from { opacity: 0.5; transform: translateX(-15%); }
  to { opacity: 1; transform: translateX(15%); }
}

#lastSavedLabel {
  flex: 0 0 auto;
  color: rgba(233, 242, 231, 0.42);
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: 0.01em;
}

.side-block {
  padding: 18px;
  border: 1px solid rgba(220, 228, 220, 0.9);
  border-radius: 16px;
  background: rgba(255, 255, 252, 0.72);
  box-shadow: 0 2px 8px rgba(23, 61, 53, 0.025);
}

.side-block h3 {
  margin: 0 0 13px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.side-block .side-label {
  margin-bottom: 5px;
  font-size: 8px;
}

.file-action {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 8px 4px;
  border: 0;
  border-top: 1px solid #eef2ec;
  background: transparent;
  text-align: left;
}

.file-action:first-of-type {
  padding-top: 3px;
  border-top: 0;
}

.file-action + .file-action {
  margin-top: 2px;
}

.file-action:hover .file-action-copy strong {
  color: var(--ink);
}

.file-action-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.file-action-icon .icon {
  width: 16px;
  height: 16px;
}

.file-action-icon--doc {
  color: #52796a;
  background: #edf4ee;
}

.file-action-icon--sheet {
  color: #95744e;
  background: #f7f0e4;
}

.file-action-copy {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  gap: 3px;
}

.file-action-copy strong {
  color: var(--ink-soft);
  font-size: 10.5px;
  font-weight: 600;
  transition: color 0.16s ease;
}

.file-action-copy small {
  overflow: hidden;
  color: #9aa69d;
  font-family: var(--font-mono);
  font-size: 7.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-action-arrow {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #a0ada4;
}

.side-details dl {
  margin: 0;
}

.side-details dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid #f0f3ee;
}

.side-details dl > div:first-child {
  border-top: 0;
}

.side-details dt {
  flex: 0 0 auto;
  color: #9aa69d;
  font-size: 9.5px;
}

.side-details dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: #586d62;
  font-family: var(--font-mono);
  font-size: 8.5px;
  text-align: right;
}

.side-note {
  display: flex;
  gap: 7px;
  margin: 0;
  padding: 2px 4px;
  color: #9aa69d;
  font-size: 9.5px;
  line-height: 1.65;
}

.side-note .icon {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 2px;
  color: #7ba08c;
}

/* ==========================================================================
   Modal
   ========================================================================== */

.modal {
  width: min(540px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: auto;
  border: 0;
  border-radius: 23px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 35px 100px rgba(10, 31, 25, 0.3);
}

.modal[open] {
  animation: modal-enter 0.3s var(--ease) both;
}

.modal::backdrop {
  background: rgba(11, 28, 24, 0.42);
  backdrop-filter: blur(5px);
  animation: backdrop-enter 0.25s ease both;
}

@keyframes modal-enter {
  from { opacity: 0; transform: translateY(14px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

.modal-form {
  display: flex;
  flex-direction: column;
}

.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 27px 28px 17px;
}

.modal-head h2 {
  margin: 0 0 7px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.modal-head > div > p:last-child {
  max-width: 365px;
  margin: 0;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.7;
}

.modal-close {
  flex: 0 0 auto;
  color: #84968b;
}

.number-preview {
  display: flex;
  align-items: center;
  gap: 13px;
  margin: 2px 28px 24px;
  padding: 13px 15px;
  border: 1px solid #e0e8df;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(231, 240, 230, 0.8), rgba(246, 249, 243, 0.5)),
    #f7faf5;
}

.number-preview-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  color: #6e8477;
  font-size: 9px;
  white-space: nowrap;
}

.live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #74a088;
  box-shadow: 0 0 0 3px rgba(116, 160, 136, 0.12);
}

.number-preview strong {
  overflow: hidden;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.number-preview-hint {
  margin-left: auto;
  color: #9ba89f;
  font-size: 8px;
  white-space: nowrap;
}

.modal-body {
  display: grid;
  gap: 17px;
  padding: 0 28px;
}

.field-select {
  position: relative;
  padding-right: 12px;
}

.field-select select {
  appearance: none;
  cursor: pointer;
}

.field-select .icon {
  width: 15px;
  height: 15px;
  color: #8b9b91;
  pointer-events: none;
}

.modal-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 26px;
  padding: 17px 28px 22px;
  border-top: 1px solid #edf0e9;
}

.modal-foot .btn {
  min-width: 95px;
}

.modal-foot .btn--primary {
  min-width: 175px;
}

/* ==========================================================================
   Toast / loading
   ========================================================================== */

.toast-region {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 9px;
  width: min(355px, calc(100vw - 32px));
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 14px;
  border: 1px solid rgba(221, 230, 221, 0.85);
  border-radius: 12px;
  color: var(--ink-soft);
  background: rgba(255, 255, 251, 0.96);
  box-shadow: 0 12px 32px rgba(23, 61, 53, 0.13);
  font-size: 11px;
  line-height: 1.6;
  backdrop-filter: blur(9px);
  animation: toast-in 0.3s var(--ease) both;
  pointer-events: auto;
}

.toast.is-error {
  border-color: #efd9d2;
  color: var(--danger);
}

.toast-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: var(--success);
  background: #edf5ee;
}

.toast.is-error .toast-icon {
  color: var(--danger);
  background: #fbeeea;
}

.toast-icon .icon {
  width: 12px;
  height: 12px;
}

.toast.is-leaving {
  animation: toast-out 0.25s ease both;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toast-out {
  to { opacity: 0; transform: translateY(4px); }
}

.loading-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 55vh;
  gap: 14px;
  color: var(--ink-muted);
  font-size: 11px;
}

.loading-view p {
  margin: 0;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1280px) {
  .auth-visual {
    opacity: 0.55;
    transform: scale(0.9);
    transform-origin: bottom right;
  }

  .auth-story {
    width: 100%;
  }

  .auth-story h1 {
    font-size: clamp(44px, 4.7vw, 60px);
  }
}

@media (max-width: 1120px) {
  .auth-visual {
    display: none;
  }

  .auth-story {
    margin-top: clamp(48px, 9vh, 90px);
  }

  .editor-layout {
    grid-template-columns: minmax(0, 1fr) 276px;
  }

  .app-main {
    padding-right: 24px;
    padding-left: 24px;
  }

  .header-inner {
    padding: 0 24px;
  }
}

@media (max-width: 980px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .editor-layout {
    grid-template-columns: 1fr;
  }

  .editor-sidebar {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .autosave-card {
    grid-column: 1 / -1;
  }

  .side-note {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  .auth-shell {
    grid-template-columns: 1fr;
  }

  .auth-brand {
    min-height: auto;
    padding: 27px 28px 35px;
  }

  .auth-story {
    margin-top: 42px;
  }

  .auth-story h1 {
    font-size: 40px;
  }

  .auth-intro {
    max-width: 520px;
    margin-top: 20px;
    font-size: 12.5px;
  }

  .auth-features,
  .auth-footer {
    display: none;
  }

  .auth-panel {
    min-height: auto;
    padding: 44px 28px 82px;
  }

  .auth-note {
    position: static;
    width: 100%;
    margin-top: 26px;
  }

  .auth-env {
    font-size: 8px;
  }

  .auth-tabs {
    margin-top: 26px;
  }
}

@media (max-width: 820px) {
  .app-nav {
    display: none;
  }

  .header-inner {
    padding: 0 18px;
  }

  .header-actions > .btn--compact span {
    display: none;
  }

  .header-actions > .btn--compact {
    width: 39px;
    padding: 0;
  }

  .user-meta {
    display: none;
  }

  .user-chip {
    padding-left: 11px;
    margin-left: 2px;
  }

  .app-main {
    padding: 26px 18px 64px;
  }

  .dashboard-hero {
    align-items: flex-start;
    flex-direction: column;
    padding-bottom: 24px;
  }

  .btn--hero {
    width: 100%;
    min-height: 62px;
  }

  .panel-toolbar {
    flex-wrap: wrap;
    gap: 10px;
    padding-right: 18px;
    padding-left: 18px;
  }

  .search-box {
    flex-basis: 100%;
    max-width: none;
  }

  .toolbar-hint {
    margin-left: 0;
  }

  .panel-head {
    padding: 21px 18px 15px;
  }

  .panel-head .btn--compact span {
    display: inline;
  }

  .ledger-table {
    min-width: 0;
    table-layout: fixed;
  }

  .ledger-table th:nth-child(1),
  .ledger-table td:nth-child(1),
  .ledger-table th:nth-child(4),
  .ledger-table td:nth-child(4),
  .ledger-table th:nth-child(5),
  .ledger-table td:nth-child(5),
  .ledger-table th:nth-child(6),
  .ledger-table td:nth-child(6),
  .ledger-table th:nth-child(7),
  .ledger-table td:nth-child(7) {
    display: none;
  }

  .ledger-table th:nth-child(2),
  .ledger-table td:nth-child(2) {
    width: 126px;
    padding-left: 18px;
  }

  .ledger-table th:nth-child(3),
  .ledger-table td:nth-child(3) {
    width: auto;
  }

  .ledger-table th:nth-child(8),
  .ledger-table td:nth-child(8) {
    width: 54px;
    padding-right: 14px;
  }

  .table-wrap {
    overflow-x: hidden;
  }

  .panel-foot {
    padding: 13px 18px;
  }

  .panel-foot-actions {
    gap: 12px;
  }

  .sync-note {
    display: none;
  }

  .editor-bar {
    flex-wrap: wrap;
    gap: 10px 14px;
  }

  .editor-crumb {
    order: 3;
    flex-basis: 100%;
    justify-content: space-between;
  }

  .editor-actions {
    margin-left: auto;
  }

  .editor-actions .btn--ghost span {
    display: none;
  }

  .paper {
    min-height: 0;
    padding: 32px 25px 28px;
  }

  .paper-meta {
    grid-template-columns: 74px minmax(0, 1fr) 74px minmax(0, 1fr);
  }

  .meta-label,
  .meta-value {
    padding: 9px 10px;
    min-height: 45px;
  }

  .paper-body {
    min-height: 290px;
  }
}

@media (max-width: 620px) {
  .auth-brand {
    padding: 23px 21px 28px;
  }

  .auth-story {
    margin-top: 33px;
  }

  .auth-kicker {
    margin-bottom: 15px;
    font-size: 8px;
  }

  .auth-story h1 {
    font-size: 34px;
  }

  .auth-intro {
    display: none;
  }

  .auth-panel {
    padding: 33px 20px 60px;
  }

  .auth-card-head h2 {
    font-size: 28px;
  }

  .field-row {
    grid-template-columns: 1fr;
  }

  .header-inner {
    padding: 0 13px;
  }

  .brand-copy small {
    display: none;
  }

  .brand-mark {
    width: 35px;
    height: 35px;
    border-radius: 10px;
  }

  .brand-copy strong {
    font-size: 15px;
  }

  .btn--compact {
    font-size: 11.5px;
  }

  .app-main {
    padding: 23px 13px 55px;
  }

  .dashboard-intro h1 {
    font-size: 27px;
  }

  .dashboard-sub {
    font-size: 10.5px;
    line-height: 1.7;
  }

  .meta-dot {
    margin: 0 6px;
  }

  .stat-grid {
    gap: 9px;
  }

  .stat-card {
    min-height: 132px;
    padding: 15px;
    border-radius: 15px;
  }

  .stat-label {
    font-size: 10px;
  }

  .stat-icon {
    width: 26px;
    height: 26px;
  }

  .stat-value {
    margin-top: 11px;
    font-size: 31px;
  }

  .stat-caption {
    margin-top: 9px;
    font-size: 8.5px;
    line-height: 1.5;
  }

  .ledger-panel {
    border-radius: 19px;
  }

  .panel-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 15px;
    padding-top: 19px;
  }

  .panel-head .btn--compact {
    width: 100%;
  }

  .panel-toolbar {
    padding-bottom: 14px;
  }

  .filter-tabs {
    flex: 1;
  }

  .filter-tab {
    flex: 1;
    padding: 0 7px;
  }

  .search-box kbd {
    display: none;
  }

  .toolbar-hint {
    display: none;
  }

  .panel-foot {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .panel-foot-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .editor-bar {
    margin-bottom: 13px;
  }

  .editor-actions .btn {
    padding: 0 10px;
  }

  .editor-actions .btn span {
    display: none;
  }

  .paper {
    padding: 25px 18px 24px;
    border-radius: 3px;
  }

  .paper-title {
    font-size: 27px;
  }

  .paper-rule {
    margin: 19px 0;
  }

  .paper-meta {
    grid-template-columns: 68px minmax(0, 1fr);
  }

  .meta-value.span-3 {
    grid-column: span 1;
  }

  .meta-label,
  .meta-value {
    min-height: 43px;
    padding: 8px 9px;
    font-size: 10.5px;
  }

  .doc-number {
    font-size: 10px;
  }

  .paper-title-input {
    font-size: 13px;
  }

  .paper-select {
    font-size: 10.5px;
  }

  .paper-body {
    font-size: 13px;
  }

  .editor-sidebar {
    grid-template-columns: 1fr;
  }

  .autosave-card,
  .side-note {
    grid-column: auto;
  }

  .editor-crumb {
    flex-wrap: wrap;
    gap: 6px;
  }

  .modal {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 18px;
  }

  .modal-head {
    padding: 22px 20px 15px;
  }

  .modal-head h2 {
    font-size: 23px;
  }

  .modal-head > div > p:last-child {
    font-size: 10.5px;
  }

  .number-preview {
    flex-wrap: wrap;
    gap: 7px 11px;
    margin: 0 20px 20px;
    padding: 12px;
  }

  .number-preview-hint {
    display: none;
  }

  .number-preview strong {
    margin-left: auto;
    font-size: 12px;
  }

  .modal-body {
    padding: 0 20px;
  }

  .modal-foot {
    padding: 15px 20px 19px;
  }

  .modal-foot .btn--primary {
    flex: 1;
    min-width: 0;
  }

  .toast-region {
    right: 16px;
    bottom: 16px;
  }

  .auth-tab {
    font-size: 12px;
  }
}

@media (max-width: 390px) {
  .header-actions {
    gap: 5px;
  }

  .user-chip {
    display: none;
  }

  .dashboard-intro h1 {
    font-size: 24px;
  }

  .stat-caption {
    display: none;
  }

  .stat-card {
    min-height: 113px;
  }

  .stat-value {
    font-size: 28px;
  }

  .paper-meta {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .meta-label {
    font-size: 9.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   Print
   ========================================================================== */

@media print {
  @page {
    size: A4;
    margin: 16mm;
  }

  body {
    background: #fff !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .auth-view,
  .app-header,
  .editor-bar,
  .editor-sidebar,
  .editor-toolbar,
  .toast-region,
  .modal,
  .loading-view {
    display: none !important;
  }

  .app-view {
    background: #fff !important;
  }

  .app-main {
    width: auto;
    padding: 0;
  }

  #dashboardView {
    display: none !important;
  }

  #editorView {
    display: block !important;
  }

  .editor-layout {
    display: block;
  }

  .paper-stage {
    display: block;
  }

  .paper {
    width: 100%;
    max-width: none;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff !important;
    box-shadow: none;
  }

  .paper::before {
    display: none;
  }

  .paper-accent {
    height: 2px;
  }

  .paper-body {
    min-height: 0;
  }

  .paper-body:empty::before {
    content: none;
  }

  .editor-save-state {
    display: none;
  }
}

/* Small interaction refinements */
.btn:disabled {
  opacity: 0.56;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none;
}

.ledger-table tbody tr:focus-visible {
  outline: 2px solid #89a79a;
  outline-offset: -2px;
  background: #f7faf5;
}

.autosave-card[data-state="saving"] .autosave-icon .icon {
  animation: spin 1.4s linear infinite;
}

.editor-save-state[data-state="error"] {
  cursor: pointer;
}

.paper-body.is-readonly {
  cursor: default;
  color: #53635b;
}

.paper-body.is-readonly:empty::before {
  font-style: italic;
}

/* ==========================================================================
   Project-department revision · setup, subcontract forms, permissions & admin
   ========================================================================== */

/* Auth additions */
.setup-callout {
  display: flex;
  gap: 12px;
  padding: 14px;
  border: 1px solid #dbe6dc;
  border-radius: 12px;
  background: linear-gradient(135deg, #edf5ed, #f8faf4);
}

.setup-callout-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(31, 78, 70, 0.08);
}

.setup-callout-icon .icon {
  width: 17px;
  height: 17px;
}

.setup-callout strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
}

.setup-callout p {
  margin: 0;
  color: var(--ink-muted);
  font-size: 10px;
  line-height: 1.65;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-link .icon {
  width: 14px;
  height: 14px;
}

.admin-quick-btn {
  color: #647e72;
}

/* Dashboard additions */
.stat-card--penalty {
  background:
    radial-gradient(260px 170px at 95% 0%, rgba(238, 208, 198, 0.5), transparent 70%),
    rgba(255, 255, 252, 0.86);
}

.stat-card--penalty .stat-icon {
  color: var(--danger);
  background: #fbeeea;
}

.compliance-banner {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
  padding: 12px 17px;
  border: 1px solid #eadfd0;
  border-radius: 13px;
  background:
    linear-gradient(90deg, rgba(249, 243, 232, 0.9), rgba(253, 251, 246, 0.72)),
    #fdfaf4;
}

.compliance-banner-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 29px;
  height: 29px;
  border-radius: 8px;
  color: #9b714a;
  background: rgba(255, 255, 255, 0.65);
}

.compliance-banner-icon .icon {
  width: 15px;
  height: 15px;
}

.compliance-banner p {
  flex: 1;
  margin: 0;
  color: #806a55;
  font-size: 10.5px;
  line-height: 1.65;
}

.compliance-banner p strong {
  margin-right: 5px;
  color: #8c5a35;
  font-weight: 600;
}

.compliance-banner .text-button {
  flex: 0 0 auto;
  color: #9a7553;
}

.mine-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e4eae4;
  border-radius: 8px;
  color: #84948a;
  background: #fbfcf9;
  font-size: 10px;
  font-weight: 500;
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}

.mine-toggle:hover {
  color: var(--ink);
  border-color: #cbd9cf;
}

.mine-toggle.is-active {
  color: var(--ink);
  border-color: #b5c9bb;
  background: #eef5ed;
}

.mine-toggle-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #a7b5ac;
}

.mine-toggle.is-active .mine-toggle-dot {
  background: #6f9b7f;
  box-shadow: 0 0 0 3px rgba(111, 155, 127, 0.12);
}

.penalty-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
  padding: 16px 20px;
  border: 1px solid #e6ddd0;
  border-radius: 14px;
  background:
    radial-gradient(380px 160px at 100% 0%, rgba(236, 213, 183, 0.36), transparent 70%),
    rgba(255, 252, 246, 0.82);
}

.penalty-summary-strip > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 0 18px;
  border-left: 1px solid #ede2d4;
}

.penalty-summary-strip > div:first-child {
  padding-left: 2px;
  border-left: 0;
}

.penalty-summary-strip span {
  color: #9a8875;
  font-size: 10px;
}

.penalty-summary-strip strong {
  color: #8c5b3b;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.ledger-table--subcontract th:nth-child(1) { width: 44px; }
.ledger-table--subcontract th:nth-child(2) { width: 137px; }
.ledger-table--subcontract th:nth-child(3) { width: 61px; }
.ledger-table--subcontract th:nth-child(4) { width: 28%; }
.ledger-table--subcontract th:nth-child(5) { width: 15%; }
.ledger-table--subcontract th:nth-child(6) { width: 14%; }
.ledger-table--subcontract th:nth-child(7) { width: 94px; }
.ledger-table--subcontract th:nth-child(8) { width: 100px; }
.ledger-table--subcontract th:nth-child(9) { width: 46px; }

.type-pill--penalty {
  color: #9b4b3e;
  border-color: #f0d7d1;
  background: #fdf0ed;
  font-weight: 600;
}

.company-name {
  display: block;
  overflow: hidden;
  color: #536b60;
  font-size: 10.5px;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dept-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
}

.dept-inline span {
  display: inline-flex;
  padding: 2px 5px;
  border-radius: 4px;
  color: #687d72;
  background: #f2f6f1;
  font-size: 8.5px;
  white-space: nowrap;
}

.dept-inline em {
  color: #9ba79f;
  font-size: 8px;
  font-style: normal;
}

.ledger-table--subcontract td {
  height: 68px;
}

/* New-document page */
.page-topbar {
  display: flex;
  align-items: center;
  gap: 17px;
  min-height: 42px;
  margin-bottom: 15px;
}

.page-topbar-title {
  color: #8a9a90;
  font-size: 11px;
}

.page-topbar-title i {
  padding: 0 7px;
  color: #c1cbc4;
  font-style: normal;
}

.new-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 22px;
  align-items: start;
}

.form-page-head {
  padding: 5px 2px 23px;
}

.form-page-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(29px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.form-page-head > p:last-child {
  max-width: 640px;
  margin: 10px 0 0;
  color: var(--ink-muted);
  font-size: 11.5px;
  line-height: 1.75;
}

.form-card {
  overflow: hidden;
  border: 1px solid rgba(219, 228, 220, 0.95);
  border-radius: 22px;
  background: rgba(255, 255, 252, 0.92);
  box-shadow: var(--shadow-md);
}

.form-section {
  padding: 25px 28px;
  border-bottom: 1px solid #edf1ea;
}

.form-section--registration {
  background: #fbfcf8;
}

.form-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 20px;
}

.form-step {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  border: 1px solid #dbe5dc;
  border-radius: 8px;
  color: #7f9387;
  background: #f5f8f3;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
}

.form-section-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.form-section-head p {
  margin: 4px 0 0;
  color: #98a49c;
  font-size: 9.5px;
  line-height: 1.6;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 16px;
}

.form-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.field--full {
  grid-column: 1 / -1;
}

.field-tip {
  display: block;
  margin-top: 5px;
  color: #a0aba3;
  font-size: 9px;
  line-height: 1.55;
}

.field-label em {
  color: #9aa79e;
  font-size: 9.5px;
  font-style: normal;
  font-weight: 400;
}

.filetype-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.filetype-option {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 66px;
  padding: 12px 14px;
  border: 1px solid #e0e7df;
  border-radius: 12px;
  color: var(--ink-soft);
  background: #fcfcf9;
  text-align: left;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.filetype-option:hover {
  border-color: #c5d6c9;
}

.filetype-option.is-active {
  border-color: #9db8a6;
  background: #f5faf3;
  box-shadow: 0 0 0 3px rgba(139, 167, 155, 0.1);
}

.filetype-option--penalty.is-active {
  border-color: #d8ad9f;
  background: #fdf6f2;
  box-shadow: 0 0 0 3px rgba(196, 119, 94, 0.08);
}

.filetype-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  color: #5c7b6c;
  background: #eef5ee;
}

.filetype-option--penalty .filetype-icon {
  color: #a85d4b;
  background: #f9eae5;
}

.filetype-icon .icon {
  width: 16px;
  height: 16px;
}

.filetype-option > span:nth-child(2) {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.filetype-option strong {
  color: var(--ink);
  font-size: 11.5px;
  font-weight: 600;
}

.filetype-option small {
  color: #99a49d;
  font-size: 8.5px;
}

.filetype-check {
  display: none;
  position: absolute;
  top: 8px;
  right: 8px;
  color: #618c74;
}

.filetype-option.is-active .filetype-check {
  display: block;
}

.filetype-check .icon {
  width: 13px;
  height: 13px;
}

.registration-preview {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 16px;
  min-height: 48px;
  padding: 0 13px;
  border: 1px dashed #dde5dc;
  border-radius: 10px;
  background: #fafcf8;
}

.registration-preview span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #83988b;
  font-size: 9.5px;
}

.registration-preview .icon {
  width: 13px;
  height: 13px;
}

.registration-preview i {
  color: #526b5f;
  font-style: normal;
}

.field-with-icon {
  position: relative;
  padding-left: 13px;
}

.field-with-icon > .icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: #95a69b;
}

.field-with-icon input {
  padding-left: 8px;
}

.form-grid--three .field-input {
  min-width: 0;
}

.field-suffix {
  padding-right: 12px;
}

.field-suffix input {
  padding-right: 2px;
}

.field-suffix > span {
  flex: 0 0 auto;
  color: #91a097;
  font-size: 9.5px;
}

/* Tag and department editors */
.tag-field {
  min-height: 48px;
  padding: 7px 11px;
  border: 1px solid #dce3dc;
  border-radius: 11px;
  background: rgba(255, 255, 252, 0.88);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.tag-field:focus-within {
  border-color: #a5bbaf;
  box-shadow: 0 0 0 3px rgba(139, 167, 155, 0.11);
}

.tag-values {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.tag-values:not(:empty) {
  margin-bottom: 4px;
}

.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  max-width: 100%;
  padding: 3px 4px 3px 7px;
  border: 1px solid #d9e5da;
  border-radius: 6px;
  color: #49665a;
  background: #f1f7f0;
  font-size: 9.5px;
  line-height: 1.4;
}

.tag-chip > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tag-chip button {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  color: #91a298;
  background: transparent;
}

.tag-chip button:hover {
  color: var(--danger);
  background: rgba(167, 76, 63, 0.08);
}

.tag-chip .icon {
  width: 10px;
  height: 10px;
}

.tag-input-row {
  display: flex;
  align-items: center;
  gap: 7px;
}

.tag-input-row > .icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #9ba9a0;
}

.tag-input-row input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 0;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font-size: 11px;
}

.tag-input-row input::placeholder {
  color: #a6b0a9;
}

.department-field {
  padding: 11px 12px;
  border: 1px solid #e0e7df;
  border-radius: 11px;
  background: #fbfcf9;
}

.department-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.department-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 29px;
  padding: 0 9px;
  border: 1px solid #e3e9e2;
  border-radius: 7px;
  color: #7b8d82;
  background: #fff;
  font-size: 9.5px;
  transition: border-color 0.16s ease, color 0.16s ease, background-color 0.16s ease;
}

.department-chip:hover {
  border-color: #c3d5c8;
  color: var(--ink);
}

.department-chip.is-selected {
  color: #31594a;
  border-color: #b9cebd;
  background: #edf6ec;
}

.department-chip.is-required {
  border-color: #e1c6b7;
  background: #fdf6f1;
}

.department-chip.is-required.is-selected {
  color: #8e573d;
  border-color: #d3af9b;
  background: #fbece4;
}

.department-chip.is-disabled {
  cursor: default;
  opacity: 0.7;
}

.department-chip em {
  padding: 1px 4px;
  border-radius: 3px;
  color: #a16045;
  background: rgba(184, 120, 81, 0.12);
  font-size: 7.5px;
  font-style: normal;
}

.department-chip i {
  display: inline-flex;
  color: currentColor;
}

.department-chip .icon {
  width: 10px;
  height: 10px;
}

.department-empty {
  color: #a2ada5;
  font-size: 9.5px;
}

.compliance-hint {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 9px 0 0;
  color: #94765e;
  font-size: 9px;
  line-height: 1.6;
}

.compliance-hint .icon {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 1px;
  color: #b17e56;
}

.compliance-hint strong {
  color: #8c5c3b;
}

.compliance-hint.is-warning {
  color: var(--danger);
}

.compliance-hint.is-warning .icon {
  color: var(--danger);
}

.penalty-section {
  background:
    linear-gradient(180deg, rgba(252, 245, 241, 0.65), rgba(255, 255, 252, 0.7));
}

.penalty-section .form-step {
  color: #a26147;
  border-color: #edd5ca;
  background: #fdf3ee;
}

.penalty-tip {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  color: #a1826d;
  font-size: 9px;
}

.penalty-tip .icon {
  width: 12px;
  height: 12px;
}

.auto-registration {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 14px;
}

.auto-number-card {
  padding: 15px 17px;
  border: 1px solid #dce8dc;
  border-radius: 12px;
  background:
    radial-gradient(200px 120px at 100% 0%, rgba(197, 218, 201, 0.46), transparent 70%),
    #f5faf3;
}

.auto-number-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #83968a;
  font-size: 8.5px;
}

.live-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6e9d81;
  box-shadow: 0 0 0 3px rgba(110, 157, 129, 0.12);
}

.auto-number-card strong {
  display: block;
  margin-top: 8px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.auto-number-card small {
  display: block;
  margin-top: 5px;
  color: #9aa79e;
  font-size: 8px;
}

.auto-meta {
  display: grid;
  gap: 0;
}

.auto-meta > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #eef2ec;
}

.auto-meta > div:first-child {
  padding-top: 0;
}

.auto-meta > div:last-child {
  border-bottom: 0;
}

.auto-meta span {
  color: #98a49c;
  font-size: 9px;
}

.auto-meta strong {
  color: #596d62;
  font-size: 10px;
  font-weight: 500;
  text-align: right;
}

.text-success {
  color: #4f8069 !important;
}

.form-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 28px;
  background: #fcfdf9;
}

.form-card-foot > p {
  margin: 0;
  color: #9ca79f;
  font-size: 9.5px;
}

.form-card-foot > div {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
}

.new-side {
  position: sticky;
  top: calc(var(--header-h) + 20px);
  display: grid;
  gap: 13px;
}

.side-info-card {
  padding: 19px;
  border: 1px solid rgba(220, 228, 220, 0.92);
  border-radius: 17px;
  background: rgba(255, 255, 252, 0.8);
  box-shadow: 0 2px 8px rgba(23, 61, 53, 0.025);
}

.side-info-card--dark {
  position: relative;
  overflow: hidden;
  color: #ecf3e9;
  border-color: transparent;
  background:
    radial-gradient(280px 200px at 100% 0%, rgba(179, 140, 101, 0.22), transparent 68%),
    linear-gradient(145deg, #1a443a, #123830);
  box-shadow: 0 16px 34px rgba(23, 61, 53, 0.16);
}

.side-info-card--dark::after {
  position: absolute;
  right: -28px;
  bottom: -35px;
  width: 130px;
  height: 130px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 26px rgba(255, 255, 255, 0.024);
}

.side-info-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 15px;
  border: 1px solid rgba(237, 243, 233, 0.24);
  border-radius: 10px;
  color: #dfeadb;
  background: rgba(255, 255, 255, 0.06);
}

.side-info-icon .icon {
  width: 17px;
  height: 17px;
}

.side-info-card .side-label {
  margin-bottom: 5px;
  font-size: 8px;
}

.side-info-card--dark .side-label {
  color: rgba(236, 244, 234, 0.42);
}

.side-info-card h3 {
  margin: 0 0 9px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
}

.side-info-card--dark h3 {
  color: #f5f8f1;
}

.side-info-card > p:not(.side-label) {
  position: relative;
  z-index: 1;
  margin: 0;
  color: #8e9d93;
  font-size: 10px;
  line-height: 1.75;
}

.side-info-card--dark > p:not(.side-label) {
  color: rgba(237, 245, 234, 0.58);
}

.side-info-card > p strong {
  color: #d5b39b;
  font-weight: 600;
}

.side-rule-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 7px;
  margin-top: 15px;
  padding-top: 13px;
  border-top: 1px solid rgba(236, 244, 233, 0.12);
}

.side-rule-list span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(237, 245, 234, 0.6);
  font-size: 9px;
}

.side-rule-list .icon {
  width: 11px;
  height: 11px;
  color: #a8c5b1;
}

.checklist {
  display: grid;
  gap: 9px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  color: #6d8176;
  font-size: 9.5px;
  line-height: 1.5;
}

.checklist span {
  flex: 0 0 auto;
  color: #b68b69;
  font-family: var(--font-mono);
  font-size: 7.5px;
}

.side-footnote {
  margin: 0;
  padding: 0 5px;
  color: #a0aba3;
  font-size: 9px;
  line-height: 1.7;
}

/* Editor overrides for subcontract fields */
.paper-title--subcontract {
  font-size: clamp(25px, 2.7vw, 32px);
  letter-spacing: 0.09em;
}

.paper-meta--subcontract .meta-label {
  padding-right: 9px;
  padding-left: 9px;
  font-size: 9px;
}

.paper-meta--subcontract .meta-value {
  padding-right: 10px;
  padding-left: 10px;
}

.paper-date-input,
.paper-plain-input {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0;
  border: 0;
  outline: 0;
  color: #2b3b33;
  background: transparent;
  font-size: 11px;
}

.paper-date-input {
  font-family: var(--font-mono);
  font-size: 10px;
}

.meta-company-cell {
  gap: 7px;
}

.meta-company-cell > .icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #95a69b;
}

.meta-company-cell .paper-plain-input {
  flex: 1;
}

.meta-company-cell .paper-plain-input:focus,
.paper-date-input:focus,
.meta-title-cell .paper-title-input:focus {
  border-bottom: 1px solid #a5bba9;
}

.meta-tag-cell,
.meta-department-cell {
  align-items: stretch;
  padding-top: 7px !important;
  padding-bottom: 7px !important;
}

.tag-field--paper {
  width: 100%;
  min-height: 37px;
  padding: 4px 6px;
  border-color: transparent;
  background: transparent;
}

.tag-field--paper:focus-within {
  border-color: #d5e2d8;
  box-shadow: none;
  background: rgba(248, 251, 246, 0.8);
}

.tag-field--paper .tag-chip {
  padding-top: 2px;
  padding-bottom: 2px;
  font-size: 9px;
}

.tag-field--paper .tag-input-row input {
  height: 26px;
  font-size: 10px;
}

.department-field--paper {
  width: 100%;
  padding: 4px 5px;
  border-color: transparent;
  background: transparent;
}

.department-field--paper .department-chip {
  min-height: 25px;
  font-size: 9px;
}

.compliance-hint--paper {
  margin-top: 5px;
  padding-left: 2px;
  font-size: 8px;
}

.compliance-hint--paper .icon {
  width: 10px;
  height: 10px;
}

.paper-penalty-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
}

.paper-penalty-grid > label {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.paper-penalty-grid > label > span:first-child {
  flex: 0 0 auto;
  color: #8f7462;
  font-size: 8.5px;
}

.paper-number-field {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  min-height: 29px;
  padding: 0 7px;
  border: 1px solid #eddfd7;
  border-radius: 5px;
  background: #fdf8f4;
}

.paper-number-field input {
  width: 100%;
  min-width: 0;
  height: 27px;
  padding: 0;
  border: 0;
  outline: 0;
  color: #8d4e3c;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}

.paper-number-field i {
  flex: 0 0 auto;
  color: #ac9384;
  font-size: 8px;
  font-style: normal;
}

.paper-penalty-note {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 7px 0 0;
  color: #a5826c;
  font-size: 8px;
}

.paper-penalty-note .icon {
  width: 10px;
  height: 10px;
}

.paper-body.is-readonly {
  min-height: 280px;
}

/* Admin */
.admin-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 3px 2px 22px;
}

.admin-head h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(30px, 3vw, 38px);
  font-weight: 600;
  letter-spacing: -0.03em;
}

.admin-head > div > p:last-child {
  margin: 9px 0 0;
  color: var(--ink-muted);
  font-size: 11px;
}

.admin-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid #d9e4da;
  border-radius: 100px;
  color: #567064;
  background: rgba(255, 255, 252, 0.7);
  font-size: 9.5px;
}

.admin-badge .icon {
  width: 13px;
  height: 13px;
}

.admin-tabs {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 18px;
  padding: 4px;
  border: 1px solid #e1e8e1;
  border-radius: 12px;
  background: rgba(245, 248, 243, 0.74);
  width: fit-content;
}

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 8px;
  color: #7e8f84;
  background: transparent;
  font-size: 10.5px;
  font-weight: 500;
  transition: color 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease;
}

.admin-tab .icon {
  width: 14px;
  height: 14px;
}

.admin-tab.is-active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 5px rgba(26, 53, 44, 0.08);
}

.admin-tab-count {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 100px;
  color: #fff;
  background: #bd7558;
  font-family: var(--font-mono);
  font-size: 7.5px;
}

.admin-panel {
  animation: view-enter 0.3s var(--ease) both;
}

.admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.admin-summary-grid article {
  padding: 17px 18px;
  border: 1px solid #e0e8e1;
  border-radius: 15px;
  background: rgba(255, 255, 252, 0.8);
}

.admin-summary-grid article.is-warn {
  border-color: #ecd9cf;
  background: #fdf7f2;
}

.admin-summary-grid span {
  color: #8b9b91;
  font-size: 9.5px;
}

.admin-summary-grid strong {
  display: block;
  margin-top: 7px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 600;
  line-height: 1;
}

.admin-summary-grid article.is-warn strong {
  color: #a15d45;
}

.admin-summary-grid small {
  display: block;
  margin-top: 7px;
  color: #a2ada5;
  font-size: 8.5px;
}

.admin-card {
  overflow: hidden;
  border: 1px solid #e0e8e1;
  border-radius: 18px;
  background: rgba(255, 255, 252, 0.85);
  box-shadow: 0 2px 10px rgba(23, 61, 53, 0.025);
}

.admin-card-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  padding: 21px 22px 15px;
}

.admin-card-head h2 {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 600;
}

.admin-card-head > div > p:last-child {
  margin: 5px 0 0;
  color: #98a49c;
  font-size: 9.5px;
}

.admin-table-wrap {
  border-top: 1px solid #edf1ec;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 820px;
}

.admin-table th {
  padding: 10px 14px;
  border-bottom: 1px solid #e8eee8;
  color: #97a39b;
  background: #fafbf8;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: left;
  white-space: nowrap;
}

.admin-table th:first-child,
.admin-table td:first-child {
  padding-left: 22px;
}

.admin-table th:last-child,
.admin-table td:last-child {
  padding-right: 22px;
}

.admin-table td {
  height: 66px;
  padding: 9px 14px;
  border-bottom: 1px solid #eef2ed;
  color: #596d62;
  font-size: 10.5px;
  vertical-align: middle;
}

.admin-table tr:last-child td {
  border-bottom: 0;
}

.admin-table tr.is-pending {
  background: #fdf8f3;
}

.admin-user-cell {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.admin-user-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  color: #547063;
  background: #edf4ed;
  font-family: var(--font-serif);
  font-size: 11px;
  font-weight: 700;
}

.admin-user-cell > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
}

.admin-user-cell strong {
  color: var(--ink);
  font-size: 10.5px;
  font-weight: 600;
}

.admin-user-cell small {
  color: #9ba79f;
  font-family: var(--font-mono);
  font-size: 7.5px;
}

.role-pill,
.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 21px;
  padding: 0 7px;
  border: 1px solid #e4eae4;
  border-radius: 5px;
  color: #6c8176;
  background: #f8faf7;
  font-size: 8.5px;
  white-space: nowrap;
}

.role-pill--admin {
  color: #7a5a40;
  border-color: #e8d6c4;
  background: #fcf5ee;
}

.status-pill {
  color: #4d7c65;
  border-color: #d9e7dc;
  background: #f0f7f0;
}

.status-pill--pending {
  color: #9a653d;
  border-color: #efdcc7;
  background: #fdf4e9;
}

.status-pill--disabled {
  color: #8c9690;
  border-color: #e4e7e3;
  background: #f4f5f3;
}

.permission-summary {
  color: #6e8277;
  font-size: 9px;
  line-height: 1.5;
}

.admin-doc-count {
  font-family: var(--font-mono);
  color: #4f6b5d;
  font-size: 10px;
}

.admin-row-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
}

.table-action {
  height: 25px;
  padding: 0 7px;
  border: 1px solid #e2e8e2;
  border-radius: 5px;
  color: #6e8176;
  background: #fff;
  font-size: 8.5px;
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.table-action:hover {
  color: var(--ink);
  border-color: #c2d3c7;
  background: #f8fbf7;
}

.table-action--primary {
  color: #3f7059;
  border-color: #c9ddce;
  background: #f0f8f1;
}

.table-action--danger:hover {
  color: var(--danger);
  border-color: #eccfc7;
  background: #fdf4f1;
}

.admin-self-label {
  color: #a2ada5;
  font-size: 8.5px;
}

.empty-state--small {
  min-height: 170px;
  padding: 24px;
}

.empty-state--small .empty-icon {
  width: 42px;
  height: 42px;
  margin-bottom: 10px;
}

.empty-state--small h3 {
  font-size: 15px;
}

.empty-state--small p {
  margin-bottom: 0;
  font-size: 9.5px;
}

.admin-base-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.inline-add-form {
  display: flex;
  gap: 8px;
  padding: 0 22px 14px;
}

.inline-add-form input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 38px;
  padding: 0 11px;
  border: 1px solid #dfe6de;
  border-radius: 8px;
  outline: none;
  color: var(--ink);
  background: #fff;
  font-size: 10.5px;
}

.inline-add-form input[type="text"]:focus {
  border-color: #a5bbaf;
  box-shadow: 0 0 0 3px rgba(139, 167, 155, 0.1);
}

.inline-add-form--department {
  flex-wrap: wrap;
}

.mini-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: #8a9a90;
  font-size: 9px;
  white-space: nowrap;
}

.mini-check input {
  accent-color: var(--ink);
}

.admin-data-list {
  display: grid;
  gap: 0;
  max-height: 390px;
  overflow: auto;
  padding: 0 22px 16px;
}

.admin-data-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 0;
  border-top: 1px solid #eff2ed;
}

.admin-data-row.is-muted {
  opacity: 0.58;
}

.admin-data-name {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  color: #496357;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-data-name .icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: #8da196;
}

.required-badge {
  padding: 2px 5px;
  border-radius: 3px;
  color: #9c5f42;
  background: #fbede5;
  font-size: 7.5px;
  font-style: normal;
  white-space: nowrap;
}

.admin-data-state {
  flex: 0 0 auto;
  color: #a0aba3;
  font-size: 8px;
}

.admin-data-actions {
  display: flex;
  gap: 4px;
  flex: 0 0 auto;
}

.admin-list-empty {
  margin: 0;
  padding: 15px 0;
  color: #a0aba3;
  font-size: 9.5px;
  line-height: 1.7;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: start;
}

.settings-form {
  display: grid;
  gap: 18px;
  padding: 0 22px 22px;
}

.setting-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-top: 1px solid #edf1ec;
}

.setting-switch-row strong {
  display: block;
  color: #51685c;
  font-size: 10.5px;
  font-weight: 600;
}

.setting-switch-row p {
  margin: 4px 0 0;
  color: #9ca79f;
  font-size: 9px;
  line-height: 1.6;
}

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 38px;
  height: 22px;
  cursor: pointer;
}

.switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.switch span {
  position: absolute;
  inset: 0;
  border-radius: 100px;
  background: #d8e0d9;
  transition: background-color 0.2s ease;
}

.switch span::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  content: "";
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(23, 61, 53, 0.18);
  transition: transform 0.24s var(--ease);
}

.switch input:checked + span {
  background: #5f8b75;
}

.switch input:checked + span::after {
  transform: translateX(16px);
}

.settings-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-top: 5px;
}

.settings-number-preview {
  color: #96a29a;
  font-size: 8.5px;
}

.settings-number-preview strong {
  margin-left: 4px;
  color: #547062;
  font-family: var(--font-mono);
  font-size: 9px;
}

.settings-help {
  padding: 20px;
  border: 1px solid #e1e8e1;
  border-radius: 17px;
  background: rgba(255, 255, 252, 0.72);
}

.settings-help h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 600;
}

.settings-help ul {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.settings-help li {
  padding: 11px 0;
  border-top: 1px solid #eef2ec;
}

.settings-help li strong {
  display: block;
  margin-bottom: 3px;
  color: #5b7165;
  font-size: 9.5px;
  font-weight: 600;
}

.settings-help li span {
  display: block;
  color: #9aa69e;
  font-size: 8.5px;
  line-height: 1.65;
}

/* User dialog extras */
.status-switch {
  display: flex;
  gap: 5px;
  padding: 4px;
  border: 1px solid #e2e8e2;
  border-radius: 9px;
  background: #f7f9f6;
}

.status-option {
  flex: 1;
  height: 31px;
  border: 0;
  border-radius: 6px;
  color: #87978e;
  background: transparent;
  font-size: 9.5px;
  transition: color 0.16s ease, background-color 0.16s ease, box-shadow 0.16s ease;
}

.status-option.is-active {
  color: var(--ink);
  background: #fff;
  box-shadow: 0 1px 4px rgba(23, 61, 53, 0.08);
}

.permission-block {
  padding: 13px;
  border: 1px solid #e4eae4;
  border-radius: 11px;
  background: #fbfcf9;
}

.permission-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}

.permission-block-head > span {
  color: #526a5e;
  font-size: 10px;
  font-weight: 600;
}

.permission-block-head small {
  color: #9ca79f;
  font-size: 8px;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.permission-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 8px;
  border: 1px solid #e6ece5;
  border-radius: 7px;
  background: #fff;
  cursor: pointer;
}

.permission-item input {
  margin-top: 2px;
  accent-color: var(--ink);
}

.permission-item span {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.permission-item strong {
  color: #586f63;
  font-size: 9px;
  font-weight: 600;
}

.permission-item small {
  color: #9ca79f;
  font-size: 7.5px;
}

/* No access */
.no-access-view {
  display: flex;
  justify-content: center;
  padding: 8vh 20px;
}

.no-access-card {
  width: min(520px, 100%);
  padding: 44px 40px;
  border: 1px solid #e0e8e1;
  border-radius: 24px;
  background: rgba(255, 255, 252, 0.88);
  box-shadow: var(--shadow-md);
  text-align: center;
}

.no-access-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin: 0 auto 17px;
  border: 1px solid #dbe7dc;
  border-radius: 16px;
  color: #668476;
  background: #f1f7f0;
}

.no-access-icon .icon {
  width: 24px;
  height: 24px;
}

.no-access-card h1 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 27px;
  font-weight: 600;
}

.no-access-card p:not(.section-label) {
  margin: 0 auto 22px;
  color: #8d9d93;
  font-size: 11px;
  line-height: 1.8;
}

/* ==========================================================================
   Responsive additions
   ========================================================================== */

@media (max-width: 1120px) {
  .new-layout {
    grid-template-columns: minmax(0, 1fr) 272px;
  }

  .settings-layout {
    grid-template-columns: minmax(0, 1fr) 270px;
  }
}

@media (max-width: 980px) {
  .new-layout,
  .settings-layout {
    grid-template-columns: 1fr;
  }

  .new-side {
    position: static;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .new-side .side-footnote {
    grid-column: 1 / -1;
  }

  .admin-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-base-grid {
    grid-template-columns: 1fr;
  }

  .admin-table-wrap {
    overflow-x: auto;
  }
}

@media (max-width: 820px) {
  .compliance-banner {
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .compliance-banner p {
    min-width: calc(100% - 45px);
  }

  .compliance-banner .text-button {
    margin-left: 42px;
  }

  .penalty-summary-strip {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .penalty-summary-strip > div {
    padding: 7px 0;
    border-top: 1px solid #ede2d4;
    border-left: 0;
  }

  .penalty-summary-strip > div:first-child {
    border-top: 0;
  }

  .ledger-table--subcontract {
    min-width: 0;
    table-layout: fixed;
  }

  .ledger-table--subcontract th:nth-child(1),
  .ledger-table--subcontract td:nth-child(1),
  .ledger-table--subcontract th:nth-child(5),
  .ledger-table--subcontract td:nth-child(5),
  .ledger-table--subcontract th:nth-child(6),
  .ledger-table--subcontract td:nth-child(6),
  .ledger-table--subcontract th:nth-child(7),
  .ledger-table--subcontract td:nth-child(7),
  .ledger-table--subcontract th:nth-child(8),
  .ledger-table--subcontract td:nth-child(8) {
    display: none;
  }

  .ledger-table--subcontract th:nth-child(2),
  .ledger-table--subcontract td:nth-child(2) {
    display: table-cell;
    width: 127px;
    padding-left: 18px;
  }

  .ledger-table--subcontract th:nth-child(3),
  .ledger-table--subcontract td:nth-child(3) {
    display: table-cell;
    width: 58px;
  }

  .ledger-table--subcontract th:nth-child(4),
  .ledger-table--subcontract td:nth-child(4) {
    display: table-cell;
    width: auto;
  }

  .ledger-table--subcontract th:nth-child(9),
  .ledger-table--subcontract td:nth-child(9) {
    display: table-cell;
    width: 46px;
    padding-right: 12px;
  }

  .new-side {
    grid-template-columns: 1fr;
  }

  .form-section {
    padding: 21px 20px;
  }

  .form-card-foot {
    align-items: flex-start;
    flex-direction: column;
    padding: 18px 20px;
  }

  .form-card-foot > div {
    width: 100%;
    justify-content: flex-end;
  }

  .admin-head {
    align-items: flex-start;
    flex-direction: column;
  }

  .admin-tabs {
    width: 100%;
    overflow-x: auto;
  }

  .admin-tab {
    flex: 1;
    justify-content: center;
    white-space: nowrap;
  }
}

@media (max-width: 620px) {
  .compliance-banner {
    padding: 12px 13px;
  }

  .compliance-banner .text-button {
    margin-left: 0;
  }

  .stat-card--penalty .stat-caption {
    display: block;
  }

  .form-grid,
  .form-grid--three {
    grid-template-columns: 1fr;
  }

  .filetype-switch {
    grid-template-columns: 1fr;
  }

  .form-section {
    padding: 19px 16px;
  }

  .form-page-head {
    padding-bottom: 18px;
  }

  .form-page-head h1 {
    font-size: 27px;
  }

  .form-card {
    border-radius: 17px;
  }

  .auto-registration {
    grid-template-columns: 1fr;
  }

  .form-card-foot > div .btn--primary {
    flex: 1;
  }

  .paper-meta--subcontract {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .paper-meta--subcontract .meta-label {
    font-size: 8.5px;
  }

  .paper-penalty-grid {
    grid-template-columns: 1fr;
  }

  .paper-penalty-grid > label > span:first-child {
    width: 54px;
  }

  .admin-summary-grid {
    gap: 8px;
  }

  .admin-summary-grid article {
    padding: 14px;
  }

  .admin-summary-grid strong {
    font-size: 24px;
  }

  .admin-card-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
    padding: 18px 16px 13px;
  }

  .admin-card-head .btn--compact {
    width: 100%;
  }

  .inline-add-form {
    padding: 0 16px 12px;
  }

  .admin-data-list {
    padding: 0 16px 14px;
  }

  .admin-data-row {
    flex-wrap: wrap;
  }

  .admin-data-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .admin-table th:first-child,
  .admin-table td:first-child {
    padding-left: 16px;
  }

  .admin-table th:last-child,
  .admin-table td:last-child {
    padding-right: 16px;
  }

  .settings-form {
    padding: 0 16px 18px;
  }

  .settings-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .permission-grid {
    grid-template-columns: 1fr;
  }

  .modal-body {
    padding: 0 18px;
  }

  .modal-head {
    padding: 21px 18px 14px;
  }

  .modal-foot {
    padding: 14px 18px 18px;
  }

  .no-access-card {
    padding: 32px 22px;
  }
}

@media print {
  #newView,
  #adminView,
  #noAccessView,
  .page-topbar {
    display: none !important;
  }
}

#headerAdminBtn:not([hidden]) {
  display: none;
}

@media (max-width: 820px) {
  #headerAdminBtn:not([hidden]) {
    display: inline-grid;
  }
}

/* The SPA switches views frequently; keep view changes instant and reliable. */
.view {
  animation: none !important;
}

@media (max-width: 820px) {
  .admin-table {
    min-width: 0;
    table-layout: fixed;
  }

  .admin-table th:nth-child(2),
  .admin-table td:nth-child(2),
  .admin-table th:nth-child(4),
  .admin-table td:nth-child(4),
  .admin-table th:nth-child(5),
  .admin-table td:nth-child(5),
  .admin-table th:nth-child(6),
  .admin-table td:nth-child(6) {
    display: none;
  }

  .admin-table th:nth-child(1),
  .admin-table td:nth-child(1) {
    width: auto;
    padding-left: 16px;
  }

  .admin-table th:nth-child(3),
  .admin-table td:nth-child(3) {
    display: table-cell;
    width: 56px;
    padding-left: 4px;
  }

  .admin-table th:nth-child(7),
  .admin-table td:nth-child(7) {
    display: table-cell;
    width: 118px;
    padding-right: 12px;
  }

  .admin-table th,
  .admin-table td {
    padding-left: 6px;
    padding-right: 6px;
  }

  .admin-row-actions {
    flex-wrap: wrap;
    gap: 3px;
  }

  .admin-table .table-action {
    height: 23px;
    padding: 0 5px;
  }
}

/* Attachments in the editor */
.attachment-section {
  margin-top: 22px;
  padding-top: 17px;
  border-top: 1px dashed #dce5dc;
}

.attachment-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.attachment-section-head h3 {
  margin: 0 0 5px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: 15px;
  font-weight: 600;
}

.attachment-section-head p:not(.section-label) {
  margin: 0;
  color: #97a49b;
  font-size: 9px;
  line-height: 1.65;
}

.attachment-head-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
}

.attachment-count {
  color: #84978b;
  font-family: var(--font-mono);
  font-size: 8px;
  white-space: nowrap;
}

.attachment-head-actions .btn {
  min-height: 33px;
  padding: 0 10px;
  font-size: 10px;
}

.attachment-head-actions .btn:disabled {
  opacity: 0.55;
}

.attachment-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-top: 14px;
}

.attachment-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e5ebe5;
  border-radius: 10px;
  background: #fdfdfa;
}

.attachment-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 86px;
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(238, 244, 236, 0.9), rgba(247, 249, 244, 0.65)),
    #f6f9f4;
}

.attachment-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s var(--ease);
}

.attachment-card:hover .attachment-preview img {
  transform: scale(1.03);
}

.attachment-file-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: #749081;
}

.attachment-file-icon .icon {
  width: 23px;
  height: 23px;
}

.attachment-file-icon em {
  color: #7d9184;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-style: normal;
  letter-spacing: 0.04em;
}

.attachment-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 2px;
  padding: 8px 9px 4px;
}

.attachment-meta strong {
  overflow: hidden;
  color: #4e6559;
  font-size: 9px;
  font-weight: 500;
  line-height: 1.5;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.attachment-meta small {
  color: #a0aba3;
  font-family: var(--font-mono);
  font-size: 7px;
}

.attachment-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
  padding: 0 6px 6px;
}

.attachment-action {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid #e7ece6;
  border-radius: 5px;
  color: #86988d;
  background: #fff;
  transition: color 0.16s ease, border-color 0.16s ease, background-color 0.16s ease;
}

.attachment-action:hover {
  color: var(--ink);
  border-color: #c7d7cb;
  background: #f7faf6;
}

.attachment-action--danger:hover {
  color: var(--danger);
  border-color: #eed3cb;
  background: #fdf4f1;
}

.attachment-action .icon {
  width: 12px;
  height: 12px;
}

.attachment-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 13px;
  padding: 12px;
  border: 1px dashed #dde6dd;
  border-radius: 8px;
  background: #fbfcf9;
}

.attachment-empty > span {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 27px;
  height: 27px;
  border-radius: 7px;
  color: #8aa094;
  background: #f1f6f0;
}

.attachment-empty .icon {
  width: 14px;
  height: 14px;
}

.attachment-empty p {
  margin: 0;
  color: #9aa79f;
  font-size: 9px;
  line-height: 1.6;
}

.attachment-hint {
  margin: 8px 0 0;
  color: #aab3ac;
  font-size: 7.5px;
  line-height: 1.55;
}

@media (max-width: 820px) {
  .attachment-section-head {
    flex-direction: column;
    gap: 10px;
  }

  .attachment-head-actions {
    width: 100%;
    justify-content: space-between;
  }

  .attachment-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  .attachment-grid {
    grid-template-columns: 1fr;
  }

  .attachment-preview {
    height: 120px;
  }
}

@media print {
  .attachment-section {
    display: none !important;
  }
}

/* Official web-print document */
.official-editor-layout {
  grid-template-columns: minmax(0, 1fr) 304px;
  gap: 24px;
}

.official-stage {
  min-width: 0;
}

.official-stage-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(210mm, 100%);
  margin: 0 auto 10px;
}

.official-stage-label {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 1;
  min-width: 0;
  color: #7d9186;
  font-size: 9.5px;
  white-space: nowrap;
}

.official-stage-label small {
  color: #a5afa8;
  font-size: 8.5px;
}

.editor-toolbar--floating {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  background: rgba(250, 252, 248, 0.94);
  box-shadow: 0 2px 8px rgba(23, 61, 53, 0.04);
}

.official-editor-sidebar {
  position: static;
  align-self: start;
}

.official-sheet {
  position: relative;
  width: min(210mm, 100%);
  min-height: 297mm;
  margin: 0 auto;
  padding: 17mm 25mm 16mm;
  border: 1px solid #e4e3d9;
  border-radius: 2px;
  background: #fffefb;
  box-shadow: 0 22px 58px rgba(38, 46, 37, 0.12);
  color: #111;
  font-family: "FangSong", "仿宋", "STFangsong", "Songti SC", "Noto Serif SC", serif;
  font-size: 16pt;
  line-height: 1.75;
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.official-letterhead {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 20mm;
  margin-bottom: 4mm;
}

.official-letterhead-mark {
  position: absolute;
  top: 0;
  left: -11mm;
  width: 17mm;
  height: auto;
  opacity: 0.33;
  filter: grayscale(1);
}

.official-letterhead-logo {
  width: 83mm;
  height: auto;
  object-fit: contain;
}

.official-content {
  position: relative;
  z-index: 1;
}

.official-serial {
  margin: 3mm 0 7mm;
  font-size: 16pt;
  letter-spacing: 0.02em;
  line-height: 1.85;
  text-align: right;
  white-space: normal;
}

.official-line {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 0 0 4.5mm;
  font-size: 16pt;
  line-height: 1.8;
}

.official-line strong {
  flex: 0 0 auto;
  font-weight: 600;
}

.official-line > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.official-subject {
  margin-bottom: 4mm;
}

.official-signer {
  margin: 0 0 2.5mm;
  font-size: 16pt;
  line-height: 1.8;
  text-align: right;
}

.official-body {
  min-height: 58mm;
  margin: 0;
  padding: 1mm 0 2mm;
  outline: none;
  font-size: 16pt;
  line-height: 1.78;
  text-align: justify;
  word-break: break-word;
}

.official-body:empty::before {
  content: attr(data-placeholder);
  color: #b9baae;
  font-style: italic;
  pointer-events: none;
}

.official-body p,
.official-body div {
  margin: 0;
  text-indent: 2em;
}

.official-body p + p,
.official-body div + div {
  margin-top: 0;
}

.official-body h2,
.official-body h3 {
  margin: 0;
  text-indent: 2em;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
}

.official-body ul,
.official-body ol {
  margin: 0;
  padding-left: 3em;
}

.official-body li {
  text-indent: 0;
}

.official-body:focus {
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(126, 153, 137, 0.2);
}

.official-closing {
  margin: 4mm 0 0;
  font-size: 16pt;
  line-height: 1.8;
  text-indent: 2em;
}

.official-attachments {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 7mm 0 0;
  padding-left: 2em;
  font-size: 16pt;
  line-height: 1.75;
}

.official-attachments span {
  display: block;
}

.official-date {
  margin: 9mm 0 0;
  font-size: 16pt;
  line-height: 1.8;
  text-align: right;
}

.official-cc {
  margin: 10mm 0 0;
  font-size: 16pt;
  line-height: 1.75;
}

.official-signature-rule {
  height: 1.4pt;
  margin: 10mm 0 4mm;
  background: #222;
}

.official-signature-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  color: #161616;
  font-size: 13pt;
  line-height: 1.4;
}

.official-signature-table th,
.official-signature-table td {
  height: 9.5mm;
  padding: 1mm;
  border: 1px solid #333;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
}

.official-signature-table th {
  font-weight: 500;
}

.sig-col-review { width: 10%; }
.sig-col-vertical { width: 7.5%; }
.sig-col-sign { width: 18.75%; }

.sig-vertical {
  font-size: 12pt;
  letter-spacing: 0.1em;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.official-address {
  display: flex;
  justify-content: flex-end;
  margin-top: 9mm;
}

.official-address img {
  display: block;
  width: 56mm;
  height: auto;
}

/* Side editing form */
.side-form-block {
  padding: 17px;
}

.side-form-block h3 {
  margin-bottom: 13px;
}

.side-field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px 9px;
}

.side-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 5px;
}

.side-field-full {
  grid-column: 1 / -1;
}

.side-field > span:first-child {
  color: #6f8377;
  font-size: 9px;
  font-weight: 500;
}

.side-field > span:first-child em {
  color: #a4afa7;
  font-size: 8px;
  font-style: normal;
  font-weight: 400;
}

.side-field-control {
  display: flex;
  align-items: center;
  min-height: 36px;
  padding: 0 9px;
  border: 1px solid #dfe7df;
  border-radius: 7px;
  background: #fff;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}

.side-field-control:focus-within {
  border-color: #a4b9ac;
  box-shadow: 0 0 0 3px rgba(139, 167, 155, 0.1);
}

.side-field-control input,
.side-field-control select {
  width: 100%;
  min-width: 0;
  height: 34px;
  padding: 0;
  border: 0;
  outline: none;
  color: #3e554a;
  background: transparent;
  font-size: 10px;
}

.side-field-control select {
  appearance: none;
  cursor: pointer;
}

.side-field-select {
  position: relative;
  padding-right: 25px;
}

.side-field-select .icon {
  position: absolute;
  right: 8px;
  width: 12px;
  height: 12px;
  color: #96a69c;
  pointer-events: none;
}

.side-field-with-icon {
  gap: 5px;
}

.side-field-with-icon > .icon {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: #96a69c;
}

.tag-field--side {
  min-height: 36px;
  padding: 4px 8px;
  border-radius: 7px;
}

.tag-field--side .tag-input-row input {
  height: 25px;
  font-size: 9.5px;
}

.department-field--side {
  padding: 8px;
  border-radius: 7px;
}

.department-field--side .department-chip {
  min-height: 25px;
  padding: 0 7px;
  font-size: 8.5px;
}

.compliance-hint--side {
  margin-top: 7px;
  font-size: 8px;
}

.side-penalty-block {
  padding: 9px;
  border: 1px solid #efded5;
  border-radius: 8px;
  background: #fdf7f3;
}

.side-penalty-block > span:first-child {
  color: #8c614b;
}

.side-penalty-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 7px;
}

.side-penalty-grid > label {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 6px;
}

.side-penalty-grid > label > span:first-child {
  color: #927663;
  font-size: 8px;
}

.side-number-field {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 0 7px;
  border: 1px solid #eadbd1;
  border-radius: 5px;
  background: #fffdfb;
}

.side-number-field input {
  width: 100%;
  min-width: 0;
  height: 28px;
  padding: 0;
  border: 0;
  outline: none;
  color: #8e4f3d;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
}

.side-number-field i {
  flex: 0 0 auto;
  color: #aa9081;
  font-size: 8px;
  font-style: normal;
}

.side-registration {
  display: grid;
  gap: 0;
  margin-top: 14px;
  padding-top: 11px;
  border-top: 1px solid #eef2ec;
}

.side-registration > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
}

.side-registration span {
  color: #9ba69e;
  font-size: 8.5px;
}

.side-registration strong {
  overflow-wrap: anywhere;
  color: #5c7165;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 500;
  text-align: right;
}

.danger-block {
  border-color: #f0ddd6;
  background: #fffdfb;
}

.danger-block h3 {
  color: #8b5144;
}

.danger-block p {
  margin: 0 0 11px;
  color: #a08a82;
  font-size: 9px;
  line-height: 1.65;
}

.btn--danger {
  border-color: #e7c6bd;
  color: var(--danger);
  background: #fdf3f0;
}

.btn--danger:hover {
  border-color: #d7a99d;
  background: #fbece7;
}

.permission-item--danger {
  border-color: #f0e1db;
}

.permission-item--danger strong {
  color: #8c5548;
}

.print-attachment-pages {
  display: none;
}

@media (max-width: 1180px) {
  .official-editor-layout {
    grid-template-columns: minmax(0, 1fr) 290px;
  }

  .official-sheet {
    font-size: 14.5pt;
  }

  .official-serial,
  .official-line,
  .official-signer,
  .official-body,
  .official-closing,
  .official-attachments,
  .official-date,
  .official-cc {
    font-size: 14.5pt;
  }
}

@media (max-width: 980px) {
  .official-editor-layout {
    grid-template-columns: 1fr;
  }

  .official-editor-sidebar {
    position: static;
  }

  .official-sheet {
    width: min(210mm, 100%);
  }
}

@media (max-width: 820px) {
  .official-stage-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
  }

  .official-stage-label small {
    display: none;
  }

  .official-sheet {
    width: 100%;
    min-height: 0;
    padding: 12mm 10mm;
    font-size: 12pt;
    box-shadow: 0 8px 28px rgba(38, 46, 37, 0.1);
  }

  .official-letterhead {
    height: 15mm;
    margin-bottom: 4mm;
  }

  .official-letterhead-logo {
    width: 62mm;
  }

  .official-letterhead-mark {
    left: -4mm;
    width: 13mm;
  }

  .official-serial,
  .official-line,
  .official-signer,
  .official-body,
  .official-closing,
  .official-attachments,
  .official-date,
  .official-cc {
    font-size: 12pt;
  }

  .official-body {
    min-height: 42mm;
  }

  .official-signature-table {
    font-size: 10pt;
  }

  .side-field-grid {
    grid-template-columns: 1fr;
  }

  .side-field-full {
    grid-column: auto;
  }
}

/* Direct browser printing of the official sheet */
@media print {
  @page {
    size: A4;
    margin: 0;
  }

  html,
  body {
    width: 210mm;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .app-header,
  .editor-bar,
  .editor-sidebar,
  .official-stage-toolbar,
  .attachment-section,
  .toast-region,
  .loading-view,
  .admin-view,
  #dashboardView,
  #newView,
  #noAccessView,
  .auth-view {
    display: none !important;
  }

  .app-view,
  .app-main,
  .editor-view,
  .editor-layout,
  .paper-stage {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  .official-sheet {
    width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 !important;
    padding: 17mm 25mm 16mm !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    font-size: 16pt !important;
    line-height: 1.75 !important;
    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
  }

  .official-letterhead {
    height: 20mm !important;
    margin-bottom: 4mm !important;
  }

  .official-letterhead-logo {
    width: 83mm !important;
  }

  .official-letterhead-mark {
    left: -11mm !important;
    width: 17mm !important;
  }

  .official-serial,
  .official-line,
  .official-signer,
  .official-body,
  .official-closing,
  .official-attachments,
  .official-date,
  .official-cc {
    font-size: 16pt !important;
  }

  .official-body {
    min-height: 54mm !important;
  }

  .official-signature-table {
    font-size: 13pt !important;
  }

  .official-body:focus {
    box-shadow: none !important;
  }

  .print-attachment-pages {
    display: block !important;
  }

  .print-attachment-page {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 210mm;
    min-height: 297mm;
    padding: 17mm 25mm 16mm;
    break-before: page;
    page-break-before: always;
    background: #fff;
    box-sizing: border-box;
  }

  .print-page-logo {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 7mm;
  }

  .print-page-logo img {
    width: 83mm;
    height: auto;
  }

  .print-attachment-caption {
    margin: 0 0 6mm;
    color: #111;
    font-family: "FangSong", "仿宋", "STFangsong", "Songti SC", serif;
    font-size: 16pt;
    font-weight: 600;
  }

  .print-attachment-image {
    display: flex;
    flex: 1;
    align-items: flex-start;
    justify-content: center;
  }

  .print-attachment-image img {
    display: block;
    max-width: 100%;
    max-height: 205mm;
    object-fit: contain;
  }

  .print-page-address {
    display: flex;
    justify-content: flex-end;
    margin-top: auto;
    padding-top: 8mm;
  }

  .print-page-address img {
    width: 56mm;
    height: auto;
  }
}

/* Compact official layout so a typical letter, signature table and address fit on one A4 page. */
.official-sheet {
  display: flex;
  flex-direction: column;
  padding: 12mm 25mm 10mm;
}

.official-letterhead {
  height: 16mm;
  margin-bottom: 2mm;
  flex: 0 0 auto;
}

.official-letterhead-logo {
  width: 76mm;
}

.official-letterhead-mark {
  left: -9mm;
  width: 16mm;
}

.official-serial {
  margin: 1mm 0 3mm;
  line-height: 1.55;
}

.official-line {
  margin-bottom: 2mm;
  line-height: 1.55;
}

.official-subject {
  margin-bottom: 1.5mm;
}

.official-signer {
  margin: 0 0 1mm;
  line-height: 1.55;
}

.official-body {
  min-height: 22mm;
  padding: 0 0 1mm;
  line-height: 1.65;
}

.official-closing {
  margin-top: 2mm;
  line-height: 1.6;
}

.official-attachments {
  margin-top: 3mm;
  line-height: 1.55;
}

.official-date {
  margin-top: 5mm;
  line-height: 1.6;
}

.official-cc {
  margin-top: 5mm;
  line-height: 1.55;
}

.official-signature-rule {
  margin: 6mm 0 2mm;
}

.official-signature-table th,
.official-signature-table td {
  height: 7.2mm;
}

.official-signature-table {
  font-size: 12pt;
}

.sig-vertical {
  font-size: 11pt;
}

.official-address {
  margin-top: auto;
  padding-top: 4mm;
}

.official-address img {
  width: 50mm;
}

@media print {
  .official-sheet {
    display: flex !important;
    flex-direction: column !important;
    padding: 12mm 25mm 10mm !important;
  }

  .official-letterhead {
    height: 16mm !important;
    margin-bottom: 2mm !important;
  }

  .official-letterhead-logo {
    width: 76mm !important;
  }

  .official-letterhead-mark {
    left: -9mm !important;
    width: 16mm !important;
  }

  .official-serial {
    margin: 1mm 0 3mm !important;
    line-height: 1.55 !important;
  }

  .official-line {
    margin-bottom: 2mm !important;
    line-height: 1.55 !important;
  }

  .official-subject {
    margin-bottom: 1.5mm !important;
  }

  .official-signer {
    margin: 0 0 1mm !important;
    line-height: 1.55 !important;
  }

  .official-body {
    min-height: 22mm !important;
    padding: 0 0 1mm !important;
    line-height: 1.65 !important;
  }

  .official-closing {
    margin-top: 2mm !important;
    line-height: 1.6 !important;
  }

  .official-attachments {
    margin-top: 3mm !important;
    line-height: 1.55 !important;
  }

  .official-date {
    margin-top: 5mm !important;
    line-height: 1.6 !important;
  }

  .official-cc {
    margin-top: 5mm !important;
    line-height: 1.55 !important;
  }

  .official-signature-rule {
    margin: 6mm 0 2mm !important;
  }

  .official-signature-table th,
  .official-signature-table td {
    height: 7.2mm !important;
  }

  .official-signature-table {
    font-size: 12pt !important;
  }

  .sig-vertical {
    font-size: 11pt !important;
  }

  .official-address {
    margin-top: auto !important;
    padding-top: 4mm !important;
  }

  .official-address img {
    width: 50mm !important;
  }
}

@media print {
  .official-signature-table,
  .official-address {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* Mobile readability: keep the print preview usable without changing the A4 print rules. */
@media (max-width: 620px) {
  .official-sheet {
    padding: 9mm 7mm;
  }

  .official-serial,
  .official-line,
  .official-signer,
  .official-body,
  .official-closing,
  .official-attachments,
  .official-date,
  .official-cc {
    font-size: 11pt;
  }

  .official-signature-table {
    font-size: 8pt;
  }

  .sig-vertical {
    font-size: 7.5pt;
    letter-spacing: 0.02em;
  }

  .official-signature-table th,
  .official-signature-table td {
    height: 7mm;
    padding: 0.5mm;
  }
}

/* Project official font, supplied by the project team. */
@font-face {
  font-family: "FangSong GB2312";
  src: url("/static/fonts/fangsong-gb2312.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.official-sheet,
.print-attachment-page,
.print-attachment-caption {
  font-family: "FangSong GB2312", "FangSong", "仿宋", "STFangsong", "Songti SC", "Noto Serif SC", serif;
}

.print-attachment-caption {
  font-family: "FangSong GB2312", "FangSong", "仿宋", "STFangsong", "Songti SC", serif !important;
}

/* ==========================================================================
   Web Word editor
   ========================================================================== */
.official-stage-toolbar {
  display: block;
  width: min(210mm, 100%);
  margin: 0 auto 10px;
}

.teacher-bar {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.editor-toolbar--ribbon {
  display: block;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid #e2e9e2;
  border-radius: 9px;
  background: rgba(252, 253, 249, 0.97);
  box-shadow: 0 3px 14px rgba(36, 59, 48, 0.05);
}

.toolbar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 3px;
}

.toolbar-row + .toolbar-row {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px solid #eef2ec;
}

.format-button {
  min-width: 27px;
  width: auto;
  height: 27px;
  padding: 0 5px;
  border-radius: 5px;
  font-family: var(--font-sans);
  font-size: 10px;
}

.format-button strong,
.format-button em,
.format-button u,
.format-button s {
  font-size: 12px;
}

.toolbar-select-wrap {
  display: inline-flex;
  align-items: center;
  height: 27px;
  border: 1px solid #e2e9e2;
  border-radius: 5px;
  background: #fff;
}

.toolbar-select-wrap select {
  width: 62px;
  height: 25px;
  padding: 0 4px;
  border: 0;
  outline: none;
  color: #60766b;
  background: transparent;
  font-size: 9px;
  cursor: pointer;
}

.toolbar-color-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  overflow: hidden;
  border-radius: 5px;
  cursor: pointer;
}

.toolbar-color-wrap::before {
  content: "A";
  color: #60766b;
  font-family: var(--font-serif);
  font-size: 12px;
}

.toolbar-color-wrap input {
  position: absolute;
  inset: 0;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  opacity: 0;
  cursor: pointer;
}

.toolbar-text-button {
  height: 27px;
  padding: 0 8px;
  border: 1px solid #e2e9e2;
  border-radius: 5px;
  color: #60766b;
  background: #fff;
  font-size: 9px;
  font-weight: 500;
}

.toolbar-text-button:hover {
  color: var(--ink);
  border-color: #cbd9cf;
  background: #f2f7f1;
}

.toolbar-row--table {
  color: #9ba79f;
}

.toolbar-caption {
  padding: 0 2px;
  color: #8b9a90;
  font-size: 8.5px;
  font-weight: 500;
}

.table-tool {
  height: 24px;
  padding: 0 6px;
  border: 1px solid #e6ece5;
  border-radius: 4px;
  color: #6d8175;
  background: #fbfcf9;
  font-size: 8.5px;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.table-tool:hover:not(:disabled) {
  color: var(--ink);
  border-color: #cbd9cf;
  background: #f1f6f1;
}

.table-tool:disabled {
  opacity: 0.34;
  cursor: not-allowed;
}

.table-tool--danger:hover:not(:disabled) {
  color: #a54d3f;
  border-color: #eccfc7;
  background: #fcf2ef;
}

.official-stage-label small {
  white-space: normal;
}

#editableContent {
  min-height: 760px;
  outline: none;
  cursor: text;
}

#editableContent[contenteditable="false"] {
  cursor: default;
}

#editableContent [data-locked="true"] {
  cursor: default;
}

#editableContent .official-body {
  min-height: 26mm;
}

#editableContent .official-body:focus {
  outline: none;
}

#editableContent [data-meta-value="cc"]:empty::before {
  content: attr(data-placeholder);
  color: #b4b9ad;
  font-style: italic;
  font-size: 0.78em;
}

#editableContent .doc-table {
  width: 100%;
  margin: 4mm 0;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 14pt;
}

#editableContent .doc-table th,
#editableContent .doc-table td {
  min-width: 2.2em;
  padding: 2mm 2.4mm;
  border: 1px solid #303030;
  vertical-align: middle;
}

#editableContent .doc-table th {
  font-weight: 600;
  text-align: center;
  background: #f4f5f1;
}

#editableContent .doc-table td {
  text-align: left;
}

#editableContent .doc-table p,
#editableContent .doc-table div {
  margin: 0;
  text-indent: 0;
}

#editableContent table:focus-within {
  outline: 1px dashed rgba(123, 155, 137, 0.45);
  outline-offset: 3px;
}

#editableContent td:focus,
#editableContent th:focus {
  outline: 1px dashed #91ad9a;
  outline-offset: -2px;
}

#editableContent .official-signature-table td:focus,
#editableContent .official-signature-table th:focus {
  background: rgba(231, 240, 232, 0.4);
}

#editableContent .doc-page-break {
  display: block;
  height: 0;
  margin: 4mm 0;
  border: 0;
  border-top: 1px dashed #b5c5ba;
  break-before: page;
  page-break-before: always;
}

.side-field-grid--compact {
  grid-template-columns: 1fr;
}

.side-inline-help {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 13px 0 0;
  padding-top: 11px;
  border-top: 1px solid #eef2ec;
  color: #8f9e93;
  font-size: 8.5px;
  line-height: 1.65;
}

.side-inline-help .icon {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  margin-top: 1px;
  color: #b0bbb2;
}

.editor-state {
  display: none !important;
}

.modal--small {
  width: min(440px, calc(100vw - 32px));
}

.checkbox-line {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  color: #63796d;
  font-size: 10px;
  cursor: pointer;
}

.checkbox-line input {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--ink);
}

.official-content [contenteditable="true"]:empty::before,
.official-content p:empty::before {
  content: "";
}

@media (max-width: 820px) {
  .editor-toolbar--ribbon {
    padding: 5px;
  }

  .toolbar-select-wrap select {
    width: 54px;
  }

  .toolbar-caption {
    width: 100%;
  }

  #editableContent {
    min-height: 480px;
  }
}

@media print {
  .official-stage-toolbar,
  .editor-state,
  .side-inline-help,
  .attachment-section,
  dialog {
    display: none !important;
  }

  #editableContent {
    min-height: 0 !important;
    outline: none !important;
  }

  #editableContent [data-meta-value="cc"]:empty::before {
    content: "" !important;
  }

  #editableContent table:focus-within,
  #editableContent td:focus,
  #editableContent th:focus {
    outline: none !important;
    background: transparent !important;
  }

  #editableContent .doc-page-break {
    display: block;
    height: 0;
    margin: 0;
    border: 0;
    break-before: page;
    page-break-before: always;
  }
}

@media print {
  .official-cc.is-empty {
    display: none !important;
  }
}


/* Visible signature separator line */
.official-signature-rule,
.official-signer-rule {
  display: block;
  width: 100%;
  height: 3px;
  min-height: 3px;
  margin: 7mm 0 3mm;
  border: 0;
  background: #1b1b1b;
}

/* On screen, let the paper end with its content instead of keeping a full
   blank A4 page. Printing still uses the A4 overrides below. */
.official-sheet {
  min-height: 0;
  padding-bottom: 10mm;
}

#editableContent {
  min-height: 0;
}

.official-address {
  margin-top: 10mm;
}

/* A page break needs a visible marker while editing. */
#editableContent .doc-page-break {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 64px;
  min-height: 64px;
  margin: 8mm 0;
  border-top: 1px dashed #a8b8ae;
  border-bottom: 1px dashed #a8b8ae;
  background: #f6f8f4;
  color: #8a9c90;
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: 0.08em;
  overflow: hidden;
  break-before: page;
  page-break-before: always;
}

#editableContent .doc-page-break::after {
  content: "强制分页 · 以下开始新的一页";
}

#editableContent .doc-page-break > * {
  display: none;
}

@media print {
  .official-sheet {
    min-height: 297mm;
    padding-bottom: 10mm;
  }

  .official-address {
    margin-top: auto;
    padding-top: 4mm;
  }

  .official-signature-rule,
  .official-signer-rule {
    height: 3px !important;
    min-height: 3px !important;
    margin: 6mm 0 2mm !important;
    background: #1b1b1b !important;
  }

  #editableContent .doc-page-break {
    display: block !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    break-before: page !important;
    page-break-before: always !important;
  }

  #editableContent .doc-page-break::after {
    content: "" !important;
  }

  #editableContent .doc-page-break > * {
    display: none !important;
  }
}

/* Directory and contact import */
.directory-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding: 18px 4px 22px;
}

.directory-head h1 {
  margin: 8px 0 7px;
  color: var(--ink);
  font-family: var(--font-serif);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: 0.04em;
}

.directory-head p {
  max-width: 620px;
  color: var(--ink-muted);
  font-size: 11px;
  line-height: 1.7;
}

.directory-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: min(340px, 100%);
  min-height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.directory-search .icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: #9fad9f;
}

.directory-search input {
  width: 100%;
  min-width: 0;
  height: 36px;
  border: 0;
  outline: none;
  color: var(--ink);
  background: transparent;
  font-size: 10px;
}

.directory-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 4px 12px;
  color: #819388;
  font-family: var(--font-mono);
  font-size: 9px;
}

.directory-summary-hint {
  padding-left: 10px;
  border-left: 1px solid var(--line);
  color: #abb5ac;
  font-family: var(--font-sans);
}

.directory-groups {
  display: grid;
  gap: 18px;
}

.directory-section {
  overflow: hidden;
  border: 1px solid #e5ebe4;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 8px 26px rgba(34, 55, 44, 0.035);
}

.directory-section > h2 {
  margin: 0;
  padding: 14px 20px;
  border-bottom: 1px solid #e8eee7;
  color: var(--ink);
  background: #f7faf5;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.05em;
}

.directory-team + .directory-team {
  border-top: 1px solid #eef2eb;
}

.directory-team-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  background: #fcfdfa;
}

.directory-team-head h3 {
  flex: 1;
  margin: 0;
  color: #61786a;
  font-size: 10px;
  font-weight: 600;
}

.directory-team-index {
  color: #a2b1a5;
  font-family: var(--font-mono);
  font-size: 8px;
}

.directory-team-head > span:last-child {
  color: #a5b1a6;
  font-family: var(--font-mono);
  font-size: 8px;
}

.directory-table-wrap {
  overflow-x: auto;
  padding: 0 20px 12px;
}

.directory-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  color: #5d7165;
  font-size: 10px;
}

.directory-table th {
  padding: 8px 9px;
  border-bottom: 1px solid #e9eee8;
  color: #9baa9c;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-align: left;
  white-space: nowrap;
}

.directory-table td {
  padding: 10px 9px;
  border-bottom: 1px solid #f0f3ee;
  vertical-align: top;
}

.directory-table tr:last-child td {
  border-bottom: 0;
}

.directory-table td:first-child {
  color: var(--ink-soft);
  font-weight: 600;
}

.directory-table .is-muted {
  color: #b1bbb2;
}

.directory-table a {
  color: #4c7561;
  text-decoration: none;
}

.directory-table a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.contact-import-card {
  margin-top: 18px;
}

.contact-import-count {
  color: #9ba99d;
  font-family: var(--font-mono);
  font-size: 9px;
  white-space: nowrap;
}

.contact-import-form {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.contact-file-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 250px;
  min-height: 54px;
  padding: 8px 12px;
  border: 1px dashed #cfdcd2;
  border-radius: 8px;
  background: #fbfdf9;
  cursor: pointer;
}

.contact-file-pick:hover {
  border-color: #9fb8a7;
  background: #f7fbf5;
}

.contact-file-pick input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.contact-file-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 6px;
  color: #6d8978;
  background: #edf5ec;
}

.contact-file-icon .icon {
  width: 15px;
  height: 15px;
}

.contact-file-pick > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contact-file-pick strong {
  color: #5c7768;
  font-size: 10px;
  font-weight: 500;
}

.contact-file-pick small {
  color: #a5b1a6;
  font-size: 8.5px;
}

.contact-import-help {
  margin: 11px 0 0;
  color: #9ca99d;
  font-size: 8.5px;
  line-height: 1.65;
}

.contact-import-card .form-message {
  margin-top: 10px;
}

@media (max-width: 760px) {
  .directory-head {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
  }

  .directory-search {
    width: 100%;
  }

  .directory-section > h2,
  .directory-team-head,
  .directory-table-wrap {
    padding-left: 14px;
    padding-right: 14px;
  }

  .directory-table-wrap {
    margin-right: -14px;
    padding-right: 14px;
  }
}


/* Screen-only editing frame around the body; it is deliberately not printed. */
#editableContent .official-body {
  position: relative;
  min-height: 38mm;
  padding: 3mm 4mm;
  border: 1px dashed #c9dbcf;
  border-radius: 3px;
  background: #fffefb;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}

#editableContent .official-body:hover {
  border-color: #b6cdbd;
}

#editableContent .official-body:focus-within {
  border-color: #82a994;
  background: #fffefa;
  box-shadow: 0 0 0 3px rgba(130, 169, 148, 0.11);
}

#editableContent .official-body.is-empty-body::before {
  content: "点击这里输入正文…";
  position: absolute;
  top: 3mm;
  left: 4mm;
  color: #b2beb3;
  font-family: "FangSong GB2312", "FangSong", "仿宋", serif;
  font-size: 0.78em;
  font-style: italic;
  pointer-events: none;
}

.side-field-hint {
  display: block;
  margin-top: 5px;
  color: #a2aea5;
  font-size: 8px;
  line-height: 1.5;
}

@media print {
  #editableContent .official-body {
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  #editableContent .official-body.is-empty-body::before {
    content: "" !important;
    display: none !important;
  }
}


/* Main-company salutation at the top of the body. */
#editableContent .official-body-salutation {
  margin: 0 0 4mm;
  padding: 0;
  text-indent: 0;
  color: inherit;
  font-size: 16pt;
  font-weight: 700;
  line-height: 1.65;
}

#editableContent .official-body-salutation[data-locked="true"] {
  cursor: default;
}

#editableContent .sig-vertical {
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

@media print {
  #editableContent .official-body-salutation {
    margin-bottom: 4mm !important;
  }
}


/* Safari needs vertical writing on an inline child, not directly on the cell. */
#editableContent td.sig-vertical {
  writing-mode: horizontal-tb !important;
  text-orientation: mixed !important;
  text-align: center;
  vertical-align: middle;
}

#editableContent .sig-vertical-text {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: upright;
  -webkit-text-orientation: upright;
  white-space: nowrap;
  display: inline-block;
  letter-spacing: 0.08em;
  line-height: 1.3;
  font-size: 11pt;
}

@media print {
  #editableContent td.sig-vertical {
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
  }

  #editableContent .sig-vertical-text {
    writing-mode: vertical-rl !important;
    -webkit-writing-mode: vertical-rl !important;
    text-orientation: upright !important;
    -webkit-text-orientation: upright !important;
  }
}


/* Inline photos inserted from the editor toolbar. */
#editableContent .doc-inline-image {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 3mm auto;
  break-inside: avoid;
  page-break-inside: avoid;
}

#editableContent td .doc-inline-image,
#editableContent th .doc-inline-image {
  max-width: 100%;
  max-height: 8.5cm;
  object-fit: contain;
}

@media print {
  #editableContent .doc-inline-image {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* A4 page guide: Word still paginates automatically; this makes the
   continuous web page show where A4 pages fall. */
#officialSheet {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(297mm - 1px),
    rgba(143, 166, 151, 0.28) calc(297mm - 1px),
    rgba(143, 166, 151, 0.28) 297mm
  );
  background-size: 100% 297mm;
  background-repeat: repeat-y;
}

@media print {
  #officialSheet {
    background-image: none !important;
  }
}


#editableContent table.doc-table {
  break-inside: avoid;
  page-break-inside: avoid;
}

#editableContent .doc-page-break {
  box-shadow: 0 0 0 1px rgba(168, 184, 174, 0.2);
}


#editableContent .official-after-signature {
  min-height: 8mm;
  margin: 2mm 0 0;
}

@media print {
  #editableContent .official-after-signature {
    min-height: 0 !important;
    margin: 0 !important;
  }

  .official-address {
    position: fixed !important;
    right: 25mm !important;
    bottom: 8mm !important;
    margin: 0 !important;
    z-index: 3;
  }

  .official-address img {
    width: 56mm !important;
  }
}


#editableContent .doc-table {
  max-width: 100%;
}

#editableContent .doc-image-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  vertical-align: bottom;
}

#editableContent .doc-image-wrap .doc-inline-image {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

#editableContent .doc-image-resize {
  position: absolute;
  right: -6px;
  bottom: -6px;
  width: 14px;
  height: 14px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: #2f6b55;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  cursor: nwse-resize;
  opacity: 0;
  pointer-events: auto;
  transition: opacity 0.15s ease;
}

#editableContent .doc-image-wrap:hover .doc-image-resize,
#editableContent .doc-image-wrap:focus-within .doc-image-resize {
  opacity: 1;
}

@media print {
  #editableContent .doc-image-resize {
    display: none !important;
  }
}


#editableContent table.doc-table.is-col-resizing,
#editableContent table.doc-table.is-col-resizing * {
  cursor: col-resize !important;
  user-select: none !important;
}

#editableContent table.doc-table {
  table-layout: fixed;
}