/* ==========================================================================
   Unit App System Library — Documentation Site
   File: docs/assets/style.css
   Style: Apple / Stripe / Linear clarity. No external libraries.
   ========================================================================== */

:root {
  --primary:        #6A45FF;
  --primary-soft:   rgba(106, 69, 255, 0.08);
  --primary-line:   rgba(106, 69, 255, 0.18);
  --primary-deep:   #4B1FFF;

  --info:           #2FADEB;
  --info-soft:      rgba(47, 173, 235, 0.10);
  --info-line:      rgba(47, 173, 235, 0.22);

  --success:        #16A34A;
  --success-soft:   rgba(22, 163, 74, 0.10);

  --error:          #DC2626;
  --error-soft:     rgba(220, 38, 38, 0.08);
  --error-line:     rgba(220, 38, 38, 0.22);

  --amber:          #B45309;
  --amber-soft:     #FEF3C7;
  --amber-line:     #F1D894;

  --ink-strong:     #0F1115;
  --ink-body:       #2A2F39;
  --ink-muted:      #5A6273;
  --ink-hint:       #8A93A6;

  --surface:        #FFFFFF;
  --surface-tint:   #F7F8FB;
  --surface-mute:   #F0F2F7;
  --border-subtle:  #E8EAF0;
  --border-default: #DCDFE7;
  --border-strong:  #C5CAD5;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --shadow-card: 0 1px 2px rgba(15, 17, 21, 0.04), 0 8px 24px rgba(15, 17, 21, 0.04);
  --shadow-pop:  0 1px 2px rgba(15, 17, 21, 0.06), 0 12px 36px rgba(15, 17, 21, 0.08);

  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  color: var(--ink-body);
  background: var(--surface-tint);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.55;
  font-size: 16px;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 1px 6px;
  background: var(--surface-mute);
  border-radius: 4px;
  color: var(--ink-strong);
}

/* ===== Global nav ===== */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.site-nav-inner {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
}
.site-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 600; color: var(--ink-strong);
  letter-spacing: -0.005em; font-size: 15px;
}
.site-brand .brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--primary); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.site-nav-links {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: wrap;
}
.site-nav-links a {
  padding: 8px 12px;
  font-size: 14px; font-weight: 500;
  color: var(--ink-muted);
  border-radius: 8px;
  transition: color 120ms ease, background 120ms ease;
}
.site-nav-links a:hover {
  color: var(--ink-strong);
  background: var(--surface-mute);
  text-decoration: none;
}
.site-nav-links a.active {
  color: var(--primary);
  background: var(--primary-soft);
}

/* ===== Page layout ===== */
.page {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px 96px;
}

.page-narrow { max-width: 880px; }

/* ===== Sub-nav (standards-guide) ===== */
.sub-nav {
  margin-bottom: 48px;
  display: flex; flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: 999px;
  align-self: flex-start;
}
.sub-nav a {
  padding: 8px 14px;
  font-size: 13px; font-weight: 500;
  color: var(--ink-muted);
  border-radius: 999px;
  white-space: nowrap;
}
.sub-nav a:hover {
  color: var(--ink-strong);
  background: var(--surface-mute);
  text-decoration: none;
}
.sub-nav a.active {
  color: #fff;
  background: var(--primary);
}

/* ===== Hero ===== */
.hero { margin-bottom: 64px; }
.hero .eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-hint);
  margin-bottom: 14px;
}
.hero h1 {
  margin: 0;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--ink-strong);
  font-weight: 700;
}
.hero .lede {
  margin: 18px 0 0;
  font-size: clamp(17px, 2vw, 19px);
  line-height: 1.55;
  color: var(--ink-muted);
  max-width: 760px;
}
.badge {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 26px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--primary-soft);
  border: 1px solid var(--primary-line);
  color: var(--primary);
  font-size: 13px; font-weight: 600;
}
.badge .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--primary);
}

