:root {
  --blue: #0786f5;
  --blue-dark: #0062c4;
  --ink: #152033;
  --muted: #667085;
  --line: #dfe6ef;
  --soft: #f5f8fc;
  --success: #11a36a;
  --shadow: 0 24px 70px rgba(31, 64, 104, 0.12);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 14% 5%, rgba(8, 134, 245, 0.12), transparent 29rem),
    linear-gradient(180deg, #f8fbff 0, #fff 38rem);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; }

.page-shell { min-height: 100vh; }

.topbar {
  height: 74px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 28px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.02em;
  text-decoration: none;
}

.brand-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  color: white;
  border-radius: 10px;
  background: linear-gradient(145deg, #00a5ff, #056ce3);
  box-shadow: 0 8px 18px rgba(6, 125, 237, 0.25);
}

.brand-mark svg { width: 23px; fill: currentColor; }

.tool-tabs {
  display: inline-flex;
  align-items: center;
  justify-self: center;
  gap: 5px;
  padding: 5px;
  background: rgba(235, 241, 248, 0.82);
  border: 1px solid rgba(205, 216, 230, 0.92);
  border-radius: 14px;
  box-shadow: inset 0 1px 2px rgba(29, 52, 83, 0.04);
}

.tool-tab {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 16px;
  color: #66758a;
  background: transparent;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  transition: color 160ms ease, background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.tool-tab svg {
  width: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool-tab:hover { color: #24344b; }
.tool-tab.is-active {
  color: #096fd3;
  background: #fff;
  box-shadow: 0 5px 15px rgba(42, 76, 116, 0.12);
}
.tool-tab[data-tool="privacy"].is-active { color: #087b61; }
.tool-tab:focus-visible { outline: 3px solid rgba(8, 134, 245, 0.2); outline-offset: 2px; }

.local-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  color: #42526a;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(203, 214, 229, 0.9);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 650;
  justify-self: end;
}

.local-pill i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #18b87a;
  box-shadow: 0 0 0 4px rgba(24, 184, 122, 0.11);
}

main { max-width: 1040px; margin: 0 auto; padding: 58px 28px 80px; }

.tool-panel { animation: panel-in 220ms ease-out; }
@keyframes panel-in { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

.hero { text-align: center; }

.eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--blue-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.17em;
}

.eyebrow::before, .eyebrow::after {
  content: "";
  width: 26px;
  height: 1px;
  background: #6bb8fc;
}

h1 {
  margin: 19px 0 18px;
  font-size: clamp(38px, 6vw, 62px);
  line-height: 1.08;
  letter-spacing: -0.055em;
}

h1 em { color: var(--blue); font-style: normal; }

.hero > p {
  max-width: 720px;
  margin: 0 auto;
  color: var(--muted);
  line-height: 1.8;
  font-size: 16px;
}

.swap-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin: 40px auto 54px;
}

.logo-card {
  position: relative;
  width: 230px;
  height: 86px;
  display: grid;
  place-items: center;
  background: white;
  border: 1px solid var(--line);
  border-radius: 17px;
  box-shadow: 0 13px 32px rgba(34, 68, 108, 0.08);
}

.new-logo { border-color: rgba(8, 134, 245, 0.38); box-shadow: 0 13px 34px rgba(8, 134, 245, 0.11); }

.card-label {
  position: absolute;
  top: -12px;
  left: 16px;
  padding: 4px 9px;
  color: #67758a;
  background: #f4f7fa;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.new-logo .card-label { color: #006dce; background: #edf7ff; border-color: #cbe9ff; }

.ithenticate-logo { color: #034452; font-size: 19px; font-weight: 750; letter-spacing: -0.06em; }
.ithenticate-logo b { color: #0b94ec; font-size: 26px; margin-right: 3px; }
.new-logo img { width: 114px; height: auto; }

.swap-arrow {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--blue);
  background: #eaf5ff;
}
.swap-arrow svg { width: 25px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2.2; }

.workspace {
  padding: 34px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(214, 224, 236, 0.9);
  border-radius: 24px;
  box-shadow: var(--shadow);
}

.panel-heading, .file-area-head, .action-row, .progress-copy, .result-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-heading > div, .section-title { display: flex; align-items: center; gap: 13px; }
.panel-heading h2, .section-title h2 { margin: 0; font-size: 20px; letter-spacing: -0.025em; }

.step {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 25px;
  color: #fff;
  background: var(--ink);
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.limit { color: #8a96a7; font-size: 12px; }

.drop-zone {
  margin-top: 26px;
  min-height: 244px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  border: 1.5px dashed #b7c8db;
  border-radius: 18px;
  background: linear-gradient(135deg, #f9fcff, #f4f9ff);
  cursor: pointer;
  transition: 180ms ease;
}

.drop-zone:hover, .drop-zone.dragging {
  border-color: var(--blue);
  background: #eef8ff;
  box-shadow: inset 0 0 0 1px rgba(8, 134, 245, 0.08);
  transform: translateY(-1px);
}

.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop-zone strong { margin-top: 15px; color: #263449; font-size: 18px; }
.drop-zone > span:last-child { margin-top: 8px; font-size: 13px; }
.drop-zone u { color: var(--blue-dark); font-weight: 700; text-underline-offset: 3px; }

.upload-icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  color: var(--blue);
  background: white;
  border: 1px solid #d9ebfb;
  border-radius: 19px;
  box-shadow: 0 10px 24px rgba(8, 134, 245, 0.12);
}
.upload-icon svg { width: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.file-area { margin-top: 22px; }
.file-area-head { padding-bottom: 11px; color: #556377; font-size: 13px; font-weight: 700; }
.text-button { padding: 4px 0; color: #e04d5e; background: none; border: 0; cursor: pointer; font-size: 12px; font-weight: 700; }
.file-list, .result-list { padding: 0; margin: 0; list-style: none; }

.file-list li, .result-list li {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: center;
  gap: 13px;
  padding: 12px 14px;
  margin-top: 8px;
  background: #f8fafc;
  border: 1px solid #e5ebf2;
  border-radius: 12px;
}

.pdf-icon, .file-type-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  color: #e64c5c;
  background: #fff0f2;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 900;
}

.file-type-icon.docx {
  color: #2867b2;
  background: #eaf3ff;
}

.file-meta { min-width: 0; }
.file-meta strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.file-meta span { display: block; margin-top: 4px; color: #8a96a7; font-size: 11px; }
.remove-button { width: 30px; height: 30px; color: #758196; background: transparent; border: 0; border-radius: 8px; cursor: pointer; font-size: 19px; }
.remove-button:hover { color: #d63b4e; background: #ffebee; }

.action-row { margin-top: 25px; }
.privacy-note { display: inline-flex; align-items: center; gap: 7px; color: #738096; font-size: 12px; }
.privacy-note svg { width: 18px; fill: none; stroke: #17a56f; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.primary-button, .zip-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  color: #fff;
  background: linear-gradient(135deg, #0796fb, #0568da);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 12px 24px rgba(6, 120, 231, 0.2);
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: 160ms ease;
}

.primary-button:hover, .zip-button:hover { transform: translateY(-1px); box-shadow: 0 14px 28px rgba(6, 120, 231, 0.27); }
.primary-button:disabled { color: #95a0af; background: #e6ebf1; box-shadow: none; cursor: not-allowed; transform: none; }
.primary-button svg, .zip-button svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.progress-box { margin-top: 24px; padding: 18px; background: #f3f8fe; border: 1px solid #dceafb; border-radius: 14px; }
.progress-copy { font-size: 13px; }
.progress-copy span { color: var(--blue-dark); font-weight: 800; }
.progress-track { height: 8px; margin-top: 12px; overflow: hidden; background: #dce9f7; border-radius: 99px; }
.progress-track i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #08a0ff, #006de3); border-radius: inherit; transition: width 180ms ease; }
.progress-track i.indeterminate { width: 42%; animation: loading 1.05s ease-in-out infinite; }
.progress-box p { margin: 10px 0 0; color: #7b8799; font-size: 11px; }
@keyframes loading { from { transform: translateX(-120%); } to { transform: translateX(310%); } }

.results { margin-top: 26px; padding: 27px 30px; background: #fff; border: 1px solid #dce9e4; border-radius: 20px; box-shadow: 0 18px 48px rgba(32, 83, 65, 0.08); }
.result-banner { gap: 14px; }
.result-banner > div { flex: 1; }
.result-banner h2 { margin: 0 0 5px; font-size: 20px; }
.result-banner p { margin: 0; color: var(--muted); font-size: 13px; }
.success-icon { width: 45px; height: 45px; display: grid; place-items: center; color: var(--success); background: #e9f8f2; border-radius: 50%; }
.success-icon svg { width: 25px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.zip-button { min-height: 42px; padding: 0 16px; background: #162234; box-shadow: none; font-size: 12px; }
.result-list { margin-top: 18px; }
.result-list li { grid-template-columns: 42px 1fr auto; background: #fbfcfd; }
.download-link { padding: 8px 12px; color: #066fd7; background: #eaf5ff; border-radius: 8px; font-size: 12px; font-weight: 800; text-decoration: none; }
.error-list { margin-top: 16px; padding: 13px 15px; color: #9b3542; background: #fff1f3; border-radius: 10px; font-size: 12px; line-height: 1.7; }

.metadata-feature {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  align-items: center;
  gap: 58px;
  margin: 0 0 34px;
  padding: 52px 58px;
  overflow: hidden;
  color: #f4fffc;
  background:
    radial-gradient(circle at 88% 16%, rgba(64, 224, 183, 0.22), transparent 15rem),
    linear-gradient(135deg, #102a35, #0b4550);
  border-radius: 26px;
  box-shadow: 0 25px 65px rgba(10, 58, 67, 0.2);
}

.feature-label {
  display: inline-block;
  color: #62e4bf;
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.15em;
}

.metadata-copy h2 {
  margin: 16px 0 16px;
  font-size: clamp(30px, 4.5vw, 47px);
  line-height: 1.08;
  letter-spacing: -0.045em;
}

.metadata-copy h2 em { color: #54dfb7; font-style: normal; }
.metadata-copy p { max-width: 590px; margin: 0; color: #bfd2d4; font-size: 14px; line-height: 1.8; }

.metadata-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 23px; }
.metadata-tags span { padding: 6px 10px; color: #dffbf2; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(154, 234, 211, 0.19); border-radius: 999px; font-size: 11px; }

.metadata-visual { display: grid; place-items: center; }
.file-sheet {
  position: relative;
  width: 270px;
  min-height: 230px;
  padding: 35px 26px 24px;
  color: #344054;
  background: #fff;
  border-radius: 17px;
  box-shadow: 0 26px 55px rgba(0, 19, 25, 0.28);
  transform: rotate(2deg);
}
.sheet-corner { position: absolute; top: 0; right: 0; width: 44px; height: 44px; background: linear-gradient(225deg, #0b4550 49%, #d9f4ed 51%); }
.file-sheet > b { display: block; margin-bottom: 18px; color: #0d7465; font-size: 10px; letter-spacing: 0.15em; }
.file-sheet i { display: grid; grid-template-columns: 78px 1fr; gap: 9px; padding: 10px 0; border-bottom: 1px solid #e7ecef; font-style: normal; font-size: 10px; }
.file-sheet u { color: #8a96a7; text-decoration: none; }
.file-sheet s { color: #bd6b74; text-decoration-thickness: 1.5px; }
.clean-stamp { position: absolute; right: 19px; bottom: 17px; padding: 6px 10px; color: #0b8c6b; border: 2px solid #32bd96; border-radius: 6px; font-size: 12px; font-weight: 850; transform: rotate(-7deg); }

.metadata-workspace { border-color: #cce9e2; box-shadow: 0 24px 70px rgba(15, 83, 74, 0.11); }
.teal-step { background: #0d7465; }
.sanitize-drop-zone { background: linear-gradient(135deg, #f8fdfc, #f2fbf8); border-color: #aacfc5; }
.sanitize-drop-zone:hover, .sanitize-drop-zone.dragging { border-color: #17a77e; background: #edfaf6; box-shadow: inset 0 0 0 1px rgba(23, 167, 126, 0.08); }
.sanitize-upload-icon { color: #0f9d78; border-color: #d3eee7; box-shadow: 0 10px 24px rgba(15, 157, 120, 0.13); }
.sanitize-drop-zone u { color: #087b61; }
.sanitize-button { background: linear-gradient(135deg, #17b58b, #087568); box-shadow: 0 12px 24px rgba(10, 132, 106, 0.2); }
.sanitize-button:hover { box-shadow: 0 14px 28px rgba(10, 132, 106, 0.27); }
.sanitize-button:disabled { color: #95a0af; background: #e6ebf1; box-shadow: none; }
.sanitize-progress-box { background: #f0faf7; border-color: #d3eee6; }
.sanitize-progress-box .progress-copy span { color: #087b61; }
.sanitize-progress-box .progress-track { background: #d9eee8; }
.sanitize-progress-box .progress-track i { background: linear-gradient(90deg, #36cda2, #087b68); }

.how-it-works { margin-top: 72px; }
.rule-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.rule-grid article { position: relative; min-height: 170px; padding: 24px; overflow: hidden; background: #f7f9fc; border: 1px solid #e3e9f0; border-radius: 16px; }
.rule-grid article > b { position: absolute; top: 10px; right: 17px; color: rgba(8, 134, 245, 0.1); font-size: 48px; line-height: 1; }
.rule-grid h3 { margin: 42px 0 8px; font-size: 16px; }
.rule-grid p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.7; }

footer { padding: 28px; color: #8c98a8; border-top: 1px solid #e8edf3; text-align: center; font-size: 12px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 30px;
  z-index: 10;
  max-width: min(90vw, 520px);
  padding: 13px 18px;
  color: #fff;
  background: #c83d4e;
  border-radius: 11px;
  box-shadow: 0 12px 32px rgba(94, 27, 36, 0.22);
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 700;
}

[hidden] { display: none !important; }

@media (max-width: 720px) {
  main { padding: 34px 16px 60px; }
  .topbar { height: 64px; grid-template-columns: auto 1fr; gap: 12px; padding: 0 17px; }
  .brand-text { display: none; }
  .tool-tabs { justify-self: end; gap: 3px; padding: 4px; border-radius: 12px; }
  .tool-tab { min-height: 36px; gap: 0; padding: 0 11px; font-size: 12px; }
  .tool-tab svg { display: none; }
  .local-pill { display: none; }
  h1 { font-size: 40px; }
  .hero > p { font-size: 14px; }
  .swap-preview { gap: 10px; }
  .logo-card { width: 41vw; height: 76px; }
  .swap-arrow { width: 34px; height: 34px; flex: 0 0 34px; }
  .ithenticate-logo { font-size: 15px; }
  .new-logo img { width: 90px; }
  .workspace { padding: 20px; border-radius: 18px; }
  .panel-heading { align-items: flex-start; }
  .limit { max-width: 110px; text-align: right; }
  .drop-zone { min-height: 210px; }
  .action-row { align-items: stretch; flex-direction: column; gap: 17px; }
  .privacy-note { justify-content: center; }
  .primary-button { width: 100%; }
  .result-banner { align-items: flex-start; flex-wrap: wrap; }
  .zip-button { width: 100%; }
  .metadata-feature { grid-template-columns: 1fr; gap: 35px; margin-top: 0; padding: 34px 24px; }
  .metadata-visual { display: none; }
  .metadata-copy h2 { font-size: 34px; }
  .rule-grid { grid-template-columns: 1fr; }
}