/*
 * Shared qpkit visual layer.
 * Page-specific styles continue to own layout and behavior; this file gives
 * every tool the same canvas, type rhythm, surface language, and interaction feel.
 */

body.__accessbox-tool {
  --bg: #f4f0e8;
  --paper: #f4f0e8;
  --surface: #fffdf8;
  --surface-strong: #ffffff;
  --surface-subtle: #f8f5ee;
  --card: #fffdf8;
  --ink: #191918;
  --text: #191918;
  --text-secondary: #626159;
  --text-dim: #626159;
  --muted: #6c6a63;
  --quiet: #928f85;
  --faint: #928f85;
  --text-muted: #928f85;
  --border: #ded8cd;
  --line: #ded8cd;
  --line2: #c8c0b4;
  --border-hover: #aaa297;
  --radius: 18px;
  color: var(--text);
  background:
    radial-gradient(circle at 88% 2%, color-mix(in srgb, var(--ab-accent) 10%, transparent), transparent 28rem),
    radial-gradient(circle at 3% 48%, rgba(73, 105, 196, .06), transparent 30rem),
    var(--bg);
  font-family: "Inter", "DM Sans", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body.__accessbox-tool::before {
  position: fixed;
  inset: 0;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.018'/%3E%3C/svg%3E");
  content: "";
  pointer-events: none;
}

body.__accessbox-tool ::selection {
  color: #191918;
  background: color-mix(in srgb, var(--ab-accent) 27%, white);
}

body.__accessbox-tool button,
body.__accessbox-tool a,
body.__accessbox-tool input,
body.__accessbox-tool textarea,
body.__accessbox-tool select,
body.__accessbox-tool summary {
  -webkit-tap-highlight-color: transparent;
}

body.__accessbox-tool button,
body.__accessbox-tool .btn,
body.__accessbox-tool .file-button,
body.__accessbox-tool .upload-btn,
body.__accessbox-tool .drop-zone,
body.__accessbox-tool .card {
  transition:
    transform .18s cubic-bezier(.2,.8,.2,1),
    border-color .18s,
    background-color .18s,
    box-shadow .18s;
}

body.__accessbox-tool button:focus-visible,
body.__accessbox-tool a:focus-visible,
body.__accessbox-tool input:focus-visible,
body.__accessbox-tool textarea:focus-visible,
body.__accessbox-tool select:focus-visible,
body.__accessbox-tool summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--ab-accent) 25%, transparent) !important;
  outline-offset: 3px !important;
}

body.__accessbox-tool input,
body.__accessbox-tool textarea,
body.__accessbox-tool select,
body.__accessbox-tool .output-preview {
  border-color: var(--border);
  color: var(--text);
  background-color: rgba(255, 253, 248, .88);
}

body.__accessbox-tool input::placeholder,
body.__accessbox-tool textarea::placeholder {
  color: #aaa69c;
}

body.__accessbox-tool input:focus,
body.__accessbox-tool textarea:focus,
body.__accessbox-tool select:focus {
  border-color: var(--ab-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--ab-accent) 11%, transparent);
}

body.__accessbox-tool::-webkit-scrollbar,
body.__accessbox-tool *::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

body.__accessbox-tool::-webkit-scrollbar-thumb,
body.__accessbox-tool *::-webkit-scrollbar-thumb {
  border: 3px solid transparent;
  border-radius: 99px;
  background: #b8b1a7;
  background-clip: padding-box;
}