/* ===== Sections ===== */
section { margin-top: 72px; }
section h2 {
  margin: 0 0 8px;
  font-size: clamp(22px, 2.6vw, 28px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink-strong);
  font-weight: 700;
}
section h3 {
  margin: 28px 0 8px;
  font-size: 18px; font-weight: 700;
  color: var(--ink-strong);
  letter-spacing: -0.005em;
}
section .section-eyebrow {
  display: block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary);
  margin-bottom: 10px;
}
section .section-lede {
  margin: 0 0 28px;
  font-size: 16px;
  color: var(--ink-muted);
  max-width: 760px;
}
section p { font-size: 15px; line-height: 1.6; }

/* ===== Cards ===== */
.card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.feature-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 28px;
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 160ms ease, border-color 120ms ease;
  color: inherit;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
  border-color: var(--border-default);
  text-decoration: none;
  color: inherit;
}
.feature-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--primary);
}
.feature-card .num {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--primary); text-transform: uppercase;
}
.feature-card h3 {
  margin: 8px 0 6px;
  font-size: 19px; font-weight: 700;
  color: var(--ink-strong); letter-spacing: -0.005em;
  line-height: 1.3;
}
.feature-card p {
  margin: 0;
  font-size: 14.5px; line-height: 1.55;
  color: var(--ink-muted);
}
.feature-card .arrow {
  margin-top: 14px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600;
  color: var(--primary);
}

/* ===== Standard cards (numbered list) ===== */
.standards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.standard-card {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 120ms ease, box-shadow 160ms ease;
  color: inherit;
}
.standard-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
  text-decoration: none; color: inherit;
}
.standard-card::before {
  content: "";
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--primary);
}
.standard-card .num {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--primary); text-transform: uppercase;
}
.standard-card h3 {
  margin: 8px 0 4px;
  font-size: 17px; font-weight: 700;
  color: var(--ink-strong); letter-spacing: -0.005em;
  line-height: 1.3;
}
.standard-card .file {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-hint);
  margin-bottom: 14px;
}
.standard-card .covers {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-hint);
  margin-bottom: 8px;
}
.standard-card ul {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.standard-card li {
  font-size: 14px; line-height: 1.5; color: var(--ink-body);
  padding-left: 14px; position: relative;
}
.standard-card li::before {
  content: "·"; position: absolute; left: 4px;
  color: var(--ink-hint); font-weight: 700;
}

/* ===== Reasons / pros lists ===== */
.reasons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.reason {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex; gap: 12px; align-items: flex-start;
}
.reason .x {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--error-soft); color: var(--error);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.reason .check {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--success-soft); color: var(--success);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.reason .body {
  font-size: 14.5px; line-height: 1.5; color: var(--ink-body);
}

/* ===== Principle bar ===== */
.principle-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  border-radius: var(--radius-lg);
  background: var(--ink-strong); color: #fff;
  font-size: clamp(15px, 1.7vw, 17px); font-weight: 600;
  letter-spacing: -0.005em;
}
.principle-bar .icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.10); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.principle-bar .chain {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.02em;
}

/* ===== Final principle (large callout) ===== */
.final-principle {
  margin-top: 40px;
  padding: 36px 36px 32px;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, var(--ink-strong) 0%, #1a1c22 100%);
  color: #fff;
  box-shadow: var(--shadow-pop);
  text-align: center;
}
.final-principle .icon {
  width: 48px; height: 48px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 700;
}
.final-principle h2 {
  margin: 0;
  font-size: clamp(20px, 2.6vw, 26px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #fff;
  font-weight: 700;
}
.final-principle .sub {
  margin: 14px auto 0;
  max-width: 640px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}

/* ===== Workflow stages ===== */
.workflow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.workflow-stage {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: 24px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 10px;
}
.workflow-stage .tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--primary);
  align-self: flex-start;
  padding: 4px 10px;
  background: var(--primary-soft);
  border-radius: 999px;
}
.workflow-stage h3 { margin: 0; font-size: 16px; }
.workflow-stage ul {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 8px;
}
.workflow-stage li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; line-height: 1.5; color: var(--ink-body);
}
.workflow-stage li::before {
  content: ""; flex-shrink: 0;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--primary);
  margin-top: 9px;
}

