* {
  box-sizing:border-box}
body {
  margin:0;
  font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
a {
  color:inherit;
  text-decoration:none}
button,input,textarea,select {
  font:inherit}
button,select,summary {
  cursor:pointer}
svg {
  width:24px;
  height:24px;
  flex-shrink:0}
button,a,input,textarea,select,summary {
  -webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible,select:focus-visible,summary:focus-visible {
  outline:3px solid var(--home-focus);
  outline-offset:4px}
button {
  color:inherit}
button:hover {
  filter:brightness(.96)}
/* The homepage palette is resolved exclusively by the theme on html.
   Repeat it on body: legacy [data-theme] rules on body otherwise override
   variables inherited from html, regardless of the root selector specificity. */
html:not([data-theme]),
html[data-theme="light"],
html:not([data-theme]) body,
html[data-theme="light"] body {
  color-scheme: light;
  --qu-bg: #f8fafc;
  --qu-bg-rgb: 248, 250, 252;
  --qu-surface: #ffffff;
  --qu-surface-hover: #f1f5f9;
  --qu-border: #e2e8f0;
  --qu-text-main: #0f172a;
  --qu-text-muted: #64748b;
  --qu-input-bg: #f1f5f9;
  --home-accent: #167451;
  --home-tint: #e6f3ed;
  --home-muted: #64748b;
  --home-telegram: #237da6;
  --home-viber: #8561b6;
  --home-focus: #3b82f6;
  --home-shadow: #0f172a44;
}
html[data-theme="dark"],
html[data-theme="dark"] body {
  color-scheme: dark;
  --qu-bg: #0f172a;
  --qu-bg-rgb: 15, 23, 42;
  --qu-surface: #1e293b;
  --qu-surface-hover: #334155;
  --qu-border: #334155;
  --qu-text-main: #f1f5f9;
  --qu-text-muted: #94a3b8;
  --qu-input-bg: #0f172a;
  --home-accent: #82e3b7;
  --home-tint: #193c35;
  --home-muted: #a8b8cb;
  --home-telegram: #7ac8ed;
  --home-viber: #c3a0f6;
  --home-focus: #3b82f6;
  --home-shadow: #0f172a44;
}
html, body {
  background-color: var(--qu-bg);
  color: var(--qu-text-main);
}
/* Paint Light surfaces explicitly, including native Safari controls.
   Do not depend on transparent backgrounds or the browser's control palette. */
html[data-theme="light"],
html[data-theme="light"] body {
  background-color: #f8fafc;
  color: #0f172a;
}
html[data-theme="light"] .header,
html[data-theme="light"] .chat-panel,
html[data-theme="light"] .tool,
html[data-theme="light"] .paste,
html[data-theme="light"] .messenger {
  background-color: #ffffff;
  color: #0f172a;
  border-color: #e2e8f0;
}
html[data-theme="light"] .phone-row,
html[data-theme="light"] #phoneInput,
html[data-theme="light"] #messageInput {
  background-color: #f8fafc;
  color: #0f172a;
}
html[data-theme="light"] .preferences select {
  background-color: #ffffff;
  color: #64748b;
  border-color: #e2e8f0;
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] select,
html[data-theme="light"] button {
  color-scheme: light;
  -webkit-text-fill-color: currentColor;
}
.header {
  border-bottom:1px solid var(--qu-border)}
.header-inner {
  max-width:1080px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:22px 28px;
  gap:12px}
.brand {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:22px;
  font-weight:750;
  letter-spacing:-.7px}
.brand-mark {
  display:grid;
  place-items:center;
  background:var(--home-accent);
  color:var(--qu-surface);
  width:34px;
  height:34px;
  border-radius:10px}
.brand-mark svg {
  width:21px;
  height:21px}
.preferences {
  display:flex;
  gap:6px}
.preferences select {
  min-height:44px;
  max-width:140px;
  padding:0 9px;
  border:1px solid transparent;
  border-radius:8px;
  background:transparent;
  color:var(--home-muted);
  font-size:13px}
.preferences select:hover {
  background:var(--qu-surface-hover)}
.hero {
  max-width:650px;
  margin:auto;
  text-align:center;
  padding:52px 24px 42px}
.hero-icon {
  margin:0 auto 18px;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:15px;
  background:var(--home-tint);
  color:var(--home-accent)}
.hero-icon svg {
  width:26px;
  height:26px}
h1 {
  font-size:clamp(32px,4.5vw,48px);
  line-height:1.12;
  letter-spacing:-1.8px;
  margin:0 0 14px;
  font-weight:750}
.intro {
  margin:0;
  color:var(--home-muted);
  font-size:17px;
  line-height:1.6}
.chat-panel {
  text-align:left;
  margin-top:30px;
  background:var(--qu-surface);
  border:1px solid var(--qu-border);
  border-radius:22px;
  padding:27px;
  box-shadow:0 12px 35px -25px var(--home-shadow)}
.field-label {
  display:block;
  font-size:13px;
  font-weight:650;
  margin:0 0 10px}
.phone-row {
  display:flex;
  align-items:center;
  min-height:66px;
  border:1px solid var(--qu-border);
  border-radius:12px;
  background:var(--qu-bg);
  padding:0 10px 0 18px;
  gap:5px}
.phone-row:focus-within {
  border-color:var(--home-accent);
  box-shadow:0 0 0 3px var(--home-tint)}
#phoneInput {
  width:100%;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--qu-text-main);
  font-size:23px;
  letter-spacing:.5px;
  padding:17px 0;
  font-variant-numeric:tabular-nums}