body.__accessbox-anchor { --ab-accent: #2478ee; }
body.__accessbox-ocr { --ab-accent: #6257e6; --media-accent: #6257e6; --media-accent-dark: #4638c4; --media-soft: #e8e6fb; }
body.__accessbox-instagram-check { --ab-accent: #1e7d50; }
body.__accessbox-repetition-checker { --ab-accent: #d15430; }
body.__accessbox-voice-studio { --ab-accent: #7657f6; }
body.__accessbox-background-remover { --ab-accent: #167765; --media-accent: #167765; --media-accent-dark: #0f5548; --media-soft: #dff1eb; }
body.__accessbox-file-converter { --ab-accent: #b85f24; --media-accent: #b85f24; --media-accent-dark: #874315; --media-soft: #f6e7d8; }
body.__accessbox-image-studio { --ab-accent: #b23a82; --media-accent: #b23a82; --media-accent-dark: #832a5f; --media-soft: #f6dfec; }
body.__accessbox-thumbnail-editor { --ab-accent: #cf2e2e; }
body.__accessbox-subtitles { --ab-accent: #3a4fa8; --media-accent: #3a4fa8; --media-accent-dark: #26357a; --media-soft: #e0e4f5; }
body.__accessbox-pdf-toolkit { --ab-accent: #a02c3f; --media-accent: #a02c3f; --media-accent-dark: #7a1f2e; --media-soft: #f6dfe3; }
body.__accessbox-audio-trimmer { --ab-accent: #a67c00; --media-accent: #a67c00; --media-accent-dark: #7c5c00; --media-soft: #f6ecd2; }
body.__accessbox-video-gif { --ab-accent: #c2185b; --media-accent: #c2185b; --media-accent-dark: #931245; --media-soft: #f8dde8; }
body.__accessbox-exif { --ab-accent: #4a5568; --media-accent: #4a5568; --media-accent-dark: #333c4b; --media-soft: #e3e6ea; }
body.__accessbox-qr-studio { --ab-accent: #7b2d8e; --media-accent: #7b2d8e; --media-accent-dark: #5c2069; --media-soft: #f0e0f4; }
body.__accessbox-palette { --ab-accent: #6b7a2f; --media-accent: #6b7a2f; --media-accent-dark: #4e5a21; --media-soft: #eaefd8; }
body.__accessbox-chess-coach { --ab-accent: #3f5f3a; --media-accent: #3f5f3a; --media-accent-dark: #2c4529; --media-soft: #e1ebdc; }

/* Anchor: a compact legacy workspace becomes an intentional utility console. */
body.__accessbox-anchor {
  --accent: var(--ab-accent);
  --accent-light: color-mix(in srgb, var(--ab-accent) 10%, white);
  --radius-sm: 11px;
}

body.__accessbox-anchor .app {
  width: min(1480px, calc(100% - 48px));
  max-width: none;
  padding: 68px 0 48px;
}

body.__accessbox-anchor .header {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
  padding: 0 0 14px;
  border-bottom: 0;
}

body.__accessbox-anchor .header::before {
  content: none;
}

body.__accessbox-anchor .header h1 {
  grid-column: 1;
  margin: 0;
  padding: 0;
  color: var(--text);
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
}

body.__accessbox-anchor .header p {
  display: none;
}

body.__accessbox-anchor .header .tab-bar {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: rgba(232, 226, 216, .68);
}

body.__accessbox-anchor .tab-btn {
  min-height: 34px;
  margin: 0;
  padding: 0 13px;
  border: 0;
  border-radius: 9px;
  color: var(--text-dim);
  font-size: .78rem;
}

/* Hover looks only where there is a hover: a finger leaves :hover behind
   after a tap, and the button would stay lifted in the accent colour. */
@media (hover: hover) {
  body.__accessbox-anchor .tab-btn:hover {
    color: var(--text);
  }
}

body.__accessbox-anchor .tab-btn.active {
  color: var(--text);
  background: var(--surface);
  box-shadow: 0 2px 10px rgba(41, 37, 30, .08);
}

body.__accessbox-anchor .script-card,
body.__accessbox-anchor .patient-block {
  border-color: var(--border);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, .84);
  box-shadow: 0 1px 0 rgba(25, 25, 24, .025);
}

body.__accessbox-anchor .script-card {
  padding: 25px 26px;
}

body.__accessbox-anchor .script-card h2 {
  font-size: 1.06rem;
  letter-spacing: -.025em;
}

body.__accessbox-anchor .script-line {
  border-left-color: color-mix(in srgb, var(--ab-accent) 25%, var(--border));
  line-height: 1.65;
}

body.__accessbox-anchor .btn-generate,
body.__accessbox-anchor .copy-all-btn {
  border-radius: 12px;
  background: var(--text);
  box-shadow: 0 7px 18px rgba(25, 25, 24, .14);
}

@media (hover: hover) {
  body.__accessbox-anchor .btn-generate:hover,
  body.__accessbox-anchor .copy-all-btn:hover {
    background: var(--ab-accent);
    transform: translateY(-2px);
  }
}

body.__accessbox-anchor .tool-desc {
  max-width: 720px;
  margin-bottom: 20px;
  font-size: .88rem;
  line-height: 1.65;
}

/* Essay checker: same editorial header and stronger workspace hierarchy. */
body.__accessbox-repetition-checker {
  --accent: var(--ab-accent);
  --accent-hover: #ac3f21;
  --accent-soft: #fff0e9;
}

body.__accessbox-repetition-checker main {
  width: min(1480px, calc(100% - 48px));
  padding: 68px 0 60px;
}

body.__accessbox-repetition-checker main > header {
  position: relative;
  max-width: none;
  margin-bottom: 16px;
}

body.__accessbox-repetition-checker main > header::before {
  content: none;
}

body.__accessbox-repetition-checker h1 {
  margin-bottom: 0;
  font-size: clamp(1.65rem, 3.5vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: 1;
}

body.__accessbox-repetition-checker main > header p {
  max-width: 700px;
  color: var(--text-secondary);
  font-size: .94rem;
  line-height: 1.7;
}

body.__accessbox-repetition-checker .workspace {
  gap: 14px;
}

body.__accessbox-repetition-checker .card {
  border-color: var(--border);
  border-radius: 19px;
  background: rgba(255, 253, 248, .88);
  box-shadow: 0 10px 35px rgba(53, 46, 35, .05);
}

body.__accessbox-repetition-checker .editor-card,
body.__accessbox-repetition-checker .settings {
  padding: 23px;
}

body.__accessbox-repetition-checker textarea {
  border-radius: 13px;
  background: rgba(248, 245, 238, .9);
}

body.__accessbox-repetition-checker button,
body.__accessbox-repetition-checker .file-button {
  border-radius: 11px;
}

body.__accessbox-repetition-checker .primary {
  border-color: var(--text);
  background: var(--text);
  box-shadow: 0 7px 18px rgba(25, 25, 24, .14);
}

@media (hover: hover) {
  body.__accessbox-repetition-checker .primary:hover {
    border-color: var(--ab-accent);
    background: var(--ab-accent);
  }
}

/* Voice Studio: retain the expressive workflow, align it with the qpkit shell. */
body.__accessbox-voice-studio {
  --accent: var(--ab-accent);
  --accent-dark: #5b3ddb;
  --accent-soft: #eee9ff;
  --shadow: 0 20px 60px rgba(48, 40, 29, .08);
}

body.__accessbox-voice-studio .shell {
  width: min(1480px, calc(100% - 48px));
  padding: 68px 0 52px;
}

body.__accessbox-voice-studio .hero {
  position: relative;
  margin-bottom: 16px;
}

body.__accessbox-voice-studio .hero::before {
  content: none;
}

body.__accessbox-voice-studio h1 {
  font-size: clamp(1.65rem, 3.5vw, 2.35rem);
  letter-spacing: -.045em;
  line-height: 1;
}

body.__accessbox-voice-studio .hero-copy {
  max-width: 560px;
  font-size: .94rem;
  line-height: 1.7;
}

body.__accessbox-voice-studio .workspace {
  border-color: var(--border);
  border-radius: 22px;
  background: rgba(255, 253, 248, .9);
}

body.__accessbox-voice-studio .pane {
  padding: 31px;
}

body.__accessbox-voice-studio .pane + .pane {
  border-left: 0;
}

body.__accessbox-voice-studio .recorder,
body.__accessbox-voice-studio textarea,
body.__accessbox-voice-studio select {
  border-radius: 14px;
}

body.__accessbox-voice-studio .step-number {
  background: var(--text);
}

body.__accessbox-voice-studio .primary-btn {
  border-radius: 13px;
  background: var(--text);
  box-shadow: 0 9px 22px rgba(25, 25, 24, .16);
}

@media (hover: hover) {
  body.__accessbox-voice-studio .primary-btn:hover {
    background: var(--ab-accent);
    transform: translateY(-2px);
  }
}

/* Instagram checker: simplify the color field and bring panels onto the same canvas. */
body.__accessbox-instagram-check {
  --green: var(--ab-accent);
  --green2: #145c3a;
  --green-soft: #e8f4ec;
  --peach: #ff805e;
  --peach-soft: #fff0ea;
  --shadow: 0 20px 60px rgba(48, 40, 29, .08);
}

body.__accessbox-instagram-check .shell {
  width: min(1480px, calc(100% - 48px));
  padding: 68px 0 60px;
}

body.__accessbox-instagram-check .hero {
  margin-bottom: 16px;
}

body.__accessbox-instagram-check h1 {
  color: var(--text);
  font-family: "Manrope", "Inter", sans-serif;
  margin: 0;
  font-size: clamp(1.65rem, 3.5vw, 2.35rem);
  letter-spacing: -.045em;
  line-height: 1;
}

body.__accessbox-instagram-check .hero-copy {
  color: var(--text-secondary);
}

body.__accessbox-instagram-check .panel {
  border-color: var(--border);
  background: rgba(255, 253, 248, .88);
}

body.__accessbox-instagram-check .dropzone {
  border-color: var(--line2);
  background:
    linear-gradient(rgba(255,253,248,.78), rgba(255,253,248,.78)),
    repeating-linear-gradient(-45deg,#f2eee6 0,#f2eee6 7px,#faf7f1 7px,#faf7f1 14px);
}

body.__accessbox-instagram-check .btn {
  border-radius: 11px;
}

body.__accessbox-instagram-check .btn-primary {
  background: var(--text);
  box-shadow: 0 8px 20px rgba(25, 25, 24, .15);
}

@media (hover: hover) {
  body.__accessbox-instagram-check .btn-primary:hover {
    background: var(--ab-accent);
  }
}

@media (max-width: 800px) {
  body.__accessbox-anchor .app,
  body.__accessbox-repetition-checker main,
  body.__accessbox-voice-studio .shell,
  body.__accessbox-instagram-check .shell {
    width: min(calc(100% - 24px), 720px);
    padding-top: 64px;
  }

  body.__accessbox-anchor .header {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
  }

  body.__accessbox-anchor .header h1 {
    order: -1;
  }

  body.__accessbox-anchor .header .tab-bar {
    width: 100%;
    margin-top: 4px;
    overflow-x: auto;
  }

  body.__accessbox-anchor .tab-btn {
    flex: 1;
    white-space: nowrap;
  }
}

@media (max-width: 520px) {
  body.__accessbox-repetition-checker h1,
  body.__accessbox-voice-studio h1,
  body.__accessbox-instagram-check h1 {
    font-size: 1.7rem;
  }

  body.__accessbox-voice-studio .pane {
    padding: 21px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.__accessbox-tool *,
  body.__accessbox-tool *::before,
  body.__accessbox-tool *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}