/* ===== Implementation flow (horizontal hierarchy) ===== */
.flow-hz {
  display: flex; flex-wrap: wrap; align-items: stretch;
  gap: 8px;
  margin: 4px 0 8px;
}
.flow-hz .flow-step {
  flex: 1 1 130px;
  min-width: 130px;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: var(--shadow-card);
}
.flow-hz .flow-step .step-num {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--primary); text-transform: uppercase;
}
.flow-hz .flow-step .step-name {
  font-size: 14px; font-weight: 600; color: var(--ink-strong);
}
.flow-hz .flow-step .step-desc {
  font-size: 12.5px; color: var(--ink-muted); line-height: 1.4;
}
.flow-hz .flow-arrow {
  display: flex; align-items: center;
  color: var(--ink-hint);
  font-size: 16px; font-weight: 600;
  padding: 0 2px;
}

/* ===== Vertical flow pipeline ===== */
.flow-pipeline {
  display: flex; flex-direction: column; gap: 8px;
}
.flow-pipeline .step {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 16px;
}
.flow-pipeline .step .num {
  flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; font-family: var(--font-mono);
}
.flow-pipeline .step .text { flex: 1; min-width: 0; }
.flow-pipeline .step .text .head {
  font-size: 15px; font-weight: 600; color: var(--ink-strong);
}
.flow-pipeline .step .text .desc {
  margin-top: 2px;
  font-size: 13px; color: var(--ink-muted);
}
.flow-pipeline .arrow {
  display: flex; justify-content: center;
  color: var(--ink-hint); font-size: 14px;
  padding: 0 0 0 30px;
}

/* ===== Done definition (red/green compare) ===== */
.done-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.done-card {
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-subtle);
  background: var(--surface);
  padding: 22px 24px;
}
.done-card.bad   { border-color: var(--error-line); background: #FFFAFA; }
.done-card.good  { border-color: rgba(22, 163, 74, 0.30); background: #F4FCF6; }
.done-card .tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.done-card.bad  .tag { color: var(--error); }
.done-card.good .tag { color: var(--success); }
.done-card .tag .dot { width: 8px; height: 8px; border-radius: 50%; }
.done-card.bad  .tag .dot { background: var(--error); }
.done-card.good .tag .dot { background: var(--success); }
.done-card h3 { margin: 0 0 12px; font-size: 16px; }
.done-card ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.done-card li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; color: var(--ink-body);
}
.done-card li::before {
  content: "";
  flex-shrink: 0; width: 6px; height: 6px; border-radius: 50%;
  margin-top: 9px;
}
.done-card.bad  li::before { background: var(--error); }
.done-card.good li::before { background: var(--success); }

/* ===== Forbidden cards ===== */
.forbidden {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.forbidden-card {
  background: #FFFAFA;
  border: 1px solid var(--error-line);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  display: flex; gap: 12px; align-items: flex-start;
}
.forbidden-card .x {
  flex-shrink: 0;
  width: 24px; height: 24px; border-radius: 6px;
  background: var(--error); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 14px;
}
.forbidden-card .body {
  font-size: 14.5px; font-weight: 600; line-height: 1.45;
  color: var(--ink-strong);
}
.forbidden-card .body small {
  display: block; margin-top: 4px;
  font-size: 12.5px; font-weight: 400; color: var(--ink-muted);
}

/* ===== Reviewer checklist ===== */
.checklist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.checklist-item {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  display: flex; align-items: center; gap: 14px;
  font-size: 15px; color: var(--ink-body);
}
.checklist-item .square {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-hint);
  font-weight: 700; font-size: 14px;
}
.checklist-item:hover .square {
  border-color: var(--primary);
  background: var(--primary-soft);
  color: var(--primary);
}
.checklist-item strong { color: var(--ink-strong); }

/* ===== Tables ===== */
.api-card { padding: 0; overflow: hidden; }
.api-card .head { padding: 22px 28px 0; }
.api-card .head h3 { margin: 0; font-size: 16px; font-weight: 700; }
.api-card .head p { margin: 8px 0 0; font-size: 14px; color: var(--ink-muted); }
.api-table {
  width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 14px;
}
.api-table th, .api-table td {
  text-align: left; padding: 12px 28px;
  border-top: 1px solid var(--border-subtle);
  vertical-align: top;
}
.api-table th {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-hint); background: var(--surface-tint);
}
.api-table td:first-child {
  font-family: var(--font-mono); color: var(--ink-strong); font-weight: 600;
  white-space: nowrap;
}