#phoneInput::placeholder {
  color:var(--home-muted);
  opacity:.7}
.paste {
  border:1px solid var(--qu-border);
  border-radius:8px;
  background:var(--qu-surface);
  padding:0 12px;
  min-height:44px;
  font-size:12px;
  font-weight:600}
.hint {
  font-size:12px;
  color:var(--home-muted);
  line-height:1.6;
  margin:9px 0 0}
.message {
  margin-top:17px}
.message summary {
  font-size:13px;
  color:var(--home-muted);
  min-height:44px;
  padding:12px 0}
.message textarea {
  width:100%;
  resize:vertical;
  padding:12px;
  border:1px solid var(--qu-border);
  border-radius:10px;
  background:var(--qu-bg);
  color:var(--qu-text-main);
  font-size:16px}
.message textarea:focus {
  outline:2px solid var(--home-accent);
  outline-offset:2px}
.action-label {
  margin-top:19px}
.actions {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px}
.messenger {
  min-height:78px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  border:1px solid var(--qu-border);
  background:var(--qu-surface);
  font-size:13px;
  font-weight:650}
.wa svg {
  color:var(--home-accent)}
.tg svg {
  color:var(--home-telegram)}
.viber svg {
  color:var(--home-viber)}
.app-hint {
  text-align:center;
  margin-top:15px}
.privacy {
  font-size:12px;
  color:var(--home-muted);
  margin:20px 0 0;
  line-height:1.6}
.tools {
  max-width:1080px;
  margin:0 auto;
  padding:12px 28px 52px}
.section-title {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:17px}
h2 {
  font-size:18px;
  letter-spacing:-.4px;
  margin:0}
.section-title>span {
  font-size:12px;
  color:var(--home-muted)}
.tools-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px}
.tool {
  position:relative;
  padding:18px 15px;
  min-width:0;
  border:1px solid var(--qu-border);
  border-radius:13px;
  background:var(--qu-surface);
  transition:border-color .15s,transform .15s}
.tool:hover {
  border-color:var(--home-accent);
  transform:translateY(-2px)}
.tool-icon {
  color:var(--home-muted)}
.tool-icon svg {
  width:21px;
  height:21px}
h3 {
  margin:14px 0 6px;
  font-size:13px;
  font-weight:650}
.tool p {
  font-size:12px;
  line-height:1.6;
  color:var(--home-muted);
  margin:0}
.tool-arrow {
  position:absolute;
  right:14px;
  top:19px;
  color:var(--home-muted)}
.tool-arrow svg {
  width:16px;
  height:16px}
footer {
  width:calc(100% - 56px);
  max-width:1024px;
  margin:0 auto;
  padding:23px 0 30px;
  border-top:1px solid var(--qu-border);
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--home-muted);
  font-size:12px}
