:root {
  --ink: #17152f;
  --ink-soft: #302e4e;
  --muted: #706e86;
  --violet: #6156e8;
  --violet-dark: #4935c5;
  --cyan: #25c8e4;
  --pink: #f061a8;
  --mint: #31cea0;
  --orange: #ff9b52;
  --yellow: #f4c84c;
  --blue: #4f86f7;
  --cream: #f7f7fc;
  --line: #e8e7f1;
  --white: #fff;
  --shadow: 0 24px 70px rgba(27,19,83,.13);
  --brand-surface: radial-gradient(circle at 16% 26%, rgba(49,211,239,.34), transparent 24%), radial-gradient(circle at 77% 16%, rgba(240,97,168,.25), transparent 24%), linear-gradient(128deg, #5148dc, #5636c4 49%, #36136f)
}
.auth-service-point,.tool-orbit-item {
  right: auto;
  bottom: auto;
  transform: translate(-50%,-50%)
}
.tool-orbit-item[data-position="1"] {
  top: 4%
}
.tool-orbit-item[data-position="2"] {
  left: 78%;
  top: 13%
}
.tool-orbit-item[data-position="3"] {
  left: 94%;
  top: 36%
}
.tool-orbit-item[data-position="4"] {
  left: 94%;
  top: 64%
}
.tool-orbit-item[data-position="5"] {
  left: 78%;
  top: 87%
}
.tool-orbit-item[data-position="6"] {
  left: 50%;
  top: 96%
}
.tool-orbit-item[data-position="7"] {
  left: 22%;
  top: 87%
}
.tool-orbit-item[data-position="8"] {
  left: 6%;
  top: 64%
}
.tool-orbit-item[data-position="9"] {
  left: 6%;
  top: 36%
}
.tool-orbit-item[data-position="10"] {
  left: 22%;
  top: 13%
}
[hidden] {
  display: none!important
}
* {
  box-sizing: border-box
}
html {
  scroll-behavior: smooth;
  scroll-padding-top: 0
}
body {
  min-width: 320px;
  margin: 0;
  padding-top: 78px;
  overflow-x: hidden;
  background: var(--white);
  color: var(--ink);
  font-size: 15px;
  font-family: Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,Segoe UI,Arial,sans-serif;
  text-rendering: optimizeLegibility
}
body.home-page {
  padding-top: 0
}
body.menu-open {
  overflow: hidden
}
a {
  color: inherit;
  text-decoration: none
}
button,input {
  font: inherit
}
a,button {
  -webkit-tap-highlight-color: transparent
}
img {
  max-width: 100%
}
:focus-visible {
  outline: 0;
  border-color: #bbb5dc;
  box-shadow: 0 0 0 3px rgba(98,85,226,.08)
}
.shell {
  width: min(1180px,100% - 48px);
  margin-inline: auto
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0
}
.skip-link {
  position: fixed;
  z-index: 1000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  transform: translateY(-150%);
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-weight: 800
}
.skip-link:focus {
  transform: translateY(0)
}
.site-header {
  position: fixed;
  z-index: 100;
  inset: 0 0 auto;
  height: 78px;
  border-bottom: 1px solid hsla(0,0%,100%,.15);
  background: linear-gradient(90deg,rgba(75,69,211,.95),rgba(75,31,160,.95));
  box-shadow: 0 12px 35px rgba(28,13,78,.16);
  color: #fff;
  backdrop-filter: blur(16px)
}
.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  flex: 0 0 auto;
  font-weight: 900
}
.brand-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  transform: rotate(-8deg);
  border: 3px solid;
  border-radius: 13px 9px 13px 9px
}
.brand-mark i {
  position: absolute;
  width: 7px;
  height: 7px;
  top: -6px;
  right: -6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 7px 9px 0 var(--pink)
}
.brand-mark b {
  transform: rotate(8deg);
  font-size: 14px;
  letter-spacing: -2.5px
}
.brand-name {
  font-size: 21px;
  letter-spacing: -.045em
}
.brand-name span {
  color: #77ecff
}
.brand-name small {
  margin-left: 2px;
  font-size: 11px;
  letter-spacing: -.02em;
  opacity: .75
}
.primary-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-left: auto
}
.header-login,.primary-nav a {
  position: relative;
  font-size: 13px;
  font-weight: 700;
  opacity: .85
}
.primary-nav a:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -9px;
  left: 0;
  height: 2px;
  transform: scaleX(0);
  border-radius: 10px;
  background: var(--cyan);
  transition: transform .2s ease
}
.header-login:hover,.primary-nav a:hover {
  opacity: 1
}
.primary-nav a:hover:after {
  transform: scaleX(1)
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 18px
}
.language-switcher {
  position: relative
}
.language-switcher summary {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid hsla(0,0%,100%,.28);
  border-radius: 11px;
  background: hsla(0,0%,100%,.1);
  color: #fff;
  cursor: pointer;
  font-size: 11px;
  font-weight: 900;
  list-style: none;
  text-transform: uppercase
}
.language-switcher summary::-webkit-details-marker {
  display: none
}
.language-switcher[open] summary {
  background: #fff;
  color: #4f3dcc
}
.language-switcher>div {
  position: absolute;
  z-index: 160;
  top: calc(100% + 12px);
  right: 0;
  display: grid;
  width: 220px;
  max-height: calc(min(70vh, 560px));
  padding: 8px;
  overflow-y: auto;
  border: 1px solid #e2dfef;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(28,13,78,.22);
  color: var(--ink)
}
.language-switcher>div a {
  padding: 9px 11px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700
}
.language-switcher>div a:hover,.language-switcher>div a[aria-current=page] {
  background: #f0edff;
  color: #5142cf
}
html[dir=rtl] .language-switcher>div {
  right: auto;
  left: 0
}
.account-link {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 220px
}
.account-link>span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border: 1px solid hsla(0,0%,100%,.25);
  border-radius: 12px;
  background: hsla(0,0%,100%,.14);
  font-weight: 900
}
.account-link b {
  overflow: hidden;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap
}
.menu-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 1px solid hsla(0,0%,100%,.2);
  border-radius: 11px;
  background: hsla(0,0%,100%,.08);
  color: #fff;
  cursor: pointer
}
.menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  margin: 4px 0;
  border-radius: 4px;
  background: currentColor;
  transition: transform .2s ease,opacity .2s ease
}
.button {
  display: inline-flex;
  min-height: 52px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 0 24px;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 850;
  transition: transform .2s ease,box-shadow .2s ease,background .2s ease
}
.button:hover {
  transform: translateY(-2px)
}
.button-primary {
  background: linear-gradient(135deg,#766af4,#5647dc);
  box-shadow: 0 16px 32px rgba(66,47,196,.25);
  color: #fff
}
.button.button-primary,.button.button-primary span {
  color: #fff!important
}
.button-primary:hover {
  box-shadow: 0 20px 38px rgba(66,47,196,.34)
}
.button-light {
  background: #fff;
  color: #4638c4;
  box-shadow: 0 12px 28px rgba(22,13,74,.16)
}
.button-ghost {
  border: 1px solid hsla(0,0%,100%,.28);
  background: hsla(0,0%,100%,.075);
  color: #fff
}
.button-small {
  min-height: 40px;
  padding-inline: 17px;
  border-radius: 11px;
  font-size: 11px
}
.header-actions .button-small {
  font-size: 14px
}
.button-full {
  width: 100%
}
.hero {
  position: relative;
  min-height: 100svh;
  padding: 78px 0 58px;
  overflow: hidden;
  background: var(--brand-surface);
  color: #fff
}
.hero:after {
  content: "";
  position: absolute;
  width: 730px;
  height: 730px;
  bottom: -430px;
  left: -370px;
  border: 135px solid hsla(0,0%,100%,.05);
  border-radius: 50%
}
.account-bg,.auth-grid,.final-cta-grid,.hero-grid,.legal-grid-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(hsla(0,0%,100%,.04) 1px,transparent 0),linear-gradient(90deg,hsla(0,0%,100%,.04) 1px,transparent 0);
  background-size: 44px 44px;
  mask-image: linear-gradient(90deg,#000,transparent 92%)
}
.hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}
.hero-orb-one {
  width: 480px;
  height: 480px;
  top: 90px;
  right: -180px;
  border: 100px solid hsla(0,0%,100%,.035)
}
.hero-orb-two {
  width: 112px;
  height: 112px;
  top: 21%;
  left: 44%;
  border: 25px solid rgba(37,200,228,.18)
}
.hero-layout {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: calc(100svh - 136px);
  grid-template-columns: minmax(0,1.03fr) minmax(430px,.97fr);
  gap: 62px;
  align-items: center
}
.eyebrow,.section-kicker {
  margin: 0 0 18px;
  color: #5a50d8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: hsla(0,0%,100%,.8)
}
.eyebrow i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 17px rgba(37,200,228,.85)
}
.section-kicker.light {
  color: #8defff
}
.hero h1 {
  max-width: 720px;
  margin: 0;
  font-size: 60px;
  line-height: .98;
  letter-spacing: -.07em
}
.hero h1 span {
  color: #9bf1ff
}
.hero-lead {
  max-width: 620px;
  margin: 28px 0 0;
  color: hsla(0,0%,100%,.77);
  font-size: 17px;
  line-height: 1.75
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px
}
.final-cta .button-primary,.hero .button-primary {
  background: #fff;
  box-shadow: 0 18px 36px rgba(19,9,69,.2);
  color: #4c3cca
}
.final-cta .button-primary,.final-cta .button-primary span,.hero .button-primary,.hero .button-primary span {
  color: #4c3cca!important
}
.hero-benefits {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px;
  max-width: 720px;
  margin-top: 40px
}
.hero-benefits span {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 42px;
  padding: 9px 13px;
  border: 1px solid hsla(0,0%,100%,.16);
  border-radius: 13px;
  background: hsla(0,0%,100%,.07);
  color: hsla(0,0%,100%,.82);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.35
}
.hero-benefits img {
  flex: 0 0 auto;
  filter: brightness(0) invert(1);
  opacity: .85
}
.ecosystem-stage {
  position: relative;
  padding-bottom: 48px
}
.ecosystem-preview {
  position: relative;
  padding: 28px;
  overflow: hidden;
  transform: perspective(1000px) rotateY(-4deg) rotateX(1deg);
  border: 1px solid hsla(0,0%,100%,.26);
  border-radius: 28px;
  background: hsla(0,0%,100%,.96);
  box-shadow: 0 42px 90px rgba(19,7,72,.32);
  color: var(--ink)
}
.preview-summary-card {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 8;
  display: grid;
  width: min(430px,100% - 20px);
  gap: 12px;
  padding: 0;
  transform: translate(-50%,50%);
  color: #fff
}
.preview-summary-card,.preview-summary-item {
  min-height: 58px;
  display: flex;
  align-items: center
}
.preview-summary-item {
  min-width: 0;
  gap: 10px;
  width: 50%;
  padding: 9px 12px;
  border: 1px solid hsla(0,0%,100%,.24);
  border-radius: 14px;
  background: hsla(0,0%,100%,.08);
  box-shadow: 0 16px 34px rgba(26,8,79,.14);
  backdrop-filter: blur(10px)
}
.preview-summary-item>span:last-child {
  display: grid;
  gap: 3px
}
.preview-summary-item strong {
  font-size: 12px;
  line-height: 1.2
}
.preview-summary-item small {
  color: hsla(0,0%,100%,.7);
  font-size: 11px;
  white-space: nowrap
}
.preview-summary-icon,.preview-summary-price {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: hsla(0,0%,100%,.14)
}
.preview-summary-icon img {
  filter: brightness(0) invert(1)
}
.preview-summary-price {
  background: hsla(0,0%,100%,.14);
  color: #fff;
  font-size: 17px;
  font-weight: 900
}
.preview-summary-divider {
  display: none
}
.ecosystem-preview:before {
  content: "";
  position: absolute;
  z-index: 0;
  width: 230px;
  height: 230px;
  top: -110px;
  right: -80px;
  border-radius: 50%;
  background: rgba(37,200,228,.16);
  filter: blur(2px)
}
.preview-focus,.preview-head,.preview-list {
  position: relative;
  z-index: 2
}
.preview-focus,.preview-head,.preview-list>div {
  display: flex;
  align-items: center
}
.preview-head {
  justify-content: space-between
}
.preview-focus span,.preview-focus strong,.preview-head span,.preview-head strong {
  display: block
}
.preview-focus span,.preview-head span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700
}
.preview-head strong {
  margin-top: 5px;
  font-size: 20px;
  letter-spacing: -.035em
}
.preview-avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg,#675bea,#4b36c6);
  box-shadow: 0 10px 25px rgba(80,59,202,.26);
  color: #fff;
  font-style: normal;
  font-weight: 900
}
.preview-focus {
  min-height: 118px;
  justify-content: space-between;
  gap: 20px;
  margin: 24px 0 18px;
  padding: 24px;
  border: 1px solid #e5e1fb;
  border-radius: 20px;
  background: radial-gradient(circle at 82% 18%,rgba(37,200,228,.23),transparent 30%),linear-gradient(135deg,#f2f0ff,#fff)
}
.preview-focus strong {
  margin-top: 7px;
  font-size: 24px;
  letter-spacing: -.045em
}
.preview-focus>b {
  padding: 9px 11px;
  border-radius: 10px;
  background: #ece9ff;
  color: #5547d2;
  font-size: 11px;
  white-space: nowrap
}
.preview-list {
  display: grid;
  gap: 10px
}
.preview-list>div {
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff
}
.preview-list>div>span {
  min-width: 0;
  flex: 1
}
.preview-list small,.preview-list strong {
  display: block
}
.preview-list strong {
  font-size: 11px
}
.preview-list small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px
}
.preview-list>div>b {
  color: #5e53d9;
  font-size: 11px
}
.mini-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 11px;
  font-style: normal;
  font-weight: 900
}
.mini-icon img {
  display: block;
  width: 20px;
  height: 20px
}
.mini-icon.violet {
  background: #eeeaff;
  color: #5d4ce0
}
.mini-icon.cyan {
  background: #e4faff;
  color: #0695ad
}
.mini-icon.pink {
  background: #ffedf6;
  color: #ce3f86
}
.preview-glow {
  position: absolute;
  width: 150px;
  height: 150px;
  bottom: -90px;
  left: -65px;
  border-radius: 50%;
  background: rgba(240,97,168,.21);
  filter: blur(10px)
}
.scroll-cue {
  position: absolute;
  z-index: 3;
  bottom: 24px;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateX(-50%);
  color: hsla(0,0%,100%,.62);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase
}
.scroll-cue span {
  animation: cue 1.8s ease-in-out infinite
}
@keyframes cue {
0%,to {
  transform: translateY(0)
}
50% {
  transform: translateY(5px)
}
}
.section {
  padding: 60px 0
}
main section[id] {
  scroll-margin-top: 78px
}
.section-heading {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr);
  gap: 60px;
  align-items: end;
  margin-bottom: 44px
}
.account-panel h2,.account-welcome h2,.advantages-copy h2,.faq-layout h2,.final-cta h2,.section-heading h2 {
  margin: 0;
  font-size: calc(clamp(30px, 4.5vw, 36px));
  line-height: 1.02;
  letter-spacing: -.06em
}
.section-heading>p {
  max-width: 480px;
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.75
}
.services-section {
  background: #fff
}
.service-grid {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  grid-auto-rows: 1fr;
  gap: 12px
}
.service-group-list {
  display: grid;
  gap: 28px
}
.home-service-group>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px
}
.home-service-group>header h3 {
  margin: 0;
  font-size: 22px
}
.home-service-group>header span {
  color: var(--muted);
  font-size: 11px
}
.home-service-group .service-card {
  min-height: 330px;
  padding: 16px;
  border-radius: 17px
}
.home-service-group .service-card-visual {
  min-height: 100px
}
.home-service-group .service-icon {
  width: 58px;
  height: 58px;
  border-radius: 17px
}
.home-service-group .service-icon img {
  width: 32px;
  height: 32px
}
.home-service-group .visual-sheet {
  width: 65px;
  height: 48px
}
.home-service-group .service-code {
  margin: 17px 0 6px
}
.home-service-group .service-card h3 {
  font-size: 16px
}
.home-service-group .service-card>p:not(.service-code) {
  margin: 10px 0 14px;
  font-size: 11px;
  line-height: 1.5
}
.home-service-group .service-action {
  padding: 10px 11px;
  font-size: 10px
}
.service-card {
  --service-color: var(--violet);
  position: relative;
  display: flex;
  min-height: 420px;
  height: 100%;
  flex-direction: column;
  padding: 24px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 21px;
  background: #fff;
  transition: transform .24s ease,box-shadow .24s ease,border-color .24s ease
}
.service-card:after {
  content: "";
  position: absolute;
  width: 125px;
  height: 125px;
  top: -75px;
  right: -55px;
  border-radius: 50%;
  background: color-mix(in srgb,var(--service-color) 14%,transparent);
  transition: transform .3s ease
}
.service-card:hover {
  z-index: 2;
  transform: translateY(-7px);
  border-color: color-mix(in srgb,var(--service-color) 30%,var(--line));
  box-shadow: 0 24px 50px rgba(26,19,78,.12)
}
.service-card:hover:after {
  transform: scale(1.35)
}
.service-card.is-clickable {
  cursor: pointer
}
.service-card-link {
  position: absolute;
  z-index: 8;
  inset: 0;
  border-radius: inherit
}
.service-card.is-clickable:focus-within {
  border-color: var(--service-color);
  box-shadow: 0 0 0 4px color-mix(in srgb,var(--service-color) 18%,transparent),0 24px 50px rgba(26,19,78,.12)
}
.service-card .service-action {
  margin-top: auto;
  padding: 12px 14px;
  border: 0;
  border-radius: 11px;
  background: linear-gradient(135deg,color-mix(in srgb,var(--service-color) 82%,#fff),var(--service-color));
  box-shadow: 0 10px 22px color-mix(in srgb,var(--service-color) 25%,transparent);
  color: #fff
}
.service-card .service-action b {
  color: #fff
}
.service-card:hover .service-action {
  box-shadow: 0 14px 28px color-mix(in srgb,var(--service-color) 34%,transparent)
}
.service-card.accent-violet {
  --service-color: #6858e9
}
.service-card.accent-cyan {
  --service-color: #1bbbd8
}
.service-card.accent-pink {
  --service-color: #ec5aa1
}
.service-card.accent-orange {
  --service-color: #ff9250
}
.service-card.accent-blue {
  --service-color: #4f86f7
}
.service-card.accent-mint {
  --service-color: #25bd91
}
.service-card.accent-indigo {
  --service-color: #4b4ed4
}
.service-card.accent-yellow {
  --service-color: #d6a721
}
.service-card-visual {
  min-height: 136px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb,var(--service-color) 16%,var(--line));
  border-radius: 16px;
  background: linear-gradient(color-mix(in srgb,var(--service-color) 7%,#fff),hsla(0,0%,100%,.94)),radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--service-color) 18%,transparent),transparent 48%)
}
.service-card-visual,.service-icon {
  position: relative;
  display: grid;
  place-items: center
}
.service-icon {
  z-index: 4;
  width: 76px;
  height: 76px;
  border: 1px solid hsla(0,0%,100%,.9);
  border-radius: 23px;
  background: hsla(0,0%,100%,.88);
  box-shadow: 0 17px 34px color-mix(in srgb,var(--service-color) 18%,transparent)
}
.service-icon img {
  display: block;
  width: 42px;
  height: 42px
}
.visual-sheet {
  position: absolute;
  width: 86px;
  height: 66px;
  border: 1px solid color-mix(in srgb,var(--service-color) 20%,#fff);
  border-radius: 14px;
  background: hsla(0,0%,100%,.62)
}
.visual-sheet-back {
  transform: translate(-55px,16px) rotate(-10deg)
}
.visual-sheet-front {
  transform: translate(58px,-14px) rotate(9deg)
}
.service-code {
  margin: 25px 0 8px;
  color: var(--service-color)!important;
  font-size: 11px!important;
  font-weight: 900;
  letter-spacing: .14em
}
.service-card h3 {
  margin: 0;
  font-size: 21px;
  line-height: 1.13;
  letter-spacing: -.04em
}
.service-card>p:not(.service-code) {
  margin: 14px 0 20px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65
}
.service-action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 17px;
  border-top: 1px solid var(--line);
  color: #858295;
  font-size: 11px;
  font-weight: 800
}
.service-action b {
  color: var(--service-color);
  font-size: 14px
}
.ecosystem-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  margin-top: 28px;
  min-height: 114px;
  padding: 24px 32px;
  overflow: hidden;
  border-radius: 21px;
  background: radial-gradient(circle at 86% 20%,rgba(37,200,228,.3),transparent 24%),linear-gradient(125deg,#1b183c,#32266e);
  color: #fff
}
.ecosystem-symbol {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 1px solid hsla(0,0%,100%,.17);
  border-radius: 18px;
  background: hsla(0,0%,100%,.08);
  color: #8fefff;
  font-size: 27px
}
.ecosystem-banner h3,.ecosystem-banner p {
  margin: 0
}
.ecosystem-banner p {
  color: #8fefff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase
}
.ecosystem-banner h3 {
  max-width: 700px;
  margin-top: 6px;
  font-size: 17px;
  line-height: 1.35
}
.ecosystem-banner a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #9bf1ff;
  font-size: 11px;
  font-weight: 850
}
.tool-network-section {
  position: relative;
  min-height: 720px;
  overflow: hidden;
  background: var(--brand-surface);
  color: #fff
}
.tool-network-grid-bg {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(hsla(0,0%,100%,.11) 1px,transparent 0);
  background-size: 28px 28px;
  mask-image: linear-gradient(90deg,#000,transparent 68%)
}
.tool-network-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(500px,1fr) minmax(0,.92fr);
  gap: 82px;
  align-items: center
}
.tool-orbit {
  position: relative;
  min-height: 500px
}
.tool-orbit-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid hsla(0,0%,100%,.16);
  border-radius: 50%;
  transform: translate(-50%,-50%)
}
.tool-orbit-ring-large {
  width: 450px;
  height: 450px
}
.tool-orbit-ring-small {
  width: 298px;
  height: 298px
}
.tool-orbit-core {
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 154px;
  height: 154px;
  transform: translate(-50%,-50%);
  border: 1px solid hsla(0,0%,100%,.36);
  border-radius: 50%;
  background: linear-gradient(135deg,#7468f0,#3f249f);
  box-shadow: 0 30px 70px rgba(17,7,65,.35),0 0 55px rgba(37,200,228,.17)
}
.tool-orbit-logo {
  width: 74px;
  height: 74px;
  border-width: 4px;
  border-radius: 24px 18px 24px 18px;
  color: #fff
}
.tool-orbit-logo i {
  width: 8px;
  height: 8px;
  top: -8px;
  right: 9px
}
.tool-orbit-logo b {
  font-size: 25px
}
.tool-orbit-item {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 50px;
  padding: 9px 13px 9px 9px;
  border: 1px solid hsla(0,0%,100%,.22);
  border-radius: 15px;
  background: hsla(0,0%,100%,.12);
  box-shadow: 0 15px 35px rgba(22,10,75,.18);
  backdrop-filter: blur(12px)
}
.tool-orbit-item>span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: hsla(0,0%,100%,.95)
}
.tool-orbit-item {
  width: 52px;
  height: 52px;
  padding: 0;
  border-radius: 16px
}
.tool-orbit-item>span {
  width: 100%;
  height: 100%;
  border-radius: 15px
}
.tool-orbit-item img {
  width: 25px;
  height: 25px
}
.tool-orbit-item strong.sr-only {
  position: absolute!important
}
.tool-orbit-item[data-position="1"] {
  left: 50%;
  top: 5%
}
.tool-orbit-item[data-position="2"] {
  left: 76%;
  top: 18%
}
.tool-orbit-item[data-position="3"] {
  left: 84%;
  top: 48%
}
.tool-orbit-item[data-position="4"] {
  left: 67%;
  top: 68%
}
.tool-orbit-item[data-position="5"] {
  left: 50%;
  top: 31%
}
.tool-orbit-item[data-position="6"] {
  left: 32%;
  top: 68%
}
.tool-orbit-item[data-position="7"] {
  left: 16%;
  top: 48%
}
.tool-orbit-item[data-position="8"] {
  left: 24%;
  top: 18%
}
.tool-orbit-item[data-position="9"] {
  left: 62%;
  top: 48%
}
.tool-orbit-item[data-position="10"] {
  left: 38%;
  top: 48%
}
.tool-orbit-item img {
  display: block
}
.tool-orbit-item strong {
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap
}
.tool-orbit-position-1 {
  top: 2%;
  left: 38%
}
.tool-orbit-position-2 {
  top: 16%;
  left: 4%
}
.tool-orbit-position-3 {
  top: 22%;
  right: -1%
}
.tool-orbit-position-4 {
  top: 44%;
  left: 0
}
.tool-orbit-position-5 {
  top: 49%;
  right: -3%
}
.tool-orbit-position-6 {
  bottom: 11%;
  left: 4%
}
.tool-orbit-position-7 {
  right: 2%;
  bottom: 5%
}
.tool-orbit-position-8 {
  bottom: 0;
  left: 38%
}
.tool-network-copy h2 {
  margin: 0;
  font-size: calc(clamp(30px, 4.7vw, 36px));
  line-height: 1.02;
  letter-spacing: -.06em
}
.tool-network-lead {
  max-width: 560px;
  margin: 25px 0 32px;
  color: hsla(0,0%,100%,.7);
  font-size: 14px;
  line-height: 1.8
}
.tool-network-points {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none
}
.tool-network-points li {
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 15px;
  padding: 19px 0;
  border-top: 1px solid hsla(0,0%,100%,.13)
}
.tool-network-points li:last-child {
  border-bottom: 1px solid hsla(0,0%,100%,.13)
}
.tool-network-points>li>img {
  width: 42px;
  height: 42px;
  padding: 9px;
  border-radius: 12px;
  background: hsla(0,0%,100%,.94)
}
.tool-network-points strong {
  font-size: 15px
}
.tool-network-points p {
  margin: 6px 0 0;
  color: hsla(0,0%,100%,.6);
  font-size: 13px;
  line-height: 1.65
}
.free-access-section {
  background: #fff
}
.free-access-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) 280px;
  gap: 46px;
  align-items: center;
  min-height: 390px;
  padding: 55px;
  overflow: hidden;
  border: 1px solid hsla(0,0%,100%,.18);
  border-radius: 30px;
  background: radial-gradient(circle at 91% 16%,rgba(37,200,228,.28),transparent 25%),radial-gradient(circle at 7% 88%,rgba(240,97,168,.2),transparent 25%),linear-gradient(128deg,#4f48d9,#5533bd 52%,#34136e);
  box-shadow: 0 35px 80px rgba(43,28,111,.22);
  color: #fff
}
.free-access-panel:before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: linear-gradient(hsla(0,0%,100%,.045) 1px,transparent 0),linear-gradient(90deg,hsla(0,0%,100%,.045) 1px,transparent 0);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg,#000,transparent 76%)
}
.free-access-panel>* {
  position: relative;
  z-index: 2
}
.free-access-label {
  display: grid;
  justify-items: start;
  gap: 15px;
  color: #a6f2ff;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase
}
.free-access-label img {
  width: 70px;
  height: 70px;
  padding: 17px;
  border-radius: 21px;
  border: 1px solid hsla(0,0%,100%,.22);
  background: hsla(0,0%,100%,.12);
  filter: brightness(0) invert(1)
}
.free-access-copy .section-kicker {
  color: #a6f2ff
}
.free-access-copy h2 {
  max-width: 670px;
  margin: 0;
  font-size: calc(clamp(30px, 4.3vw, 36px));
  line-height: 1.03;
  letter-spacing: -.06em
}
.free-access-copy>p:last-child {
  max-width: 720px;
  margin: 22px 0 0;
  color: hsla(0,0%,100%,.72);
  font-size: 14px;
  line-height: 1.8
}
.free-access-answer {
  display: grid;
  align-content: center;
  min-height: 210px;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid hsla(0,0%,100%,.72);
  background: radial-gradient(circle at 88% 15%,rgba(37,200,228,.2),transparent 28%),hsla(0,0%,100%,.95);
  box-shadow: 0 24px 55px rgba(24,11,76,.24);
  color: var(--ink)
}
.free-access-answer small,.free-access-answer span {
  color: #77738c;
  font-size: 11px
}
.free-access-answer strong {
  margin: 9px 0 17px;
  color: #5545d4;
  font-size: 36px;
  letter-spacing: -.05em
}
.advantages-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 18% 84%,rgba(37,200,228,.19),transparent 23%),linear-gradient(128deg,#17142f,#292052 62%,#27134e);
  color: #fff
}
.advantages-section:after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  top: -270px;
  right: -120px;
  border: 80px solid hsla(0,0%,100%,.025);
  border-radius: 50%
}
.advantages-layout {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 90px;
  align-items: center
}
.advantages-copy>p:last-child {
  max-width: 510px;
  margin: 26px 0 0;
  color: hsla(0,0%,100%,.62);
  font-size: 14px;
  line-height: 1.8
}
.advantage-list {
  display: grid
}
.advantage-list article {
  display: grid;
  grid-template-columns: 55px 1fr;
  gap: 20px;
  padding: 25px 0;
  border-top: 1px solid hsla(0,0%,100%,.13)
}
.advantage-list article:last-child {
  border-bottom: 1px solid hsla(0,0%,100%,.13)
}
.advantage-list article>span {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  border-radius: 13px;
  background: hsla(0,0%,100%,.08);
  color: #87eafa;
  font-size: 11px;
  font-weight: 900
}
.advantage-list article>span img {
  display: block;
  width: 24px;
  height: 24px
}
.advantage-list h3,.advantage-list p {
  margin: 0
}
.advantage-list h3 {
  font-size: 17px;
  letter-spacing: -.025em
}
.advantage-list p {
  margin-top: 7px;
  color: hsla(0,0%,100%,.58);
  font-size: 11px;
  line-height: 1.65
}
.account-section {
  background: var(--cream)
}
.account-panel {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 60px;
  align-items: center;
  padding: 55px;
  border: 1px solid #e0def1;
  border-radius: 28px;
  background: radial-gradient(circle at 93% 12%,rgba(37,200,228,.16),transparent 24%),#fff;
  box-shadow: var(--shadow)
}
.account-panel h2 {
  max-width: 720px;
  font-size: calc(clamp(30px, 4vw, 36px))
}
.account-panel>div>p:last-child {
  max-width: 650px;
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75
}
.account-panel-actions {
  display: grid;
  justify-items: center;
  gap: 15px
}
.account-panel-actions>a:last-child {
  color: #5a4bd3;
  font-size: 11px;
  font-weight: 800
}
.faq-section {
  background: #fff
}
.faq-layout {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 90px
}
.faq-layout>div:first-child>p:last-child {
  max-width: 410px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.7
}
.faq-list details {
  border-top: 1px solid var(--line)
}
.faq-list details:last-child {
  border-bottom: 1px solid var(--line)
}
.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 2px;
  cursor: pointer;
  list-style: none;
  font-size: 15px;
  font-weight: 800
}
.faq-list summary::-webkit-details-marker {
  display: none
}
.faq-list summary i {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: #efedff;
  color: #584bd0;
  font-style: normal;
  transition: transform .2s ease
}
.faq-list details[open] summary i {
  transform: rotate(45deg)
}
.faq-list details>p {
  max-width: 680px;
  margin: -8px 50px 24px 2px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.75
}
.final-cta {
  position: relative;
  padding: 60px 0;
  overflow: hidden;
  background: var(--brand-surface);
  color: #fff;
  text-align: center
}
.final-cta-grid {
  mask-image: radial-gradient(circle,#000,transparent 70%)
}
.final-cta-content {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center
}
.final-mark {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin-bottom: 24px;
  transform: rotate(-7deg);
  border: 4px solid hsla(0,0%,100%,.92);
  border-radius: 22px 15px 22px 15px;
  font-weight: 950;
  letter-spacing: -4px
}
.final-cta h2 {
  font-size: calc(clamp(30px, 5.4vw, 36px))
}
.final-cta-content>p:not(.section-kicker) {
  max-width: 590px;
  margin: 24px 0 0;
  color: hsla(0,0%,100%,.7);
  font-size: 14px;
  line-height: 1.75
}
.final-cta-content>div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 31px
}
.site-footer {
  padding: 62px 0 25px;
  background: #111023;
  color: #fff
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.7fr 1fr 1fr;
  gap: 70px
}
.brand-footer {
  color: #fff
}
.footer-brand p {
  max-width: 430px;
  margin: 22px 0 0;
  color: hsla(0,0%,100%,.48);
  font-size: 11px;
  line-height: 1.7
}
.footer-grid>div:not(.footer-brand) {
  display: grid;
  align-content: start;
  gap: 12px
}
.footer-grid strong {
  margin-bottom: 7px;
  color: hsla(0,0%,100%,.92);
  font-size: 11px
}
.footer-grid>div:not(.footer-brand) a {
  color: hsla(0,0%,100%,.5);
  font-size: 11px
}
.footer-grid a:hover {
  color: #8fefff
}
.footer-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 45px;
  padding-top: 23px;
  border-top: 1px solid hsla(0,0%,100%,.1);
  color: #b4b1c8;
  font-size: 11px
}
.footer-status {
  display: inline-flex;
  align-items: center;
  gap: 7px
}
.active-status i,.footer-status i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3bd09f;
  box-shadow: 0 0 10px rgba(59,208,159,.65)
}
.flash-stack {
  position: fixed;
  z-index: 300;
  top: 92px;
  right: 22px;
  display: grid;
  width: min(400px,100% - 44px);
  gap: 10px
}
.flash {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 15px 17px;
  border: 1px solid #ddd9f4;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(22,16,68,.18);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.5
}
.flash-success {
  border-left: 4px solid var(--mint)
}
.flash-error {
  border-left: 4px solid #e6496f
}
.flash-info {
  border-left: 4px solid var(--cyan)
}
.flash button {
  border: 0;
  background: transparent;
  color: #8a8799;
  cursor: pointer;
  font-size: 20px
}
.auth-page {
  background: #f5f4fb
}
.auth-main {
  min-height: calc(100vh - 78px);
  padding: 45px 24px 70px
}
.auth-shell {
  display: grid;
  width: min(1030px,100%);
  min-height: 680px;
  grid-template-columns: .92fr 1.08fr;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid #dfddec;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 35px 90px rgba(28,20,79,.14)
}
.auth-shell-login {
  min-height: 610px
}
.auth-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 55px;
  overflow: hidden;
  background: var(--brand-surface);
  color: #fff
}
.auth-visual:after {
  content: "";
  position: absolute;
  width: 330px;
  height: 330px;
  right: -210px;
  bottom: -130px;
  border: 70px solid hsla(0,0%,100%,.045);
  border-radius: 50%
}
.auth-visual>:not(.auth-grid) {
  position: relative;
  z-index: 2
}
.auth-visual h1 {
  margin: 0;
  font-size: calc(clamp(30px, 4.4vw, 36px));
  line-height: 1.02;
  letter-spacing: -.065em
}
.auth-visual>p:not(.section-kicker) {
  margin: 24px 0 0;
  color: hsla(0,0%,100%,.68);
  font-size: 13px;
  line-height: 1.75
}
.auth-benefits {
  display: grid;
  gap: 11px;
  margin-top: 35px
}
.auth-benefits span {
  color: hsla(0,0%,100%,.8);
  font-size: 11px;
  font-weight: 750
}
.auth-form-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 50px 62px
}
.auth-form-head>p {
  margin: 0 0 9px;
  color: #6156e8;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase
}
.auth-form-head h2 {
  margin: 0;
  font-size: 35px;
  letter-spacing: -.055em
}
.auth-form-head>span {
  display: block;
  margin-top: 9px;
  color: var(--muted);
  font-size: 11px
}
.auth-form-head a,.check-field a {
  color: #5748d2;
  font-weight: 800
}
.auth-form {
  display: grid;
  gap: 17px;
  margin-top: 28px
}
.field {
  display: grid;
  gap: 8px
}
.field>span:first-child {
  font-size: 11px;
  font-weight: 850
}
.field input {
  width: 100%;
  height: 49px;
  padding: 0 14px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fcfcfe;
  color: var(--ink);
  outline: 0;
  transition: border-color .2s ease,box-shadow .2s ease,background .2s ease
}
.field input:focus {
  border-color: #7568ec;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(97,86,232,.1)
}
.field small,.field-error {
  margin: 0;
  color: #cc355b;
  font-size: 11px;
  line-height: 1.4
}
.field em {
  color: #655e78;
  font-size: 11px;
  font-style: normal
}
.password-wrap {
  position: relative;
  display: block
}
.password-wrap input {
  padding-right: 78px
}
.password-wrap button {
  position: absolute;
  top: 50%;
  right: 12px;
  padding: 5px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: #6658d8;
  cursor: pointer;
  font-size: 11px;
  font-weight: 850
}
.check-field {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  align-items: start;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55
}
.check-field input {
  width: 17px;
  height: 17px;
  margin: 0;
  accent-color: #6255e2
}
.form-alert {
  margin-top: 20px;
  padding: 12px 14px;
  border: 1px solid #f0c4cf;
  border-radius: 11px;
  background: #fff5f7;
  color: #a32d4c;
  font-size: 11px;
  line-height: 1.5
}
.auth-note {
  margin: 0;
  color: #655e78;
  font-size: 11px;
  line-height: 1.55;
  text-align: center
}
.honeypot {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  overflow: hidden!important;
  clip: rect(0 0 0 0)!important
}
.auth-service-orbit {
  position: relative;
  width: 270px;
  height: 270px;
  margin: 38px auto 0
}
.auth-service-ring {
  position: absolute;
  border: 1px solid hsla(0,0%,100%,.11);
  border-radius: 50%
}
.auth-service-ring-outer {
  inset: 10px
}
.auth-service-ring-inner {
  inset: 62px
}
.auth-service-core,.auth-service-point {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid hsla(0,0%,100%,.2);
  background: hsla(0,0%,100%,.12);
  color: #fff;
  box-shadow: 0 15px 35px rgba(26,8,79,.16);
  backdrop-filter: blur(10px)
}
.auth-service-core {
  width: 88px;
  height: 88px;
  inset: 50% auto auto 50%;
  transform: translate(-50%,-50%);
  align-content: center;
  gap: 4px;
  border-radius: 26px;
  background: hsla(0,0%,100%,.17)
}
.auth-service-core strong {
  font-size: 22px;
  letter-spacing: -3px
}
.auth-service-core small {
  color: hsla(0,0%,100%,.72);
  font-size: 11px
}
.auth-service-point {
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: hsla(0,0%,100%,.94)
}
.auth-service-point img {
  opacity: .88
}
.auth-service-point-1 {
  top: -2px;
  left: 115px
}
.auth-service-point-2 {
  top: 19px;
  right: 35px
}
.auth-service-point-3 {
  top: 78px;
  right: -3px
}
.auth-service-point-4 {
  right: -3px;
  bottom: 62px
}
.auth-service-point-5 {
  right: 65px;
  bottom: 5px
}
.auth-service-point-6 {
  bottom: 5px;
  left: 65px
}
.auth-service-point-7 {
  bottom: 62px;
  left: -3px
}
.auth-service-point-8 {
  top: 78px;
  left: -3px
}
.auth-service-point-9 {
  top: 19px;
  left: 35px
}
.account-page {
  background: #f5f4fb
}
.account-main {
  position: relative;
  min-height: 800px;
  padding: 55px 0 100px;
  overflow: hidden;
  background: linear-gradient(180deg,#5546d4 0,#3f2aa0 330px,#f5f4fb 0)
}
.account-bg {
  height: 330px;
  mask-image: linear-gradient(#000,transparent)
}
.account-shell {
  position: relative;
  z-index: 2
}
.account-hero {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: center;
  min-height: 155px;
  color: #fff
}
.account-avatar {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border: 1px solid hsla(0,0%,100%,.25);
  border-radius: 22px;
  background: hsla(0,0%,100%,.13);
  font-size: 27px;
  font-weight: 900
}
.account-hero h1,.account-hero p {
  margin: 0
}
.account-hero h1 {
  font-size: calc(clamp(28px, 4vw, 36px));
  letter-spacing: -.055em
}
.account-hero div>span {
  display: block;
  margin-top: 7px;
  color: hsla(0,0%,100%,.62);
  font-size: 11px
}
.account-content {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 20px;
  margin-top: 35px
}
.account-welcome,.profile-card {
  padding: 36px;
  border: 1px solid #e0deec;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(27,20,77,.11)
}
.account-welcome h2 {
  font-size: 35px
}
.account-welcome>p:not(.section-kicker) {
  max-width: 620px;
  margin: 18px 0 25px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.75
}
.profile-card {
  display: grid;
  gap: 0
}
.profile-card>div {
  padding: 15px 0;
  border-bottom: 1px solid var(--line)
}
.profile-card>div:last-child {
  border-bottom: 0
}
.profile-card span,.profile-card strong {
  display: block
}
.profile-card span {
  color: var(--muted);
  font-size: 11px
}
.profile-card strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
  font-size: 11px
}
.profile-card .active-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #16875f
}
.account-placeholders {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
  margin-top: 20px
}
.account-placeholders article {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 15px;
  padding: 24px;
  border: 1px solid #e0deec;
  border-radius: 18px;
  background: #fff
}
.account-placeholders article>span {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 13px;
  background: #efedff;
  color: #5c4fd6;
  font-size: 15px
}
.account-placeholders p,.account-placeholders strong {
  margin: 0
}
.account-placeholders strong {
  font-size: 11px
}
.account-placeholders p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55
}
.account-placeholders article>b {
  grid-column: 1/-1;
  color: #8d899c;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase
}
.account-service-groups {
  margin-top: 45px
}
.account-services-heading h2 {
  margin: 7px 0 0;
  font-size: 34px;
  letter-spacing: -.045em
}
.account-groups-grid {
  display: grid;
  grid-template-columns: 1.35fr .825fr .825fr;
  gap: 18px;
  align-items: start;
  margin-top: 24px
}
.account-service-group {
  overflow: hidden;
  border: 1px solid #e0deec;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 20px 50px rgba(27,20,77,.08)
}
.account-service-group>header {
  display: flex;
  min-height: 105px;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 22px;
  background: linear-gradient(135deg,#f6f4ff,#f2fbff)
}
.account-service-group>header strong {
  font-size: 18px
}
.account-service-group>header p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45
}
.account-service-group>header>span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: #eae6ff;
  color: #5b4ed5;
  font-size: 14px;
  font-weight: 900
}
.account-service-list {
  display: grid;
  gap: 9px;
  padding: 13px
}
.account-service-list a {
  display: grid;
  min-height: 67px;
  grid-template-columns: auto 1fr auto;
  gap: 11px;
  align-items: center;
  padding: 10px;
  border: 1px solid #ebe9f2;
  border-radius: 14px;
  color: var(--ink);
  transition: transform .2s ease,border-color .2s ease
}
.account-service-list a:hover {
  transform: translateY(-2px);
  border-color: #cfc9f5
}
.account-service-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: #efedff
}
.account-service-list a>span:nth-child(2) {
  display: grid;
  gap: 4px
}
.account-service-list strong {
  font-size: 11px
}
.account-service-list small {
  color: var(--muted);
  font-size: 11px
}
.account-service-list a>b {
  color: #7568e8;
  font-size: 11px
}
.identity-grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px
}
.identity-card {
  display: grid;
  gap: 7px;
  min-height: 125px;
  align-content: center;
  padding: 22px;
  border: 1px solid #ebe9f2;
  border-radius: 16px;
  background: #faf9fe
}
.identity-card small,.identity-card span {
  color: var(--muted);
  font-size: 11px
}
.identity-card strong {
  overflow-wrap: anywhere;
  font-size: 16px
}
.identity-exit {
  grid-column: 1/-1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 22px;
  border-radius: 16px;
  background: #25203f;
  color: #fff
}
.identity-exit p {
  margin: 5px 0 0;
  color: hsla(0,0%,100%,.6);
  font-size: 11px
}
.button-ghost-dark {
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid #d8d4e9;
  border-radius: 11px;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: 12px;
  font-weight: 850
}
.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}
.setting-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 13px;
  align-content: start;
  padding: 24px;
  border: 1px solid #e5e2ef;
  border-radius: 19px;
  background: #fcfbff
}
.setting-card>.field,.setting-card>.setting-status,.setting-card>.totp-instruction,.setting-card>.totp-secret,.setting-card>button,.setting-card>form {
  grid-column: 1/-1
}
.setting-icon {
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border-radius: 13px;
  background: #ebe8ff;
  color: #5b4dd4;
  font-size: 15px;
  font-weight: 900
}
.setting-card h3,.setting-card p {
  margin: 0
}
.setting-card h3 {
  font-size: 15px
}
.setting-card p {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5
}
.setting-card .button {
  justify-self: start
}
.setting-card>form {
  display: grid;
  gap: 14px
}
.setting-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border-radius: 11px;
  font-size: 12px;
  font-weight: 800
}
.setting-status.enabled {
  background: #eaf9f3;
  color: #16875f
}
.active-status i,.setting-status i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor
}
.totp-secret {
  display: block;
  padding: 13px;
  overflow-wrap: anywhere;
  border: 1px dashed #bcb5e7;
  border-radius: 11px;
  background: #fff;
  color: #4d3fbd;
  font-size: 14px;
  letter-spacing: .12em
}
.security-layout {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 16px
}
.activity-card,.security-score-card {
  padding: 24px;
  border: 1px solid #e5e2ef;
  border-radius: 19px;
  background: #fcfbff
}
.security-score-card {
  display: flex;
  align-items: center;
  gap: 22px
}
.security-score {
  width: 112px;
  height: 112px;
  flex: 0 0 auto;
  background: conic-gradient(#5f51d8 calc(1% * var(--score)),#e7e4f2 0)
}
.security-score,.security-score strong {
  display: grid;
  place-items: center;
  border-radius: 50%
}
.security-score strong {
  width: 82px;
  height: 82px;
  background: #fff;
  font-size: 21px
}
.activity-card h3,.activity-card p,.security-score-card h3,.security-score-card p {
  margin: 0
}
.activity-card h3,.security-score-card h3 {
  font-size: 15px
}
.activity-card p,.security-score-card p {
  margin-top: 7px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55
}
.activity-card>header {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 17px;
  border-bottom: 1px solid #e7e4ef
}
.activity-card>header>span {
  color: #6154d9;
  font-size: 12px;
  font-weight: 850
}
.activity-list>div {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #eceaf2
}
.activity-list>div:last-child {
  border-bottom: 0
}
.activity-list i {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border: 2px solid #6658db;
  border-radius: 50%
}
.activity-list span {
  display: grid;
  gap: 4px
}
.activity-list small,.activity-list strong {
  font-size: 11px
}
.activity-list small {
  color: var(--muted)
}
.empty-activity {
  padding: 20px 0
}
.account-portal {
  min-height: 900px;
  padding: 34px 0 85px;
  background: radial-gradient(circle at 12% 10%,rgba(37,200,228,.12),transparent 24%),radial-gradient(circle at 88% 15%,rgba(97,86,232,.12),transparent 28%),#f5f5fb
}
.account-profile-card {
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 30px 75px rgba(27,20,77,.12)
}
.account-profile-cover {
  position: relative;
  display: grid;
  min-height: 310px;
  grid-template-columns: 1.4fr .6fr;
  align-items: center;
  gap: 40px;
  padding: 50px;
  overflow: hidden;
  background: var(--brand-surface);
  color: #fff
}
.account-profile-cover:before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(hsla(0,0%,100%,.04) 1px,transparent 0),linear-gradient(90deg,hsla(0,0%,100%,.04) 1px,transparent 0);
  background-size: 44px 44px
}
.account-profile-cover>* {
  position: relative;
  z-index: 1
}
.account-profile-cover h1 {
  margin: 10px 0 14px;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.055em
}
.account-profile-cover>div:first-child>span {
  color: hsla(0,0%,100%,.7);
  font-size: 12px
}
.account-id-plate {
  display: grid;
  min-height: 205px;
  place-items: center;
  align-content: center;
  gap: 13px;
  border: 1px solid hsla(0,0%,100%,.25);
  border-radius: 26px;
  background: hsla(0,0%,100%,.1);
  backdrop-filter: blur(12px)
}
.account-id-plate>span {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(135deg,#6f6af4,#25c8e4);
  font-size: 21px;
  font-weight: 900
}
.account-id-plate strong {
  font-size: 19px;
  letter-spacing: .04em
}
.account-id-plate small {
  color: hsla(0,0%,100%,.65);
  font-size: 10px;
  font-weight: 850;
  letter-spacing: .1em
}
.account-profile-strip {
  display: grid;
  min-height: 112px;
  grid-template-columns: auto 1fr repeat(3,140px);
  align-items: center;
  gap: 20px;
  padding: 20px 34px 20px 50px
}
.account-profile-avatar {
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  margin-top: 0;
  border: 7px solid #fff;
  border-radius: 24px;
  background: linear-gradient(135deg,#2ec8e6,#6256e8);
  color: #fff;
  font-size: 30px;
  font-weight: 900;
  box-shadow: 0 13px 30px rgba(33,25,92,.18)
}
.account-profile-name {
  display: grid;
  gap: 7px
}
.account-profile-name strong {
  font-size: 18px
}
.account-profile-name span,.account-profile-stat span {
  color: var(--muted);
  font-size: 10px
}
.account-profile-stat {
  display: grid;
  gap: 7px;
  min-height: 55px;
  place-content: center;
  border-left: 1px solid #e5e3ee;
  text-align: center
}
.account-profile-stat strong {
  font-size: 14px
}
.account-page-nav {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px;
  margin-top: 22px;
  padding: 8px;
  border: 1px solid #e1dfeb;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 45px rgba(27,20,77,.08)
}
.account-page-nav a {
  display: grid;
  min-height: 68px;
  grid-template-columns: auto 1fr;
  gap: 11px;
  align-items: center;
  padding: 10px 15px;
  border-radius: 14px;
  color: var(--ink)
}
.account-page-nav a.active {
  background: linear-gradient(135deg,#6559e7,#5037cc);
  color: #fff
}
.account-page-nav i {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: #eeecff;
  color: #6154db;
  font-size: 12px;
  font-style: normal;
  font-weight: 900
}
.account-page-nav a.active i {
  background: #74e8f5;
  color: #342c92
}
.account-page-nav span {
  display: grid;
  gap: 4px
}
.account-page-nav strong {
  font-size: 12px
}
.account-page-nav small {
  color: #918da2;
  font-size: 10px
}
.account-page-nav a.active small {
  color: hsla(0,0%,100%,.65)
}
.account-page-content {
  margin-top: 28px;
  padding: 34px;
  border: 1px solid #e0deea;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 22px 55px rgba(27,20,77,.07)
}
.account-page-content>header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: 25px
}
.account-page-content>header .section-kicker {
  grid-column: 1/-1
}
.account-page-content>header h2 {
  margin: 6px 0 0;
  font-size: 30px;
  letter-spacing: -.045em
}
.account-page-content>header>span {
  color: var(--muted);
  font-size: 11px
}
.security-percent {
  padding: 8px 14px;
  border-radius: 10px;
  background: #6255e2;
  color: #fff!important;
  font-weight: 850
}
.security-checks {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 12px;
  margin-bottom: 16px
}
.security-checks article {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 18px;
  border: 1px solid #f0d5dd;
  border-radius: 15px;
  background: #fff7f9
}
.security-checks article.complete {
  border-color: #cceee2;
  background: #f1fbf7
}
.security-checks i {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #ffe3eb;
  color: #c34668;
  font-style: normal;
  font-weight: 900
}
.security-checks .complete i {
  background: #d9f7ec;
  color: #16875f
}
.security-checks div {
  display: grid;
  gap: 5px
}
.security-checks strong {
  font-size: 11px
}
.security-checks span {
  color: var(--muted);
  font-size: 10px
}
.security-score-card a {
  display: inline-block;
  margin-top: 12px;
  color: #5a4bd3;
  font-size: 11px;
  font-weight: 850
}
.settings-accordion {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start
}
.setting-panel {
  overflow: hidden;
  border: 1px solid #e2dfeb;
  border-radius: 16px;
  background: #fbfaff
}
.setting-panel summary {
  display: grid;
  min-height: 64px;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  cursor: pointer;
  list-style: none
}
.setting-panel summary::-webkit-details-marker {
  display: none
}
.setting-panel summary strong {
  font-size: 12px
}
.setting-panel summary>b {
  color: #5b4ed6;
  font-size: 11px
}
.setting-panel[open] summary {
  border-bottom: 1px solid #e3e0eb;
  background: #fff
}
.setting-panel-body,.setting-panel>form {
  display: grid;
  gap: 16px;
  padding: 20px
}
.setting-panel form .button {
  justify-self: stretch
}
.setting-panel p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6
}
.setting-icon img {
  display: block
}
.authenticator-panel[open] {
  grid-column: 1/-1
}
.totp-setup {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px
}
.totp-setup>div {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 20px;
  border: 1px solid #e7e4ef;
  border-radius: 15px;
  background: #fff
}
.totp-setup h3 {
  margin: 0;
  font-size: 14px
}
.totp-setup ol {
  margin: 0;
  padding-left: 19px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.8
}
.totp-qr {
  width: 220px;
  max-width: 100%;
  margin: 2px auto 0;
  padding: 10px;
  border-radius: 12px;
  background: #fff
}
.totp-qr svg {
  display: block;
  width: 100%;
  height: auto
}
.totp-confirm {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: end
}
.totp-confirm .button {
  min-width: 180px
}
.recovery-codes {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid #dcd8eb;
  border-radius: 14px;
  background: #faf9ff
}
.recovery-codes h3,.recovery-codes p {
  margin: 0
}
.recovery-code-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px
}
.recovery-code-grid code {
  padding: 10px 12px;
  border: 1px solid #e1deef;
  border-radius: 9px;
  background: #fff;
  color: #332987;
  font: 700 12px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;
  letter-spacing: .05em;
  text-align: center
}
.recovery-code-count {
  margin: 0;
  color: var(--muted)
}
.totp-recovery-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 12px;
  align-items: end
}
.services-main {
  min-height: 900px;
  padding-bottom: 90px;
  background: #f6f5fb
}
.services-hero {
  padding: 75px 0 68px;
  background: var(--brand-surface);
  color: #fff
}
.services-hero h1 {
  margin: 10px 0 18px;
  font-size: calc(clamp(42px, 6vw, 60px));
  line-height: .98;
  letter-spacing: -.06em
}
.services-hero h1 span {
  color: #86ecff
}
.services-hero>.shell>p:last-child {
  max-width: 670px;
  margin: 0;
  color: hsla(0,0%,100%,.7);
  font-size: 14px;
  line-height: 1.7
}
.service-category {
  overflow: hidden;
  border: 1px solid #e1deeb;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(27,20,77,.07)
}
.service-category>header {
  display: grid;
  min-height: 115px;
  grid-template-columns: auto 1fr auto;
  gap: 17px;
  align-items: center;
  padding: 24px 28px;
  background: linear-gradient(135deg,#f3f1ff,#f2fbfd)
}
.service-category>header>span {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(50,39,116,.09)
}
.service-category h2,.service-category p {
  margin: 0
}
.service-category h2 {
  font-size: 23px
}
.service-category p {
  margin-top: 6px;
  color: var(--muted);
  font-size: 11px
}
.service-category>header>b {
  padding: 8px 12px;
  border-radius: 10px;
  background: #e8e5ff;
  color: #5c4fd5;
  font-size: 11px
}
.services-hero-original {
  padding: 34px 0 0;
  background: radial-gradient(circle at 10% 10%,rgba(37,200,228,.13),transparent 25%),#f6f5fb
}
.services-hero-card {
  overflow: hidden;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(27,20,77,.12)
}
.services-cover {
  display: grid;
  min-height: 320px;
  grid-template-columns: 1.4fr .6fr;
  gap: 38px;
  align-items: center;
  padding: 48px;
  background: var(--brand-surface);
  color: #fff
}
.services-cover h1 {
  margin: 10px 0 17px;
  font-size: calc(clamp(40px, 5vw, 60px));
  line-height: .96;
  letter-spacing: -.06em
}
.services-cover>div:first-child>p:last-child {
  max-width: 650px;
  margin: 0;
  color: hsla(0,0%,100%,.7);
  font-size: 16px;
  line-height: 1.7
}
.services-cover-mark {
  display: grid;
  min-height: 205px;
  place-items: center;
  align-content: center;
  gap: 12px;
  border: 1px solid hsla(0,0%,100%,.24);
  border-radius: 25px;
  background: hsla(0,0%,100%,.1)
}
.services-cover-mark span {
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 22px;
  background: linear-gradient(135deg,#6a63ef,#25c8e4);
  font-size: 21px;
  font-weight: 900
}
.services-cover-mark strong {
  font-size: 18px
}
.services-cover-mark small {
  color: hsla(0,0%,100%,.64);
  font-size: 11px;
  letter-spacing: .1em
}
.services-profile-strip {
  display: grid;
  min-height: 105px;
  grid-template-columns: repeat(3,1fr) auto;
  gap: 0;
  align-items: center;
  padding: 20px 32px
}
.services-profile-strip>div {
  display: grid;
  gap: 6px;
  padding: 0 28px;
  border-right: 1px solid #e6e3ed
}
.services-profile-strip strong {
  font-size: 18px
}
.services-profile-strip span {
  color: var(--muted);
  font-size: 11px
}
.services-profile-strip>a {
  margin-left: 28px;
  padding: 13px 18px;
  border-radius: 12px;
  background: #6255e2;
  color: #fff;
  font-size: 11px;
  font-weight: 850
}
.service-goal-list {
  display: grid;
  gap: 28px;
  margin-top: 30px
}
.service-goal-section {
  padding: 32px;
  scroll-margin-top: 78px;
  border: 1px solid #e1deeb;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(27,20,77,.07)
}
.service-goal-section>header {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: 45px;
  align-items: end;
  margin-bottom: 24px
}
.service-goal-section h2 {
  margin: 7px 0 0;
  font-size: 31px;
  letter-spacing: -.045em
}
.service-goal-section>header>p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
  text-align: right
}
.converter-main {
  min-height: 900px;
  padding-bottom: 90px;
  background: #f6f5fb
}
.converter-hero {
  padding: 34px 0 0;
  color: #fff
}
.converter-hero a {
  color: #8ceeff;
  font-size: 16px;
  font-weight: 850
}
.converter-hero .services-cover {
  min-height: 0;
  padding: 32px;
  gap: 28px
}
.services-cover .tool-back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 16px;
  line-height: 1.5
}
.tool-direction-icon {
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px
}
.tool-direction-back,[dir=rtl] .tool-direction-icon {
  transform: rotate(180deg)
}
[dir=rtl] .tool-direction-back {
  transform: none
}
.converter-hero .section-kicker {
  margin-top: 26px
}
.converter-hero h1 {
  margin: 18px 0 17px;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: -.045em
}
.converter-hero .services-cover-mark img {
  display: block;
  filter: brightness(0) invert(1)
}
.converter-hero .services-profile-strip strong {
  color: var(--ink)
}
.converter-workspace {
  position: relative;
  margin-top: 30px;
  scroll-margin-top: 78px;
  padding: 30px;
  border: 1px solid #dcdae8;
  border-radius: 25px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(27,20,77,.12)
}
.converter-options {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px;
  margin-bottom: 16px
}
.converter-options .image-quality-control {
  grid-column: 1/-1
}
[data-mode=compress] .converter-options {
  display: block
}
.converter-format-note {
  margin: -4px 0 16px;
  padding: 12px 14px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #faf9fd;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55
}
.compression-options {
  padding: 0 2px
}
.compression-quality {
  display: grid;
  gap: 11px
}
.fixed-conversion strong {
  display: flex;
  min-height: 47px;
  align-items: center;
  font-size: 18px
}
.converter-option-card {
  display: grid;
  align-content: start;
  gap: 11px;
  min-height: 128px;
  padding: 16px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fcfcfe;
  transition: border-color .2s ease,box-shadow .2s ease,background .2s ease
}
.converter-option-card:focus-within {
  border-color: #c9c6d5;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(35,30,66,.05)
}
.converter-options span {
  font-size: 11px;
  font-weight: 800
}
.converter-options select,.format-preserve {
  width: 100%;
  height: 47px;
  padding: 0 13px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  outline: 0
}
.converter-options select:focus {
  border-color: #c9c6d5;
  box-shadow: 0 0 0 3px rgba(35,30,66,.05)
}
.format-preserve {
  display: flex;
  align-items: center;
  color: var(--muted);
  font-size: 11px
}
.quality-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px
}
.quality-heading label {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 9px;
  border: 1px solid #dcdae8;
  border-radius: 10px;
  background: #fff
}
.quality-heading input {
  width: 42px;
  border: 0;
  outline: 0;
  background: transparent;
  font-weight: 800
}
.image-quality-control .quality-heading input[type=number] {
  font-size: 12px
}
.quality-card input[type=range] {
  --quality: 100%;
  width: 100%;
  height: 18px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer
}
.quality-card input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg,#6455e3 0 var(--quality),#e6e3f0 var(--quality) 100%)
}
.quality-card input[type=range]::-moz-range-track {
  height: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg,#6455e3 0 var(--quality),#e6e3f0 var(--quality) 100%)
}
.quality-card input[type=range]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -5px;
  appearance: none;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #5b49dc;
  box-shadow: 0 2px 8px rgba(47,34,133,.35)
}
.quality-card input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #5b49dc;
  box-shadow: 0 2px 8px rgba(47,34,133,.35)
}
.quality-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}
.quality-presets button {
  min-height: 29px;
  padding: 0 9px;
  border: 1px solid #ddd9eb;
  border-radius: 9px;
  background: #fff;
  color: #5f5874;
  font-size: 14px;
  cursor: pointer
}
.quality-presets button.active,.quality-presets button:hover {
  border-color: #6758e8;
  background: #eeeaff;
  color: #5140cf
}
.quality-presets .recommended {
  flex-grow: 1
}
.image-quality-control .quality-presets {
  display: grid;
  grid-template-columns: repeat(3,minmax(54px,1fr)) minmax(150px,2fr) minmax(62px,1fr)
}
.image-quality-control .quality-presets .recommended {
  min-width: 0
}
.detected-formats {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border: 1px solid #dcdae8;
  border-radius: 13px;
  background: #fcfcfe
}
.detected-formats>span {
  color: var(--muted);
  font-size: 11px
}
.detected-formats>div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px
}
.detected-formats b {
  padding: 6px 9px;
  border-radius: 8px;
  background: #ece9ff;
  color: #5140cf;
  font-size: 11px
}
.converter-drop {
  display: grid;
  min-height: 330px;
  place-items: center;
  align-content: center;
  gap: 13px;
  padding: 30px;
  border: 2px dashed #cfc9ec;
  border-radius: 20px;
  background: linear-gradient(135deg,#faf9ff,#f4fcfe);
  text-align: center;
  cursor: pointer
}
.converter-drop.dragging {
  border-color: #6255e2;
  background: #f1efff
}
.converter-drop h2,.converter-drop p {
  margin: 0
}
.converter-drop h2 {
  font-size: 25px
}
.converter-drop p {
  color: var(--muted);
  font-size: 11px
}
.converter-summary {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  align-items: center;
  margin-top: 18px;
  padding: 18px;
  border-radius: 15px;
  background: #f4f2fb
}
.converter-summary>div {
  display: grid;
  gap: 5px
}
.converter-summary strong {
  font-size: 18px
}
.converter-summary span {
  color: var(--muted);
  font-size: 11px
}
.converter-progress {
  margin-top: 18px
}
.converter-progress>span {
  display: block;
  height: 9px;
  overflow: hidden;
  border-radius: 10px;
  background: #e9e6f2
}
.converter-progress i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg,#6255e2,#25c8e4);
  transition: width .2s
}
.converter-progress p {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11px
}
.converter-results {
  margin-top: 25px
}
.converter-results>header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px
}
.converter-results h2 {
  margin: 5px 0 0;
  font-size: 25px
}
.converter-result-actions {
  display: flex;
  gap: 9px;
  align-items: center
}
.converter-results [data-result-list] {
  display: grid;
  gap: 9px;
  margin-top: 16px
}
.converter-results [data-result-list]>div {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 15px;
  align-items: center;
  padding: 13px;
  border: 1px solid #e8e5ef;
  border-radius: 12px
}
.converter-results [data-result-list] span {
  display: grid;
  gap: 4px
}
.converter-results b,.converter-results button,.converter-results small,.converter-results strong {
  font-size: 11px
}
.converter-results small {
  color: var(--muted)
}
.converter-results b {
  color: #16875f
}
.result-row-actions {
  display: flex;
  gap: 7px;
  align-items: center
}
.converter-results .result-row-actions button {
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: #6255e2;
  color: #fff;
  cursor: pointer
}
.converter-results .result-row-actions .result-delete {
  width: 32px;
  height: 32px;
  padding: 0;
  background: #f3edf1;
  color: #a33a5c;
  font-size: 18px
}
.image-result-grid {
  grid-template-columns: repeat(auto-fill,minmax(210px,1fr));
  gap: 14px!important
}
.image-result-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e1deeb;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(39,30,92,.06)
}
.image-result-preview {
  display: grid;
  aspect-ratio: 4/3;
  place-items: center;
  overflow: hidden;
  background: linear-gradient(135deg,#f5f3ff,#eefbfd)
}
.image-result-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover
}
.image-result-preview img.is-placeholder {
  width: 54px;
  height: 54px;
  object-fit: contain
}
.image-result-content {
  display: grid;
  gap: 7px;
  padding: 13px
}
.image-result-content>strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap
}
.image-result-content>small {
  color: var(--muted);
  font-size: 10px
}
.image-result-content>b {
  color: #16875f;
  font-size: 10px
}
.image-result-card .result-row-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 3px
}
.image-result-card .result-row-actions button {
  min-height: 36px
}
.image-result-card .result-row-actions .result-delete {
  width: auto;
  height: auto;
  padding: 8px 12px;
  background: #f3edf1;
  color: #a33a5c;
  font-size: 11px
}
.image-result-card .result-row-actions .result-delete:hover {
  background: #f9e3ea;
  color: #8e2949
}
.image-result-card .result-row-actions .is-complete {
  background: #16875f;
  box-shadow: none
}
.text-tool-editors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}
.text-tool-editors>label {
  display: grid;
  gap: 8px
}
.text-replace-options label>span,.text-tool-editors>label>span,.text-tool-options label>span {
  font-size: 12px;
  font-weight: 850
}
.text-tool-editors textarea {
  width: 100%;
  min-height: 340px;
  resize: vertical;
  padding: 16px;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  background: #fcfbff;
  color: var(--ink);
  font: 12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;
  outline: none
}
.text-replace-options input:focus,.text-tool-editors textarea:focus,.text-tool-options select:focus {
  border-color: #bbb5dc;
  box-shadow: 0 0 0 3px rgba(98,85,226,.08)
}
.text-tool-editors small {
  color: var(--muted);
  font-size: 11px
}
.text-tool-editors small b {
  color: #5b4dd5;
  font-size: inherit
}
.text-replace-options,.text-tool-options {
  display: flex;
  align-items: end;
  gap: 10px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  background: #fcfbff
}
.text-tool-options>button {
  min-height: 38px;
  padding: 8px 13px;
  border: 1px solid #ddd9ec;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer
}
.text-tool-options>button.active,.text-tool-options>button:hover {
  border-color: #6658e5;
  background: #6255e2;
  color: #fff
}
.text-replace-options label,.text-tool-options label {
  display: grid;
  gap: 7px
}
.text-replace-options input,.text-tool-options select {
  height: 42px;
  padding: 0 12px;
  border: 1px solid #dcdae8;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  outline: none
}
.text-replace-options .text-check,.text-tool-options .text-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px
}
.text-check input {
  accent-color: #6255e2
}
.text-check span {
  font-size: 11px!important;
  font-weight: 700!important
}
.text-replace-options label:not(.text-check) {
  flex: 1
}
.text-counter-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 10px;
  align-content: start;
  min-height: 340px;
  padding: 14px;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  background: #fcfbff
}
.text-counter-grid>div {
  display: grid;
  place-content: center;
  gap: 5px;
  min-height: 92px;
  border: 1px solid #e4e1ed;
  border-radius: 12px;
  background: #fff;
  text-align: center
}
.text-counter-grid strong {
  color: #5b4dd5;
  font-size: 25px
}
.text-counter-grid span {
  color: var(--muted);
  font-size: 11px
}
.local-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto
}
.image-editor-controls button,.local-tabs button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid #ddd9ec;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer
}
.image-editor-controls button:hover,.local-tabs button.active,.local-tabs button:hover {
  background: #6255e2;
  color: #fff
}
.data-output,.local-panel {
  display: grid;
  gap: 12px
}
.data-output textarea,.local-panel textarea,.local-source,.local-tool-workspace>[data-result] {
  width: 100%;
  min-height: 180px;
  padding: 14px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fcfbff;
  color: var(--ink);
  font: 12px/1.6 ui-monospace,Consolas,monospace
}
.local-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin: 14px 0
}
.local-actions .button {
  min-height: 42px;
  padding: 0 17px;
  font-size: 11px
}
.color-controls,.generator-options,.image-editor-controls,.pdf-options {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fcfbff
}
.color-controls label,.generator-options label,.image-editor-controls label,.pdf-options label {
  display: grid;
  gap: 6px;
  font-size: 11px;
  font-weight: 800
}
.color-controls input:not([type=color]),.generator-options input,.image-editor-controls input,.pdf-options input {
  height: 39px;
  padding: 0 10px;
  border: 1px solid #dcdae8;
  border-radius: 9px;
  background: #fff
}
.data-output article {
  border-radius: 12px
}
.code-output,.data-output article {
  min-height: 220px;
  padding: 18px;
  border: 1px solid #dcdae8;
  background: #fff
}
.code-output {
  display: grid;
  place-items: center;
  border-radius: 14px
}
.code-output svg {
  max-width: 100%;
  max-height: 360px
}
.image-editor-canvas {
  display: block;
  max-width: 100%;
  max-height: 650px;
  margin: 16px auto;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  background: #eef0f7
}
.gradient-preview {
  min-height: 260px;
  margin: 16px 0;
  border-radius: 18px
}
.color-values {
  display: grid;
  gap: 8px;
  margin-bottom: 12px
}
.color-values span {
  padding: 10px;
  border: 1px solid #dcdae8;
  border-radius: 10px;
  font-size: 11px
}
.color-controls input[type=color] {
  width: 64px;
  height: 42px;
  border: 0;
  background: none
}
.pdf-options input {
  min-width: 260px
}
.local-subtabs {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: -6px 0 16px;
  padding: 12px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fcfbff;
  overflow-x: auto
}
.local-subtabs>span {
  margin-right: auto;
  color: var(--ink);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap
}
.local-subtabs button {
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid #ddd9ec;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: 800 11px/1 inherit;
  white-space: nowrap;
  cursor: pointer
}
.local-subtabs button.active,.local-subtabs button:hover {
  border-color: #6255e2;
  background: #6255e2;
  color: #fff
}
.local-sub-options {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: end;
  margin: -6px 0 16px
}
.local-sub-options>label {
  width: 100%;
  min-width: 0;
  margin: 0
}
.local-sub-options .watermark-check {
  min-height: 60px;
  align-self: stretch
}
.local-data-field {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0
}
.local-data-field>span:first-child {
  color: var(--ink);
  font-size: 12px;
  font-weight: 850
}
.local-data-field .rich-text-hint {
  top: 40px
}
.local-data-field textarea:disabled {
  background: #f4f3f8;
  color: #8b869c;
  cursor: not-allowed
}
.local-data-field textarea:not(:placeholder-shown)+.rich-text-hint {
  display: none
}
.generator-options .watermark-check {
  display: flex;
  min-height: 39px
}
.local-result-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px
}
.local-result-actions .button {
  min-height: 42px;
  padding: 0 17px;
  font-size: 11px
}
.text-diff-results>header>.button {
  margin-left: auto;
  white-space: nowrap
}
.gradient-angle-control {
  align-content: center;
  min-width: 240px
}
.gradient-angle-control b {
  color: #6255e2;
  font-size: 11px
}
.color-controls .gradient-angle-control input[type=range] {
  --quality: 37.5%;
  width: 100%;
  height: 18px;
  margin: 0;
  padding: 0;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer
}
.color-controls .gradient-angle-control input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg,#6455e3 0 var(--quality),#e6e3f0 var(--quality) 100%)
}
.color-controls .gradient-angle-control input[type=range]::-moz-range-track {
  height: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg,#6455e3 0 var(--quality),#e6e3f0 var(--quality) 100%)
}
.color-controls .gradient-angle-control input[type=range]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -5px;
  appearance: none;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #5b49dc;
  box-shadow: 0 2px 8px rgba(47,34,133,.35)
}
.color-controls .gradient-angle-control input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #5b49dc;
  box-shadow: 0 2px 8px rgba(47,34,133,.35)
}
.local-tool-workspace[data-local-tool=colors] .color-controls {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-items: stretch
}
.gradient-color-card {
  display: grid;
  grid-template-columns: 72px minmax(110px,.7fr) minmax(150px,1fr);
  gap: 12px;
  margin: 0;
  padding: 14px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fff
}
.gradient-color-card legend {
  padding: 0 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900
}
.gradient-color-card label {
  min-width: 0;
  align-content: start
}
.gradient-color-card input:not([type=color]) {
  width: 100%;
  min-width: 0
}
.gradient-color-card input[type=color] {
  width: 100%;
  height: 39px;
  padding: 3px;
  border: 1px solid #dcdae8;
  border-radius: 9px;
  background: #fff
}
.gradient-angle-card {
  margin: 16px 0;
  padding: 16px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fcfcfe
}
.gradient-angle-card .gradient-angle-presets {
  grid-template-columns: repeat(9,minmax(52px,1fr))
}
.gradient-angle-card .quality-presets .recommended {
  min-width: 0
}
@media (max-width:900px) {
.local-tool-workspace[data-local-tool=colors] .color-controls {
  grid-template-columns: 1fr
}
.gradient-angle-card .gradient-angle-presets {
  grid-template-columns: repeat(5,minmax(52px,1fr))
}
}
@media (max-width:560px) {
.gradient-color-card {
  grid-template-columns: 64px 1fr
}
.gradient-color-card label:last-child {
  grid-column: 1/-1
}
.gradient-angle-card .gradient-angle-presets {
  grid-template-columns: repeat(3,minmax(52px,1fr))
}
}
.design-suite-tabs {
  position: sticky;
  z-index: 5;
  top: 76px;
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  padding: 10px;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  background: hsla(0,0%,100%,.96);
  box-shadow: 0 12px 30px rgba(36,27,88,.08);
  backdrop-filter: blur(12px)
}
.design-palette-link,.design-suite-tabs button {
  display: flex;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 7px 9px;
  border: 1px solid #ddd9ec;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  white-space: normal
}
.design-palette-link:hover,.design-suite-tabs button.active,.design-suite-tabs button:hover {
  border-color: #6255e2;
  background: #6255e2;
  color: #fff
}
.design-dynamic-panel>h2 {
  margin: 4px 0 18px;
  font-size: 26px
}
.design-control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(190px,1fr));
  gap: 12px;
  margin-bottom: 16px;
  padding: 14px;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  background: #fcfbff
}
.design-control-grid label,.design-palette-input,.design-select {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800
}
.design-control-grid input:not([type=color]),.design-control-grid select,.design-select select {
  width: 100%;
  height: 42px;
  padding: 0 11px;
  border: 1px solid #dcdae8;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 11px
}
.design-control-grid input[type=color] {
  width: 100%;
  height: 42px;
  padding: 3px;
  border: 1px solid #dcdae8;
  border-radius: 10px;
  background: #fff
}
.design-control-grid input[type=range] {
  padding: 0;
  accent-color: #6255e2
}
.design-control-grid output {
  color: #6255e2;
  font-size: 11px;
  font-weight: 900
}
.design-preview {
  display: grid;
  min-height: 270px;
  place-items: center;
  margin: 14px 0;
  padding: 24px;
  border-radius: 18px;
  background: #f4f2fb;
  font-size: 28px;
  font-weight: 900;
  transition: .2s
}
.design-code,.design-preview {
  border: 1px solid #dcdae8;
  color: var(--ink)
}
.design-code {
  width: 100%;
  min-height: 110px;
  padding: 14px;
  border-radius: 12px;
  background: #fcfbff;
  font: 12px/1.6 ui-monospace,Consolas,monospace;
  resize: vertical
}
.design-value-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px
}
.design-value-grid button {
  display: grid;
  gap: 6px;
  padding: 13px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer
}
.design-value-grid b {
  color: #6255e2;
  font-size: 11px
}
.design-value-grid span {
  overflow-wrap: anywhere;
  font: 12px/1.45 ui-monospace,Consolas,monospace
}
.contrast-sample {
  min-height: 220px;
  display: grid;
  place-items: center;
  margin: 14px 0;
  border-radius: 18px;
  font-size: 28px;
  font-weight: 900;
  text-align: center
}
.design-metrics {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fff;
  flex-wrap: wrap
}
.design-metrics strong {
  color: #6255e2;
  font-size: 24px
}
.design-metrics span {
  color: var(--muted);
  font-size: 11px
}
.scheme-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(110px,1fr));
  gap: 10px;
  margin: 14px 0
}
.scheme-swatches button,.scheme-swatches>i {
  display: grid;
  min-height: 110px;
  overflow: hidden;
  border: 1px solid #dcdae8;
  border-radius: 13px;
  background: #fff;
  cursor: pointer
}
.scheme-swatches button i,.scheme-swatches>i {
  min-height: 76px;
  background: var(--swatch)
}
.scheme-swatches button b {
  padding: 9px;
  color: var(--ink);
  font-size: 11px
}
.preview-box-shadow,.preview-glass,.preview-radius {
  width: min(100%,620px);
  min-height: 250px;
  margin: 30px auto;
  background: linear-gradient(135deg,#fff,#e9faff)
}
.preview-text-shadow {
  background: #fff
}
.preview-filters {
  background: 50%/cover url("/assets/images/og-ggmet.png")
}
.preview-glass {
  background-color: hsla(0,0%,100%,.24)
}
.svg-divider-preview {
  display: grid;
  min-height: 250px;
  place-items: end;
  margin: 14px 0;
  overflow: hidden;
  border-radius: 18px;
  background: linear-gradient(135deg,#f4f2ff,#e8fbff)
}
.svg-divider-preview svg {
  display: block;
  width: 100%;
  height: auto
}
.design-image-canvas {
  display: block;
  max-width: 100%;
  max-height: 620px;
  margin: 16px auto;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  background: #f3f1f8;
  cursor: crosshair
}
.design-palette-input textarea {
  min-height: 150px;
  padding: 14px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fcfbff;
  font: 12px/1.6 ui-monospace,Consolas,monospace
}
@media(max-width:900px) {
.design-suite-tabs {
  grid-template-columns: repeat(3,minmax(0,1fr));
  top: 70px
}
.design-value-grid {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
}
@media(max-width:560px) {
.design-suite-tabs {
  position: static;
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.design-value-grid {
  grid-template-columns: 1fr
}
.design-dynamic-panel>h2 {
  font-size: 22px
}
}
.local-tool-workspace[data-local-tool=colors] .design-code,.local-tool-workspace[data-local-tool=colors] textarea[data-result] {
  display: block;
  width: 100%;
  min-height: 108px;
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fcfbff;
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(98,85,226,.04);
  font: 12px/1.6 ui-monospace,Consolas,monospace;
  resize: vertical
}
.design-converter-layout {
  display: grid;
  grid-template-columns: minmax(240px,1fr) minmax(0,1fr);
  gap: 14px
}
.design-color-choice {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 182px;
  padding: 16px;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  background: #fcfbff;
  font-size: 11px;
  font-weight: 800
}
.design-color-choice label {
  display: grid;
  height: 100%;
  gap: 10px
}
.design-color-choice input[type=color] {
  width: 100%;
  min-height: 132px;
  padding: 5px;
  border: 1px solid #bbb5dc;
  border-radius: 12px;
  background: var(--chosen-color,#6255e2);
  cursor: pointer
}
.design-value-grid {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.design-value-grid button {
  min-height: 86px
}
.design-color-output-grid>div {
  display: grid;
  grid-template-columns: 1fr minmax(130px,.7fr);
  gap: 10px;
  align-items: end
}
.design-color-copy {
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 9px;
  height: 42px;
  padding: 3px;
  border: 1px solid #dcdae8;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  cursor: pointer
}
.design-color-copy input[type=color] {
  display: block;
  width: 42px;
  height: 34px;
  padding: 2px;
  border: 0;
  border-radius: 7px;
  background: #fff;
  opacity: 1
}
.design-color-copy b {
  font: 11px ui-monospace,Consolas,monospace
}
.design-color-copy:hover {
  border-color: #6255e2
}
.scheme-swatches button svg,.scheme-swatches>svg {
  display: block;
  width: 100%;
  height: 82px;
  overflow: hidden;
  border-radius: 12px
}
.scheme-swatches>svg {
  height: 110px;
  border: 1px solid #dcdae8;
  background: #fff
}
.scheme-swatches button svg rect,.scheme-swatches>svg rect {
  width: 100%;
  height: 100%
}
.scheme-swatches>svg {
  min-height: 110px;
  border: 0;
  border-radius: 13px
}
.scheme-swatches>svg rect {
  rx: 0;
  ry: 0
}
.design-range {
  grid-column: 1/-1;
  display: block;
  margin: 0;
  padding: 14px;
  border: 1px solid #dcdae8;
  border-radius: 13px;
  background: #fcfbff
}
.design-range .quality-heading {
  margin-bottom: 9px
}
.design-range .quality-heading label {
  display: flex;
  grid-template-columns: none;
  gap: 4px
}
.design-control-grid .design-range .quality-heading input[type=number] {
  width: 64px;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  outline: 0;
  text-align: center
}
.design-range>input[type=range] {
  --quality: 50%;
  width: 100%;
  height: 18px;
  padding: 0;
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  accent-color: transparent
}
.design-range>input[type=range]::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg,#6455e3 0 var(--quality),#e6e3f0 var(--quality) 100%)
}
.design-range>input[type=range]::-webkit-slider-thumb {
  width: 18px;
  height: 18px;
  margin-top: -5px;
  appearance: none;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #5b49dc;
  box-shadow: 0 2px 8px rgba(47,34,133,.35)
}
.design-range>input[type=range]::-moz-range-track {
  height: 8px;
  border-radius: 10px;
  background: linear-gradient(90deg,#6455e3 0 var(--quality),#e6e3f0 var(--quality) 100%)
}
.design-range>input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: #5b49dc
}
.design-range .quality-presets {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit,minmax(52px,1fr));
  margin-top: 8px
}
.design-range .quality-presets button {
  width: 100%;
  padding-inline: 4px
}
.design-editor-grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(320px,1fr);
  gap: 16px;
  align-items: stretch
}
.design-editor-grid>.design-preview {
  width: 100%;
  height: 100%;
  min-height: 360px;
  margin: 0
}
.design-editor-grid>.design-control-grid {
  align-content: start;
  height: 100%;
  margin: 0
}
.design-editor-grid+.design-code {
  margin-top: 16px
}
.preview-text-shadow {
  font-size: 52px!important;
  background: #fff!important;
  color: #15122b!important
}
.filter-preview-column {
  position: sticky;
  top: 94px;
  align-self: start;
  min-width: 0
}
.filter-preview-column .preview-filters {
  position: static;
  width: 100%;
  height: auto!important;
  min-height: 0!important;
  margin: 0;
  overflow: hidden;
  padding: 0!important;
  background: #eef0f8!important
}
.preview-filters img {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100vh - 220px);
  object-fit: contain
}
.preview-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #15122b;
  background: linear-gradient(135deg,#6255e2,#25c8e4 55%,#ff5ba7)!important
}
.preview-glass span {
  position: relative;
  z-index: 1;
  padding: 24px;
  border: 1px solid hsla(0,0%,100%,.35);
  border-radius: 16px;
  background: hsla(0,0%,100%,.24);
  box-shadow: 0 18px 45px rgba(35,20,90,.18);
  font-size: 18px;
  transition: .2s
}
.design-editor-grid .design-control-grid input[type=color] {
  width: 100%;
  min-width: 0
}
.design-dynamic-panel[data-active-design-tool=box-shadow] .design-control-grid label:has(input[type=color]),.design-dynamic-panel[data-active-design-tool=shades] .design-control-grid label:has(input[type=color]),.design-dynamic-panel[data-active-design-tool=text-shadow] .design-control-grid label:has(input[type=color]) {
  grid-column: 1/-1;
  width: 100%
}
.design-dynamic-panel[data-active-design-tool=box-shadow] input[type=color],.design-dynamic-panel[data-active-design-tool=shades] input[type=color],.design-dynamic-panel[data-active-design-tool=text-shadow] input[type=color] {
  display: block;
  width: 100%!important;
  min-width: 100%;
  height: 58px
}
.scheme-swatches button.copied {
  border-color: #6255e2;
  box-shadow: 0 0 0 3px rgba(98,85,226,.1)
}
.design-color-copy.copied,.design-value-grid button.copied {
  border-color: #6255e2;
  background: #f5f3ff;
  box-shadow: 0 0 0 3px rgba(98,85,226,.12)
}
.design-dynamic-panel[data-active-design-tool=multistop]>.design-control-grid {
  grid-template-columns: repeat(4,minmax(0,1fr))
}
.filter-image-picker {
  display: grid;
  grid-template-columns: minmax(180px,auto) minmax(0,1fr);
  gap: 12px;
  align-items: center;
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  background: #fcfbff
}
.filter-image-picker>span {
  font-size: 11px;
  font-weight: 850
}
.filter-image-picker .styled-file-input {
  width: 100%;
  min-width: 0
}
.filter-preview-column .filter-image-picker {
  grid-template-columns: 1fr;
  margin: 12px 0 0
}
.color-result-editor {
  align-items: stretch
}
.color-result-editor>.design-control-grid {
  height: 100%;
  margin: 0;
  align-content: start
}
.color-result-pane {
  display: grid;
  grid-template-rows: minmax(220px,1fr) auto;
  gap: 12px
}
.color-result-pane .contrast-sample {
  height: 100%;
  min-height: 280px;
  margin: 0;
  border: 1px solid #dcdae8
}
.color-result-pane .design-metrics {
  margin: 0
}
.color-result-swatch {
  min-height: 360px;
  margin: 0
}
.color-result-swatch button {
  height: 100%;
  min-height: 360px
}
.color-result-swatch button svg {
  height: 100%;
  min-height: 290px
}
.design-dynamic-panel.is-shades-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(320px,1fr);
  gap: 16px
}
.design-dynamic-panel.is-shades-layout>h2 {
  grid-column: 1/-1
}
.design-dynamic-panel.is-shades-layout>.design-control-grid {
  grid-column: 2;
  grid-row: 2;
  margin: 0
}
.design-dynamic-panel.is-shades-layout>.scheme-swatches {
  grid-column: 1;
  grid-row: 2;
  min-height: 360px;
  margin: 0
}
.design-dynamic-panel.is-shades-layout>.scheme-swatches button {
  height: 100%;
  min-height: 360px
}
.design-dynamic-panel.is-shades-layout>.scheme-swatches button svg {
  height: 100%;
  min-height: 290px
}
.design-image-picker h3,.design-image-picker p {
  margin: 0
}
.design-image-workspace[hidden] {
  display: none
}
.design-image-workspace {
  padding: 14px;
  border-radius: 16px
}
.design-image-workspace,.vision-buttons {
  margin-top: 14px;
  border: 1px solid #dcdae8;
  background: #fcfbff
}
.vision-buttons {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  padding: 10px;
  border-radius: 13px
}
.vision-buttons button {
  min-height: 40px;
  border: 1px solid #dcdae8;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800
}
.vision-buttons button.active {
  border-color: #6255e2;
  background: #6255e2;
  color: #fff
}
.eyedropper-history {
  margin-top: 14px;
  padding: 15px;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  background: #fff
}
.eyedropper-history header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px
}
.eyedropper-history header>div {
  display: grid;
  gap: 3px
}
.eyedropper-history header strong {
  font-size: 14px
}
.eyedropper-history header span {
  color: var(--muted);
  font-size: 11px
}
.eyedropper-history header button {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid #dcdae8;
  border-radius: 9px;
  background: #fff;
  color: #6255e2;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer
}
.eyedropper-history>[data-color-history-list] {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px
}
.eyedropper-history [data-history-color] {
  display: grid;
  grid-template-columns: 54px 1fr;
  grid-template-rows: auto auto;
  gap: 2px 9px;
  min-width: 0;
  padding: 7px;
  border: 1px solid #dcdae8;
  border-radius: 11px;
  background: #fcfbff;
  color: var(--ink);
  text-align: left;
  cursor: pointer
}
.eyedropper-history [data-history-color]:hover {
  border-color: #6255e2;
  box-shadow: 0 6px 15px rgba(68,52,177,.1)
}
.eyedropper-history svg {
  grid-row: 1/3;
  width: 54px;
  height: 46px;
  border-radius: 8px
}
.eyedropper-history strong {
  align-self: end;
  font: 11px ui-monospace,Consolas,monospace
}
.eyedropper-history small {
  align-self: start;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap
}
.color-copy-notice {
  position: fixed;
  z-index: 1000;
  right: 22px;
  bottom: 22px;
  max-width: calc(100vw - 44px);
  padding: 12px 16px;
  border: 1px solid rgba(98,85,226,.22);
  border-radius: 11px;
  background: #21195b;
  color: #fff;
  box-shadow: 0 12px 30px rgba(33,25,91,.25);
  font-size: 12px;
  font-weight: 800;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: .2s
}
.color-copy-notice.show {
  opacity: 1;
  transform: translateY(0)
}
.design-code-card {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  margin-top: 16px;
  padding: 15px;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  background: #fcfbff;
  box-shadow: 0 0 0 3px rgba(98,85,226,.035)
}
.design-code-card>div {
  display: grid;
  gap: 4px
}
.design-code-card strong {
  color: var(--ink);
  font-size: 12px
}
.design-code-card span {
  color: var(--muted);
  font-size: 11px
}
.design-code-card .design-code {
  grid-column: 1/-1;
  min-height: 92px;
  margin: 0;
  border: 1px solid #e3e0ed;
  background: #fff;
  box-shadow: none
}
.design-code-card>.button {
  grid-column: 2;
  grid-row: 1;
  min-width: 155px
}
.local-tool-workspace[data-local-tool=colors] {
  --design-border: #dcdae8;
  --design-surface: #fcfbff;
  --design-radius: 14px
}
.local-tool-workspace[data-local-tool=colors]>.design-dynamic-panel,.local-tool-workspace[data-local-tool=colors]>section {
  padding: 0
}
.local-tool-workspace[data-local-tool=colors] .design-dynamic-panel>h2 {
  margin: 0 0 18px;
  font-size: 24px;
  line-height: 1.2
}
.local-tool-workspace[data-local-tool=colors] .color-controls,.local-tool-workspace[data-local-tool=colors] .design-color-choice,.local-tool-workspace[data-local-tool=colors] .design-control-grid,.local-tool-workspace[data-local-tool=colors] .design-image-workspace,.local-tool-workspace[data-local-tool=colors] .design-palette-input {
  border-color: var(--design-border);
  border-radius: var(--design-radius);
  background: var(--design-surface)
}
.local-tool-workspace[data-local-tool=colors] input:not([type=range]):not([type=color]),.local-tool-workspace[data-local-tool=colors] select,.local-tool-workspace[data-local-tool=colors] textarea {
  border-color: var(--design-border);
  border-radius: 10px;
  background: #fff;
  box-shadow: none
}
.local-tool-workspace[data-local-tool=colors] input[type=color] {
  overflow: hidden;
  border: 0!important;
  outline: 0!important;
  box-shadow: none!important;
  background: transparent!important;
  appearance: none;
  -webkit-appearance: none
}
.local-tool-workspace[data-local-tool=colors] input[type=color]::-webkit-color-swatch-wrapper {
  padding: 0
}
.local-tool-workspace[data-local-tool=colors] input[type=color]::-webkit-color-swatch {
  border: 0;
  border-radius: 8px
}
.local-tool-workspace[data-local-tool=colors] input[type=color]::-moz-color-swatch {
  border: 0;
  border-radius: 8px
}
.copyable-color-value {
  cursor: pointer
}
.copyable-color-value.copied,.copyable-color-value:hover {
  border-color: #6255e2!important;
  background: #f2efff!important;
  color: #5140cf
}
.local-tool-workspace[data-local-tool=colors] .button-primary {
  min-height: 42px;
  border-radius: 11px
}
.local-tool-workspace[data-local-tool=colors] .design-preview,.local-tool-workspace[data-local-tool=colors] .gradient-preview {
  overflow: hidden;
  border: 1px solid var(--design-border);
  border-radius: 18px
}
@media(max-width:800px) {
.design-editor-grid {
  grid-template-columns: 1fr
}
.design-editor-grid>.design-preview {
  min-height: 260px
}
.design-dynamic-panel[data-active-design-tool=multistop]>.design-control-grid {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.design-dynamic-panel.is-shades-layout {
  grid-template-columns: 1fr
}
.design-dynamic-panel.is-shades-layout>.design-control-grid,.design-dynamic-panel.is-shades-layout>.scheme-swatches {
  grid-column: 1;
  grid-row: auto
}
}
@media(max-width:900px) {
.eyedropper-history>[data-color-history-list] {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
}
@media(max-width:700px) {
.design-converter-layout {
  grid-template-columns: 1fr
}
.vision-buttons {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.design-code-card,.design-color-output-grid>div {
  grid-template-columns: 1fr
}
.design-code-card>.button {
  grid-column: 1;
  grid-row: auto;
  width: 100%
}
}
@media(max-width:520px) {
.eyedropper-history>[data-color-history-list] {
  grid-template-columns: 1fr
}
.eyedropper-history header {
  align-items: flex-start;
  flex-direction: column
}
.design-dynamic-panel[data-active-design-tool=multistop]>.design-control-grid {
  grid-template-columns: 1fr
}
}
.converter-error {
  margin: 18px 0 0;
  padding: 13px;
  border-radius: 11px;
  background: #fff1f4;
  color: #b33657;
  font-size: 11px
}
.text-diff-editors,.text-diff-output {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}
.text-diff-editors label {
  display: grid;
  gap: 8px
}
.text-diff-editors label>span {
  font-size: 12px;
  font-weight: 850
}
.text-diff-editors textarea {
  width: 100%;
  min-height: 310px;
  resize: vertical;
  padding: 16px;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  background: #fcfbff;
  color: var(--ink);
  font: 12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace;
  outline: none
}
.text-diff-editors textarea:focus {
  border-color: #bbb5dc;
  box-shadow: 0 0 0 3px rgba(98,85,226,.08)
}
.text-diff-editors small {
  color: var(--muted);
  font-size: 11px
}
.text-diff-editors small b {
  color: #5b4dd5;
  font-size: inherit
}
.text-diff-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 16px
}
.text-diff-actions .button {
  min-height: 42px;
  padding: 0 17px;
  font-size: 11px
}
.text-diff-actions .button:disabled {
  cursor: not-allowed;
  opacity: .48;
  transform: none
}
.text-diff-results {
  display: grid;
  gap: 16px;
  margin-top: 26px
}
.text-diff-results>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px
}
.text-diff-results h2 {
  margin: 5px 0 0;
  font-size: 25px
}
.text-diff-legend {
  display: flex;
  gap: 8px
}
.text-diff-legend span {
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800
}
.text-diff-legend .removed {
  background: #ffe7ed;
  color: #a82f51
}
.text-diff-legend .added {
  background: #dcf8eb;
  color: #14744f
}
.text-diff-metrics {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px
}
.text-diff-metrics>div {
  display: grid;
  gap: 4px;
  padding: 13px;
  border: 1px solid #e1deeb;
  border-radius: 12px;
  background: #fcfbff
}
.text-diff-metrics strong {
  color: #5b4dd5;
  font-size: 17px
}
.text-diff-metrics span {
  color: var(--muted);
  font-size: 10px
}
.text-diff-output article {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e1deeb;
  border-radius: 14px;
  background: #fff
}
.text-diff-output h3 {
  margin: 0;
  padding: 13px 15px;
  border-bottom: 1px solid #e7e4ef;
  font-size: 12px
}
.text-diff-output pre {
  min-height: 240px;
  max-height: 560px;
  margin: 0;
  overflow: auto;
  padding: 15px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
  font: 12px/1.75 ui-monospace,SFMono-Regular,Consolas,monospace
}
.text-diff-output .delete {
  background: #ffdce5;
  color: #8f2342;
  text-decoration: line-through
}
.text-diff-output .insert {
  background: #d8f7e8;
  color: #126b4a
}
.text-diff-output .equal {
  color: #49455a
}
.converter-seo {
  padding-top: 55px
}
.converter-seo h2 {
  font-size: 30px
}
.converter-seo>div {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 14px
}
.converter-seo article {
  padding: 21px;
  border: 1px solid #e2dfeb;
  border-radius: 16px;
  background: #fff
}
.converter-seo strong {
  font-size: 13px
}
.converter-seo p {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6
}
.converter-directory-main {
  min-height: 900px;
  padding-bottom: 90px;
  background: #f6f5fb
}
.converter-directory-hero .converter-back {
  color: #8ceeff;
  font-size: 16px;
  font-weight: 850
}
.converter-directory-hero .services-cover h1 {
  margin-top: 18px;
  font-size: 40px;
  letter-spacing: -.045em
}
.converter-directory-hero .services-cover-mark img {
  display: block;
  filter: brightness(0) invert(1)
}
.converter-directory {
  padding-top: 48px;
  scroll-margin-top: 78px
}
.converter-directory>header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: end;
  margin-bottom: 24px
}
.converter-directory h2 {
  margin: 7px 0 0;
  font-size: 32px;
  letter-spacing: -.045em
}
.converter-directory>header>p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7
}
.converter-directory-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 13px
}
.converter-directory-card {
  position: relative;
  display: grid;
  min-height: 104px;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 16px;
  border: 1px solid #dcdae8;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  transition: transform .2s,box-shadow .2s,border-color .2s
}
.converter-directory-card:hover {
  transform: translateY(-2px);
  border-color: #bdb7e6;
  box-shadow: 0 15px 35px rgba(37,28,94,.1)
}
.converter-format-badge {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 13px;
  background: #ece9ff;
  color: #5a4bd5;
  font-size: 11px;
  font-weight: 900
}
.converter-directory-card>span:nth-child(2) {
  display: grid;
  gap: 6px
}
.converter-directory-card strong {
  font-size: 13px
}
.converter-directory-card strong b {
  color: #6658dd
}
.converter-directory-card small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4
}
.converter-directory-card em {
  position: absolute;
  top: 9px;
  right: 12px;
  color: #6153d8;
  font-size: 11px;
  font-style: normal;
  font-weight: 850;
  text-transform: uppercase
}
.converter-directory-card>i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center;
  border-radius: 9px;
  background: #f0edff;
  color: #5b4ed5;
  font-style: normal
}
.converter-format-nav {
  position: sticky;
  z-index: 8;
  top: 74px;
  display: flex;
  gap: 7px;
  margin-top: 18px;
  padding: 9px;
  overflow-x: auto;
  border: 1px solid #e0deeb;
  border-radius: 16px;
  background: hsla(0,0%,100%,.96);
  box-shadow: 0 13px 32px rgba(27,20,77,.08);
  scrollbar-width: thin
}
.converter-format-nav a {
  flex: 0 0 auto;
  min-width: 72px;
  padding: 9px 5px;
  border-radius: 10px;
  color: #5f5874;
  font-size: 14px;
  font-weight: 850;
  text-align: center;
  white-space: nowrap
}
.converter-format-nav a.active,.converter-format-nav a:hover {
  background: #6255e2;
  color: #fff
}
.converter-group-list {
  display: grid;
  gap: 24px;
  margin-top: 24px
}
.converter-format-section {
  padding: 30px;
  scroll-margin-top: 150px;
  border: 1px solid #e1deeb;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 48px rgba(27,20,77,.065)
}
.converter-format-section>header {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 45px;
  align-items: end;
  margin-bottom: 22px
}
.converter-format-section h2 {
  margin: 7px 0 0;
  font-size: 30px;
  letter-spacing: -.045em
}
.converter-format-section>header>p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7
}
.converter-popular-section {
  border-color: #cbc5f2;
  background: linear-gradient(145deg,#fff,#f8f6ff)
}
.converter-group-note {
  margin: 16px 0 0;
  padding: 12px 14px;
  border-radius: 11px;
  background: #f5f3fb;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55
}
.image-service-workspace {
  display: grid;
  gap: 18px
}
.utility-intro,.utility-options {
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 16px;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  background: #fcfbff
}
.utility-intro>div {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center
}
.utility-intro>div>img {
  padding: 9px;
  box-sizing: content-box;
  border-radius: 11px;
  background: #ece9ff
}
.utility-intro span {
  display: grid;
  gap: 5px
}
.utility-intro strong {
  font-size: 12px
}
.utility-intro small,.utility-options p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5
}
.utility-options p strong {
  color: var(--ink);
  font-size: inherit
}
.utility-intro>b {
  flex: 0 0 auto;
  padding: 8px 11px;
  border-radius: 9px;
  background: #edeaff;
  color: #594bd2;
  font-size: 11px
}
.utility-options label {
  display: grid;
  min-width: 230px;
  gap: 7px
}
.utility-options label span {
  font-size: 11px;
  font-weight: 850
}
.utility-options select {
  appearance: none;
  height: 42px;
  padding: 0 40px 0 12px;
  border: 1px solid #dcdae8;
  border-radius: 11px;
  background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%228%22%20fill%3D%22none%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20stroke%3D%22%235b4dd5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.7%22%20d%3D%22m1%201.5%205%205%205-5%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  color: var(--ink);
  font-size: 11px;
  outline: 0
}
.utility-run-button {
  min-width: 230px;
  justify-self: center
}
.palette-results {
  display: grid;
  gap: 14px
}
.palette-download-all[hidden],.palette-results[hidden] {
  display: none
}
.palette-results>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px
}
.palette-results>header h2 {
  margin: 5px 0 0;
  font-size: 25px
}
.palette-result-list {
  display: grid;
  gap: 14px
}
.palette-card-download,.palette-download-all {
  min-height: 34px;
  padding: 8px 13px;
  font-size: 11px
}
.palette-download-all {
  margin-right: 12px
}
.palette-card-download {
  justify-self: end
}
.palette-result-card {
  overflow: hidden;
  border: 1px solid #e1deeb;
  border-radius: 18px;
  background: #fcfbff
}
.palette-result-card>header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 13px;
  align-items: center;
  padding: 14px
}
.palette-result-card>header img {
  width: 58px;
  height: 58px;
  border-radius: 12px;
  object-fit: cover
}
.palette-result-card>header span {
  display: grid;
  gap: 5px
}
.palette-result-card>header strong {
  font-size: 12px
}
.palette-result-card>header small {
  color: var(--muted);
  font-size: 11px
}
.palette-swatches {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  padding: 0 14px 14px
}
.palette-swatches button {
  display: grid;
  min-width: 0;
  grid-template-columns: auto 1fr;
  gap: 4px 9px;
  align-items: center;
  padding: 9px;
  border: 1px solid #e2dfeb;
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer
}
.palette-swatches button>i {
  width: 40px;
  height: 40px;
  grid-row: 1/3;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: var(--swatch)
}
.palette-swatches strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis
}
.palette-swatches small {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45
}
.compare-upload-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}
.compare-upload {
  display: grid;
  min-height: 180px;
  place-items: center;
  align-content: center;
  gap: 12px;
  padding: 22px;
  border: 2px dashed #d1ccec;
  border-radius: 18px;
  background: linear-gradient(135deg,#faf9ff,#f4fcfe);
  cursor: pointer
}
.compare-upload.dragging,.compare-upload:hover {
  border-color: #6758e8;
  background: #f1efff
}
.compare-upload>span {
  color: #5e51d8;
  font-size: 11px;
  font-weight: 850
}
.compare-upload>strong {
  max-width: 100%;
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap
}
.compare-upload [data-file-preview].has-preview {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  object-fit: cover;
  box-shadow: 0 8px 22px rgba(46,35,117,.15)
}
.comparison-results {
  display: grid;
  gap: 16px
}
.comparison-stage {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  border-radius: 18px;
  background: #25213c
}
.comparison-stage canvas {
  display: block;
  width: 100%;
  height: auto
}
.comparison-stage canvas+canvas {
  position: absolute;
  inset: 0
}
.comparison-stage>i {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  width: 3px;
  margin-left: -1px;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,.2);
  pointer-events: none
}
.comparison-slider {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: center
}
.comparison-slider span {
  font-size: 11px;
  font-weight: 850
}
.comparison-slider input {
  width: 100%;
  margin: 0;
  accent-color: #6255e2
}
.comparison-metrics {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 10px
}
.comparison-metrics>div {
  display: grid;
  gap: 5px;
  padding: 15px;
  border: 1px solid #e2dfeb;
  border-radius: 13px;
  background: #fcfbff
}
.comparison-metrics strong {
  color: #594bd5;
  font-size: 17px
}
.comparison-metrics span {
  color: var(--muted);
  font-size: 11px
}
.duplicate-results>header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px
}
.duplicate-results h2 {
  margin: 5px 0 0;
  font-size: 25px
}
.duplicate-result-actions {
  display: flex;
  align-items: center;
  gap: 9px
}
.duplicate-group figure.is-original {
  border-color: #9ed8bf;
  box-shadow: inset 0 0 0 1px #9ed8bf
}
.duplicate-group figure.is-duplicate {
  border-color: #f0a8bd;
  background: #fff7fa;
  box-shadow: inset 0 0 0 1px #f0a8bd
}
.duplicate-group figure.is-duplicate figcaption b {
  color: #bd365d
}
.duplicate-group figure.is-original figcaption b {
  color: #16875f
}
.duplicate-results>[data-duplicate-groups] {
  display: grid;
  gap: 14px;
  margin-top: 16px
}
.duplicate-group {
  overflow: hidden;
  border: 1px solid #e1deeb;
  border-radius: 17px;
  background: #fcfbff
}
.duplicate-group>header {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 14px 16px;
  border-bottom: 1px solid #e7e4ef
}
.duplicate-group>header strong {
  font-size: 12px
}
.duplicate-group>header span {
  color: var(--muted);
  font-size: 11px
}
.duplicate-group>div {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  padding: 12px
}
.duplicate-group figure {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e4e1eb;
  border-radius: 12px;
  background: #fff
}
.duplicate-group figure>img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover
}
.duplicate-group figcaption {
  display: grid;
  gap: 4px;
  padding: 10px
}
.duplicate-group figcaption strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap
}
.duplicate-group figcaption small {
  color: var(--muted);
  font-size: 10px
}
.duplicate-group figcaption b {
  color: #5b4dd5;
  font-size: 10px
}
.tool-stat-strip {
  grid-template-columns: repeat(2,1fr)
}
.tool-stat-strip>div:last-child {
  border-right: 0
}
.tool-stat-strip>div {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px
}
.tool-stat-strip>div>i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 12px;
  background: #efedff
}
.tool-stat-strip>div>span {
  display: grid;
  gap: 5px
}
.tool-stat-strip small {
  color: var(--muted);
  font-size: 11px
}
.legal-main {
  min-height: 700px
}
.legal-hero {
  position: relative;
  padding: 84px 0 74px;
  overflow: hidden;
  background: var(--brand-surface);
  color: #fff
}
.legal-hero .shell {
  position: relative;
  z-index: 2
}
.legal-hero h1 {
  margin: 0;
  font-size: calc(clamp(30px, 5vw, 36px));
  letter-spacing: -.06em
}
.legal-hero .shell>p:last-child {
  max-width: 650px;
  margin: 20px 0 0;
  color: hsla(0,0%,100%,.68);
  font-size: 14px;
  line-height: 1.7
}
.legal-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 65px;
  padding-top: 70px;
  padding-bottom: 100px
}
.legal-layout nav {
  position: sticky;
  top: 105px;
  display: grid;
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #faf9fd
}
.legal-layout nav a {
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  color: #66637a;
  font-size: 11px;
  line-height: 1.4
}
.legal-layout nav a:last-child {
  border-bottom: 0
}
.legal-layout nav a:hover {
  background: #efedff;
  color: #5446cc
}
.legal-layout article {
  min-width: 0
}
.legal-layout article section {
  padding: 0 0 35px;
  margin-bottom: 35px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 105px
}
.legal-layout article section:last-child {
  margin-bottom: 0;
  border-bottom: 0
}
.legal-layout h2 {
  margin: 0 0 17px;
  font-size: 24px;
  letter-spacing: -.035em
}
.legal-layout article p {
  margin: 12px 0 0;
  color: #5f5d72;
  font-size: 13px;
  line-height: 1.82
}
@media (max-width:1060px) {
.hero-layout {
  grid-template-columns: 1fr 420px;
  gap: 35px
}
.hero h1 {
  font-size: 60px
}
.service-grid {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.service-card {
  min-height: 400px
}
.tool-network-layout {
  grid-template-columns: 1fr;
  gap: 52px
}
.tool-orbit {
  width: min(620px,100%);
  margin-inline: auto
}
.free-access-panel {
  grid-template-columns: minmax(0,1fr) 250px
}
}
@media (max-width:900px) {
.converter-directory-grid,.duplicate-group>div,.palette-swatches {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.services-cover {
  grid-template-columns: 1fr
}
.services-cover-mark {
  display: none
}
.converter-options,.converter-seo>div,.settings-accordion,.totp-setup {
  grid-template-columns: 1fr
}
.authenticator-panel[open] {
  grid-column: auto
}
.account-profile-cover {
  grid-template-columns: 1fr
}
.account-id-plate {
  display: none
}
.account-profile-strip {
  grid-template-columns: auto 1fr
}
.account-profile-stat {
  border-left: 0;
  text-align: left
}
.security-checks,.security-layout,.settings-grid {
  grid-template-columns: 1fr
}
.identity-grid {
  grid-template-columns: 1fr 1fr
}
.primary-nav {
  gap: 18px
}
.header-login {
  display: none
}
.hero {
  padding-bottom: 95px
}
.hero-layout {
  grid-template-columns: 1fr;
  padding-top: 90px
}
.hero-copy {
  max-width: 720px
}
.ecosystem-stage {
  width: min(600px,100%);
  margin-top: 58px;
  padding-bottom: 48px
}
.ecosystem-preview {
  width: 100%;
  transform: none
}
.free-access-panel {
  grid-template-columns: 1fr;
  gap: 30px;
  padding: 42px
}
.free-access-answer {
  grid-column: auto
}
.advantages-layout,.faq-layout,.section-heading {
  grid-template-columns: 1fr;
  gap: 35px
}
.account-panel {
  grid-template-columns: 1fr
}
.account-panel-actions {
  justify-items: start
}
.auth-shell {
  grid-template-columns: .82fr 1.18fr
}
.auth-form-panel,.auth-visual {
  padding: 42px
}
.account-groups-grid,.account-placeholders {
  grid-template-columns: 1fr
}
}
@media (max-width:760px) {
.color-controls,.generator-options,.image-editor-controls,.local-actions,.pdf-options {
  align-items: stretch;
  flex-direction: column
}
.color-controls label,.generator-options label,.image-editor-controls label,.local-actions .button,.pdf-options label {
  width: 100%
}
.pdf-options input {
  min-width: 0;
  width: 100%
}
.text-counter-grid,.text-tool-editors {
  grid-template-columns: 1fr
}
.text-replace-options,.text-tool-options {
  align-items: stretch;
  flex-direction: column
}
.text-replace-options label,.text-tool-options label {
  width: 100%
}
.duplicate-result-actions,.duplicate-results>header,.palette-results>header,.utility-intro,.utility-options {
  align-items: stretch;
  flex-direction: column
}
.utility-options label {
  min-width: 0
}
.compare-upload-grid,.comparison-metrics,.comparison-slider,.duplicate-group>div,.palette-swatches {
  grid-template-columns: 1fr
}
.palette-result-card>header {
  grid-template-columns: auto 1fr
}
.palette-download-all {
  margin-right: 0
}
.palette-card-download {
  width: 100%;
  grid-column: 1/-1
}
.converter-format-nav {
  position: static;
  margin-inline: 16px
}
.converter-format-nav a {
  flex: 0 0 auto;
  min-width: 70px;
  padding-inline: 10px
}
.converter-format-section {
  padding: 24px 16px;
  scroll-margin-top: 140px
}
.converter-format-section>header {
  grid-template-columns: 1fr;
  gap: 10px
}
.converter-format-section h2 {
  font-size: 26px
}
.image-quality-control .quality-presets {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.image-quality-control .quality-presets .recommended {
  grid-column: 1/-1
}
.converter-result-actions {
  width: 100%;
  flex-wrap: wrap
}
.converter-result-actions .button {
  flex: 1
}
.converter-directory-grid,.converter-directory>header {
  grid-template-columns: 1fr
}
.services-profile-strip {
  grid-template-columns: 1fr 1fr;
  gap: 15px
}
.services-profile-strip>div {
  padding: 0;
  border: 0
}
.services-profile-strip>a {
  grid-column: 1/-1;
  margin: 0;
  text-align: center
}
.service-goal-section {
  padding: 24px 18px
}
.service-goal-section>header {
  grid-template-columns: 1fr;
  gap: 12px
}
.converter-workspace {
  padding: 20px 14px
}
.converter-summary {
  grid-template-columns: 1fr 1fr
}
.converter-summary .button {
  grid-column: 1/-1
}
.converter-results>header {
  align-items: flex-start;
  flex-direction: column
}
.converter-results [data-result-list]>div {
  grid-template-columns: 1fr auto
}
.converter-results [data-result-list] button {
  grid-column: 1/-1
}
.setting-panel summary {
  grid-template-columns: auto 1fr
}
.setting-panel summary>b {
  grid-column: 2
}
.recovery-code-grid,.totp-confirm,.totp-recovery-form {
  grid-template-columns: 1fr
}
.service-category>header {
  grid-template-columns: auto 1fr
}
.service-category>header>b {
  grid-column: 2;
  justify-self: start
}
.account-portal {
  padding-top: 22px
}
.account-profile-cover {
  min-height: 260px;
  padding: 34px 25px
}
.account-profile-strip {
  grid-template-columns: auto 1fr;
  padding: 20px
}
.account-profile-stat {
  display: none
}
.account-page-nav {
  grid-template-columns: 1fr
}
.account-page-content {
  padding: 25px 18px
}
.account-page-content>header {
  grid-template-columns: 1fr;
  gap: 8px
}
.identity-grid {
  grid-template-columns: 1fr
}
.security-score-card {
  align-items: flex-start;
  flex-direction: column
}
body {
  padding-top: 68px
}
.shell {
  width: min(100% - 30px,1180px)
}
.site-header {
  height: 68px
}
.header-inner {
  gap: 12px
}
.brand-mark {
  width: 37px;
  height: 37px
}
.brand-name {
  font-size: 18px
}
.header-actions {
  margin-left: auto
}
.account-link>span {
  width: 39px;
  height: 39px
}
.hero {
  min-height: auto;
  padding-top: 68px
}
.hero-layout {
  min-height: 0;
  padding-top: 70px
}
.hero h1 {
  font-size: calc(clamp(38px, 10vw, 60px))
}
.hero-lead {
  font-size: 14px
}
.hero-benefits {
  display: grid;
  grid-template-columns: 1fr
}
.ecosystem-preview {
  padding: 20px
}
.ecosystem-stage {
  padding-bottom: 52px
}
.preview-summary-card {
  width: calc(100% - 20px);
  gap: 11px;
  padding-inline: 12px
}
.preview-focus {
  padding: 18px
}
.preview-focus strong {
  font-size: 20px
}
.scroll-cue {
  display: none
}
.section {
  padding: 60px 0
}
.account-panel h2,.advantages-copy h2,.faq-layout h2,.section-heading h2 {
  font-size: 36px
}
.service-grid {
  grid-template-columns: 1fr
}
.service-card {
  min-height: 410px
}
.tool-network-copy h2 {
  font-size: 36px
}
.tool-orbit {
  min-height: 440px
}
.tool-orbit-ring-large {
  width: 370px;
  height: 370px
}
.tool-orbit-ring-small {
  width: 245px;
  height: 245px
}
.tool-orbit-core {
  width: 128px;
  height: 128px
}
.tool-orbit-position-1 {
  top: 0;
  left: 35%
}
.tool-orbit-position-2 {
  top: 14%;
  left: 0
}
.tool-orbit-position-3 {
  top: 20%;
  right: 0
}
.tool-orbit-position-4 {
  top: 44%;
  left: 0
}
.tool-orbit-position-5 {
  top: 48%;
  right: 0
}
.tool-orbit-position-6 {
  bottom: 10%;
  left: 0
}
.tool-orbit-position-7 {
  right: 0;
  bottom: 5%
}
.tool-orbit-position-8 {
  bottom: 0;
  left: 35%
}
.free-access-panel {
  padding: 34px 26px
}
.free-access-copy h2 {
  font-size: 36px
}
.ecosystem-banner {
  grid-template-columns: auto 1fr;
  padding: 24px
}
.ecosystem-banner>a {
  grid-column: 1/-1;
  margin-left: 82px
}
.advantages-layout {
  gap: 45px
}
.account-panel {
  gap: 35px;
  padding: 35px 25px
}
.final-cta {
  padding: 84px 0
}
.final-cta h2 {
  font-size: 36px
}
.footer-grid {
  grid-template-columns: 1fr 1fr;
  gap: 45px 25px
}
.footer-brand {
  grid-column: 1/-1
}
.auth-main {
  padding: 20px 15px 50px
}
.auth-shell {
  grid-template-columns: 1fr
}
.auth-visual {
  min-height: 580px;
  padding: 38px 30px
}
.auth-visual h1 {
  font-size: 36px
}
.auth-service-orbit {
  margin-top: 30px;
  transform: scale(.86)
}
.auth-form-panel {
  padding: 40px 30px
}
.account-main {
  padding-top: 20px
}
.account-hero {
  grid-template-columns: auto 1fr;
  padding-bottom: 25px
}
.account-hero form {
  grid-column: 1/-1
}
.account-content {
  grid-template-columns: 1fr;
  margin-top: 16px
}
.legal-layout {
  grid-template-columns: 1fr;
  gap: 35px
}
.legal-layout nav {
  position: static;
  grid-template-columns: repeat(2,1fr)
}
}
.flash {
  transition: opacity .24s ease,transform .24s ease
}
.flash.flash-closing {
  opacity: 0;
  transform: translateY(-8px)
}
.styled-file-input,input[type=file]:not(.sr-only) {
  width: 100%;
  min-height: 52px;
  padding: 7px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fcfbff;
  color: var(--muted);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4
}
.styled-file-input::file-selector-button,input[type=file]:not(.sr-only)::file-selector-button {
  min-height: 36px;
  margin-right: 12px;
  padding: 0 16px;
  border: 0;
  border-radius: 9px;
  background: linear-gradient(135deg,#6658e7,#503bcf);
  color: #fff;
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: filter .2s ease,transform .2s ease
}
.styled-file-input::file-selector-button:hover,input[type=file]:not(.sr-only)::file-selector-button:hover {
  filter: brightness(1.08)
}
.file-picker {
  display: grid;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800
}
.local-tool-workspace[data-local-tool=image]:not(.editor-ready)>:not(.file-picker) {
  display: none
}
.image-editor-controls {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  align-items: end
}
.image-editor-controls button,.image-editor-controls label {
  width: 100%;
  min-width: 0
}
.image-editor-controls button {
  height: 39px
}
.watermark-controls {
  display: grid;
  grid-template-columns: minmax(180px,1.5fr) repeat(5,minmax(120px,1fr));
  gap: 12px;
  align-items: end;
  margin: 12px 0 0;
  padding: 13px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fcfbff
}
.watermark-controls legend {
  padding: 0 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900
}
.watermark-controls label {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800
}
.watermark-controls input[type=text],.watermark-controls select {
  width: 100%;
  height: 39px;
  padding: 0 10px;
  border: 1px solid #dcdae8;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 11px
}
.watermark-controls select {
  appearance: none;
  padding-right: 40px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%235b4dd5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.8%22%20d%3D%22m2%202%204%204%204-4%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center
}
.watermark-controls input[type=color] {
  width: 100%;
  height: 39px;
  padding: 3px;
  border: 1px solid #dcdae8;
  border-radius: 9px;
  background: #fff
}
.watermark-controls input[type=range] {
  width: 100%;
  accent-color: #6255e2
}
.watermark-controls output {
  color: #6255e2;
  font-size: 11px;
  font-weight: 900
}
.watermark-check {
  display: flex!important;
  min-height: 39px;
  align-items: center;
  gap: 9px!important;
  padding: 0 11px;
  border: 1px solid #dcdae8;
  border-radius: 9px;
  background: #fff
}
.watermark-check input {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #6255e2
}
.watermark-hint {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 11px
}
.editor-output-format {
  display: grid;
  grid-template-columns: auto 110px;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800
}
.editor-output-format select {
  height: 42px;
  padding: 0 38px 0 12px;
  border: 1px solid #dcdae8;
  border-radius: 10px;
  appearance: none;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%235b4dd5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.8%22%20d%3D%22m2%202%204%204%204-4%22%2F%3E%3C%2Fsvg%3E") no-repeat right 15px center;
  color: var(--ink);
  font-size: 11px
}
.editor-download-actions {
  align-items: center;
  flex-wrap: wrap
}
.editor-download-actions .button {
  min-width: 145px
}
.text-diff-editors,.text-diff-output,.text-tool-editors {
  align-items: start
}
.text-diff-editors>label,.text-diff-output>article,.text-tool-editors>label {
  width: 100%;
  align-self: start
}
.text-diff-editors>label,.text-tool-editors>label {
  grid-template-rows: auto auto auto;
  align-content: start
}
.text-diff-editors textarea,.text-tool-editors textarea {
  align-self: start
}
.rich-hint-field {
  position: relative
}
.rich-text-hint {
  position: absolute;
  z-index: 2;
  top: 38px;
  right: 16px;
  left: 16px;
  pointer-events: none;
  white-space: pre-wrap;
  color: #77718b;
  font: 12px/1.65 ui-monospace,SFMono-Regular,Consolas,monospace
}
.rich-hint-field textarea:not(:placeholder-shown)+.rich-text-hint {
  display: none
}
.rich-text-hint .hint-before {
  color: #c83d5d;
  font-weight: 850
}
.rich-text-hint .hint-added,.rich-text-hint .hint-after {
  color: #16845d;
  font-weight: 850
}
.code-builder-layout {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(340px,.85fr);
  gap: 18px;
  align-items: start
}
.code-settings-stack {
  display: grid;
  gap: 14px
}
.code-settings-card {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 13px;
  margin: 0;
  padding: 16px;
  border: 1px solid #dcdae8;
  border-radius: 14px;
  background: #fcfbff
}
.code-settings-card legend {
  padding: 0 7px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 900
}
.code-settings-card label {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  color: var(--ink);
  font-size: 11px;
  font-weight: 800
}
.code-settings-card .code-wide {
  grid-column: 1/-1
}
.code-settings-card input:not([type=color]):not([type=range]),.code-settings-card select,.code-settings-card textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid #dcdae8;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-family: inherit;
  font-size: 11px;
  line-height: 1.5;
  outline: 0
}
.code-settings-card input:not([type=color]):not([type=range]),.code-settings-card select {
  height: 42px;
  padding: 0 12px
}
.code-settings-card select {
  appearance: none;
  padding-right: 38px;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%228%22%20viewBox%3D%220%200%2012%208%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%235b4dd5%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%221.8%22%20d%3D%22m2%202%204%204%204-4%22%2F%3E%3C%2Fsvg%3E") no-repeat right 15px center
}
.code-settings-card textarea {
  resize: vertical;
  padding: 12px
}
.code-settings-card input[type=color] {
  width: 100%;
  height: 42px;
  padding: 3px;
  border: 1px solid #dcdae8;
  border-radius: 10px;
  background: #fff
}
.code-settings-card input[type=range] {
  width: 100%;
  accent-color: #6255e2
}
.code-settings-card output {
  color: #6255e2;
  font-size: 11px;
  font-weight: 900
}
.code-help {
  grid-column: 1/-1;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55
}
.code-preview-card,.scanner-card,.scanner-result-card {
  padding: 18px;
  border: 1px solid #dcdae8;
  border-radius: 16px;
  background: #fff
}
.code-preview-card {
  position: sticky;
  top: 92px
}
.code-preview-card h2,.scanner-card h2,.scanner-result-card h2 {
  margin: 0 0 13px;
  font-size: 18px
}
.code-preview-card>canvas {
  display: block;
  width: min(100%,620px);
  height: auto;
  margin: auto;
  border: 1px solid #e4e1ed;
  border-radius: 12px;
  background: #fff
}
.code-download-grid {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 9px;
  margin-top: 14px
}
.code-download-grid .button {
  width: 100%;
  min-height: 42px;
  font-size: 11px
}
.barcode-preview-list {
  display: grid;
  gap: 12px;
  max-height: 650px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #e4e1ed;
  border-radius: 12px;
  background: #f7f6fb
}
.barcode-preview-list>div {
  display: grid;
  place-items: center;
  overflow: auto;
  padding: 10px;
  border-radius: 9px;
  background: #fff
}
.barcode-preview-list svg {
  max-width: 100%;
  height: auto
}
.code-control-title {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-size: 11px;
  font-weight: 900
}
.qr-type-grid {
  display: grid;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 8px;
  overflow: hidden
}
.brand-logo-grid button,.qr-frame-grid button,.qr-style-grid button,.qr-type-grid button {
  min-width: 0;
  border: 1px solid #dcdae8;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: 800 11px/1.25 inherit;
  cursor: pointer;
  transition: border-color .18s,box-shadow .18s,transform .18s,background .18s
}
.qr-type-grid button {
  display: flex;
  width: 100%;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  min-height: 48px;
  padding: 8px;
  text-align: left;
  overflow: hidden
}
.qr-type-grid img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex: 0 0 auto
}
.qr-type-grid button span {
  display: block;
  min-width: 0;
  max-width: 100%;
  font-size: calc(clamp(8px, .72vw, 11px));
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto
}
.brand-logo-grid button:hover,.qr-frame-grid button:hover,.qr-style-grid button:hover,.qr-type-grid button:hover {
  transform: translateY(-1px);
  border-color: #bbb5dc;
  box-shadow: 0 6px 16px rgba(68,52,147,.08)
}
.brand-logo-grid button.active,.qr-frame-grid button.active,.qr-style-grid button.active,.qr-type-grid button.active {
  border-color: #6255e2;
  background: #f2f0ff;
  box-shadow: 0 0 0 3px rgba(98,85,226,.08)
}
.qr-dynamic-fields {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  padding-top: 2px
}
.qr-dynamic-fields label {
  display: grid;
  gap: 7px
}
.qr-dynamic-fields label:has(textarea),.qr-dynamic-fields label:only-child {
  grid-column: 1/-1
}
.qr-style-grid {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 7px
}
.qr-style-grid button {
  display: grid;
  place-items: center;
  gap: 4px;
  min-height: 58px;
  padding: 7px 4px
}
.qr-style-grid button span {
  color: #77718e;
  font-size: 9px
}
.qr-choice-preview {
  display: block;
  width: 24px;
  height: 24px;
  border: 6px solid #6255e2;
  background: #6255e2
}
.preview-bubble,.preview-extra-rounded,.preview-rounded,.preview-soft {
  border-radius: 7px
}
.preview-circle,.preview-dot,.preview-dots,.preview-ring {
  border-radius: 50%
}
.preview-diamond,.preview-star {
  transform: rotate(45deg) scale(.75)
}
.preview-cross,.preview-plus {
  clip-path: polygon(35% 0,65% 0,65% 35%,100% 35%,100% 65%,65% 65%,65% 100%,35% 100%,35% 65%,0 65%,0 35%,35% 35%)
}
.preview-horizontal {
  height: 12px;
  border-width: 3px;
  border-radius: 8px
}
.preview-vertical {
  width: 12px;
  border-width: 3px;
  border-radius: 8px
}
.preview-leaf {
  border-radius: 90% 12% 90% 12%
}
.preview-thin {
  border-width: 2px;
  background: transparent
}
.qr-frame-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px
}
.qr-frame-grid button {
  min-height: 42px;
  padding: 8px
}
.qr-frame-grid .qr-choice-preview {
  display: none
}
.brand-logo-grid {
  display: grid;
  grid-template-columns: repeat(9,minmax(0,1fr));
  gap: 7px
}
.brand-logo-grid button {
  display: grid;
  place-items: center;
  min-height: 46px;
  padding: 7px
}
.brand-logo-grid img {
  width: 28px;
  height: 28px;
  object-fit: contain
}
.qr-logo-card {
  align-items: end;
  column-gap: 13px;
  row-gap: 12px!important
}
.qr-logo-picker {
  margin: 0;
  min-height: 52px;
  align-content: center
}
.qr-logo-picker .styled-file-input {
  min-height: 42px;
  padding: 0;
  border: 0!important;
  background: transparent
}
.qr-logo-card .button {
  min-height: 42px;
  align-self: end
}
.qr-logo-card .code-help {
  grid-column: 1/-1;
  margin: 0;
  color: #77718e;
  font-size: 11px;
  line-height: 1.55
}
.qr-data-card,.qr-design-card,.qr-frame-card,.qr-logo-card {
  row-gap: 16px
}
.code-settings-card .watermark-check input[type=checkbox] {
  appearance: none;
  width: 18px!important;
  height: 18px!important;
  min-height: 18px!important;
  flex: 0 0 18px;
  margin: 0!important;
  padding: 0!important;
  border: 1px solid #bbb5dc!important;
  border-radius: 5px!important;
  background: #fff!important;
  box-shadow: 0 0 0 3px rgba(98,85,226,.06);
  cursor: pointer
}
.code-settings-card .watermark-check input[type=checkbox]:checked {
  border-color: #6255e2!important;
  background: #6255e2 url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2210%22%20viewBox%3D%220%200%2012%2010%22%3E%3Cpath%20fill%3D%22none%22%20stroke%3D%22%23fff%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20stroke-width%3D%222%22%20d%3D%22m1.5%205%203%203%206-6%22%2F%3E%3C%2Fsvg%3E") no-repeat 50%!important
}
.code-settings-card .watermark-check {
  align-self: end
}
.code-preview-card>canvas {
  background-color: #fff;
  background-image: linear-gradient(45deg,#eceaf3 25%,transparent 0),linear-gradient(-45deg,#eceaf3 25%,transparent 0),linear-gradient(45deg,transparent 75%,#eceaf3 0),linear-gradient(-45deg,transparent 75%,#eceaf3 0);
  background-position: 0 0,0 8px,8px -8px,-8px 0;
  background-size: 16px 16px
}
.code-print-button {
  grid-column: 1/-1
}
.scanner-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px
}
.scanner-card p,.scanner-result-card p {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55
}
.scanner-card video,.scanner-image-preview {
  display: block;
  width: 100%;
  min-height: 270px;
  max-height: 480px;
  object-fit: contain;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #17152a
}
.scanner-result-card {
  margin-top: 14px
}
.scanner-result-card textarea {
  width: 100%;
  min-height: 150px;
  resize: vertical;
  padding: 14px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fcfbff;
  color: var(--ink);
  font: 12px/1.6 ui-monospace,Consolas,monospace
}
@media (max-width:900px) {
.code-builder-layout,.scanner-layout {
  grid-template-columns: 1fr
}
.code-preview-card {
  position: static
}
.code-settings-card {
  grid-template-columns: 1fr
}
.code-settings-card .code-wide {
  grid-column: auto
}
.qr-type-grid {
  grid-template-columns: repeat(3,minmax(0,1fr))
}
.qr-dynamic-fields {
  grid-template-columns: 1fr
}
.qr-dynamic-fields label {
  grid-column: auto!important
}
.brand-logo-grid {
  grid-template-columns: repeat(6,minmax(0,1fr))
}
}
@media (max-width:560px) {
.qr-type-grid {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.qr-style-grid {
  grid-template-columns: repeat(4,minmax(0,1fr))
}
.qr-frame-grid {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.brand-logo-grid {
  grid-template-columns: repeat(4,minmax(0,1fr))
}
}
@media print {
.code-download-grid,.code-settings-stack,.services-hero-original,body>:not(main) {
  display: none!important
}
.code-builder-layout {
  display: block
}
.code-preview-card {
  border: 0;
  box-shadow: none
}
.barcode-preview-list {
  max-height: none;
  overflow: visible;
  border: 0
}
}
@media (max-width:760px) {
.service-goal-section>header>p {
  text-align: left
}
.editor-download-actions .button {
  width: 100%
}
}
.image-editor-canvas {
  cursor: move;
  touch-action: none
}
@media (max-width:1060px) {
.watermark-controls {
  grid-template-columns: repeat(3,minmax(0,1fr))
}
}
@media (max-width:760px) {
.image-editor-controls,.watermark-controls {
  grid-template-columns: 1fr
}
}
@media (max-width:480px) {
.brand-name small {
  display: none
}
.final-cta-content>div:last-child,.hero-actions {
  display: grid
}
.final-cta .button,.hero-actions .button {
  width: 100%
}
.preview-focus {
  align-items: flex-start;
  flex-direction: column
}
.preview-list>div>b {
  display: none
}
.tool-orbit {
  min-height: 390px
}
.tool-orbit-ring-large {
  width: 315px;
  height: 315px
}
.tool-orbit-ring-small {
  width: 210px;
  height: 210px
}
.tool-orbit-core {
  width: 112px;
  height: 112px
}
.tool-orbit-logo {
  width: 62px;
  height: 62px
}
.tool-orbit-logo b {
  font-size: 21px
}
.tool-orbit-item {
  min-height: 48px;
  padding: 7px
}
.tool-orbit-item strong {
  display: none
}
.tool-orbit-item>span {
  width: 34px;
  height: 34px
}
.tool-orbit-position-1,.tool-orbit-position-8 {
  left: 43%
}
.ecosystem-banner {
  grid-template-columns: 1fr
}
.ecosystem-symbol {
  width: 50px;
  height: 50px
}
.ecosystem-banner>a {
  grid-column: auto;
  margin-left: 0
}
.footer-grid {
  grid-template-columns: 1fr
}
.footer-brand {
  grid-column: auto
}
.footer-bottom {
  display: grid;
  gap: 10px;
  color: #b4b1c8
}
.account-avatar {
  width: 58px;
  height: 58px;
  border-radius: 17px
}
.account-hero h1 {
  font-size: 29px
}
.account-welcome,.profile-card {
  padding: 26px
}
.legal-layout nav {
  grid-template-columns: 1fr
}
}
@media (prefers-reduced-motion:reduce) {
html {
  scroll-behavior: auto
}
*,:after,:before {
  animation-duration: .01ms!important;
  animation-iteration-count: 1!important;
  scroll-behavior: auto!important;
  transition-duration: .01ms!important
}
}
@media (max-width:1060px) {
.service-grid {
  grid-template-columns: repeat(3,minmax(0,1fr))
}
}
@media (max-width:760px) {
.service-grid {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.home-service-group .service-card {
  min-height: 300px;
  padding: 13px
}
.home-service-group .service-card-visual {
  min-height: 82px
}
.home-service-group .service-card>p:not(.service-code) {
  display: none
}
.home-service-group .service-action {
  margin-top: 12px
}
.text-diff-editors,.text-diff-metrics,.text-diff-output {
  grid-template-columns: 1fr
}
.text-diff-actions,.text-diff-results>header {
  align-items: stretch;
  flex-direction: column
}
.text-diff-actions .button {
  width: 100%
}
}
.services-browser-wrap {
  padding: 26px 0 80px
}
.service-category-browser {
  display: grid;
  gap: 16px
}
.service-browser-tabs {
  position: sticky;
  z-index: 11;
  top: 76px;
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 7px;
  padding: 8px;
  border: 1px solid #e0deeb;
  border-radius: 18px;
  background: hsla(0,0%,100%,.96);
  box-shadow: 0 16px 38px rgba(27,20,77,.08);
  backdrop-filter: blur(12px)
}
.service-browser-tabs button {
  display: grid;
  min-width: 0;
  min-height: 64px;
  grid-template-columns: 36px minmax(0,1fr);
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer
}
.service-browser-tabs button:hover {
  background: #f5f3ff
}
.service-browser-tabs button.active {
  background: linear-gradient(135deg,#6658e7,#503bcf);
  color: #fff
}
.service-browser-tabs i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: #eeebff
}
.service-browser-tabs button.active i {
  background: #7ae7f4
}
.service-browser-tabs span {
  display: grid;
  min-width: 0;
  gap: 3px
}
.service-browser-tabs strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap
}
.service-browser-tabs small {
  color: var(--muted);
  font-size: 9px
}
.service-browser-tabs button.active small {
  color: hsla(0,0%,100%,.72)
}
.service-browser-panels>section {
  padding: 28px;
  border: 1px solid #e1deeb;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 20px 55px rgba(27,20,77,.07)
}
.service-browser-panels>section[hidden] {
  display: none
}
.service-browser-panels>section>header {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 30px;
  align-items: end;
  margin-bottom: 20px
}
.service-browser-panels h3 {
  margin: 6px 0 0;
  font-size: 29px
}
.service-browser-panels header>p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
  text-align: right
}
.service-browser-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px
}
.service-browser-card {
  display: grid;
  min-height: 92px;
  grid-template-columns: 42px minmax(0,1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 13px;
  border: 1px solid #dfdce9;
  border-radius: 14px;
  background: #fcfbff;
  color: var(--ink);
  transition: .2s
}
.service-browser-card:hover {
  transform: translateY(-2px);
  border-color: #bbb5dc;
  background: #fff;
  box-shadow: 0 12px 25px rgba(42,31,102,.09)
}
.service-browser-card>i {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border-radius: 11px;
  background: #eeebff
}
.service-browser-card>span {
  display: grid;
  min-width: 0;
  gap: 5px
}
.service-browser-card strong {
  font-size: 11px;
  line-height: 1.25
}
.service-browser-card small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}
.service-browser-card>b {
  color: #6255e2
}
.account-service-browser {
  margin-top: 22px
}
.account-service-browser .service-browser-tabs {
  position: static
}
.account-service-browser .service-browser-panels>section {
  padding: 20px
}
.account-service-browser .service-browser-grid {
  grid-template-columns: repeat(3,minmax(0,1fr))
}
.services-section .service-category-browser {
  margin-top: 24px
}
.metadata-workspace {
  display: grid;
  grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr);
  gap: 16px;
  margin-top: 18px
}
.metadata-workspace[hidden] {
  display: none
}
.metadata-preview-card {
  position: sticky;
  top: 94px;
  align-self: start;
  display: grid;
  gap: 9px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid #dcdae8;
  border-radius: 16px;
  background: #fcfbff
}
.metadata-preview-card img {
  display: block;
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 12px;
  background: #f0eef6
}
.metadata-preview-card strong {
  overflow: hidden;
  font-size: 12px;
  text-overflow: ellipsis;
  white-space: nowrap
}
.metadata-preview-card small {
  color: var(--muted);
  font-size: 10px
}
.metadata-editor-panel {
  display: grid;
  gap: 14px
}
.metadata-editor-panel>form,.metadata-editor-panel>section {
  padding: 18px;
  border: 1px solid #dcdae8;
  border-radius: 16px;
  background: #fcfbff
}
.metadata-editor-panel header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px
}
.metadata-editor-panel h2 {
  margin: 4px 0 0;
  font-size: 20px
}
.metadata-facts {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px
}
.metadata-facts>div {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid #e3e0ed;
  border-radius: 11px;
  background: #fff
}
.metadata-facts span {
  color: var(--muted);
  font-size: 9px
}
.metadata-facts strong {
  overflow-wrap: anywhere;
  font-size: 11px
}
.metadata-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px
}
.metadata-form-grid label {
  display: grid;
  gap: 6px;
  font-size: 11px;
  font-weight: 800
}
.metadata-form-grid input,.metadata-form-grid textarea {
  width: 100%;
  padding: 11px;
  border: 1px solid #dcdae8;
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  outline: 0
}
.metadata-form-grid textarea {
  min-height: 100px;
  resize: vertical
}
.metadata-form-grid input:focus,.metadata-form-grid textarea:focus {
  border-color: #bbb5dc;
  box-shadow: 0 0 0 3px rgba(98,85,226,.08)
}
.metadata-wide {
  grid-column: 1/-1
}
.metadata-help {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5
}
.tool-orbit .tool-orbit-item {
  width: 52px!important;
  height: 52px!important;
  padding: 0!important;
  border-radius: 16px!important
}
.tool-orbit .tool-orbit-item>span {
  width: 100%!important;
  height: 100%!important;
  border-radius: 15px!important
}
.tool-orbit .tool-orbit-item strong {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  overflow: hidden!important;
  clip: rect(0,0,0,0)!important
}
.tool-orbit .tool-orbit-item[data-position="1"] {
  left: 50%;
  top: 5%
}
.tool-orbit .tool-orbit-item[data-position="2"] {
  left: 76%;
  top: 18%
}
.tool-orbit .tool-orbit-item[data-position="3"] {
  left: 84%;
  top: 48%
}
.tool-orbit .tool-orbit-item[data-position="4"] {
  left: 67%;
  top: 68%
}
.tool-orbit .tool-orbit-item[data-position="5"] {
  left: 50%;
  top: 31%
}
.tool-orbit .tool-orbit-item[data-position="6"] {
  left: 32%;
  top: 68%
}
.tool-orbit .tool-orbit-item[data-position="7"] {
  left: 16%;
  top: 48%
}
.tool-orbit .tool-orbit-item[data-position="8"] {
  left: 24%;
  top: 18%
}
.tool-orbit .tool-orbit-item[data-position="9"] {
  left: 62%;
  top: 48%
}
.tool-orbit .tool-orbit-item[data-position="10"] {
  left: 38%;
  top: 48%
}
@media(max-width:1050px) {
.service-browser-tabs {
  grid-template-columns: repeat(4,minmax(0,1fr))
}
.service-browser-grid {
  grid-template-columns: repeat(3,minmax(0,1fr))
}
}
@media(max-width:760px) {
.service-browser-tabs {
  position: static;
  display: flex;
  overflow-x: auto
}
.service-browser-tabs button {
  min-width: 155px
}
.service-browser-panels>section>header {
  grid-template-columns: 1fr;
  gap: 8px
}
.service-browser-panels header>p {
  text-align: left
}
.account-service-browser .service-browser-grid,.service-browser-grid {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.metadata-workspace {
  grid-template-columns: 1fr
}
.metadata-preview-card {
  position: static
}
.metadata-form-grid {
  grid-template-columns: 1fr
}
.metadata-wide {
  grid-column: auto
}
}
@media(max-width:480px) {
.account-service-browser .service-browser-grid,.service-browser-grid {
  grid-template-columns: 1fr
}
.service-browser-panels>section {
  padding: 18px 13px
}
.metadata-facts {
  grid-template-columns: 1fr
}
}
.header-services-menu {
  position: relative
}
.header-services-menu summary {
  list-style: none;
  color: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer
}
.header-services-menu summary::-webkit-details-marker {
  display: none
}
.header-services-dropdown {
  position: absolute;
  z-index: 40;
  top: calc(100% + 22px);
  left: 50%;
  display: grid;
  width: calc(min(1050px, 100vw - 32px));
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px;
  padding: 14px;
  transform: translateX(-50%);
  border: 1px solid #ddd9eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(27,20,77,.18);
  color: var(--ink)
}
.header-services-dropdown section {
  min-width: 0;
  padding: 10px;
  border: 1px solid #ebe8f2;
  border-radius: 12px;
  background: #fcfbff
}
.header-services-dropdown section>a {
  display: flex!important;
  gap: 8px;
  align-items: center;
  padding: 0 0 8px!important;
  color: var(--ink)!important
}
.header-services-dropdown section>div {
  display: grid;
  gap: 2px
}
.header-services-dropdown section>div a {
  padding: 4px 0!important;
  color: var(--muted)!important;
  font-size: 9px!important;
  line-height: 1.3
}
.header-services-dropdown section>div a:hover {
  color: #6255e2!important
}
.tool-orbit .tool-orbit-item.orbit-computed {
  transform: translate(-50%,-50%)
}
.tool-orbit .tool-orbit-item.orbit-computed>span {
  border-radius: 10px!important
}
.tool-orbit .tool-orbit-item.orbit-computed img {
  width: 18px;
  height: 18px
}
.auth-service-point[data-position="1"] {
  left: 47%;
  top: 3%
}
.auth-service-point[data-position="2"] {
  left: 83%;
  top: 23%
}
.auth-service-point[data-position="3"] {
  left: 69%;
  top: 70%
}
.auth-service-point[data-position="4"] {
  left: 18%;
  top: 82%
}
.auth-service-point[data-position="5"] {
  left: 7%;
  top: 37%
}
.auth-service-point[data-position="6"] {
  left: 62%;
  top: 35%
}
.auth-service-point[data-position="7"] {
  left: 31%;
  top: 55%
}
@media(max-width:900px) {
.header-services-dropdown {
  position: static;
  width: 100%;
  grid-template-columns: 1fr;
  transform: none;
  box-shadow: none
}
.tool-orbit .tool-orbit-item.orbit-computed {
  display: none
}
}
.tool-orbit .tool-orbit-item.orbit-computed {
  width: 34px!important;
  min-width: 34px!important;
  max-width: 34px!important;
  height: 34px!important;
  min-height: 34px!important;
  max-height: 34px!important;
  flex: 0 0 34px!important;
  overflow: hidden!important;
  border: 1px solid hsla(0,0%,100%,.52)!important;
  background: hsla(0,0%,100%,.12)!important;
  box-shadow: 0 7px 18px rgba(29,18,89,.16)!important
}
.tool-orbit .tool-orbit-item.orbit-computed,.tool-orbit .tool-orbit-item.orbit-computed>span {
  display: grid!important;
  aspect-ratio: 1/1!important;
  box-sizing: border-box!important;
  place-items: center!important;
  padding: 0!important;
  border-radius: 999px!important
}
.tool-orbit .tool-orbit-item.orbit-computed>span {
  width: 28px!important;
  min-width: 28px!important;
  max-width: 28px!important;
  height: 28px!important;
  min-height: 28px!important;
  max-height: 28px!important;
  background: #fff!important
}
.auth-service-point[data-position="1"] {
  left: 50%;
  top: 5%
}
.auth-service-point[data-position="2"] {
  left: 72.5%;
  top: 11%
}
.auth-service-point[data-position="3"] {
  left: 89%;
  top: 27.5%
}
.auth-service-point[data-position="4"] {
  left: 95%;
  top: 50%
}
.auth-service-point[data-position="5"] {
  left: 89%;
  top: 72.5%
}
.auth-service-point[data-position="6"] {
  left: 72.5%;
  top: 89%
}
.auth-service-point[data-position="7"] {
  left: 50%;
  top: 95%
}
.auth-service-point[data-position="8"] {
  left: 27.5%;
  top: 89%
}
.auth-service-point[data-position="9"] {
  left: 11%;
  top: 72.5%
}
.auth-service-point[data-position="10"] {
  left: 5%;
  top: 50%
}
.auth-service-point[data-position="11"] {
  left: 11%;
  top: 27.5%
}
.auth-service-point[data-position="12"] {
  left: 27.5%;
  top: 11%
}
.header-tool-button {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  padding: 0;
  border: 1px solid hsla(0,0%,100%,.28);
  border-radius: 11px;
  background: hsla(0,0%,100%,.1);
  color: #fff;
  cursor: pointer;
  transition: .18s
}
.header-tool-button:hover {
  background: hsla(0,0%,100%,.22);
  transform: translateY(-1px)
}
.header-tool-button img {
  filter: brightness(0) invert(1)
}
.service-finder {
  width: min(760px,100% - 28px);
  max-height: calc(min(760px, 100vh - 28px));
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--ink);
  box-shadow: 0 35px 100px rgba(18,12,53,.35)
}
.service-finder::backdrop {
  background: rgba(19,15,47,.64);
  backdrop-filter: blur(8px)
}
.service-finder-panel {
  display: grid;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white)
}
.service-finder-panel>header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px
}
.service-finder-panel>header span {
  color: var(--violet);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase
}
.service-finder-panel h2 {
  margin: 5px 0 0;
  font-size: 27px
}
.service-finder-panel>header button {
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--cream);
  color: var(--ink);
  font-size: 24px;
  cursor: pointer
}
.service-finder-search {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 0 13px;
  border: 1px solid #d9d6e8;
  border-radius: 13px;
  background: var(--cream)
}
.service-finder-search input {
  width: 100%;
  padding: 14px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 13px
}
.service-finder-panel footer kbd,.service-finder-search kbd {
  padding: 3px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--white);
  font-size: 9px
}
.service-finder-status {
  min-height: 15px;
  color: var(--muted);
  font-size: 10px
}
.service-finder-results {
  display: grid;
  max-height: 390px;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  overflow: auto;
  padding-right: 4px
}
.service-finder-results article {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--cream)
}
.service-finder-results article>a {
  display: grid;
  min-width: 0;
  grid-template-columns: 38px minmax(0,1fr);
  gap: 9px;
  align-items: center;
  padding: 10px
}
.service-finder-results article>a i {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 10px;
  background: #eeebff
}
.service-finder-results article>a span {
  display: grid;
  min-width: 0;
  gap: 3px
}
.service-finder-results strong {
  overflow: hidden;
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap
}
.service-finder-results small {
  display: -webkit-box;
  overflow: hidden;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2
}
.service-browser-card-wrap>button,.service-card-favorite,.service-finder-results article>button {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  margin-right: 8px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  cursor: pointer
}
.service-browser-card-wrap>button.active,.service-card-favorite.active,.service-finder-results article>button.active {
  background: #fff3cf;
  color: #d89400
}
.service-browser-card-wrap>button.active img,.service-card-favorite.active img,.service-finder-results article>button.active img {
  filter: sepia(1) saturate(6)
}
.service-finder-history {
  display: grid;
  gap: 8px
}
.service-finder-history h3 {
  margin: 0;
  font-size: 11px
}
.service-finder-history>div {
  display: flex;
  gap: 8px;
  overflow: auto
}
.service-finder-history a {
  display: grid;
  min-width: 180px;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream)
}
.service-finder-history a i {
  display: grid;
  width: 30px;
  height: 30px;
  place-items: center
}
.service-finder-history a small {
  display: none
}
.service-finder-history a strong {
  font-size: 9px
}
.service-finder-panel>footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  color: var(--muted);
  font-size: 9px
}
.service-finder-panel>footer button {
  padding: 8px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--cream);
  color: var(--ink);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer
}
.service-finder-panel>footer button.active {
  border-color: var(--violet);
  color: var(--violet)
}
.service-browser-card-wrap {
  position: relative;
  min-width: 0
}
.service-browser-card-wrap .service-browser-card {
  height: 100%;
  padding-right: 42px
}
.service-browser-card-wrap>button {
  position: absolute;
  z-index: 2;
  top: 8px;
  right: 0;
  margin: 0
}
.service-card-favorite {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 6px;
  margin: 0
}
@media(max-width:760px) {
.header-tool-button {
  width: 34px;
  height: 34px;
  flex-basis: 34px
}
.service-finder-results {
  grid-template-columns: 1fr
}
.service-finder-panel {
  padding: 16px
}
.service-finder-panel>footer>span {
  display: none
}
}
.browser-workspace {
  display: grid;
  gap: 16px;
  margin-top: 22px;
  margin-bottom: 54px;
  padding: 22px;
  border: 1px solid #dedbe9;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(27,20,77,.08)
}
.browser-file-picker {
  min-height: 150px
}
.browser-file-picker>span {
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center
}
.browser-file-picker>span>img {
  margin-bottom: 3px
}
.browser-file-picker>span strong {
  font-size: 14px
}
.browser-file-picker>span small {
  max-width: 560px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5
}
.browser-file-picker.dragging {
  border-color: var(--violet);
  background: #f3f1ff
}
.browser-file-picker.has-files {
  min-height: 90px
}
.browser-tool-controls {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px
}
.browser-tool-controls:empty {
  display: none
}
.browser-tool-controls>label {
  display: grid;
  min-width: 0;
  gap: 7px;
  padding: 12px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fcfbff;
  color: var(--ink);
  font-size: 10px;
  font-weight: 850
}
.browser-tool-controls input:not([type=checkbox]):not([type=range]),.browser-tool-controls select {
  width: 100%;
  min-width: 0;
  padding: 10px;
  border: 1px solid #dcdae8;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  outline: 0
}
.browser-tool-controls input[type=color] {
  width: 100%;
  height: 42px;
  padding: 3px;
  border: 1px solid #dcdae8;
  border-radius: 9px;
  background: #fff
}
.browser-tool-controls input[type=range] {
  width: 100%;
  accent-color: var(--violet)
}
.browser-tool-controls>p {
  grid-column: 1/-1;
  margin: 0;
  padding: 14px;
  color: var(--muted);
  font-size: 10px
}
.browser-button-options,.browser-tool-controls>p {
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fcfbff
}
.browser-button-options {
  display: grid;
  grid-column: span 2;
  grid-template-columns: repeat(4,1fr);
  gap: 7px;
  padding: 8px
}
.browser-button-options button {
  padding: 10px;
  border: 1px solid #dcdae8;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 10px;
  font-weight: 850;
  cursor: pointer
}
.browser-button-options button.active {
  border-color: #6255e2;
  background: #eeebff;
  color: #5042d4
}
.browser-selected-files {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px
}
.browser-selected-files>div {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 11px;
  border: 1px solid #e1deeb;
  border-radius: 11px;
  background: #fcfbff
}
.browser-selected-files span {
  display: grid;
  min-width: 0;
  gap: 3px
}
.browser-selected-files strong {
  overflow: hidden;
  font-size: 10px;
  text-overflow: ellipsis;
  white-space: nowrap
}
.browser-selected-files small {
  color: var(--muted);
  font-size: 9px
}
.browser-selected-files button {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  border: 0;
  border-radius: 8px;
  background: #eeeaff;
  color: #5648dc;
  cursor: pointer
}
.browser-preview {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) minmax(220px,.6fr);
  gap: 14px;
  align-items: start;
  padding: 14px;
  border: 1px solid #dcdae8;
  border-radius: 15px;
  background: #fcfbff
}
.browser-preview canvas {
  display: block;
  width: 100%;
  max-height: 620px;
  object-fit: contain;
  border-radius: 11px;
  background: linear-gradient(45deg,#eee 25%,transparent 0),linear-gradient(-45deg,#eee 25%,transparent 0),linear-gradient(45deg,transparent 75%,#eee 0),linear-gradient(-45deg,transparent 75%,#eee 0);
  background-position: 0 0,0 8px,8px -8px,-8px 0;
  background-size: 16px 16px
}
.browser-preview>[data-browser-output] {
  min-height: 80px;
  overflow: auto;
  max-height: 620px;
  padding: 12px;
  border: 1px solid #e1deeb;
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  font: 10px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere
}
.browser-tool-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px
}
.browser-tool-actions .button {
  min-width: 150px
}
.browser-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px
}
.browser-editor-grid label {
  display: grid;
  gap: 7px;
  color: var(--ink);
  font-size: 10px;
  font-weight: 850
}
.browser-editor-grid textarea {
  width: 100%;
  min-height: 310px;
  padding: 15px;
  resize: vertical;
  border: 1px solid #dcdae8;
  border-radius: 13px;
  background: #fcfbff;
  color: var(--ink);
  font: 11px/1.6 ui-monospace,SFMono-Regular,Consolas,monospace;
  outline: 0
}
.browser-editor-grid textarea:focus {
  border-color: #bbb5dc;
  box-shadow: 0 0 0 3px rgba(98,85,226,.08)
}
.pdf-form-fields,.pdf-page-list {
  display: grid;
  grid-column: 1/-1;
  gap: 7px;
  padding: 10px;
  border: 1px solid #dcdae8;
  border-radius: 12px;
  background: #fcfbff
}
.pdf-page-list>div {
  display: grid;
  gap: 7px;
  padding: 7px;
  border: 1px solid #e5e2ed;
  border-radius: 9px;
  background: #fff
}
.pdf-page-list button {
  height: 30px;
  border: 1px solid #ddd9eb;
  border-radius: 7px;
  background: #f3f1ff;
  color: #5648dc;
  cursor: pointer
}
.pdf-form-fields {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.pdf-form-fields label {
  display: grid;
  gap: 5px;
  font-size: 9px
}
.pdf-form-fields input {
  padding: 9px;
  border: 1px solid #dcdae8;
  border-radius: 8px;
  background: #fff
}
.browser-tool-main {
  min-height: 0;
  padding-bottom: 20px
}
.browser-tool-main + .tool-guide {
  padding-top: 20px
}
.browser-related {
  margin-bottom: 24px
}
.browser-related>header {
  margin-bottom: 15px
}
.browser-related h2,.browser-tool-faq h2 {
  margin: 5px 0 0;
  font-size: 25px
}
.browser-related>div {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px
}
.browser-related a {
  display: grid;
  min-width: 0;
  grid-template-columns: 40px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border: 1px solid #dfdce9;
  border-radius: 13px;
  background: #fff
}
.browser-related a i {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 10px;
  background: #eeebff
}
.browser-related a span {
  display: grid;
  min-width: 0;
  gap: 4px
}
.browser-related strong {
  font-size: 16px;
  line-height: 1.4;
  overflow-wrap: anywhere
}
.browser-related small {
  display: block;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  overflow-wrap: anywhere
}
.browser-related .tool-direction-icon {
  color: var(--violet)
}
.browser-tool-faq {
  margin-bottom: 0;
  padding: 24px;
  border: 1px solid #dfdce9;
  border-radius: 20px;
  background: #fff
}
.browser-tool-faq details {
  border-bottom: 1px solid #e6e3ef
}
.browser-tool-faq details:last-child {
  border: 0
}
.browser-tool-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 16px 0;
  font-size: 16px;
  line-height: 1.5;
  list-style: none;
  font-weight: 850;
  cursor: pointer
}
.browser-tool-faq p {
  margin: 0 0 15px;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65
}
.browser-tool-faq summary::-webkit-details-marker {
  display: none
}
.browser-tool-faq .faq-toggle-icon {
  display: block;
  flex: 0 0 22px;
  width: 22px;
  height: 22px;
  color: var(--violet)
}
.browser-tool-faq details[open] .faq-toggle-vertical {
  display: none
}
.pdf-page-list>div {
  grid-template-columns: minmax(0,1fr) 110px 34px 34px
}
.service-browser-tabs {
  grid-template-columns: repeat(8,minmax(0,1fr))
}
@media(max-width:1050px) {
.browser-related>div,.browser-tool-controls {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.service-browser-tabs {
  grid-template-columns: repeat(4,minmax(0,1fr))
}
}
@media(max-width:760px) {
.browser-editor-grid,.browser-preview,.browser-selected-files,.browser-tool-controls,.pdf-form-fields {
  grid-template-columns: 1fr
}
.browser-related>div {
  grid-template-columns: 1fr 1fr
}
.browser-workspace {
  width: min(100% - 24px,1180px);
  padding: 14px
}
.browser-tool-actions .button {
  width: 100%
}
.browser-button-options {
  grid-column: auto
}
.pdf-page-list>div {
  grid-template-columns: 1fr 88px 32px 32px
}
}
@media(max-width:480px) {
.browser-related>div {
  grid-template-columns: 1fr
}
}
.browser-tool-actions {
  align-items: center
}
.browser-result-meta {
  margin-right: auto;
  color: var(--muted);
  font-size: 9px
}
.browser-folder-button {
  justify-self: start;
  width: max-content;
  cursor: pointer
}
.browser-tool-controls textarea {
  width: 100%;
  padding: 10px;
  resize: vertical;
  border: 1px solid #dcdae8;
  border-radius: 9px;
  background: #fff;
  color: var(--ink);
  font: 10px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;
  outline: 0
}
.browser-tool-controls .browser-control-wide {
  grid-column: 1/-1
}
.service-report-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 28px;
  margin-bottom: 28px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--white);
  box-shadow: 0 14px 34px rgba(27,20,77,.06)
}
.service-report-entry>div {
  display: grid;
  gap: 4px
}
.service-report-entry strong {
  font-size: 12px
}
.service-report-entry span {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5
}
.service-report-dialog {
  width: min(560px,100% - 24px);
  padding: 0;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--ink);
  box-shadow: 0 32px 90px rgba(18,12,53,.34)
}
.service-report-dialog::backdrop {
  background: rgba(18,13,48,.62);
  backdrop-filter: blur(7px)
}
.service-report-card {
  display: grid;
  gap: 15px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--white)
}
.service-report-card>header {
  display: flex;
  justify-content: space-between;
  gap: 16px
}
.service-report-card>header span {
  color: var(--violet);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase
}
.service-report-card h2 {
  margin: 5px 0 0;
  font-size: 25px
}
.service-report-card header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 10px
}
.service-report-card>header button {
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
  font-size: 22px;
  cursor: pointer
}
.service-report-card .field {
  display: grid;
  gap: 7px
}
.service-report-card .field>span {
  font-size: 10px;
  font-weight: 850
}
.service-report-card select,.service-report-card textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #dcdae8;
  border-radius: 11px;
  background: var(--cream);
  color: var(--ink);
  font-size: 11px;
  outline: 0
}
.service-report-card textarea {
  resize: vertical;
  line-height: 1.55
}
.service-report-card select:focus,.service-report-card textarea:focus {
  border-color: #bbb5dc;
  box-shadow: 0 0 0 3px rgba(98,85,226,.08)
}
.service-report-card small {
  color: var(--muted);
  font-size: 9px
}
.service-report-card>footer {
  display: flex;
  justify-content: flex-end;
  gap: 9px
}
.service-report-message {
  margin: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #eafaf3;
  color: #187653;
  font-size: 10px
}
.service-report-message.error {
  background: #fff0f3;
  color: #aa2644
}
.header-admin-link {
  padding: 8px 10px;
  border: 1px solid hsla(0,0%,100%,.3);
  border-radius: 9px;
  color: #fff!important;
  font-size: 10px!important;
  font-weight: 900
}
.admin-login-main {
  display: grid;
  min-height: calc(100vh - 76px);
  place-items: center;
  padding-top: 42px;
  padding-bottom: 70px
}
.admin-login-card {
  width: min(470px,100%);
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white);
  box-shadow: 0 28px 80px rgba(28,19,86,.13)
}
.admin-login-card>header {
  margin-bottom: 20px
}
.admin-dashboard-head>div>span,.admin-login-card>header>span {
  color: var(--violet);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase
}
.admin-login-card h1 {
  margin: 7px 0;
  font-size: 32px
}
.admin-login-card header p {
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6
}
.admin-honeypot {
  position: absolute!important;
  width: 1px!important;
  height: 1px!important;
  overflow: hidden!important;
  clip: rect(0,0,0,0)!important
}
.admin-main {
  padding-top: 34px;
  padding-bottom: 80px
}
.admin-dashboard-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(135deg,#f4f1ff,#f2fbff)
}
.admin-dashboard-head h1 {
  margin: 6px 0;
  font-size: 36px
}
.admin-dashboard-head p {
  margin: 0;
  color: var(--muted);
  font-size: 10px
}
.admin-status-tabs {
  position: sticky;
  z-index: 8;
  top: 82px;
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 7px;
  margin-bottom: 18px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: hsla(0,0%,100%,.96);
  backdrop-filter: blur(10px)
}
.admin-status-tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px;
  border-radius: 9px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 850
}
.admin-status-tabs a.active {
  background: var(--violet);
  color: #fff
}
.admin-status-tabs b {
  display: grid;
  min-width: 22px;
  height: 22px;
  place-items: center;
  border-radius: 7px;
  background: rgba(98,85,226,.11);
  font-size: 9px
}
.admin-status-tabs a.active b {
  background: hsla(0,0%,100%,.18)
}
.admin-layout {
  display: grid;
  grid-template-columns: minmax(0,1fr) 270px;
  gap: 16px;
  align-items: start
}
.admin-reports {
  display: grid;
  gap: 12px
}
.admin-audit,.admin-empty,.admin-report-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  box-shadow: 0 14px 38px rgba(27,20,77,.05)
}
.admin-report-card>header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px
}
.admin-report-card header span {
  color: var(--violet);
  font-size: 9px;
  font-weight: 850
}
.admin-report-card h2 {
  margin: 5px 0 0;
  font-size: 19px
}
.admin-report-card time {
  color: var(--muted);
  font-size: 8px
}
.admin-report-message {
  margin: 14px 0;
  padding: 13px;
  border-radius: 11px;
  background: var(--cream);
  font-size: 11px;
  line-height: 1.6
}
.admin-report-card dl {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 8px;
  margin: 0 0 14px
}
.admin-report-card dl>div {
  display: grid;
  gap: 3px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px
}
.admin-report-card dt {
  color: var(--muted);
  font-size: 8px
}
.admin-report-card dd {
  overflow-wrap: anywhere;
  margin: 0;
  font-size: 9px;
  font-weight: 750
}
.admin-report-form {
  display: grid;
  grid-template-columns: 180px minmax(0,1fr) auto;
  gap: 9px;
  align-items: end
}
.admin-report-form .field {
  display: grid;
  gap: 5px
}
.admin-report-form .field span {
  font-size: 9px;
  font-weight: 850
}
.admin-report-form select,.admin-report-form textarea {
  width: 100%;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--cream);
  color: var(--ink);
  font-size: 10px;
  outline: 0
}
.admin-audit {
  position: sticky;
  top: 146px;
  display: grid;
  gap: 9px
}
.admin-audit h2 {
  margin: 0 0 5px;
  font-size: 16px
}
.admin-audit>div {
  display: grid;
  gap: 3px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line)
}
.admin-audit strong {
  font-size: 9px
}
.admin-audit span {
  font-size: 9px;
  line-height: 1.4
}
.admin-audit time {
  color: var(--muted);
  font-size: 7px
}
.admin-empty strong {
  font-size: 14px
}
.admin-empty p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 10px
}
@media(max-width:900px) {
.admin-layout {
  grid-template-columns: 1fr
}
.admin-audit {
  position: static
}
.admin-report-form {
  grid-template-columns: 1fr 1fr
}
.admin-report-form .button {
  grid-column: 1/-1
}
.admin-status-tabs {
  position: static
}
}
@media(max-width:620px) {
.admin-dashboard-head,.service-report-entry {
  align-items: stretch;
  flex-direction: column
}
.service-report-entry .button {
  width: 100%
}
.service-report-card>footer {
  display: grid;
  grid-template-columns: 1fr
}
.admin-status-tabs {
  grid-template-columns: 1fr 1fr
}
.admin-report-card dl,.admin-report-form {
  grid-template-columns: 1fr
}
.admin-report-form .button {
  grid-column: auto
}
.admin-report-card>header {
  display: grid
}
}
.admin-stats-panel {
  display: grid;
  gap: 16px;
  margin-bottom: 18px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 14px 38px rgba(27,20,77,.05)
}
.admin-stats-panel>header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px
}
.admin-stats-panel>header span {
  color: var(--violet);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase
}
.admin-stats-panel h2 {
  margin: 5px 0;
  font-size: 22px
}
.admin-stats-panel header p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55
}
.admin-stats-panel>header label {
  display: grid;
  flex: 0 0 150px;
  gap: 6px;
  font-size: 9px;
  font-weight: 850
}
.admin-stats-panel select {
  width: 100%;
  padding: 10px 34px 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--cream);
  color: var(--ink);
  font-size: 11px
}
.admin-stat-summary {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 10px
}
.admin-stat-summary>span {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream)
}
.admin-stat-summary strong {
  color: var(--violet);
  font-size: 18px
}
.admin-stat-summary small {
  color: var(--muted);
  font-size: 9px
}
.admin-stats-table-wrap {
  max-height: 430px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 12px
}
.admin-stats-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff
}
.admin-stats-table th {
  position: sticky;
  z-index: 1;
  top: 0;
  padding: 10px;
  background: #f4f2fb;
  color: var(--muted);
  font-size: 8px;
  text-align: left;
  text-transform: uppercase
}
.admin-stats-table td {
  padding: 10px;
  border-top: 1px solid var(--line);
  font-size: 10px
}
.admin-stats-table td:first-child {
  display: grid;
  gap: 2px
}
.admin-stats-table td small {
  color: var(--muted);
  font-size: 8px
}
@media(max-width:720px) {
.admin-stats-panel>header {
  align-items: stretch;
  flex-direction: column
}
.admin-stats-panel>header label {
  flex-basis: auto
}
.admin-stat-summary {
  grid-template-columns: 1fr
}
.admin-stats-table {
  min-width: 620px
}
}
.yandex-ad-slot {
  display: block;
  min-height: 0;
  margin: 20px auto;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent
}
.yandex-ad-slot.is-loading {
  min-height: 50px
}
.yandex-ad-slot>span {
  display: grid;
  min-height: 50px;
  place-items: center;
  color: #655d7f;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .06em;
  text-transform: uppercase
}
.yandex-ad-target {
  display: block;
  width: 100%;
  min-width: 160px
}
.yandex-metrika-pixel {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px
}
.footer-bottom button {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer
}
.privacy-consent {
  position: fixed;
  z-index: 1000;
  right: 18px;
  bottom: 18px;
  left: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  width: min(980px,100% - 36px);
  margin: auto;
  padding: 18px 20px;
  border: 1px solid #dcd8eb;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 22px 70px rgba(25,17,75,.22)
}
.privacy-consent[hidden] {
  display: none
}
.privacy-consent>div:first-child {
  display: grid;
  gap: 5px
}
.privacy-consent strong {
  font-size: 14px
}
.privacy-consent p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5
}
.privacy-consent a {
  width: max-content;
  color: var(--violet);
  font-size: 10px;
  font-weight: 800
}
.privacy-consent-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 9px
}
.privacy-consent-actions .button {
  white-space: nowrap
}
@media(max-width:720px) {
.yandex-ad-slot {
  margin-top: 14px;
  margin-bottom: 14px
}
.privacy-consent {
  align-items: stretch;
  flex-direction: column;
  right: 10px;
  bottom: 10px;
  left: 10px;
  width: calc(100% - 20px);
  padding: 16px
}
.privacy-consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr
}
.privacy-consent-actions .button {
  padding-inline: 10px
}
}
.admin-stats-control {
  display: grid;
  grid-template-columns: minmax(220px,2fr) repeat(3,minmax(140px,1fr)) auto;
  gap: 14px;
  align-items: end;
  margin-top: 22px
}
.admin-stats-control label {
  display: grid;
  gap: 7px;
  font-size: 12px;
  font-weight: 800
}
.admin-stats-control input,.admin-stats-control select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d9d6ea;
  border-radius: 12px;
  background: #fff;
  padding: 0 12px;
  color: #15122d;
  font: inherit
}
.admin-stats-control .button {
  min-height: 44px;
  white-space: nowrap
}
@media(max-width:960px) {
.admin-stats-control {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.admin-stats-control .button {
  width: 100%
}
}
@media(max-width:600px) {
.admin-stats-control {
  grid-template-columns: 1fr
}
}
.localized-seo-section {
  padding: 18px 0 30px
}
.localized-seo-card {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white);
  box-shadow: 0 14px 34px rgba(27,20,77,.05)
}
.localized-seo-card h2 {
  margin: 6px 0 10px;
  font-size: calc(clamp(23px, 3vw, 32px));
  line-height: 1.18
}
.localized-seo-card>p:not(.section-kicker) {
  max-width: 900px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.75
}
.localized-seo-card .localized-seo-privacy {
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
  font-size: 11px
}
@media(max-width:760px) {
.localized-seo-section {
  padding: 12px 0 22px
}
.localized-seo-card {
  padding: 18px
}
.localized-seo-card>p:not(.section-kicker) {
  font-size: 11px
}
}
.service-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 18px;
  align-items: stretch
}
.service-dashboard-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--white)
}
.service-dashboard-heading {
  display: grid;
  grid-template-columns: 46px minmax(0,1fr);
  align-items: start;
  gap: 12px;
  padding-inline-end: 18px
}
.service-dashboard-heading>span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: #eeebff
}
.service-dashboard-heading>div {
  min-width: 0
}
.service-dashboard-heading p {
  margin: 0 0 6px;
  color: var(--violet-dark);
  font-size: 12px;
  font-weight: 700
}
.service-dashboard-heading h3 {
  margin: 0;
  font-size: 17px;
  line-height: 1.4;
  overflow-wrap: anywhere
}
.service-dashboard-copy {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere
}
.service-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 10px;
  margin-top: auto
}
.service-dashboard-stats span {
  display: grid;
  align-content: start;
  gap: 6px;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cream)
}
.service-dashboard-stats strong {
  font-size: 16px;
  line-height: 1.4;
  color: var(--violet-dark);
  overflow-wrap: anywhere
}
.service-dashboard-stats small {
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
  overflow-wrap: anywhere
}
.service-dashboard-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 12px 16px;
  margin-top: auto;
  border-radius: 12px;
  background: linear-gradient(135deg,#6253dc,#4935c5);
  color: #fff;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.4
}
.service-dashboard-stats+.service-dashboard-action {
  margin-top: 0
}
.service-dashboard-action:hover {
  background: var(--violet-dark)
}
.service-dashboard-action.disabled {
  background: var(--cream);
  color: var(--muted);
  pointer-events: none
}
.service-section-nav {
  display: flex;
  gap: 8px;
  width: min(1180px,100% - 48px);
  margin: 20px auto;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--white);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  scroll-padding-inline: 10px
}
.service-section-nav a {
  display: grid;
  flex: 1 0 138px;
  grid-template-columns: 36px minmax(0,1fr);
  align-items: center;
  gap: 8px;
  min-height: 60px;
  padding: 9px;
  border-radius: 12px;
  line-height: 1.4
}
.service-section-nav a:hover {
  background: var(--cream)
}
.service-section-nav a.active {
  color: #fff;
  background: var(--violet-dark)
}
.service-section-nav i {
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 10px;
  background: #eeebff
}
.service-section-nav span {
  display: grid;
  min-width: 0;
  gap: 3px
}
.service-section-nav strong {
  font-size: 13px;
  overflow-wrap: anywhere
}
.service-section-nav small {
  font-size: 11px;
  color: var(--muted);
  white-space: normal
}
.service-section-nav a.active small {
  color: #f1ecff
}
.service-section-nav a.active i {
  background: #bcf1f8
}
:root {
  --muted: #5f5c75;
  --header-height: 78px
}
html {
  scroll-padding-top: calc(20px + var(--header-height))
}
.field,.services-cover>div,article,body,fieldset,label,main,section {
  min-width: 0
}
img,svg,video {
  max-width: 100%
}
input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea {
  max-width: 100%;
  min-width: 0
}
pre {
  max-width: 100%;
  overflow: auto
}
.button,h1,h2,h3 {
  overflow-wrap: anywhere
}
a,button,input,select,summary,textarea {
  touch-action: manipulation
}
:focus-visible {
  outline: 3px solid #177da8;
  outline-offset: 4px
}
.button {
  min-height: 44px;
  white-space: normal;
  text-align: center;
  line-height: 1.45
}
.analytics-frame {
  display: none;
  visibility: hidden;
  border: 0
}
.analytics-settings-form {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 16px;
  align-items: end
}
.analytics-settings-form label {
  display: grid;
  gap: 8px
}
.analytics-settings-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font: inherit
}
.tool-guide {
  overflow-wrap: anywhere;
  padding-block: 28px 48px
}
.tool-guide-card {
  padding: calc(clamp(20px, 4vw, 44px));
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--white)
}
.tool-guide h2 {
  font-size: calc(clamp(24px, 3vw, 36px));
  line-height: 1.3;
  margin: 0 0 20px
}
.tool-guide h3 {
  font-size: 22px;
  line-height: 1.4;
  margin: 32px 0 12px;
  scroll-margin-top: calc(20px + var(--header-height))
}
.tool-guide li,.tool-guide p {
  max-width: none;
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink-soft)
}
.tool-guide p {
  margin: 0 0 16px
}
.tool-guide ol,.tool-guide ul {
  padding-inline-start: 24px
}
.tool-guide-toc {
  padding: 18px 22px;
  border-radius: 14px;
  background: var(--cream);
  margin: 24px 0
}
.tool-guide-toc ol {
  columns: 2;
  column-gap: 32px;
  margin-bottom: 0
}
.tool-guide-toc a {
  color: var(--violet-dark);
  text-decoration: underline;
  text-underline-offset: 3px
}
.tool-guide-toc li {
  break-inside: avoid;
  margin-bottom: 8px
}
.tool-guide-facts {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 12px;
  padding: 0
}
.tool-guide-facts>div {
  padding: 16px;
  background: var(--cream);
  border-radius: 12px
}
.tool-guide-facts dt {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  margin-bottom: 6px
}
.tool-guide-facts dd {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.7
}
[dir=rtl] .service-dashboard-heading {
  padding-right: 0;
  padding-left: 18px
}
[dir=rtl] .service-dashboard-action b {
  transform: rotate(180deg)
}
[dir=rtl] .service-card-favorite {
  right: auto;
  left: 6px
}
[dir=rtl] code,[dir=rtl] input[type=email],[dir=rtl] input[type=url],[dir=rtl] pre {
  direction: ltr;
  text-align: left
}
@media (max-width:1100px) {
.service-dashboard-grid {
  grid-template-columns: repeat(3,minmax(0,1fr))
}
.service-dashboard-card {
  padding: 18px
}
}
@media (max-width:900px) {
.service-dashboard-grid {
  grid-template-columns: repeat(2,minmax(0,1fr))
}
.analytics-settings-form {
  grid-template-columns: 1fr 1fr
}
.analytics-settings-form .button {
  grid-column: 1/-1
}
}
@media (max-width:760px) {
:root {
  --header-height: 68px
}
.service-section-nav,.shell {
  width: calc(100% - 32px)
}
.service-section-nav {
  position: static;
  margin-block: 16px
}
.service-section-nav a {
  flex: 0 0 180px
}
.category-service-list,.service-goal-section {
  padding: 22px 16px
}
.services-cover,.converter-hero .services-cover,.services-profile-strip {
  padding: 24px 20px
}
.services-cover h1 {
  font-size: calc(clamp(28px, 7vw, 40px));
  line-height: 1.2
}
input:not([type=checkbox]):not([type=radio]):not([type=color]),select,textarea {
  font-size: 16px
}
.tool-guide-toc ol {
  columns: 1
}
.tool-guide-facts {
  grid-template-columns: 1fr
}
.tool-guide h3 {
  font-size: 20px
}
.header-actions,.header-inner {
  gap: 8px
}
.header-tool-button,.language-switcher summary,.menu-toggle {
  min-width: 44px;
  min-height: 44px
}
.privacy-consent {
  max-height: 65dvh;
  overflow: auto
}
.service-finder,.service-report-dialog {
  max-height: calc(100dvh - 24px)
}
}
@media (max-width:600px) {
.account-service-browser .service-browser-grid,.service-browser-grid,.service-dashboard-grid,.service-grid {
  grid-template-columns: minmax(0,1fr)
}
.service-dashboard-card {
  padding: 20px;
  gap: 16px
}
.service-dashboard-heading h3 {
  font-size: 18px
}
.service-dashboard-heading {
  padding-inline-end: 18px
}
.service-dashboard-stats span {
  min-height: 76px
}
.analytics-settings-form {
  grid-template-columns: 1fr
}
.services-profile-strip {
  gap: 12px
}
.services-profile-strip>div {
  min-width: 0
}
.converter-options,.local-tool-options,.tool-stat-strip {
  flex-wrap: wrap
}
.service-goal-section {
  border-radius: 20px
}
}
@media print {
.privacy-consent,.service-report-entry,.service-section-nav,.tool-guide-toc {
  display: none
}
.tool-guide-card {
  border: 0;
  padding: 0
}
}
@media (prefers-reduced-motion:reduce) {
html {
  scroll-behavior: auto
}
*,:after,:before {
  animation-duration: .01ms!important;
  transition-duration: .01ms!important;
  animation-iteration-count: 1!important
}
}
.tool-guide .section-kicker {
  display: flex;
  align-items: center;
  gap: 10px
}
.guide-technical-note {
  margin-top: 28px;
  padding: 20px;
  border-inline-start: 4px solid var(--violet);
  background: var(--cream);
  border-radius: 12px
}
.guide-technical-note h3 {
  margin-top: 0
}
@media (max-width:1280px) {
.account-link b,.header-actions .button-light {
  display: none
}
.menu-toggle {
  display: block;
  order: 3
}
.primary-nav {
  position: fixed;
  top: var(--header-height);
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  right: 0;
  left: 0;
  display: grid;
  gap: 0;
  padding: 15px;
  transform: translateY(-130%);
  border-bottom: 1px solid hsla(0,0%,100%,.15);
  background: #4532b2;
  box-shadow: 0 20px 35px rgba(25,13,75,.25);
  opacity: 0;
  visibility: hidden;
  transition: transform .22s ease,opacity .22s ease,visibility .22s ease
}
.primary-nav.open {
  transform: translateY(0);
  opacity: 1;
  visibility: visible
}
.primary-nav a {
  padding: 14px;
  border-bottom: 1px solid hsla(0,0%,100%,.1)
}
.primary-nav a:last-child {
  border-bottom: 0
}
.primary-nav a:after {
  display: none
}
.menu-toggle[aria-expanded=true] span:first-child {
  transform: translateY(6px) rotate(45deg)
}
.menu-toggle[aria-expanded=true] span:nth-child(2) {
  opacity: 0
}
.menu-toggle[aria-expanded=true] span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg)
}
.header-inner {
  gap: 16px
}
.header-actions {
  margin-inline-start: auto
}
.header-tool-button,.language-switcher summary,.menu-toggle {
  min-width: 44px;
  min-height: 44px
}
}
@media(min-width:1281px) {
.header-inner {
  gap: 20px
}
.primary-nav {
  gap: 10px 16px;
  flex-wrap: wrap;
  min-width: 0
}
.primary-nav a {
  white-space: nowrap
}
}
@media(max-width:760px) {
.header-actions,.header-inner {
  gap: 8px
}
}