/* GBZ LIGHT TOOL PROTOTYPE V1
   Prototype target only:
   tools/json-formatter-validator/index.html
   Desktop Light Mode only.
   Dark Mode and mobile remain untouched.
*/

@media (min-width: 769px) {
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 {
    --gbz-proto-ink: #171a1d;
    --gbz-proto-muted: #737980;
    --gbz-proto-line: rgba(31, 37, 42, .10);
    --gbz-proto-line-soft: rgba(31, 37, 42, .065);
    --gbz-proto-pearl: #fbfbfa;
    --gbz-proto-pearl-2: #f4f5f5;
    --gbz-proto-white: #ffffff;
    --gbz-proto-blood: #720a12;

    color: var(--gbz-proto-ink) !important;
    background:
      radial-gradient(circle at 50% -10%, rgba(255,255,255,.98) 0 18%, transparent 52%),
      linear-gradient(180deg, #fafafa 0%, #f4f5f5 58%, #f7f7f6 100%) !important;
}

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .header {
    min-height: 68px !important;
    padding: 0 34px !important;
    background: rgba(251,251,250,.78) !important;
    border-bottom: 1px solid var(--gbz-proto-line-soft) !important;
    box-shadow: none !important;
    backdrop-filter: blur(20px) saturate(120%);
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .header .logo {
    color: #24282c !important;
    text-shadow: none !important;
    letter-spacing: .055em !important;
    font-weight: 700 !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .page-layout {
    align-items: start !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .tool-wrapper {
    width: min(1180px, calc(100vw - 390px)) !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 44px 28px 90px !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .gbz-proto-back {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    width: max-content;
    margin: 0 0 30px !important;
    padding: 10px 14px !important;
    border: 1px solid var(--gbz-proto-line) !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.72) !important;
    color: #4f555a !important;
    text-decoration: none !important;
    box-shadow: 0 10px 32px rgba(31,37,42,.035) !important;
    transition:
      transform .18s ease,
      border-color .18s ease,
      box-shadow .18s ease,
      color .18s ease !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .gbz-proto-back:hover {
    transform: translateY(-1px);
    color: var(--gbz-proto-ink) !important;
    border-color: rgba(114,10,18,.18) !important;
    box-shadow:
      0 12px 34px rgba(31,37,42,.05),
      inset 0 -1px 0 rgba(114,10,18,.28) !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .section {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .section-title {
    max-width: 900px;
    margin: 0 !important;
    color: var(--gbz-proto-ink) !important;
    font-size: clamp(36px, 4vw, 58px) !important;
    line-height: .98 !important;
    letter-spacing: -.045em !important;
    font-weight: 760 !important;
    text-shadow: none !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .section-subtitle {
    max-width: 720px !important;
    margin: 18px 0 34px !important;
    color: var(--gbz-proto-muted) !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    text-shadow: none !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .tool-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-template-areas:
      "input output"
      "actions actions" !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .tool-input,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .tool-output {
    position: relative;
    min-width: 0;
    padding: 18px !important;
    border: 1px solid var(--gbz-proto-line) !important;
    border-radius: 24px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,249,248,.96)) !important;
    box-shadow:
      0 24px 70px rgba(31,37,42,.045),
      inset 0 1px 0 rgba(255,255,255,1) !important;
    overflow: hidden;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .tool-input {
    grid-area: input;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .tool-output {
    grid-area: output;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .tool-input::after,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .tool-output::after {
    content: "";
    position: absolute;
    left: 14%;
    right: 14%;
    bottom: -22px;
    height: 28px;
    border-radius: 999px;
    background: rgba(114,10,18,.12);
    filter: blur(18px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .tool-input:focus-within::after,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .tool-output:focus-within::after {
    opacity: .58;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .tool-input h3,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .tool-output h3 {
    margin: 0 0 12px !important;
    color: #555b60 !important;
    font-size: 12px !important;
    font-weight: 760 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase !important;
    text-shadow: none !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 textarea {
    width: 100% !important;
    min-height: 360px !important;
    resize: vertical !important;
    padding: 18px !important;
    border: 1px solid var(--gbz-proto-line-soft) !important;
    border-radius: 17px !important;
    outline: none !important;
    background: rgba(255,255,255,.90) !important;
    color: #202428 !important;
    caret-color: var(--gbz-proto-blood) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.96),
      inset 0 0 0 1px rgba(255,255,255,.28) !important;
    font: 500 14px/1.6 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
    transition:
      border-color .18s ease,
      box-shadow .18s ease,
      background .18s ease !important;
    cursor: text !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 textarea::placeholder {
    color: #a0a5a9 !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 textarea:focus {
    border-color: rgba(114,10,18,.20) !important;
    background: #fff !important;
    box-shadow:
      0 0 0 4px rgba(255,255,255,.95),
      0 0 0 5px rgba(114,10,18,.06),
      0 16px 44px rgba(31,37,42,.045) !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 textarea[readonly] {
    background: rgba(247,248,248,.92) !important;
    color: #2d3236 !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .tool-actions {
    grid-area: actions;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 4px 0 8px !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .btn-primary {
    position: relative;
    min-width: 210px;
    min-height: 50px;
    padding: 0 24px !important;
    border: 1px solid rgba(31,37,42,.12) !important;
    border-radius: 999px !important;
    background:
      linear-gradient(180deg, #ffffff 0%, #f2f3f3 100%) !important;
    color: #23272b !important;
    font-size: 14px !important;
    font-weight: 740 !important;
    letter-spacing: .02em !important;
    text-shadow: none !important;
    box-shadow:
      0 14px 36px rgba(31,37,42,.07),
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 -1px 0 rgba(114,10,18,.12) !important;
    overflow: hidden;
    transition:
      transform .18s ease,
      box-shadow .18s ease,
      border-color .18s ease !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .btn-primary::after {
    content: "";
    position: absolute;
    left: 20%;
    right: 20%;
    bottom: -13px;
    height: 20px;
    border-radius: 999px;
    background: var(--gbz-proto-blood);
    filter: blur(14px);
    opacity: .12;
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: none;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .btn-primary:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(114,10,18,.22) !important;
    background:
      linear-gradient(180deg, #ffffff 0%, #f6f6f5 100%) !important;
    color: #171a1d !important;
    box-shadow:
      0 20px 48px rgba(31,37,42,.09),
      0 0 30px rgba(255,255,255,.95),
      inset 0 -2px 0 rgba(114,10,18,.30) !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .btn-primary:hover::after {
    opacity: .34;
    transform: translateY(-3px);
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .seo-text,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .related-tools {
    max-width: 920px !important;
    margin: 58px auto 0 !important;
    padding: 30px !important;
    border: 1px solid var(--gbz-proto-line-soft) !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.54) !important;
    box-shadow: none !important;
    color: #555b60 !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .seo-text h2,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .seo-text h3,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .related-tools h2,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .related-tools h3 {
    color: #25292d !important;
    text-shadow: none !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .seo-text p,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .related-tools p {
    color: #737980 !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .footer,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 #gbz-tool-footer {
    border-top-color: var(--gbz-proto-line-soft) !important;
    background: transparent !important;
    color: #8b9094 !important;
    box-shadow: none !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 a,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 button,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 [role="button"] {
}
}

@media (min-width: 769px) and (max-width: 1180px) {
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 .tool-wrapper {
    width: min(100% - 48px, 1040px) !important;
  }
}

/* GBZ LIGHT TOOL CURSOR FIX CLEAN START */
@media (min-width: 769px) {
  html[data-theme="light"] body.gbz-light-tool-prototype-v1,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 * {
    cursor: url("/assets/cursors/upper-city-sigil.png") 12 6, auto !important;
  }

  html[data-theme="light"] body.gbz-light-tool-prototype-v1 textarea,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 input,
  html[data-theme="light"] body.gbz-light-tool-prototype-v1 [contenteditable="true"] {
    cursor: text !important;
  }
}
/* GBZ LIGHT TOOL CURSOR FIX CLEAN END */