@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Alex+Brush&family=Allura&family=Great+Vibes&family=Handlee&family=Kristi&family=Marck+Script&family=Reenie+Beanie&family=Satisfy&family=Shadows+Into+Light&family=Zeyada&display=swap");

:root {
  --bg: #f3f4f8;
  --bg-deep: #ebeef4;
  --surface: #ffffff;
  --surface-soft: #f8f9fc;
  --surface-muted: #f2f4f9;
  --line: #d6dbe6;
  --line-strong: #b9c2d4;
  --ink: #1d2533;
  --ink-soft: #4b566b;
  --ink-faint: #7a8498;
  --brand: #ef3f35;
  --brand-strong: #d73129;
  --brand-soft: #fff1f0;
  --accent: #35507a;
  --accent-soft: #edf1f8;
  --ok: #14794d;
  --warn: #92560b;
  --bad: #a3282f;
  --shadow-xl: 0 24px 48px rgba(21, 31, 47, 0.14);
  --shadow-lg: 0 14px 30px rgba(21, 31, 47, 0.11);
  --shadow-md: 0 8px 20px rgba(21, 31, 47, 0.08);
  --shadow-sm: 0 3px 10px rgba(21, 31, 47, 0.06);
  --radius-xl: 26px;
  --radius-lg: 18px;
  --radius-md: 13px;
  --radius-sm: 10px;
}

* {
  box-sizing: border-box;
}

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

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  color: var(--ink);
  font-family: "Manrope", "Segoe UI", sans-serif;
  line-height: 1.56;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, #f9fafc 0%, var(--bg) 100%);
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

body::before {
  background: transparent;
}

body::after {
  background: transparent;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid rgba(31, 110, 216, 0.45);
  outline-offset: 2px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0;
  backdrop-filter: blur(3px);
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.95);
}

.header-inner {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  min-height: 68px;
  padding: 10px 18px;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: var(--ink);
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.brand-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.brand-mark .fox-head {
  fill: #ef3f35;
}

.brand-mark .fox-face {
  fill: #ffffff;
}

.brand-mark .fox-eye {
  fill: #1f2738;
}

.brand-mark .fox-nose {
  fill: #ef3f35;
}

.brand-text {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  line-height: 1;
}

.brand-text-main {
  color: #1f2738;
}

.brand-text-accent {
  color: #ef3f35;
}

.brand-text-tld {
  font-size: 0.72em;
  color: #4d586e;
  margin-left: 1px;
  font-weight: 700;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 14px;
  margin-right: auto;
}

.main-nav a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 8px 11px;
  border-radius: 7px;
  transition: transform 150ms ease, background 150ms ease, color 150ms ease;
}

.main-nav a:hover {
  background: #f0f3f9;
  color: #1e2a40;
}

.top-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-right form {
  margin: 0;
}

.lang-switcher {
  position: relative;
  min-width: 115px;
}

.lang-switcher summary {
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lang-switcher summary::-webkit-details-marker {
  display: none;
}

.lang-switcher[open] summary {
  border-color: #b6c7e1;
  box-shadow: 0 0 0 3px rgba(31, 110, 216, 0.12);
}

.lang-switcher ul {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 40;
  min-width: 170px;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: var(--shadow-lg);
  display: grid;
  gap: 3px;
}

.lang-switcher a {
  display: block;
  border-radius: 8px;
  padding: 6px 8px;
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

.lang-switcher a:hover,
.lang-switcher a.active {
  background: var(--accent-soft);
  color: #153f82;
}

.page-shell {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 16px 16px 56px;
  animation: page-reveal 560ms cubic-bezier(0.21, 0.77, 0.3, 1) both;
}

.page-shell--sign {
  max-width: none;
}

.panel {
  position: relative;
  margin-bottom: 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(14px, 2vw, 24px);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  animation: panel-rise 480ms ease both;
}

.panel:nth-of-type(2) {
  animation-delay: 80ms;
}

.panel:nth-of-type(3) {
  animation-delay: 130ms;
}

.panel:nth-of-type(4) {
  animation-delay: 180ms;
}

.panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #f1f3f8;
}

.panel-muted {
  background: linear-gradient(180deg, #f4f8ff 0%, #ffffff 100%);
}

.ad-panel {
  border-style: dashed;
}

.tools-group {
  scroll-margin-top: 95px;
}

.panel h1,
.panel h2,
.panel h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  letter-spacing: 0.01em;
}

.panel h1 {
  font-size: clamp(1.95rem, 3.8vw, 3.2rem);
  line-height: 1.08;
}

.panel h2 {
  font-size: clamp(1.2rem, 2.3vw, 1.68rem);
}

.panel h3 {
  font-size: 1rem;
}

.panel p {
  margin-top: 0;
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.section-head a {
  color: #214d95;
  font-weight: 700;
}

.hero {
  border: 1px solid var(--line);
  background: #ffffff;
  box-shadow: var(--shadow-sm);
}

.hero::before {
  background: #f1f3f8;
  height: 1px;
}

.hero * {
  color: inherit;
}

.hero .eyebrow {
  color: #5b6578;
}

.hero .hint {
  color: var(--ink-soft);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 18px;
}

.hero p {
  max-width: 68ch;
}

.hero-lead {
  color: var(--ink-soft);
  margin-bottom: 12px;
}

.hero-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 13px;
}

.hero-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid #d5def0;
  background: #ffffff;
  color: #31507e;
  font-size: 12px;
  font-weight: 700;
}

.hero-chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4f79ba;
}

.hero .hero-chip {
  border-color: #dce2ec;
  background: #f8fafc;
  color: #2e415f;
}

.hero .hero-chip::before {
  background: #4f79ba;
}

.hero-stats {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 8px;
}

.hero-stats div {
  border: 1px solid #dce3ee;
  border-radius: 12px;
  padding: 10px;
  background: #f9fbff;
  display: grid;
  gap: 2px;
}

.hero-stats strong {
  font-size: 12px;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  letter-spacing: 0.03em;
}

.hero-stats span {
  color: var(--ink-soft);
  font-size: 12px;
}

.hero-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 11px;
}

.hero-actions.compact {
  margin-top: 11px;
}