/* ===== Module comparison table ===== */
.module-table {
  width: 100%; border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  font-size: 14px;
  box-shadow: var(--shadow-card);
}
.module-table th, .module-table td {
  text-align: left;
  padding: 14px 18px;
  border-top: 1px solid var(--border-subtle);
}
.module-table th {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-hint);
  background: var(--surface-tint);
  white-space: nowrap;
}
.module-table tr:first-child th { border-top: none; }
.module-table td { color: var(--ink-body); vertical-align: top; }
.module-table td:first-child {
  font-weight: 700; color: var(--ink-strong);
  white-space: nowrap;
}
.module-table .yes { color: var(--success); font-weight: 600; }
.module-table .no  { color: var(--error);   font-weight: 600; }
.module-table .n-a { color: var(--ink-hint); }

/* ===== Inline rule emphasis ===== */
.inline-rule {
  margin: 14px 0 0;
  padding: 12px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink-body);
  background: var(--surface);
  border-left: 3px solid var(--info);
  border-radius: 6px;
}
.inline-rule strong { color: var(--ink-strong); }

.callout {
  margin-top: 20px;
  padding: 18px 22px;
  border-radius: var(--radius-md);
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  color: var(--amber);
  font-size: 15px; font-weight: 500;
  line-height: 1.55;
}
.callout strong { color: #4D3900; }

/* ===== Handoff items (artifact chips) ===== */
.handoff {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.handoff-item {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  display: flex; align-items: center; gap: 10px;
  font-size: 14px;
}
.handoff-item .check {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 6px;
  background: var(--success-soft); color: var(--success);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px;
}
.handoff-item code {
  font-family: var(--font-mono); font-size: 13px;
  color: var(--ink-strong); font-weight: 600;
  background: transparent; padding: 0;
}

/* ===== Footer ===== */
.site-footer {
  margin-top: 80px;
  padding: 32px 24px;
  border-top: 1px solid var(--border-subtle);
  background: var(--surface);
}
.site-footer-inner {
  max-width: 1080px; margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: 13px; color: var(--ink-hint);
}
.site-footer-links {
  display: flex; flex-wrap: wrap; gap: 16px;
}
.site-footer-links a {
  color: var(--ink-muted); font-weight: 500;
}
.site-footer-links a:hover { color: var(--ink-strong); }

/* ===== Responsive ===== */
@media (max-width: 720px) {
  .page { padding: 32px 18px 64px; }
  .site-nav-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 18px; }
  .site-nav-links { width: 100%; }
  .done-grid { grid-template-columns: 1fr; }
  .principle-bar { flex-direction: column; align-items: flex-start; gap: 8px; }
  .flow-hz { flex-direction: column; }
  .flow-hz .flow-arrow { transform: rotate(90deg); padding: 4px 0; }
  .module-table { font-size: 13px; }
  .module-table th, .module-table td { padding: 10px 12px; }
}