.footer-brand {
  font-weight:700}
footer>a:last-child {
  margin-left:auto;
  min-height:44px;
  display:flex;
  align-items:center}
.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 {
  position:absolute;
  left:16px;
  top:-100px;
  padding:14px;
  background:var(--qu-surface);
  z-index:10}
.skip:focus {
  top:10px}
@media(max-width:760px) {
  .header-inner {
  padding:14px 20px}
.hero {
  padding:35px 20px 30px}
.tools {
  padding:15px 20px 30px}
.tools-grid {
  grid-template-columns:repeat(2,minmax(0,1fr))}
.tool:last-child {
  grid-column:1/-1}
.tool:last-child h3 {
  margin-top:0}
.tool:last-child {
  padding-left:52px}
.tool:last-child .tool-icon {
  position:absolute;
  left:17px;
  top:20px}
footer {
  width:calc(100% - 40px);
  margin:0 20px}
.section-title>span {
  display:none}
}
@media(max-width:400px) {
  .header-inner {
  padding:12px 16px}
.brand {
  font-size:20px;
  gap:7px}
.preferences {
  gap:0}
.preferences select {
  padding:0 4px;
  max-width:112px}
.hero {
  padding:30px 16px 26px}
.intro {
  font-size:15px}
.chat-panel {
  padding:19px 15px;
  border-radius:17px;
  margin-top:23px}
h1 {
  letter-spacing:-1.2px}
.phone-row {
  padding-left:12px}
#phoneInput {
  font-size:19px;
  letter-spacing:0}
.paste {
  padding:0 8px}
.actions {
  gap:7px}
.tools {
  padding-left:16px;
  padding-right:16px}
footer {
  width:calc(100% - 32px);
  margin:0 16px;
  gap:8px;
  font-size:11px}
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
  transition:none!important}
}

/* Home secondary navigation and the standalone tools catalog. */
.home-secondary-actions {display:flex;flex-direction:column;width:100%;max-width:340px;gap:10px;margin:24px auto 0}
.home-secondary-actions a {display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 14px;border:1px solid var(--qu-border);border-radius:12px;color:var(--home-muted);font-size:13px;line-height:1.5}
.home-secondary-actions a:hover {background:var(--qu-surface);color:var(--qu-text-main)}
.home-secondary-actions .catalog-cta {background:var(--home-tint);border-color:var(--home-accent);color:var(--home-accent);font-weight:700}
.home-secondary-actions .catalog-cta:hover {background:var(--home-tint);color:var(--home-accent)}
footer.compact-footer {justify-content:center;gap:6px}
.catalog-page.tool-page main {max-width:960px}
.catalog-page .tools-grid {grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.catalog-page .tool {min-height:150px;padding:22px;grid-column:auto}
.catalog-page .tool h3 {margin-top:14px;font-size:16px}
.catalog-page .tool p {font-size:14px}
.catalog-page .tool .tool-icon {position:static;display:grid;place-items:start}
@media(max-width:760px) {
  .catalog-page .tools-grid {grid-template-columns:1fr}
}
@media(max-width:600px) {
  .home-secondary-actions {max-width:none;align-items:stretch}
  .catalog-page .tool .tool-icon {place-items:center}
  .catalog-page .tool-arrow {position:static}
}

.home-page .hero-heading {display:flex;align-items:center;justify-content:center;gap:14px;margin-bottom:14px}
.home-page .hero-heading .hero-icon {flex-shrink:0;width:48px;height:48px;margin:0}
.home-page .hero-heading h1 {min-width:0;margin:0;overflow-wrap:anywhere}

/* Use Safari's visible viewport while allowing longer pages to grow. */
body.home-page, body.tool-page {
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}
.home-page>main, .tool-page>main {flex:1 0 auto}
.home-page>.header, .tool-page>.header,
.home-page>footer, .tool-page>footer {flex-shrink:0}
@media(min-width:601px) {
  body.home-page, body.tool-page {
    padding-top:env(safe-area-inset-top);
    padding-bottom:env(safe-area-inset-bottom);
  }
}