.hero .btn {
  border-color: var(--brand);
  background: linear-gradient(180deg, #f14f44 0%, #df3c31 100%);
  color: #ffffff;
}

.hero .btn:hover {
  box-shadow: 0 10px 20px rgba(166, 48, 37, 0.28);
}

.hero .ghost {
  border-color: #d6dde9;
  background: #ffffff;
  color: #2d3b53;
}

.hero .ghost:hover {
  border-color: #b6c4d9;
  background: #f6f8fc;
}

.quick-links-label {
  margin: 10px 0 0;
  font-size: 12px;
}

.quick-links {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.quick-link {
  text-decoration: none;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid #d3dff0;
  background: #ffffff;
  color: #26487d;
  font-size: 12px;
  font-weight: 700;
  transition: transform 130ms ease, border-color 130ms ease, box-shadow 130ms ease;
}

.quick-link:hover {
  border-color: #b3c7e6;
  transform: translateY(-1px);
  box-shadow: 0 8px 14px rgba(28, 50, 95, 0.13);
}

.hero .quick-link {
  border-color: #d5dde9;
  background: #ffffff;
  color: #2b3e5f;
}

.hero .quick-link:hover {
  border-color: #bac8dd;
  background: #f4f7fc;
}

.trust-card {
  border: 1px solid #d7deea;
  border-radius: var(--radius-lg);
  padding: 15px;
  background: #f8fafe;
  box-shadow: none;
  backdrop-filter: none;
}

.hero-mini-list {
  margin: 0 0 12px;
  padding-left: 16px;
  display: grid;
  gap: 6px;
}

.hero-mini-list a {
  color: #263b5c;
  text-decoration: none;
}

.hero-mini-list a:hover {
  text-decoration: underline;
}

.metric-strip {
  display: grid;
  gap: 8px;
}

.metric-strip div {
  border: 1px solid #d9e1ec;
  border-radius: 11px;
  padding: 9px 10px;
  background: #ffffff;
  display: grid;
  gap: 2px;
}

.metric-strip strong {
  font-size: 12px;
  font-family: "Space Grotesk", "Manrope", sans-serif;
}

.metric-strip span {
  font-size: 12px;
  color: #50607a;
}

.tool-directory {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.tool-filter-bar {
  margin: 10px 0 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tool-filter {
  border: 1px solid #cfdbee;
  border-radius: 999px;
  padding: 7px 12px;
  background: #ffffff;
  color: #355480;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 130ms ease, background 130ms ease, color 130ms ease, transform 130ms ease;
}

.tool-filter:hover {
  border-color: #afc4e3;
  transform: translateY(-1px);
}

.tool-filter.is-active {
  border-color: #ec675c;
  background: var(--brand-soft);
  color: #a62f25;
}

.cards-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.cards-grid .tool-card {
  animation: card-rise 420ms ease both;
}

.cards-grid .tool-card:nth-child(2n) {
  animation-delay: 70ms;
}

.cards-grid .tool-card:nth-child(3n) {
  animation-delay: 120ms;
}

.home-tools-grid {
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}

.tool-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 14px;
  text-decoration: none;
  background:
    radial-gradient(circle at 95% -25%, rgba(31, 110, 216, 0.08), rgba(31, 110, 216, 0) 37%),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
}

.tool-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f5f9f, #8ab2e9);
}

.tool-card:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 14px 26px rgba(23, 44, 84, 0.13);
}

.home-tool-card::before {
  background: linear-gradient(90deg, #ef4d3d, #ff978d);
}

.tool-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.tool-card-head strong {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 0.97rem;
}

.tool-card p {
  margin: 0 0 10px;
  color: var(--ink-soft);
  font-size: 14px;
}

.tool-icon {
  width: 31px;
  height: 31px;
  padding: 5px;
  border-radius: 10px;
  background: #edf4ff;
  border: 1px solid #c8d9f4;
  color: #275ca9;
  transition: transform 150ms ease;
}

.tool-card:hover .tool-icon {
  transform: translateY(-1px);
}

.home-tool-card:nth-child(4n + 1) .tool-icon {
  color: #d83f33;
  background: #fff1ef;
  border-color: #f2c9c5;
}

.home-tool-card:nth-child(4n + 2) .tool-icon {
  color: #2557ab;
  background: #ecf3ff;
  border-color: #c3d5f4;
}

.home-tool-card:nth-child(4n + 3) .tool-icon {
  color: #1a8d71;
  background: #eaf9f4;
  border-color: #c2ebde;
}

.home-tool-card:nth-child(4n + 4) .tool-icon {
  color: #a4680a;
  background: #fff7e9;
  border-color: #efddb8;
}

.pill {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid #cfdbee;
  background: #f3f8ff;
  color: #35588d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.work-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.work-card {
  border: 1px solid var(--line);
  border-radius: 15px;
  padding: 14px;
  text-decoration: none;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.work-card:hover {
  border-color: #b2c7e6;
  box-shadow: 0 12px 22px rgba(24, 48, 90, 0.12);
  transform: translateY(-2px);
}

.work-card h3 {
  margin-top: 5px;
}

.work-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 14px;
}

.work-card-tag {
  display: inline-block;
  border: 1px solid #d0dcee;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f3f8ff;
  color: #3b5d8f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.plan-band {
  border-color: #d2deef;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
}

.plan-band::before {
  background: linear-gradient(90deg, #3a6eb8, #85ace2);
}

.plan-points {
  margin: 14px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 6px;
  color: #3f5b86;
}

.trust-proof {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

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

.proof-item {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px;
  background: #ffffff;
  display: grid;
  gap: 4px;
}

.proof-item strong {
  font-size: 13px;
  font-family: "Space Grotesk", "Manrope", sans-serif;
}

.proof-item span {
  color: var(--ink-soft);
  font-size: 13px;
}

.btn,
button {
  border: 1px solid var(--brand);
  border-radius: 10px;
  padding: 10px 16px;
  background: linear-gradient(180deg, #f14f44 0%, #df3c31 100%);
  color: #ffffff;
  text-decoration: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.015em;
  cursor: pointer;
  transition: transform 130ms ease, box-shadow 130ms ease, filter 130ms ease;
}

.btn.primary {
  background: linear-gradient(180deg, #f14f44 0%, #df3c31 100%);
  border-color: var(--brand);
}

.btn:hover,
button:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(166, 48, 37, 0.28);
  filter: saturate(1.04);
}

.btn:disabled,
button:disabled {
  cursor: not-allowed;
  opacity: 0.62;
  box-shadow: none;
  transform: none;
  filter: none;
}

.ghost {
  border: 1px solid #d8dfe9;
  border-radius: 10px;
  padding: 9px 12px;
  background: #ffffff;
  color: var(--ink);
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.ghost:hover {
  border-color: #bfc9d8;
  box-shadow: 0 6px 14px rgba(24, 47, 88, 0.09);
  transform: translateY(-1px);
}

.ghost.danger {
  border-color: #efc7ca;
  background: #fff8f8;
  color: var(--bad);
}

.plan {
  border-radius: 999px;
  padding: 5px 10px;
  border: 1px solid transparent;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.plan.free {
  border-color: #f0c7c4;
  background: #fff1ef;
  color: #b83229;
}

.plan.premium {
  border-color: #c3e0cb;
  background: #e9f8ee;
  color: #146f45;
}

.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.search-row input {
  flex: 1 1 260px;
}

.category-jump {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hub-summary {
  margin: 0 0 12px;
  color: #4a5f83;
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 11px;
}

.field label {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

input,
select,
textarea {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 10px 11px;
  background: #ffffff;
  color: var(--ink);
  font-family: inherit;
  font-size: 14px;
  transition: border-color 130ms ease, box-shadow 130ms ease;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #becce3;
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: #e35a4c;
  box-shadow: 0 0 0 3px rgba(239, 77, 61, 0.16);
}

input[type="file"] {
  background: #f8fbff;
}

.checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
}

.checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.hero-tool {
  border-color: #ccd9ec;
  background:
    radial-gradient(circle at 90% 16%, rgba(239, 77, 61, 0.08), rgba(239, 77, 61, 0)),
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.hero-tool-head {
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.hero-tool .hero-chip {
  border-color: #ccdbee;
  background: #f4f9ff;
  color: #3a587f;
}

.hero-tool .hero-chip::before {
  background: #4f7bc0;
}

.stepper {
  margin: 16px 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stepper li {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.stepper li span {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #edf3ff;
  color: #2f5b99;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.stepper li.active {
  border-color: #f0b4b0;
  background: #fff5f4;
}

.stepper li.active span {
  background: #ffdeda;
  color: #b63128;
}

.stepper li.done {
  border-color: #bee2cc;
  background: #edf8f1;
}

.stepper li.done span {
  background: #d8f0e2;
  color: #156b44;
}

.trust-copy {
  margin: 0;
  color: var(--ink-soft);
}

.tool-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 340px;
  margin-bottom: 16px;
}

.tool-simple-hero {
  text-align: left;
  max-width: none;
}

.tool-simple-subtitle {
  max-width: 72ch;
  margin-left: 0;
  margin-right: 0;
}

.tool-simple-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  margin-top: 8px;
}

.tool-simple-workbench {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.tool-more-panel {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

.tool-form-simple {
  display: grid;
  gap: 12px;
}

.tool-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(340px, 0.95fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f8;
}

.tool-main-pane {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
  padding: 12px;
  background: #f3f4f8;
}

.tool-side-pane {
  display: grid;
  gap: 12px;
  min-width: 0;
  align-content: start;
  position: sticky;
  top: 69px;
  max-height: calc(100vh - 70px);
  overflow: auto;
  padding: 12px;
  border-left: 1px solid var(--line);
  background: #f7f8fb;
}

.tool-side-pane > .form-column,
.tool-side-pane > .form-actions {
  margin: 0;
}

.tool-actions-sticky {
  position: sticky;
  bottom: 0;
  border: 1px solid #d7deea;
  border-radius: 10px;
  padding: 9px;
  background: #ffffff;
  backdrop-filter: blur(4px);
}

.tool-actions-sticky .btn {
  width: 100%;
}

.stepper-simple {
  margin-top: 0;
}

.upload-column {
  background: #ffffff;
}

.upload-dropzone-simple {
  padding: 18px;
  text-align: center;
}

.field-upload {
  margin-left: auto;
  margin-right: auto;
  max-width: 560px;
}

.file-input-large {
  font-size: 15px;
  padding: 14px 12px;
}

.settings-disclosure {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.settings-disclosure summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 13px;
  border-bottom: 1px solid transparent;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.settings-disclosure summary::-webkit-details-marker {
  display: none;
}

.settings-disclosure[open] summary {
  border-bottom-color: var(--line);
}

.settings-disclosure > .hint,
.settings-disclosure > .settings-grid,
.settings-disclosure > .settings-footer {
  margin-left: 13px;
  margin-right: 13px;
}

.tool-more-info {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.tool-more-info summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 13px;
  border-bottom: 1px solid transparent;
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.tool-more-info summary::-webkit-details-marker {
  display: none;
}

.tool-more-info[open] summary {
  border-bottom-color: var(--line);
}

.tool-more-info .tool-simple-info-grid,
.tool-more-info .tool-inline-section,
.tool-more-info .related-list {
  margin-left: 13px;
  margin-right: 13px;
}

.tool-more-info .tool-simple-info-grid {
  margin-top: 12px;
}

.tool-inline-section {
  margin-top: 12px;
}

.tool-inline-section h3 {
  margin-bottom: 8px;
}

.tool-simple-info-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.simple-info-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 11px;
  background: #ffffff;
}

.simple-info-card h3 {
  margin: 0 0 8px;
}

.sign-tool-workbench {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.sign-tool-form {
  display: grid;
  gap: 14px;
}

.sign-hero {
  max-width: none;
  text-align: left;
}

.sign-hero .tool-simple-subtitle {
  max-width: 78ch;
  margin-left: 0;
  margin-right: 0;
}

.sign-hero .tool-simple-meta {
  justify-content: flex-start;
}

.sign-tool-form > .stepper {
  margin-bottom: 2px;
}

.sign-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(340px, 0.95fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: #f3f4f8;
}

.sign-main-pane {
  display: grid;
  gap: 14px;
  align-content: start;
  min-width: 0;
  padding: 12px;
  background: #f3f4f8;
}

.sign-side-pane {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
  position: sticky;
  top: 69px;
  max-height: calc(100vh - 70px);
  overflow: auto;
  padding: 12px;
  border-left: 1px solid var(--line);
  background: #f7f8fb;
}

.sign-sidebar-active {
  display: grid;
  gap: 12px;
}

.sign-sidebar-inactive {
  border: 1px dashed #bfd2ec;
  border-radius: 14px;
  padding: 16px 14px;
  background: linear-gradient(180deg, #f7fbff 0%, #eef5ff 100%);
  color: #3f5f8c;
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
}

.sign-sidebar-inactive p {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
}

.sign-sidebar-inactive svg {
  width: 44px;
  height: auto;
}

.sign-side-pane > .form-column,
.sign-side-pane > .callout,
.sign-side-pane > .form-actions {
  margin: 0;
}

.sign-side-card {
  border: 1px solid #c9daee;
  border-radius: 13px;
  background: #ffffff;
  padding: 12px;
}

.sign-upload-card {
  padding: 14px;
}

.sign-canvas-card {
  padding: 10px;
}

.sign-mode-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sign-mode-card {
  border: 1px solid #cad9ef;
  border-radius: 13px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  display: grid;
  gap: 3px;
  cursor: pointer;
  transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

.sign-mode-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sign-mode-card strong {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 1rem;
}

.sign-mode-card span {
  color: var(--ink-soft);
  font-size: 13px;
}

.sign-mode-card:hover {
  border-color: #b4c8e8;
  box-shadow: 0 8px 16px rgba(30, 54, 97, 0.12);
  transform: translateY(-1px);
}

.sign-mode-card.is-active {
  border-color: #e36b5d;
  background: #fff3f2;
  box-shadow: 0 0 0 2px rgba(227, 107, 93, 0.14);
}

.sign-request-settings {
  margin-top: 11px;
}

.recipient-rows {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.recipient-row {
  display: grid;
  gap: 8px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 130px auto;
  align-items: center;
  border: 1px solid #cfdced;
  border-radius: 11px;
  padding: 9px;
  background: #ffffff;
}

.recipient-row input,
.recipient-row select {
  margin: 0;
}

.recipient-remove {
  padding: 8px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.sign-tabs {
  border: 1px solid #ccd9ed;
  border-radius: 13px;
  background: #ffffff;
  overflow: hidden;
}

.sign-tab-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-bottom: 1px solid #d4dfef;
  background: linear-gradient(180deg, #f9fcff 0%, #f3f8ff 100%);
}

.sign-tab-btn {
  border: none;
  border-right: 1px solid #d8e2f1;
  border-radius: 0;
  padding: 10px 8px;
  background: transparent;
  color: #34567f;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}

.sign-tab-btn:last-child {
  border-right: none;
}

.sign-tab-btn:hover {
  background: rgba(50, 95, 168, 0.08);
  color: #254a7e;
}

.sign-tab-btn.is-active {
  background: #ffffff;
  color: #b13429;
}

.sign-tab-panel {
  padding: 12px;
  display: grid;
  gap: 11px;
}

.sign-tab-panel[hidden] {
  display: none !important;
}

.sign-submode-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sign-submode-btn {
  border: 1px solid #cddcef;
  border-radius: 999px;
  padding: 7px 11px;
  background: #f8fbff;
  color: #355681;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.sign-submode-btn.is-active {
  border-color: #e06b5b;
  background: #fff2f1;
  color: #ad3126;
}

.sign-submode-panel {
  display: grid;
  gap: 10px;
}

.sign-submode-panel[hidden] {
  display: none !important;
}

.sign-font-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.sign-font-option {
  position: relative;
  border: 1px solid #d1deef;
  border-radius: 10px;
  padding: 8px 9px;
  min-height: 48px;
  display: grid;
  place-items: center;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.sign-font-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sign-font-option span {
  color: #374f72;
  font-size: 22px;
  line-height: 1;
}

.sign-font-option:hover {
  border-color: #b7cae6;
  transform: translateY(-1px);
}

.sign-font-option.is-active {
  border-color: #e06e5d;
  box-shadow: 0 0 0 2px rgba(224, 110, 93, 0.14);
  background: #fff5f4;
}

.sign-color-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.sign-color-option {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #d8dfec;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  cursor: pointer;
  transition: border-color 120ms ease, transform 120ms ease;
}

.sign-color-option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sign-color-option span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--swatch);
}

.sign-color-option.is-active {
  border-color: #2f3e59;
}

.sign-preview-card {
  border: 1px dashed #bed0ea;
  border-radius: 11px;
  padding: 9px;
  background: #f7fbff;
  display: grid;
  gap: 5px;
}

.sign-preview-card strong {
  color: #415d84;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.sign-text-preview {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  font-size: 34px;
  line-height: 1.08;
  color: #555555;
}

.sign-font-style-alex {
  font-family: "Alex Brush", cursive;
}

.sign-font-style-allura {
  font-family: "Allura", cursive;
}

.sign-font-style-handle {
  font-family: "Handlee", cursive;
}

.sign-font-style-kristi {
  font-family: "Kristi", cursive;
}

.sign-font-style-aurore {
  font-family: "Great Vibes", cursive;
}

.sign-font-style-mark {
  font-family: "Marck Script", cursive;
}

.sign-font-style-reenie {
  font-family: "Reenie Beanie", cursive;
}

.sign-font-style-satisfy {
  font-family: "Satisfy", cursive;
}

.sign-font-style-zeyada {
  font-family: "Zeyada", cursive;
}

.sign-font-style-shadows {
  font-family: "Shadows Into Light", cursive;
}

.sign-draw-card {
  border: 1px dashed #bed0ea;
  border-radius: 11px;
  padding: 9px;
  background: linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}

.sign-draw-card canvas {
  width: 100%;
  height: 180px;
  border: 1px solid #d5dfef;
  border-radius: 9px;
  background: #ffffff;
  touch-action: none;
}

.sign-draw-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}

.sign-upload-preview {
  min-height: 80px;
  border: 1px dashed #c4d4eb;
  border-radius: 11px;
  padding: 8px;
  background: #f8fbff;
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font-size: 12px;
}

.sign-upload-preview img {
  max-width: 100%;
  max-height: 180px;
  border-radius: 8px;
}

.pdf-placement-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.pdf-placement-workspace {
  border: 1px solid #c7d7ed;
  border-radius: 11px;
  padding: 10px;
  background:
    linear-gradient(180deg, #f9fcff 0%, #f4f8ff 100%),
    repeating-linear-gradient(45deg, rgba(86, 122, 170, 0.05) 0 10px, rgba(86, 122, 170, 0.09) 10px 20px);
  display: grid;
  gap: 10px;
  min-height: 200px;
}

.pdf-page-frame {
  border: 1px solid #ccd9ec;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
}

.pdf-page-header {
  padding: 8px 10px;
  border-bottom: 1px solid #e0e8f4;
  color: #45658f;
  font-size: 12px;
  font-weight: 700;
  background: #f9fbff;
}

.pdf-page-canvas-wrap {
  position: relative;
}

.pdf-page-canvas {
  display: block;
  width: 100%;
  height: auto;
}

.pdf-page-overlay {
  position: absolute;
  inset: 0;
  cursor: crosshair;
}

.pdf-placement-field {
  position: absolute;
  border-radius: 8px;
  border: 1px solid #2d4f84;
  background: rgba(58, 101, 163, 0.14);
  cursor: grab;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 6px;
  min-width: 54px;
  min-height: 24px;
  user-select: none;
  touch-action: none;
}

.pdf-placement-field:active {
  cursor: grabbing;
}

.pdf-placement-field-label {
  color: #193b68;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.pdf-placement-field-remove {
  border: none;
  background: rgba(22, 34, 56, 0.13);
  color: #1f2b3d;
  width: 17px;
  height: 17px;
  border-radius: 999px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

.pdf-placement-field--signature {
  border-color: #225895;
  background: rgba(64, 109, 176, 0.16);
}

.pdf-placement-field--initials {
  border-color: #8a5a14;
  background: rgba(212, 154, 67, 0.2);
}

.pdf-placement-field--stamp {
  border-color: #217142;
  background: rgba(57, 156, 94, 0.2);
}

.sign-pages-custom {
  margin-top: 8px;
}

.sign-form-error {
  margin: 0;
}

.sign-preset-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}

.sign-editor-shell {
  min-height: 0;
}

.sign-toolbox-panel {
  display: grid;
  gap: 10px;
  align-content: start;
}

.sign-toolbox-panel h2 {
  margin-bottom: 0;
}

.sign-field-group-title {
  margin: 2px 0 0;
  font-size: 13px;
  color: #4b6387;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sign-field-buttons {
  display: grid;
  gap: 7px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sign-field-buttons--stack {
  grid-template-columns: 1fr;
}

.sign-tool-btn {
  border: 1px solid #ccdaee;
  border-radius: 10px;
  padding: 8px 10px;
  background: #f6f9ff;
  color: #2e4f79;
  font-size: 12px;
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.sign-tool-btn--row {
  display: grid;
  grid-template-columns: 12px 28px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 9px;
}

.sign-tool-btn-handle {
  width: 8px;
  height: 16px;
  border-radius: 3px;
  opacity: 0.7;
  background:
    radial-gradient(circle at 2px 2px, #60779b 1.2px, transparent 1.3px),
    radial-gradient(circle at 6px 2px, #60779b 1.2px, transparent 1.3px),
    radial-gradient(circle at 2px 8px, #60779b 1.2px, transparent 1.3px),
    radial-gradient(circle at 6px 8px, #60779b 1.2px, transparent 1.3px),
    radial-gradient(circle at 2px 14px, #60779b 1.2px, transparent 1.3px),
    radial-gradient(circle at 6px 14px, #60779b 1.2px, transparent 1.3px);
}

.sign-tool-btn-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: #3f6faa;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.sign-tool-btn-copy {
  display: grid;
  gap: 1px;
  text-align: left;
}

.sign-tool-btn-copy strong {
  font-size: 14px;
  line-height: 1.2;
}

.sign-tool-btn-copy small {
  font-size: 11px;
  color: #5e7698;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sign-tool-btn-meta {
  color: #5b7294;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sign-tool-btn-preview {
  max-width: 220px;
  color: #2f4f79;
  font-size: 26px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}

.sign-tool-btn:hover {
  border-color: #a8c0e2;
  background: #edf4ff;
}

.sign-tool-btn.is-active {
  border-color: #e06c5a;
  background: #fff1ef;
  color: #a62d22;
}

.sign-tool-btn.is-active .sign-tool-btn-icon {
  background: #da5545;
}

.selected-field-card {
  border: 1px solid #c5d7ef;
  border-radius: 11px;
  padding: 10px;
  background: #ffffff;
  display: grid;
  gap: 8px;
}

.selected-field-card h4 {
  margin: 0;
}

.selected-field-card .field {
  margin: 0;
}

.selected-field-card textarea {
  min-height: 62px;
  resize: vertical;
}

.sign-editor-viewer {
  border: 1px solid #c8d9ef;
  border-radius: 12px;
  background: linear-gradient(180deg, #fcfdff 0%, #f5f9ff 100%);
  padding: 10px;
  display: grid;
  gap: 8px;
  min-height: min(920px, calc(100vh - 190px));
}

.sign-viewer-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.viewer-toolbar-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid #d3deef;
  border-radius: 999px;
  background: #ffffff;
  padding: 4px 7px;
}

.viewer-page-input-wrap {
  margin: 0;
  font-size: 12px;
  color: #4f6587;
  font-weight: 700;
}

#viewerPageInput {
  width: 66px;
  margin: 0;
  text-align: center;
  padding: 5px 8px;
}

#zoomLabel {
  min-width: 62px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #355680;
}

.sign-viewer-main {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 10px;
  min-height: min(760px, calc(100vh - 330px));
}

.pdf-thumb-sidebar {
  border: 1px solid #d4dff0;
  border-radius: 10px;
  background: #ffffff;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

.pdf-thumb-sidebar h3 {
  margin: 0;
  padding: 8px 9px;
  font-size: 12px;
  color: #3f6088;
  border-bottom: 1px solid #e1e8f4;
}

.pdf-thumb-list {
  overflow: auto;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 8px;
}

.pdf-thumb-item {
  border: 1px solid #cfdbef;
  border-radius: 9px;
  background: #f8fbff;
  padding: 6px;
  cursor: pointer;
  display: grid;
  gap: 4px;
  justify-items: center;
  color: #3d5e87;
  font-size: 11px;
  font-weight: 700;
}

.pdf-thumb-item:hover {
  border-color: #aec5e5;
}

.pdf-thumb-item.is-active {
  border-color: #e0705e;
  background: #fff3f2;
  color: #a9382a;
}

.pdf-thumb-canvas {
  width: 100%;
  height: auto;
  border: 1px solid #e2e8f4;
  border-radius: 6px;
  background: #ffffff;
}

.pdf-page-viewport {
  border: 1px solid #d2def0;
  border-radius: 10px;
  background:
    linear-gradient(180deg, #f8fbff 0%, #eef4ff 100%),
    repeating-linear-gradient(45deg, rgba(55, 92, 141, 0.07) 0 10px, rgba(55, 92, 141, 0.1) 10px 20px);
  overflow: auto;
  min-height: 0;
  max-height: min(760px, calc(100vh - 330px));
  scroll-behavior: smooth;
  padding: 12px;
}

.sign-actions-sticky {
  position: sticky;
  bottom: 0;
  border: 1px solid #d7e1f0;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 250, 255, 0.96) 100%);
  backdrop-filter: blur(4px);
}

.sign-actions-sticky .btn {
  width: 100%;
}

.pdf-page-stack {
  display: grid;
  gap: 14px;
  align-content: start;
}

.editor-page {
  border: 1px solid #c7d6ec;
  border-radius: 10px;
  background: #ffffff;
  overflow: hidden;
  box-shadow: 0 9px 16px rgba(24, 41, 71, 0.08);
}

.editor-page-head {
  padding: 8px 10px;
  border-bottom: 1px solid #e2e8f3;
  background: #f8fbff;
  color: #3f6089;
  font-size: 12px;
  font-weight: 700;
}

.editor-page-boundary {
  position: relative;
  margin: 10px auto;
  width: max-content;
  border: 1px solid #d4deee;
  background: #ffffff;
}

.editor-page-canvas {
  display: block;
}

.editor-page-overlay {
  position: absolute;
  inset: 0;
  cursor: crosshair;
}

.editor-field {
  position: absolute;
  border: 1px solid #2d558d;
  border-radius: 8px;
  background: rgba(64, 110, 176, 0.14);
  padding: 4px 6px 12px;
  overflow: hidden;
  user-select: none;
  touch-action: none;
  transform-origin: center center;
  cursor: grab;
  will-change: transform, left, top, width, height;
}

.editor-field.is-dragging {
  cursor: grabbing;
}

.editor-field:hover {
  box-shadow: 0 0 0 1px rgba(26, 48, 79, 0.2);
}

.editor-field.is-selected {
  border-color: #d45547;
  box-shadow: 0 0 0 2px rgba(212, 85, 71, 0.2);
}

.editor-field-title {
  font-size: 11px;
  font-weight: 800;
  color: #183a66;
  line-height: 1.1;
  text-transform: uppercase;
}

.editor-field-text {
  margin-top: 3px;
  font-size: 12px;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-field-text.multiline {
  white-space: pre-wrap;
  overflow: hidden;
}

.editor-field-checkbox {
  margin-top: 2px;
  font-size: 16px;
  line-height: 1;
}

.editor-field-signature {
  margin-top: 1px;
  min-height: calc(100% - 8px);
  display: flex;
  align-items: center;
  font-size: 28px;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-field-signature-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.editor-field-delete {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 999px;
  background: rgba(24, 40, 64, 0.15);
  color: #1d2a3b;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  z-index: 7;
  pointer-events: auto;
}

.editor-field-resize {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: rgba(24, 40, 64, 0.35);
  cursor: nwse-resize;
  z-index: 6;
}

.editor-field--initials {
  border-color: #8b5b15;
  background: rgba(208, 158, 74, 0.2);
}

.editor-field--text,
.editor-field--date,
.editor-field--name,
.editor-field--email {
  border-color: #246c9b;
  background: rgba(82, 150, 197, 0.18);
}

.editor-field--checkbox {
  border-color: #38506f;
  background: rgba(112, 132, 159, 0.22);
}

.editor-field--stamp {
  border-color: #206f40;
  background: rgba(78, 162, 109, 0.22);
}

.flow-aside {
  display: grid;
  gap: 14px;
  align-content: start;
}

.tool-form {
  display: grid;
  gap: 14px;
}

.form-column {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px;
  background: linear-gradient(180deg, #fbfdff 0%, #ffffff 100%);
}

.form-column .hint {
  margin-bottom: 10px;
}

.settings-column {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.settings-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.settings-header h2 {
  margin-bottom: 0;
}

.settings-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.setting-card {
  margin-bottom: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
}

.setting-card input,
.setting-card select {
  width: 100%;
}

.setting-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.setting-title {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.setting-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
}

.setting-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d4def0;
  border-radius: 999px;
  padding: 2px 7px;
  background: #f4f8ff;
  color: #35527c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.setting-hint {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
}

.setting-choice-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(145px, 1fr));
}

.setting-choice {
  position: relative;
  border: 1px solid #d3dff0;
  border-radius: 10px;
  padding: 8px 9px;
  background: #ffffff;
  display: grid;
  gap: 2px;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.setting-choice:hover {
  border-color: #b8cbe8;
  transform: translateY(-1px);
}

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

.setting-choice span {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.setting-choice small {
  color: var(--ink-soft);
  font-size: 11px;
}

.setting-choice:has(input:checked) {
  border-color: #e36e5f;
  background: #fff3f2;
  box-shadow: 0 0 0 2px rgba(227, 110, 95, 0.15);
}

.setting-choice.is-disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f6f8fc;
}

.range-builder {
  display: grid;
  gap: 8px;
}

.range-builder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.range-action {
  padding: 7px 10px;
  font-size: 12px;
}

.range-builder-row {
  display: grid;
  gap: 7px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  align-items: center;
}

.range-builder-row .range-action {
  white-space: nowrap;
}

.range-input {
  min-width: 0;
}

.range-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.range-chip-empty {
  color: var(--ink-soft);
  font-size: 12px;
}

.range-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #cfdbef;
  border-radius: 999px;
  padding: 4px 8px;
  background: #f5f9ff;
  color: #2f557f;
  font-size: 12px;
  font-weight: 700;
}

.range-chip-remove {
  border: none;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background: #e2ebf9;
  color: #2f557f;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.range-chip-remove:hover {
  background: #d2e0f6;
}

.range-advanced-label {
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}

.setting-card-bool {
  align-content: start;
}

.setting-toggle-wrap {
  display: flex;
  align-items: center;
}

.setting-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 700;
}

.setting-toggle input[type="checkbox"] {
  width: 18px;
  height: 18px;
}

.settings-footer {
  border: 1px dashed #bfd0ea;
  border-radius: 11px;
  padding: 9px 10px;
  background: #f7fbff;
}

.settings-footer .hint {
  margin: 0;
}

.image-preview-panel {
  margin: 10px 0 8px;
  border: 1px dashed #bfd0ea;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #f6fbff 0%, #ffffff 100%);
}

.image-preview-head h3 {
  margin: 0 0 4px;
  font-size: 14px;
}

.image-preview-head .hint {
  margin: 0;
  font-size: 12px;
}

.image-preview-canvas {
  margin-top: 9px;
  border: 1px solid #d4deef;
  border-radius: 11px;
  padding: 12px;
  background:
    linear-gradient(90deg, rgba(88, 117, 166, 0.06) 1px, transparent 1px),
    linear-gradient(rgba(88, 117, 166, 0.06) 1px, transparent 1px),
    #f7fbff;
  background-size: 14px 14px;
  display: grid;
  place-items: center;
  min-height: 215px;
}

.image-preview-page {
  position: relative;
  width: min(230px, 88%);
  aspect-ratio: 4 / 3;
  border: 1px solid #c7d5eb;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 8px 18px rgba(28, 49, 89, 0.13);
  transition: aspect-ratio 160ms ease;
}

.image-preview-photo {
  position: absolute;
  left: 6px;
  right: 6px;
  top: 6px;
  bottom: 6px;
  border-radius: 6px;
  border: 1px solid #c8d8ef;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, 0.34), transparent 34%),
    linear-gradient(155deg, #5f9ce2 0%, #6e78d8 54%, #7ec9b3 100%);
  transition: inset 160ms ease;
}

.image-preview-meta {
  margin: 8px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  font-weight: 700;
}

.upload-dropzone {
  border: 1px dashed #9fb8de;
  border-radius: 13px;
  padding: 13px;
  background: linear-gradient(180deg, #f3f8ff 0%, #ffffff 100%);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.upload-dropzone.drag-over {
  border-color: #d44d3d;
  box-shadow: 0 0 0 4px rgba(239, 77, 61, 0.14);
  transform: translateY(-1px);
}

.file-summary {
  margin: 0;
  font-size: 13px;
  color: #355179;
}

.cloud-import-block {
  margin: 10px 0 8px;
  padding: 10px;
  border: 1px solid #cfdbef;
  border-radius: 10px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8ff 100%);
}

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

.cloud-import-head strong {
  font-size: 13px;
  color: #2e4771;
}

.cloud-import-head span {
  font-size: 11px;
  color: #5a7296;
}

.cloud-import-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.cloud-import-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 36px;
  padding: 7px 9px;
  border: 1px solid #c4d6ee;
  border-radius: 9px;
  background: #ffffff;
  color: #2b4d77;
  cursor: pointer;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.cloud-import-btn:hover {
  border-color: #98b7de;
  box-shadow: 0 8px 14px rgba(48, 88, 146, 0.14);
  transform: translateY(-1px);
}

.cloud-import-btn.is-active {
  border-color: #7da4d7;
  background: linear-gradient(180deg, #f5f9ff 0%, #ecf3ff 100%);
  box-shadow: 0 10px 18px rgba(40, 80, 134, 0.16);
}

.cloud-import-btn:disabled {
  cursor: wait;
  opacity: 0.68;
}

.cloud-import-btn-icon {
  width: 16px;
  height: 16px;
  color: #4e76aa;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cloud-import-btn-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

.cloud-import-btn-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.cloud-import-panel {
  margin-top: 10px;
  border: 1px solid #c9d8ec;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86);
}

.cloud-import-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 9px;
}

.cloud-import-panel-head strong {
  font-size: 13px;
  color: #2d456c;
}

.cloud-panel-close-btn {
  min-height: 0;
  padding: 6px 9px;
  font-size: 12px;
}

.cloud-import-mode-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px;
  border: 1px solid #c8d8ee;
  border-radius: 999px;
  background: #eef5ff;
  margin-bottom: 10px;
}

.cloud-mode-btn {
  min-height: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: #365a8b;
  padding: 6px 11px;
  font-size: 12px;
  font-weight: 800;
  box-shadow: none;
}

.cloud-mode-btn:hover {
  transform: none;
  box-shadow: none;
  border-color: #b6cbe8;
  background: rgba(255, 255, 255, 0.7);
}

.cloud-mode-btn.is-active {
  border-color: #a9c3e6;
  background: #ffffff;
  color: #1f4478;
  box-shadow: 0 5px 10px rgba(31, 70, 126, 0.15);
}

.cloud-import-link-area,
.cloud-import-connect-area {
  display: grid;
  gap: 8px;
}

.cloud-import-link-area label {
  font-size: 12px;
  font-weight: 700;
  color: #3a547f;
}

.cloud-import-link-area input {
  width: 100%;
}

.cloud-import-link-actions {
  display: flex;
  justify-content: flex-end;
}

.cloud-import-run-btn {
  min-height: 40px;
  padding: 9px 14px;
  font-size: 13px;
}

.cloud-import-connect-area p {
  margin: 0;
  font-size: 12px;
  color: #476188;
}

.cloud-connect-btn {
  justify-self: flex-start;
  min-height: 38px;
  padding: 8px 12px;
}

.cloud-connect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.cloud-browse-btn {
  min-height: 38px;
  padding: 8px 12px;
}

.cloud-drive-picker {
  border: 1px solid #c9d8ec;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px;
  margin-top: 2px;
}

.cloud-drive-picker-head {
  display: grid;
  gap: 7px;
}

.cloud-drive-picker-head label {
  font-size: 12px;
  font-weight: 700;
  color: #365381;
}

.cloud-drive-picker-tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.cloud-drive-picker-tools input {
  min-width: 0;
}

.cloud-drive-refresh-btn {
  min-height: 38px;
  padding: 7px 10px;
}

.cloud-drive-picker-list {
  margin-top: 9px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid #d4dfef;
  border-radius: 9px;
  background: #f8fbff;
  padding: 6px;
  display: grid;
  gap: 6px;
}

.cloud-drive-file {
  border: 1px solid #cad8ed;
  border-radius: 8px;
  background: #ffffff;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  text-align: left;
  color: #264673;
  transition: border-color 130ms ease, box-shadow 130ms ease, transform 130ms ease;
}

.cloud-drive-file:hover {
  border-color: #99b7df;
  box-shadow: 0 6px 12px rgba(38, 80, 137, 0.14);
  transform: translateY(-1px);
}

.cloud-drive-file.is-selected {
  border-color: #e67a6f;
  background: #fff5f3;
}

.cloud-drive-file-main {
  min-width: 0;
  display: grid;
}

.cloud-drive-file-main strong {
  font-size: 12px;
  font-weight: 800;
  color: #203e69;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cloud-drive-file-main small {
  font-size: 11px;
  color: #56739c;
}

.cloud-drive-file-state {
  font-size: 11px;
  font-weight: 800;
  color: #335b93;
  white-space: nowrap;
}

.cloud-drive-more-btn {
  min-height: 34px;
  font-size: 12px;
  justify-content: center;
}

.cloud-drive-picker-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.cloud-drive-import-btn {
  min-height: 38px;
  padding: 8px 13px;
}

.cloud-import-status {
  margin: 8px 0 0;
  min-height: 17px;
  font-size: 12px;
}

.cloud-import-status.is-working {
  color: #2f5f95;
}

.cloud-import-status.is-success {
  color: #1d7a4c;
}

.cloud-import-status.is-error {
  color: #b33733;
}

@media (max-width: 620px) {
  .cloud-import-buttons {
    grid-template-columns: 1fr;
  }

  .cloud-import-panel-head {
    flex-wrap: wrap;
  }

  .cloud-import-link-actions {
    justify-content: stretch;
  }

  .cloud-import-run-btn {
    width: 100%;
  }

  .cloud-drive-picker-tools {
    grid-template-columns: 1fr;
  }

  .cloud-drive-picker-actions {
    justify-content: stretch;
  }

  .cloud-drive-import-btn {
    width: 100%;
  }
}

.file-organizer {
  margin-top: 10px;
  border: 1px solid #cfdbef;
  border-radius: 12px;
  padding: 10px;
  background: #ffffff;
  text-align: left;
}

.file-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.file-toolbar .hint {
  margin: 0;
  font-size: 12px;
}

.file-toolbar-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.file-sort-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-soft);
}

.file-sort-select {
  min-width: 190px;
  padding: 8px 10px;
  font-size: 13px;
}

.preview-toggle,
.add-more-files {
  padding: 8px 10px;
  font-size: 12px;
}

.file-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.file-list-item {
  display: grid;
  grid-template-columns: auto 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
}

.file-list-item.is-dragging {
  opacity: 0.56;
}

.file-list-item.drag-target {
  border-color: #df5a49;
  background: #fff5f4;
}

.file-drag-handle {
  border: 1px solid #c8d8f2;
  border-radius: 8px;
  padding: 5px 8px;
  background: #edf4ff;
  color: #355a90;
  font-size: 12px;
  font-weight: 800;
  cursor: grab;
}

.file-drag-handle:active {
  cursor: grabbing;
}

.file-item-preview {
  width: 44px;
  height: 44px;
  border: 1px solid #d0dcef;
  border-radius: 8px;
  background: #f5f9ff;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.file-item-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.file-item-fallback {
  color: #456490;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.05em;
}

.file-item-copy {
  min-width: 0;
  display: grid;
  gap: 1px;
}

.file-item-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-item-meta {
  font-size: 12px;
  color: var(--ink-soft);
}

.file-item-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.file-action {
  border: 1px solid #cfdbef;
  border-radius: 8px;
  padding: 6px 8px;
  background: #ffffff;
  color: #355782;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.file-action:hover {
  border-color: #b7c9e6;
}

.file-remove {
  width: 28px;
  height: 28px;
  border: 1px solid #efc3c6;
  border-radius: 50%;
  background: #fff7f7;
  color: #b12d33;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.file-remove:hover {
  border-color: #e4959b;
  background: #ffefef;
}

.file-live-preview {
  margin-top: 10px;
  border: 1px solid #cfdbef;
  border-radius: 12px;
  padding: 10px;
  background: linear-gradient(180deg, #fcfdff 0%, #f6faff 100%);
}

.file-live-preview[hidden] {
  display: none !important;
}

.file-live-preview-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.file-live-preview-head h3 {
  margin: 0;
  font-size: 14px;
}

.file-live-preview-head .hint {
  margin: 0;
  font-size: 12px;
}

.file-live-preview-grid {
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.file-live-card {
  border: 1px solid #d2ddef;
  border-radius: 10px;
  background: #ffffff;
  padding: 8px;
  display: grid;
  gap: 7px;
}

.file-live-card-head {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.file-live-card-head strong {
  display: block;
  font-size: 12px;
  color: #2d4468;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-live-card-head span {
  font-size: 11px;
  color: #607594;
}

.file-live-body {
  border: 1px solid #d8e2f1;
  border-radius: 8px;
  background: #f7fbff;
  min-height: 130px;
  overflow: hidden;
  display: grid;
  align-items: stretch;
}

.file-live-frame,
.file-live-image,
.file-live-video {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  object-fit: cover;
}

.file-live-audio {
  width: calc(100% - 16px);
  margin: auto;
}

.file-live-text {
  margin: 0;
  padding: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: #2d4263;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.file-live-placeholder {
  padding: 12px;
  display: grid;
  gap: 4px;
  align-content: center;
  color: #3f577a;
}

.file-live-placeholder strong {
  font-size: 13px;
  color: #314d76;
}

.file-live-placeholder p {
  margin: 0;
  font-size: 12px;
  color: #5b6e8a;
}

.file-live-note {
  margin: 1px 0 0;
  font-size: 12px;
  color: #5a6f8f;
  grid-column: 1 / -1;
}

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

.limit-columns h3 {
  margin: 0 0 8px;
  font-size: 13px;
}

.limit-list {
  margin: 0;
  padding-left: 17px;
  display: grid;
  gap: 6px;
}

.limit-list li {
  color: var(--ink-soft);
  font-size: 13px;
}

.upgrade-inline {
  margin-bottom: 12px;
}

.form-actions {
  display: flex;
}

.howto-list {
  margin: 0;
  padding-left: 18px;
}

.howto-list li {
  margin-bottom: 8px;
}

.related-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.related-link {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #ffffff;
  color: #305486;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
  transition: transform 130ms ease, border-color 130ms ease;
}

.related-link:hover {
  border-color: #b1c5e5;
  transform: translateY(-1px);
}

.guide-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.guide-steps li {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: #ffffff;
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 8px;
}

.guide-steps li span {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #f9e2df;
  color: #ae2f26;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
}

.progress-track {
  height: 11px;
  border-radius: 999px;
  margin-bottom: 9px;
  background: #ecf2fb;
  overflow: hidden;
}

.progress-value {
  height: 100%;
  background: linear-gradient(90deg, #ef4d3d 0%, #ff7a66 57%, #ffbe96 100%);
  transition: width 280ms ease;
}

.status-badge {
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.status-queued {
  background: #fff2f1;
  color: #b72e27;
}

.status-running {
  background: #fff4e8;
  color: #91510a;
}

.status-completed {
  background: #e8f8ef;
  color: #0f6e43;
}

.status-failed {
  background: #fff1f1;
  color: #a82a2a;
}

.inline-actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.inline-actions form {
  margin: 0;
}

.error-block {
  margin-top: 10px;
  border: 1px solid #efc8c8;
  border-radius: 11px;
  background: #fff8f8;
  color: #7f1e1e;
  padding: 11px;
  overflow: auto;
}

.callout {
  border: 1px solid #d0dcef;
  border-radius: 11px;
  background: #f4f9ff;
  padding: 10px;
  margin-bottom: 12px;
}

.callout.warning {
  border-color: #eccd9d;
  background: #fff8ec;
  color: #7d4d09;
}

.callout.info {
  border-color: #c6dbf7;
  background: #edf6ff;
  color: #174b89;
}

.callout.success {
  border-color: #b8e6c5;
  background: #edfdf2;
  color: #196339;
}

.callout.error {
  border-color: #efc5c7;
  background: #fff1f2;
  color: #8f1e27;
}

.ad-wrap .ad-slot {
  border: 1px dashed #f0c37d;
  border-radius: 11px;
  padding: 11px;
  background: #fff8ea;
  color: #7d5705;
}

.hint {
  color: var(--ink-soft);
}

.eyebrow {
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  font-size: 11px;
  font-weight: 800;
  color: #4c6994;
}

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

details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #ffffff;
  padding: 10px 12px;
  margin-bottom: 8px;
}

details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--ink);
}

details[open] {
  border-color: #c7d5ea;
  background: #fafdff;
}

pre {
  margin: 0;
  padding: 11px;
  border: 1px solid #d4deef;
  border-radius: 11px;
  background: #f8fbff;
  overflow: auto;
}

.site-footer {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  background: #ffffff;
  color: var(--ink-soft);
}

.footer-shell {
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding: 34px 16px 22px;
}

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

.footer-title {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #7a8698;
}

.footer-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}

.footer-links a {
  text-decoration: none;
  color: #2b3d5c;
  font-size: 14px;
}

.footer-links a:hover {
  color: #1f2f49;
  text-decoration: underline;
}

.footer-copy {
  margin: 0 0 8px;
  color: #5b6780;
  font-size: 13px;
}

.footer-bottom {
  margin-top: 20px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #6b768b;
  font-size: 12px;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.footer-brand b {
  color: #2b3d5c;
  font-weight: 800;
}

.footer-brand .brand-mark {
  width: 20px;
  height: 20px;
}

@keyframes page-reveal {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes panel-rise {
  from {
    opacity: 0;
    transform: translateY(12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes card-rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

html[dir="rtl"] .hero-mini-list,
html[dir="rtl"] .plan-points,
html[dir="rtl"] .howto-list,
html[dir="rtl"] .limit-list,
html[dir="rtl"] .auth-points {
  padding-right: 18px;
  padding-left: 0;
}

.hero-grid-expanded {
  grid-template-columns: minmax(0, 1fr) 400px;
}

.hero-primary {
  display: grid;
  align-content: start;
}

.launch-card h3 {
  margin: 4px 0 8px;
}

.signal-strip {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.category-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;
}

.category-pill strong {
  font-size: 12px;
  font-family: "Space Grotesk", "Manrope", sans-serif;
}

.category-pill span {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.85);
}

.category-pill:hover {
  border-color: rgba(255, 255, 255, 0.72);
  background: rgba(255, 255, 255, 0.2);
  transform: translateY(-1px);
}

.workflow-panel {
  background: linear-gradient(180deg, #fdfefe 0%, #f6faff 100%);
}

.page-shell--workflow {
  max-width: none;
  width: 100%;
}

.workflow-hero .tool-simple-meta {
  margin-top: 10px;
}

.workflow-console-panel {
  padding: 0;
  overflow: hidden;
}

.workflow-console-form {
  margin: 0;
}

.workflow-console-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  min-height: 660px;
}

.workflow-console-sidebar {
  border-right: 1px solid var(--line);
  background: #f4f6fb;
  padding: 16px 14px 18px;
  display: grid;
  align-content: start;
  gap: 14px;
}

.workflow-profile-card {
  border: 1px solid #dbe2ef;
  border-radius: 12px;
  padding: 12px;
  background: #ffffff;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.workflow-profile-card strong {
  display: block;
  line-height: 1.2;
  font-family: "Space Grotesk", "Manrope", sans-serif;
}

.workflow-profile-card p {
  margin: 2px 0 0;
  color: var(--ink-soft);
  font-size: 12px;
  overflow-wrap: anywhere;
}

.workflow-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(180deg, #f7f9fd 0%, #e8edf7 100%);
  border: 1px solid #d5ddee;
  position: relative;
}

.workflow-avatar::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 50%;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: #b7c2d8;
}

.workflow-avatar::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 9px;
  width: 21px;
  height: 12px;
  margin-left: -10.5px;
  border-radius: 999px;
  background: #b7c2d8;
}

.workflow-sidebar-group h3 {
  margin: 0 0 7px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #5e6c86;
}

.workflow-sidebar-group a {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #2f415f;
  font-weight: 700;
  font-size: 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 8px 10px;
  margin-bottom: 5px;
  transition: background 130ms ease, border-color 130ms ease;
}

.workflow-sidebar-group a:hover {
  background: #edf2fb;
  border-color: #d7dfef;
}

.workflow-sidebar-group a.is-active {
  background: #ffffff;
  border-color: #d0daea;
  color: #15335c;
}

.workflow-sidebar-group p {
  margin: 0;
  color: #526079;
  font-size: 12px;
  line-height: 1.45;
}

.workflow-console-main {
  background: #f4f6fb;
  padding: clamp(14px, 2.1vw, 28px);
}

.workflow-console-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.workflow-console-header .eyebrow {
  margin: 0;
}

.workflow-console-header h2 {
  margin: 0;
  font-size: clamp(1.5rem, 2.7vw, 2.1rem);
}

.workflow-console-card {
  border: 1px solid #dde4f1;
  border-radius: 16px;
  padding: clamp(14px, 2vw, 22px);
  background: #ffffff;
  box-shadow: 0 12px 24px rgba(24, 39, 68, 0.08);
}

.workflow-intro {
  margin-bottom: 12px;
  color: #3d4f6d;
}

.workflow-upload-area {
  border: 1px dashed #cad4e8;
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 14px;
  background: #f8fbff;
}

.workflow-upload-area label {
  display: inline-block;
  margin-bottom: 8px;
  font-weight: 800;
  font-size: 14px;
}

.workflow-table-wrap {
  overflow-x: auto;
  border: 1px solid #dde4ef;
  border-radius: 12px;
}

.workflow-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 700px;
}

.workflow-table th,
.workflow-table td {
  text-align: left;
  padding: 12px 11px;
  border-bottom: 1px solid #edf1f7;
  vertical-align: middle;
}

.workflow-table th {
  background: #f9fbff;
  color: #2e3f5d;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.workflow-table tr:last-child td {
  border-bottom: none;
}

.workflow-table tbody tr {
  cursor: pointer;
  transition: background 120ms ease;
}

.workflow-table tbody tr:hover {
  background: #fbfdff;
}

.workflow-table tbody tr.is-selected {
  background: #f2f7ff;
}

.workflow-empty {
  text-align: center;
  color: #5a6b87;
  font-weight: 600;
}

.workflow-chain {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.workflow-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid #c6d6f0;
  border-radius: 999px;
  padding: 3px 10px;
  background: #eef4ff;
  color: #24497f;
  font-size: 12px;
  font-weight: 700;
}

.workflow-arrow {
  color: #6f7f98;
  font-size: 12px;
  font-weight: 700;
}

.workflow-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.workflow-switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.workflow-switch span {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid #c7d2e7;
  background: #edf2fb;
  position: relative;
  transition: background 120ms ease, border-color 120ms ease;
}

.workflow-switch span::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 2px 5px rgba(27, 42, 72, 0.2);
  transition: transform 120ms ease;
}

.workflow-switch input:checked + span {
  background: #44b37a;
  border-color: #2f9b63;
}

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

.workflow-actions-cell {
  white-space: nowrap;
}

.workflow-icon-btn {
  min-width: 62px;
  margin-right: 5px;
  padding: 6px 9px;
  font-size: 12px;
}

.workflow-icon-btn:last-child {
  margin-right: 0;
}

.workflow-editor {
  margin-top: 13px;
  border: 1px solid #dce4f2;
  border-radius: 14px;
  padding: clamp(13px, 1.7vw, 20px);
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.workflow-editor h3 {
  margin-bottom: 10px;
}

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

.workflow-toolbox {
  margin: 12px 0;
  border: 1px solid #dce5f3;
  border-radius: 12px;
  padding: 11px;
  background: #f7fbff;
}

.workflow-toolbox h4 {
  margin: 0 0 8px;
  font-size: 0.96rem;
}

.workflow-add-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.workflow-tool-picker {
  min-width: 260px;
  flex: 1 1 260px;
}

.workflow-add-tool-btn {
  min-width: 170px;
  justify-content: center;
}

.workflow-step-list-wrap h4 {
  margin: 0 0 8px;
  font-size: 0.96rem;
}

.workflow-step-list {
  display: grid;
  gap: 10px;
}

.workflow-step-empty {
  margin: 0;
  border: 1px dashed #ced9ec;
  border-radius: 11px;
  padding: 12px;
  background: #fbfdff;
  color: #5a6b87;
  font-weight: 600;
}

.workflow-step-item {
  border: 1px solid #d9e2f1;
  border-radius: 12px;
  padding: 11px;
  background: #ffffff;
}

.workflow-step-item-head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  margin-bottom: 9px;
}

.workflow-step-order {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid #c4d5ef;
  background: #edf4ff;
  color: #244a83;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
}

.workflow-step-title {
  font-family: "Space Grotesk", "Manrope", sans-serif;
}

.workflow-step-actions-row {
  justify-self: end;
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

.workflow-step-action {
  min-width: 60px;
  padding: 5px 8px;
  font-size: 12px;
}

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

.workflow-step-controls .field {
  margin: 0;
}

.workflow-step-default-hint {
  margin: 0;
  color: #5a6b87;
  font-size: 13px;
  font-weight: 600;
}

.workflow-editor-actions {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.workflow-notice {
  margin-top: 12px;
  font-weight: 700;
}

.workflow-notice.is-error {
  color: #b32f25;
}

.workflow-notice.is-success {
  color: #146b45;
}

.workflow-actions {
  margin-top: 10px;
}

.hero-stage-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stage-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  background: #ffffff;
  display: grid;
  gap: 6px;
}

.stage-card span {
  width: fit-content;
  border: 1px solid #d3def0;
  border-radius: 999px;
  padding: 3px 8px;
  background: #f3f8ff;
  color: #2e598f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.stage-card h3 {
  margin: 0;
}

.stage-card p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13px;
}

.hub-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.hub-hero-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.hub-summary-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px;
  background: linear-gradient(180deg, #fcfdff 0%, #f4f8ff 100%);
}

.hub-summary-card h2,
.hub-summary-card h3 {
  margin-top: 0;
}

.hub-stat-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hub-stat-grid div {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px;
  background: #ffffff;
  display: grid;
  gap: 2px;
}

.hub-stat-grid strong {
  font-family: "Space Grotesk", "Manrope", sans-serif;
  font-size: 13px;
}

.hub-stat-grid span {
  color: var(--ink-soft);
  font-size: 12px;
}

.tool-hero-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 330px;
}

.tool-main-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f9fcff 100%);
}

.hero-side-panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px;
  background: linear-gradient(180deg, #fbfdff 0%, #f4f8ff 100%);
}

.tool-brief-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-bottom: 10px;
}

.brief-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  background: #ffffff;
  display: grid;
  gap: 2px;
}

.brief-card strong {
  font-size: 11px;
  color: var(--ink-faint);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.brief-card span {
  font-size: 12px;
  color: var(--ink);
  font-weight: 700;
}

.howto-layout {
  display: grid;
  gap: 14px;
  grid-template-columns: minmax(0, 1fr) 220px;
  align-items: start;
}

.howto-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
}

.howto-actions {
  display: grid;
  gap: 8px;
}

.howto-actions .ghost {
  justify-content: center;
}

.guide-hero-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.job-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) 320px;
}

.job-hero {
  background: linear-gradient(180deg, #ffffff 0%, #f6faff 100%);
}

.job-panel-main {
  display: grid;
  gap: 10px;
}

.job-progress-shell {
  border: 1px solid #d4deef;
  border-radius: 16px;
  padding: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  display: grid;
  gap: 14px;
  grid-template-columns: 156px minmax(0, 1fr);
  align-items: center;
}

.job-progress-ring {
  --progress: 0;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#ef4d3d calc(var(--progress) * 1%), #e3ebf8 0);
  box-shadow: 0 14px 28px rgba(43, 73, 120, 0.14);
  position: relative;
}

.job-progress-ring::before {
  content: "";
  position: absolute;
  width: 116px;
  height: 116px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px #deebfb;
}

.job-progress-ring-core {
  position: relative;
  z-index: 1;
  text-align: center;
  display: grid;
  gap: 2px;
}

.job-progress-ring-core strong {
  font-size: 31px;
  line-height: 1;
  font-weight: 900;
  color: #273e67;
  font-family: "Space Grotesk", "Manrope", sans-serif;
}

.job-progress-ring-core span {
  font-size: 12px;
  color: #4d678d;
  font-weight: 700;
}

.job-progress-meta {
  display: grid;
  gap: 8px;
}

.job-status-line,
.job-stage-line {
  margin: 0;
}

.job-stage-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}

.job-poll-notice {
  margin: 0;
  min-height: 18px;
  font-size: 12px;
  color: #5b708f;
}

.job-poll-notice.is-warning {
  color: #9a4f0b;
  font-weight: 700;
}

.job-refresh-chip {
  border-radius: 999px;
  border: 1px solid #d6e3f6;
  background: #f4f8ff;
  color: #3d5c8b;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 700;
}

.job-stage-list {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 9px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.job-stage-list li {
  border: 1px solid #d6e1f0;
  border-radius: 12px;
  padding: 9px 10px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  display: flex;
  align-items: center;
  gap: 6px;
  transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}

.job-stage-list li span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #edf3ff;
  color: #2f5b99;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.job-stage-list li b {
  font-size: 12px;
  color: #334f77;
}

.job-stage-list li.active {
  border-color: #f0b4b0;
  background: #fff4f2;
  transform: translateY(-1px);
}

.job-stage-list li.active span {
  background: #ffdeda;
  color: #b63128;
}

.job-stage-list li.done {
  border-color: #bee2cc;
  background: #edf8f1;
}

.job-stage-list li.done span {
  background: #d8f0e2;
  color: #156b44;
}

.job-panel-side p {
  margin-top: 0;
}

.download-result-btn {
  width: 100%;
  max-width: 340px;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 13px;
  font-size: 18px;
  letter-spacing: 0.01em;
  box-shadow: 0 16px 34px rgba(165, 48, 37, 0.3);
  position: relative;
  overflow: hidden;
}

.download-result-btn::before {
  content: "DL";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 11px;
  font-weight: 900;
}

.download-result-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.24) 46%, rgba(255, 255, 255, 0) 72%);
  transform: translateX(-120%);
  animation: downloadShimmer 2.8s ease-in-out infinite;
}

@keyframes downloadShimmer {
  0% {
    transform: translateX(-120%);
  }
  52% {
    transform: translateX(120%);
  }
  100% {
    transform: translateX(120%);
  }
}

.page-shell.auth-page {
  max-width: none;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 0;
}

.auth-page-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 42vw);
  background: #ffffff;
}

.auth-pane {
  min-width: 0;
}

.auth-pane--left {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 26px 50px;
  background: #f7f8fc;
}

.auth-form-panel {
  width: min(560px, 100%);
}

.auth-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  text-decoration: none;
}

.auth-brand .brand-mark {
  width: 54px;
  height: 54px;
}

.auth-brand .brand-text {
  font-size: clamp(32px, 4vw, 52px);
}

.auth-brand .brand-text-tld {
  font-size: 0.48em;
  margin-left: 2px;
}

.auth-form-panel h1 {
  margin: 0 0 10px;
  font-size: clamp(34px, 3.2vw, 50px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #1e2c43;
}

.auth-subtitle {
  margin: 0 0 18px;
  color: #4f5e74;
  font-size: 18px;
  max-width: 42ch;
}

.auth-social-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.auth-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 11px;
  border: 1px solid #b8c0d2;
  background: #ffffff;
  color: #1f2b42;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.auth-social-icon {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cfd4df;
  color: #475062;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.auth-social:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(24, 41, 70, 0.12);
}

.auth-social--facebook {
  border-color: #3958a5;
  background: #3958a5;
  color: #ffffff;
}

.auth-social--facebook .auth-social-icon {
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.17);
  color: #ffffff;
}

.auth-social--google {
  border-color: #ea5850;
  background: #ffffff;
}

.auth-social--google .auth-social-icon {
  color: #dd3d33;
}

.auth-social--microsoft {
  border-color: #acb3c1;
}

.auth-social--microsoft .auth-social-icon {
  background: #f2f4f9;
}

.auth-social.is-disabled {
  opacity: 0.45;
  pointer-events: none;
  box-shadow: none;
}

.auth-form-card {
  max-width: 540px;
}

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

.auth-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 54px;
  border: 1px solid #abb2c1;
  border-radius: 8px;
  background: #ffffff;
}

.auth-input-wrap:focus-within {
  border-color: #e25346;
  box-shadow: 0 0 0 3px rgba(226, 83, 70, 0.15);
}

.auth-input-icon {
  position: absolute;
  left: 13px;
  width: 20px;
  height: 20px;
  color: #7b8392;
  pointer-events: none;
}

.auth-input-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.auth-input-wrap input {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  padding: 15px 14px 15px 44px;
  color: #1f2b42;
  font-size: 15px;
  font-weight: 600;
}

.auth-input-wrap input:focus {
  border: 0;
  box-shadow: none;
  outline: 0;
}

.auth-input-wrap input::placeholder {
  color: #8e95a3;
  font-weight: 500;
}

.auth-link {
  display: inline-block;
  margin-top: 4px;
  font-weight: 700;
  color: #df3d34;
  text-decoration: underline;
}

.auth-submit {
  min-width: 120px;
  width: 138px;
  margin: 8px auto 0;
  justify-content: center;
  font-size: 18px;
}

.auth-switch {
  margin: 18px 0 0;
  text-align: center;
  color: #374259;
  font-size: 16px;
}

.auth-switch a {
  color: #df3d34;
  font-weight: 700;
}

.auth-switch--subtle {
  margin-top: 8px;
  font-size: 14px;
  color: #6e7789;
}

.auth-form-panel .callout {
  margin: 0 0 16px;
}

.auth-pane--right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px 46px;
  background: linear-gradient(180deg, #ebedf3 0%, #e7e9f1 100%);
}

.auth-side-panel {
  width: min(560px, 100%);
}

.auth-visual {
  margin-bottom: 30px;
  border: 1px solid #d6dceb;
  border-radius: 20px;
  background: linear-gradient(180deg, #f7f8fc 0%, #f1f3f9 100%);
  padding: 18px;
  box-shadow: 0 24px 42px rgba(39, 55, 84, 0.13);
}

.auth-visual svg {
  width: 100%;
  height: auto;
  display: block;
}

.auth-side-panel h2 {
  margin: 0 0 14px;
  font-size: clamp(32px, 2.7vw, 47px);
  letter-spacing: -0.03em;
  line-height: 1.08;
  color: #202e46;
}

.auth-side-panel p {
  margin: 0 0 20px;
  color: #425069;
  font-size: 18px;
  line-height: 1.65;
}

.auth-tools-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #202e46;
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
}

.auth-tools-link::after {
  content: ">";
  font-size: 17px;
  line-height: 1;
}

.auth-tools-link:hover {
  text-decoration: underline;
}

.faq-panel {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

@media (max-width: 1040px) {
  .hero-grid,
  .hero-grid-expanded,
  .tool-grid,
  .hub-hero-grid,
  .tool-hero-grid,
  .guide-hero-grid,
  .job-grid,
  .auth-page-layout,
  .footer-grid {
    grid-template-columns: 1fr;
  }

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

  .auth-pane--left {
    padding: 30px 16px 40px;
  }

  .auth-pane--right {
    padding: 30px 18px 38px;
  }

  .auth-form-panel {
    width: min(600px, 100%);
  }

  .auth-brand {
    margin: 0 auto 18px;
  }

  .auth-form-panel h1,
  .auth-subtitle {
    text-align: center;
  }

  .auth-subtitle {
    margin-left: auto;
    margin-right: auto;
  }

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

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

  .hero-stage-grid,
  .tool-simple-info-grid,
  .tool-brief-grid,
  .tool-intent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .header-inner {
    flex-wrap: wrap;
  }

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

  .tool-side-pane {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 12px;
    border-left: none;
  }

  .tool-actions-sticky {
    position: static;
  }

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

  .sign-side-pane {
    position: static;
    max-height: none;
    overflow: visible;
    padding: 12px;
    border-left: none;
  }

  .sign-editor-viewer {
    min-height: 0;
  }

  .sign-actions-sticky {
    position: static;
  }

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

  .workflow-console-sidebar {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }

  .workflow-editor-grid,
  .workflow-step-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .main-nav {
    width: 100%;
    order: 3;
  }

  .lang-switcher {
    order: 2;
  }

  .page-shell {
    padding: 12px 10px 38px;
  }

  .panel {
    border-radius: 20px;
    padding: 15px;
  }

  .stepper,
  .job-stage-list,
  .hero-stats,
  .hub-stat-grid,
  .hero-stage-grid,
  .tool-simple-info-grid,
  .tool-intent-grid,
  .tool-brief-grid,
  .settings-grid,
  .howto-layout,
  .flow-aside,
  .limit-columns,
  .work-grid,
  .proof-grid {
    grid-template-columns: 1fr;
  }

  .file-toolbar {
    align-items: flex-start;
    flex-direction: column;
  }

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

  .sign-tab-nav {
    grid-template-columns: 1fr;
  }

  .sign-tab-btn {
    border-right: none;
    border-bottom: 1px solid #d8e2f1;
  }

  .sign-tab-btn:last-child {
    border-bottom: none;
  }

  .sign-submode-nav {
    width: 100%;
  }

  .sign-submode-btn {
    flex: 1 1 32%;
    text-align: center;
  }

  .pdf-placement-toolbar .sign-submode-btn {
    flex: 1 1 100%;
  }

  .pdf-page-header {
    font-size: 11px;
  }

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

  .sign-tool-btn--row {
    grid-template-columns: 12px 24px minmax(0, 1fr);
  }

  .sign-tool-btn-preview,
  .sign-tool-btn-meta {
    display: none;
  }

  .sign-viewer-main {
    grid-template-columns: 1fr;
  }

  .pdf-thumb-sidebar {
    max-height: 180px;
  }

  .pdf-page-viewport {
    max-height: 64vh;
    padding: 8px;
  }

  .viewer-toolbar-group {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
  }

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

  .range-builder-row .range-action {
    width: 100%;
  }

  .file-toolbar-actions {
    width: 100%;
  }

  .file-sort-select {
    min-width: 0;
    flex: 1;
  }

  .file-list-item {
    grid-template-columns: auto 40px minmax(0, 1fr);
  }

  .file-item-actions {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }

  .file-item-preview {
    width: 40px;
    height: 40px;
  }

  .file-live-preview-grid {
    grid-template-columns: 1fr;
  }

  .file-live-body {
    min-height: 160px;
  }

  .workflow-console-main {
    padding: 12px;
  }

  .workflow-console-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .workflow-console-header .ghost {
    width: 100%;
    justify-content: center;
  }

  .workflow-editor-grid,
  .workflow-step-controls {
    grid-template-columns: 1fr;
  }

  .workflow-tool-picker {
    min-width: 0;
    width: 100%;
  }

  .workflow-add-tool-btn {
    width: 100%;
  }

  .workflow-step-item-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .workflow-step-actions-row {
    justify-self: start;
  }

  .workflow-editor-actions {
    justify-content: stretch;
    flex-direction: column;
  }

  .workflow-editor-actions .ghost,
  .workflow-editor-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Reference-style UI refresh for homepage and tool pages */
body {
  background: linear-gradient(180deg, #bdd6f6 0%, #dbe9fa 28%, #ebf2fb 62%, #f1f5fb 100%);
}

body::before {
  background:
    radial-gradient(ellipse at 8% 56%, rgba(255, 255, 255, 0.86) 0 16%, transparent 16.2%),
    radial-gradient(ellipse at 20% 60%, rgba(255, 255, 255, 0.84) 0 14%, transparent 14.2%),
    radial-gradient(ellipse at 31% 57%, rgba(255, 255, 255, 0.74) 0 18%, transparent 18.2%),
    radial-gradient(ellipse at 72% 66%, rgba(255, 255, 255, 0.65) 0 19%, transparent 19.2%),
    radial-gradient(ellipse at 88% 60%, rgba(255, 255, 255, 0.6) 0 16%, transparent 16.2%),
    linear-gradient(180deg, rgba(173, 201, 236, 0.55) 0%, rgba(239, 245, 252, 0.55) 70%);
}

body::after {
  background:
    radial-gradient(circle at 7% 49%, rgba(255, 255, 255, 0.75) 0 2px, transparent 2.2px),
    radial-gradient(circle at 24% 62%, rgba(255, 255, 255, 0.7) 0 2px, transparent 2.2px),
    radial-gradient(circle at 80% 64%, rgba(255, 255, 255, 0.64) 0 2px, transparent 2.2px),
    radial-gradient(circle at 92% 74%, rgba(255, 255, 255, 0.62) 0 2px, transparent 2.2px);
}

.site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #cfd8e8;
}

.header-inner {
  padding: 10px 18px;
  gap: 14px;
}

.main-nav {
  gap: 2px;
  margin-left: 16px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.main-nav a {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #1f2f4f;
  text-transform: uppercase;
  border-radius: 8px;
}

.main-nav a:hover {
  background: #edf2fb;
  color: #15305f;
}

.btn,
.btn.primary {
  border: 1px solid #d83a34;
  background: linear-gradient(180deg, #f74b49 0%, #e83132 100%);
  box-shadow: 0 8px 14px rgba(214, 51, 61, 0.23);
  color: #ffffff;
  font-weight: 800;
}

.btn:hover,
.btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(214, 51, 61, 0.28);
}

.ghost {
  border: 1px solid #cad5e8;
  background: #ffffff;
  color: #2b3f67;
  font-weight: 700;
}

.page-shell--home,
.page-shell--tool {
  max-width: 1280px;
  padding: 30px 18px 58px;
}

.page-shell--sign,
.page-shell--workflow {
  max-width: 1240px;
  padding: 24px 18px 58px;
}

.page-shell--home .panel,
.page-shell--tool .panel {
  border: 1px solid #d2ddef;
  border-radius: 24px;
  background: rgba(246, 249, 254, 0.98);
  box-shadow: 0 16px 34px rgba(44, 66, 102, 0.11);
}

.page-shell--sign .panel,
.page-shell--workflow .panel {
  border: 1px solid #d2ddef;
  border-radius: 20px;
  background: rgba(246, 249, 254, 0.98);
  box-shadow: 0 14px 30px rgba(44, 66, 102, 0.1);
}

.home-reference-hero,
.tool-simple-hero {
  padding: 44px 34px 34px;
  text-align: center;
  background:
    radial-gradient(130% 80% at 50% 100%, rgba(179, 206, 240, 0.54) 0%, rgba(246, 249, 254, 0) 70%),
    #f6f9fe;
}

.home-reference-hero .eyebrow,
.tool-simple-hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #3f66b8;
}

.home-reference-hero .eyebrow::before,
.home-reference-hero .eyebrow::after,
.tool-simple-hero .eyebrow::before,
.tool-simple-hero .eyebrow::after {
  content: "";
  width: 54px;
  height: 1px;
  background: #9eb5de;
}

.home-reference-hero h1,
.tool-simple-hero h1 {
  margin-top: 14px;
  margin-bottom: 12px;
  font-size: clamp(40px, 4.7vw, 62px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: #2a385f;
}

.home-reference-hero .tool-simple-subtitle,
.tool-simple-hero .tool-simple-subtitle {
  max-width: 940px;
  margin: 0 auto;
  font-size: clamp(18px, 1.55vw, 30px);
  color: #33486e;
}

.home-hero-actions,
.tool-hero-actions {
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.home-hero-actions .btn,
.tool-hero-actions .btn {
  min-width: 214px;
  min-height: 50px;
  font-size: 17px;
}

.home-hero-secondary,
.tool-hero-actions .ghost {
  min-width: 214px;
  justify-content: center;
  min-height: 50px;
  font-size: 17px;
}

.home-hero-trust,
.tool-hero-trust {
  margin: 14px 0 0;
  font-weight: 700;
  color: #30466f;
}

.home-trust-strip {
  margin: 14px auto 0;
  max-width: 1060px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.home-trust-pill {
  margin: 0;
  border: 1px solid #cfdbee;
  border-radius: 13px;
  background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 5px 12px rgba(40, 66, 108, 0.12);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
}

.home-trust-pill-icon {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #c8d7ef;
  background: linear-gradient(180deg, #eef4ff 0%, #dce9fb 100%);
  color: #2e4e87;
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
}

.home-trust-pill-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-trust-pill-copy {
  min-width: 0;
  display: grid;
  gap: 0;
}

.home-trust-pill-copy strong {
  font-size: 14px;
  color: #243f71;
  line-height: 1.25;
}

.home-trust-pill-copy small {
  font-size: 12px;
  color: #56719e;
  line-height: 1.25;
}

.home-quick-links {
  margin-top: 12px;
  justify-content: center;
}

.tool-simple-meta {
  margin-top: 12px;
  justify-content: center;
}

.tool-simple-hero--minimal {
  padding: 24px 30px 20px;
}

.tool-simple-hero--minimal .eyebrow {
  margin: 0;
  font-size: clamp(20px, 2.4vw, 30px);
  letter-spacing: 0;
  color: #2b4068;
}

.tool-simple-hero--minimal .eyebrow::before,
.tool-simple-hero--minimal .eyebrow::after {
  display: none;
}

.tool-simple-hero--minimal .tool-simple-subtitle {
  max-width: 980px;
  margin-top: 6px;
  font-size: clamp(16px, 1.35vw, 23px);
}

.hero-chip {
  border-color: #cdd9ec;
  background: #f7fbff;
  color: #334d79;
}

.page-shell--tool .tool-simple-workbench,
.page-shell--home .home-reference-workbench {
  padding: 14px;
}

.page-shell--tool .stepper-simple {
  display: none;
}

.page-shell--tool .tool-layout-grid,
.home-reference-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 14px;
  align-items: start;
}

.page-shell--tool .tool-main-pane,
.page-shell--tool .tool-side-pane {
  padding: 0;
}

.page-shell--tool .form-column,
.home-reference-card {
  border: 1px solid #d8e1f0;
  border-radius: 18px;
  background: #f9fbff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  padding: 0;
  overflow: hidden;
}

.page-shell--tool .form-column > h2,
.home-reference-card > h2 {
  margin: 0;
  padding: 16px 20px;
  border-bottom: 1px solid #d7e1f0;
  font-size: clamp(22px, 1.4vw, 30px);
  line-height: 1.18;
  color: #2a3f67;
}

.page-shell--tool .upload-dropzone,
.home-reference-dropzone {
  margin: 12px;
  border: 2px dashed #ccdaee;
  border-radius: 14px;
  background: linear-gradient(180deg, #f3f7fd 0%, #edf3fb 100%);
  padding: 18px 16px;
}

.page-shell--tool .field-upload {
  max-width: none;
  position: relative;
  margin: 0;
  border: 1px dashed #c8d9ef;
  border-radius: 12px;
  padding: 64px 14px 14px;
  background: linear-gradient(180deg, #f8fbff 0%, #edf4fd 100%);
}

.page-shell--tool .field-upload::before {
  content: "↑";
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: linear-gradient(180deg, #b8cceb 0%, #8daedb 100%);
  color: #ffffff;
  font-size: 24px;
  font-weight: 900;
  display: grid;
  place-items: center;
}

.page-shell--tool .field-upload label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto 8px;
  text-align: center;
  font-size: 17px;
  font-weight: 900;
  color: #ffffff;
  border: 1px solid #e45a4d;
  border-radius: 13px;
  padding: 14px 22px;
  background: linear-gradient(180deg, #f25044 0%, #db3d32 100%);
  box-shadow: 0 14px 26px rgba(170, 54, 42, 0.27);
  letter-spacing: 0.01em;
  transition: transform 150ms ease, box-shadow 150ms ease, filter 150ms ease;
}

.page-shell--tool .field-upload label::before {
  content: "UP";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.24);
  font-size: 11px;
  font-weight: 900;
}

.page-shell--tool .upload-dropzone:hover .field-upload label,
.page-shell--tool .upload-dropzone.drag-over .field-upload label {
  transform: translateY(-1px);
  box-shadow: 0 18px 30px rgba(170, 54, 42, 0.32);
}

.page-shell--tool .file-input-large {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  padding: 0;
  margin: 0;
  border: 0;
}

.home-reference-dropzone {
  text-align: center;
  display: grid;
  gap: 6px;
}

.home-drop-icon {
  width: 54px;
  height: 54px;
  margin: 0 auto 4px;
  border-radius: 999px;
  background: linear-gradient(180deg, #b9cdec 0%, #8fb0df 100%);
  color: #ffffff;
  font-size: 28px;
  font-weight: 900;
  display: grid;
  place-items: center;
}

.home-file-overview {
  margin: 12px 14px 14px;
  border-top: 1px solid #d6e1f0;
  padding-top: 12px;
}

.home-file-overview h3 {
  margin: 0 0 10px;
  font-size: 18px;
}

.home-file-overview ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.home-file-overview a {
  display: block;
  border: 1px solid #d4e0f0;
  border-radius: 10px;
  background: #f2f6fd;
  padding: 10px 12px;
  text-decoration: none;
  color: #2f456f;
  font-weight: 700;
}

.home-file-overview a:hover {
  border-color: #a3bbdf;
  background: #ffffff;
}

.home-setting-box {
  margin: 14px;
  border: 1px solid #d8e2f2;
  border-radius: 12px;
  background: #f5f9ff;
  padding: 14px;
}

.home-setting-box h3 {
  margin-top: 0;
  margin-bottom: 12px;
  font-size: 21px;
}

.home-category-summary {
  margin: 0 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.home-category-summary li {
  border: 1px solid #d5e0f0;
  border-radius: 10px;
  background: #ffffff;
  padding: 9px 12px;
  color: #2f4469;
}

.home-main-action {
  width: 100%;
  margin-top: 8px;
  justify-content: center;
}

.page-shell--tool .settings-disclosure {
  border-radius: 18px;
  border: 1px solid #d8e1f0;
  background: #f9fbff;
  padding-bottom: 10px;
  overflow: hidden;
}

.page-shell--tool .settings-disclosure summary {
  border-bottom: 1px solid #d8e1f0;
  background: #f3f7fe;
  padding: 14px 16px;
  font-size: 20px;
}

.page-shell--tool .settings-disclosure > .hint,
.page-shell--tool .settings-disclosure > .settings-grid,
.page-shell--tool .settings-disclosure > .settings-footer {
  margin-inline: 12px;
}

.page-shell--tool .settings-grid {
  gap: 8px;
}

.page-shell--tool .setting-card {
  border: 1px solid #d5deef;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(37, 60, 96, 0.06);
  padding: 11px;
}

.page-shell--tool .setting-head {
  margin-bottom: 7px;
}

.page-shell--tool .setting-title {
  font-size: 16px;
  color: #253b66;
}

.page-shell--tool .setting-choice {
  min-height: 0;
  padding: 8px 10px;
  border-radius: 9px;
}

.page-shell--tool .setting-choice span {
  font-size: 14px;
}

.page-shell--tool .setting-choice small {
  font-size: 12px;
}

.page-shell--tool .setting-hint,
.page-shell--tool .hint,
.home-reference-workbench .hint {
  font-size: 14px;
  color: #42597f;
}

.page-shell--tool .tool-actions-sticky {
  margin-top: 10px;
  border-radius: 12px;
  border: 1px solid #d4dff0;
  background: #f8fbff;
  padding: 9px;
}

.page-shell--tool .tool-actions-sticky .btn {
  width: 100%;
  justify-content: center;
  min-height: 50px;
  font-size: 18px;
}

.page-shell--tool .tool-simple-info-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.page-shell--tool .simple-info-card {
  border: 1px solid #d4deef;
  border-radius: 14px;
  background: #f9fbff;
  padding: 12px;
}

.page-shell--tool .faq-panel details,
.page-shell--tool .related-list a {
  border-color: #d7e1f0;
  background: #f7faff;
}

.home-reference-foot-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.home-mini-card {
  border: 1px solid #d4deef;
  border-radius: 14px;
  background: #f9fbff;
  padding: 12px;
}

.home-mini-card h3 {
  margin: 0 0 6px;
  font-size: 19px;
  color: #2b4068;
}

.home-meta-band {
  text-align: center;
}

.home-meta-band h2 {
  margin-bottom: 8px;
}

.home-seo-text {
  max-width: 1240px;
}

.home-seo-text h2 {
  margin-bottom: 10px;
}

.home-seo-text p {
  margin: 0 0 10px;
  color: #354b6e;
  font-size: 17px;
  line-height: 1.7;
}

.home-seo-text p:last-of-type {
  margin-bottom: 0;
}

.home-how-works {
  max-width: 1240px;
}

.home-how-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.home-how-steps li {
  border: 1px solid #d4deef;
  border-radius: 14px;
  background: #f9fbff;
  padding: 14px;
  display: grid;
  gap: 4px;
}

.home-how-steps li strong {
  color: #2b4068;
  font-size: 18px;
}

.home-how-steps li span {
  color: #42597f;
  font-size: 15px;
  line-height: 1.5;
}

.home-faq-panel {
  max-width: 1240px;
}

.home-faq-panel details {
  border: 1px solid #d7e1f0;
  background: #f7faff;
}

.ai-tools-panel {
  scroll-margin-top: 88px;
}

.ai-tool-card {
  border-color: #cfd8ea;
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(126, 151, 222, 0.12) 0%, rgba(255, 255, 255, 0) 62%),
    #f9fbff;
}

@media (max-width: 1200px) {
  .header-inner {
    gap: 10px;
  }

  .main-nav a {
    font-size: 12px;
    padding-inline: 8px;
  }

  .page-shell--tool .tool-layout-grid,
  .home-reference-grid {
    grid-template-columns: 1fr;
  }

  .home-reference-foot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-trust-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-how-steps {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 800px) {
  .page-shell--home,
  .page-shell--tool {
    padding-inline: 10px;
  }

  .main-nav {
    margin-left: 8px;
    max-width: 52vw;
  }

  .home-reference-hero h1,
  .tool-simple-hero h1 {
    font-size: 42px;
  }

  .home-reference-hero .tool-simple-subtitle,
  .tool-simple-hero .tool-simple-subtitle {
    font-size: 20px;
  }

  .home-reference-foot-grid {
    grid-template-columns: 1fr;
  }

  .home-trust-strip {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
}

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

/* Foxy Pro UX system refresh (global final override layer) */
:root {
  --fx-bg-top: #a9c7ee;
  --fx-bg-mid: #dbe9fb;
  --fx-bg-bottom: #eef3fb;
  --fx-glass: rgba(255, 255, 255, 0.86);
  --fx-glass-strong: rgba(255, 255, 255, 0.94);
  --fx-ink: #17243c;
  --fx-ink-soft: #3a4d71;
  --fx-brand-a: #ff5e4a;
  --fx-brand-b: #df2e35;
  --fx-brand-c: #ff8b58;
  --fx-line: #c6d7ef;
  --fx-line-strong: #a8c0e3;
  --fx-shadow-xl: 0 28px 52px rgba(21, 44, 84, 0.2);
  --fx-shadow-lg: 0 16px 34px rgba(23, 46, 90, 0.16);
  --fx-shadow-md: 0 10px 22px rgba(24, 43, 80, 0.12);
  --fx-shadow-sm: 0 6px 12px rgba(24, 44, 83, 0.08);
}

body {
  color: var(--fx-ink);
  background:
    radial-gradient(140% 90% at -10% -16%, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 44%),
    radial-gradient(100% 80% at 110% -10%, rgba(250, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 42%),
    linear-gradient(180deg, var(--fx-bg-top) 0%, var(--fx-bg-mid) 38%, var(--fx-bg-bottom) 100%);
}

body::before {
  background:
    radial-gradient(44% 20% at 9% 66%, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(36% 18% at 30% 71%, rgba(255, 255, 255, 0.76) 0%, rgba(255, 255, 255, 0) 74%),
    radial-gradient(40% 16% at 76% 69%, rgba(255, 255, 255, 0.68) 0%, rgba(255, 255, 255, 0) 74%),
    radial-gradient(26% 12% at 93% 73%, rgba(255, 255, 255, 0.62) 0%, rgba(255, 255, 255, 0) 80%);
}

body::after {
  background:
    radial-gradient(circle at 8% 52%, rgba(255, 255, 255, 0.56) 0 1.9px, transparent 2.1px),
    radial-gradient(circle at 23% 61%, rgba(255, 255, 255, 0.54) 0 2px, transparent 2.2px),
    radial-gradient(circle at 78% 63%, rgba(255, 255, 255, 0.5) 0 1.9px, transparent 2.1px),
    radial-gradient(circle at 92% 76%, rgba(255, 255, 255, 0.48) 0 1.8px, transparent 2px);
}

.site-header {
  border-bottom: 1px solid rgba(166, 192, 226, 0.72);
  background: rgba(246, 251, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.header-inner {
  max-width: 1440px;
  min-height: 76px;
  padding: 10px 20px;
  gap: 16px;
}

.brand {
  font-size: 19px;
  letter-spacing: 0.015em;
}

.brand-mark {
  width: 36px;
  height: 36px;
  filter: drop-shadow(0 6px 10px rgba(221, 55, 49, 0.34));
}

.main-nav {
  gap: 4px;
}

.main-nav a {
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.55);
  color: #1f3459;
  border-radius: 10px;
  font-size: 12px;
  padding: 8px 12px;
}

.main-nav a:hover {
  border-color: #b8cae6;
  background: #ffffff;
  color: #173664;
  box-shadow: 0 8px 16px rgba(31, 59, 108, 0.14);
  transform: translateY(-1px);
}

.top-right .ghost {
  border-color: #bbcee8;
  background: rgba(255, 255, 255, 0.74);
}

.page-shell--home,
.page-shell--tool {
  max-width: 1380px;
  padding-top: 34px;
}

.page-shell--sign,
.page-shell--workflow {
  max-width: 1360px;
}

.panel {
  border-color: #cbdaf0;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(246, 250, 255, 0.96) 100%);
  box-shadow: var(--fx-shadow-md);
}

.panel::before {
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 109, 87, 0.42), rgba(77, 124, 213, 0.35));
}

.panel h1,
.panel h2,
.panel h3 {
  color: #20365f;
}

.home-reference-hero,
.tool-simple-hero,
.workflow-hero,
.sign-hero,
.hub-hero,
.guide-hero,
.job-hero {
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(156, 191, 236, 0.65) 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(250, 253, 255, 0.94) 0%, rgba(240, 247, 255, 0.94) 100%);
}

.home-reference-hero h1,
.tool-simple-hero h1,
.workflow-hero h1,
.sign-hero h1 {
  letter-spacing: -0.035em;
  color: #1f3258;
  text-wrap: balance;
}

.tool-simple-subtitle {
  color: #2f4772;
  text-wrap: pretty;
}

.home-trust-pill,
.hero-chip,
.pill,
.workflow-chip {
  border-color: #c2d5ef;
  background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 100%);
  color: #2a466f;
  box-shadow: var(--fx-shadow-sm);
}

.cards-grid .tool-card,
.work-card {
  border-color: #c7d8ef;
  background:
    radial-gradient(circle at 95% -20%, rgba(113, 147, 213, 0.17), rgba(113, 147, 213, 0) 42%),
    linear-gradient(180deg, #ffffff 0%, #f3f8ff 100%);
  box-shadow: var(--fx-shadow-sm);
}

.cards-grid .tool-card:hover,
.work-card:hover {
  border-color: #a9c3e5;
  box-shadow: var(--fx-shadow-lg);
  transform: translateY(-4px);
}

.btn,
.btn.primary,
button.btn.primary,
button[type="submit"] {
  position: relative;
  overflow: hidden;
  border-color: #d83634;
  background: linear-gradient(135deg, var(--fx-brand-a) 0%, var(--fx-brand-b) 55%, var(--fx-brand-c) 100%);
  box-shadow: 0 14px 24px rgba(204, 57, 56, 0.26);
}

.btn::before,
.btn.primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.36) 0%, rgba(255, 255, 255, 0) 45%);
  pointer-events: none;
}

.btn:hover,
.btn.primary:hover {
  box-shadow: 0 16px 28px rgba(206, 56, 56, 0.3);
}

.ghost {
  border-color: #bfd0e8;
  background: rgba(255, 255, 255, 0.82);
  color: #26406b;
  box-shadow: 0 8px 16px rgba(30, 57, 103, 0.08);
}

.ghost:hover {
  border-color: #abc1e1;
  background: #ffffff;
  box-shadow: 0 10px 18px rgba(31, 61, 108, 0.12);
}

input,
select,
textarea {
  border-color: var(--fx-line);
  background: rgba(255, 255, 255, 0.94);
}

input:hover,
select:hover,
textarea:hover {
  border-color: #acc3e3;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #eb5a46;
  box-shadow: 0 0 0 4px rgba(233, 81, 61, 0.16);
}

.tool-layout-grid,
.workflow-console-layout,
.sign-layout-grid,
.home-reference-grid {
  border-color: var(--fx-line);
  border-radius: 20px;
  background: rgba(241, 246, 255, 0.94);
}

.form-column,
.home-reference-card,
.workflow-console-sidebar,
.workflow-console-card,
.workflow-editor,
.sign-side-card,
.sign-editor-panel,
.sign-mode-panel,
.sign-details-panel,
.sign-toolbox-panel,
.sign-output-panel {
  border-color: #c8d9ef;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(246, 250, 255, 0.97) 100%);
  box-shadow: var(--fx-shadow-sm);
}

.upload-dropzone,
.home-reference-dropzone,
.workflow-upload-area {
  border-color: #c5d8f0;
  background: linear-gradient(180deg, rgba(247, 251, 255, 0.95) 0%, rgba(236, 245, 255, 0.95) 100%);
}

.upload-dropzone.drag-over,
.upload-dropzone:hover {
  border-color: #8eb0de;
  box-shadow: 0 0 0 4px rgba(99, 139, 205, 0.16), var(--fx-shadow-md);
}

.field-upload {
  border-color: #c4d8f2;
  background: linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}

.field-upload label {
  border-color: #df4d3d;
  box-shadow: 0 12px 22px rgba(179, 52, 41, 0.28);
}

.field-upload label:hover {
  transform: translateY(-1px);
}

.settings-disclosure,
.setting-card,
.simple-info-card,
.home-mini-card,
.faq-panel details,
.related-list a,
.workflow-step-item,
.workflow-table-wrap {
  border-color: #ccdbee;
  background: rgba(252, 254, 255, 0.96);
}

.tool-intent-panel p {
  margin: 0 0 14px;
  color: #2c446d;
  line-height: 1.65;
}

.tool-intent-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.use-case-card-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 6px;
}

.use-case-card-links a {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border: 1px solid #c9d9ee;
  border-radius: 999px;
  color: #294870;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  background: #fff;
}

.use-case-card-links a:hover {
  border-color: #a9c2e1;
  color: #173a64;
}

.use-case-card-hint {
  margin-top: 2px;
}

.use-case-open-link {
  margin-top: 8px;
  align-self: flex-start;
}

.stepper li,
.workflow-table th,
.workflow-table td {
  border-color: #cad9ee;
}

.stepper li.active,
.workflow-table tbody tr.is-selected {
  border-color: #f2bab1;
  background: linear-gradient(180deg, #fff6f4 0%, #fff3f1 100%);
}

.stepper li.done {
  border-color: #b8e0cb;
  background: linear-gradient(180deg, #effaf4 0%, #e7f6ee 100%);
}

.tool-actions-sticky,
.sign-actions-sticky,
.workflow-actions {
  border-color: #c4d7ee;
  background: rgba(247, 251, 255, 0.96);
  box-shadow: var(--fx-shadow-sm);
}

.tool-actions-sticky .btn,
.sign-actions-sticky .btn,
.workflow-actions .btn {
  min-height: 52px;
  font-size: 18px;
}

.download-result-btn {
  border: 1px solid #da3d37;
  background: linear-gradient(135deg, #ff5d47 0%, #e03137 62%, #ff8f5f 100%);
  box-shadow: 0 18px 30px rgba(194, 57, 54, 0.28);
}

.download-result-btn:hover {
  box-shadow: 0 20px 32px rgba(194, 57, 54, 0.34);
}

.job-progress-ring {
  box-shadow: 0 12px 26px rgba(41, 73, 125, 0.22);
}

.job-progress-ring-core {
  background: linear-gradient(180deg, #fdfefe 0%, #f0f6ff 100%);
}

.job-stage-list li.active {
  box-shadow: 0 8px 14px rgba(43, 88, 160, 0.14);
}

.site-footer {
  border-top: 1px solid #c4d6ed;
  background: linear-gradient(180deg, rgba(248, 251, 255, 0.95) 0%, rgba(240, 246, 255, 0.95) 100%);
}

@media (max-width: 1100px) {
  .header-inner {
    padding-inline: 12px;
  }

  .main-nav {
    max-width: 56vw;
  }

  .panel {
    border-radius: 18px;
  }
}

@media (max-width: 760px) {
  .page-shell--home,
  .page-shell--tool,
  .page-shell--sign,
  .page-shell--workflow {
    padding-inline: 10px;
    padding-top: 20px;
  }

  .main-nav a {
    padding: 7px 10px;
    font-size: 11px;
  }

  .home-reference-hero h1,
  .tool-simple-hero h1,
  .workflow-hero h1,
  .sign-hero h1 {
    font-size: clamp(30px, 10vw, 40px);
  }

  .tool-simple-subtitle {
    font-size: 17px;
  }

  .btn,
  .btn.primary,
  .ghost {
    min-height: 46px;
  }
}

/* Header dropdown navigation */
.main-nav {
  position: relative;
  overflow: visible;
  max-width: none;
  scrollbar-width: none;
}

.main-nav .nav-dropdown {
  position: relative;
}

.main-nav .nav-dropdown summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.56);
  color: #1f3459;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, box-shadow 140ms ease;
}

.main-nav .nav-dropdown summary::-webkit-details-marker {
  display: none;
}

.main-nav .nav-dropdown summary i {
  font-style: normal;
  font-size: 11px;
  line-height: 1;
  color: #4f6690;
  transition: transform 140ms ease;
}

.main-nav .nav-dropdown[open] summary {
  border-color: #b2c6e4;
  background: #ffffff;
  box-shadow: 0 8px 16px rgba(31, 59, 108, 0.16);
}

.main-nav .nav-dropdown[open] summary i {
  transform: rotate(180deg);
}

.main-nav .nav-dropdown-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 210;
  width: min(420px, 72vw);
  border: 1px solid #b8cbe8;
  border-radius: 16px;
  background:
    radial-gradient(circle at 100% -20%, rgba(143, 173, 226, 0.24), rgba(143, 173, 226, 0) 48%),
    linear-gradient(180deg, #ffffff 0%, #f5f9ff 100%);
  box-shadow: 0 18px 36px rgba(24, 50, 96, 0.2);
  overflow: hidden;
}

.main-nav .nav-dropdown-main-link {
  display: block;
  margin: 10px 10px 8px;
  padding: 10px 12px;
  border: 1px solid #c8d8ef;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff8f6 0%, #ffefec 100%);
  color: #b1342c;
  text-decoration: none;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.main-nav .nav-dropdown-main-link:hover {
  border-color: #ebb0aa;
  background: #fff5f2;
}

.main-nav .nav-dropdown-links {
  padding: 0 10px 10px;
  display: grid;
  gap: 6px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.main-nav .nav-dropdown-links a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #d0deef;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.86);
  color: #243f6c;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: none;
  letter-spacing: 0.01em;
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}

.main-nav .nav-dropdown-links a:hover {
  border-color: #adc3e2;
  background: #ffffff;
  transform: translateY(-1px);
}

.main-nav .nav-dropdown-link-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  border: 1px solid #cbdbef;
  background: linear-gradient(180deg, #f6faff 0%, #eaf2ff 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.main-nav .nav-dropdown-link-icon .tool-icon {
  width: 16px;
  height: 16px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #2e588f;
}

.main-nav .nav-dropdown-links a > span:last-child {
  min-width: 0;
  flex: 1;
}

@media (max-width: 1080px) {
  .main-nav .nav-dropdown-panel {
    width: min(360px, 80vw);
  }

  .main-nav .nav-dropdown-links {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 760px) {
  .main-nav {
    gap: 6px;
    overflow-x: auto;
    overflow-y: visible;
    max-width: 56vw;
    scrollbar-width: thin;
  }

  .main-nav .nav-dropdown {
    position: static;
  }

  .main-nav .nav-dropdown-panel {
    position: fixed;
    top: 76px;
    left: 10px;
    right: 10px;
    width: auto;
    max-height: calc(100vh - 96px);
    overflow: auto;
  }

  .main-nav .nav-dropdown summary {
    padding: 7px 10px;
  }
}

@media (max-width: 960px) {
  .auth-pane--right {
    display: none;
  }

  .auth-page-layout {
    min-height: auto;
  }

  .auth-pane--left {
    min-height: 100vh;
  }
}

@media (max-width: 640px) {
  .auth-brand .brand-mark {
    width: 46px;
    height: 46px;
  }

  .auth-brand .brand-text {
    font-size: clamp(28px, 10vw, 40px);
  }

  .auth-form-panel h1 {
    font-size: clamp(30px, 8vw, 36px);
  }

  .auth-subtitle {
    font-size: 15px;
  }

  .auth-submit {
    width: 100%;
    max-width: none;
  }
}