/* GOKLIK Tools shared visual system — matches index.html */
body.goklik-tool {
  background: var(--dark) !important;
  color: #eaf2ed !important;
  min-height: 100vh;
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
body.goklik-tool *:not(i) { font-family: inherit; }
body.goklik-tool .logo-font { font-family: "Plus Jakarta Sans", system-ui, sans-serif !important; }
body.goklik-tool > nav.fixed,
body.goklik-tool > nav.nav { display:none !important; }
body.goklik-tool .goklik-shared-header { position:sticky; top:0; z-index:9990; }
body.goklik-tool > main { padding-top:30px !important; padding-bottom:52px !important; }
body.goklik-tool .goklik-shared-footer { position:relative; z-index:20; }

/* Same dark hero atmosphere as the homepage */
.goklik-tool .mesh-bg,
.goklik-tool .mesh {
  position:fixed !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
  background:
    radial-gradient(circle at 8% 0%, rgba(30,208,138,.16), transparent 31%),
    radial-gradient(circle at 90% 15%, rgba(53,201,222,.11), transparent 27%),
    linear-gradient(145deg,#07110d 0%,#091711 52%,#07110d 100%) !important;
}
.goklik-tool .mesh-bg::after,
.goklik-tool .mesh::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.021) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.021) 1px,transparent 1px);
  background-size:48px 48px; mask-image:linear-gradient(to bottom,black,transparent 85%); animation:none !important;
}

/* Compact the first screen so the working area appears sooner */
.goklik-tool main > div > section > .text-center:first-child,
.goklik-tool main > div > .text-center:first-child { margin-bottom:22px !important; }
.goklik-tool main h1 { margin-bottom:8px !important; font-weight:800 !important; letter-spacing:-.04em !important; }
.goklik-tool main h1.text-3xl,
.goklik-tool main h1.text-4xl { font-size:clamp(27px,4vw,38px) !important; line-height:1.1 !important; }
.goklik-tool main .mb-10 { margin-bottom:1.5rem !important; }
.goklik-tool main .mb-8 { margin-bottom:1.2rem !important; }
.goklik-tool main .mb-7 { margin-bottom:1.15rem !important; }
.goklik-tool main .pt-24,
.goklik-tool main .pt-28 { padding-top:1.5rem !important; }
.goklik-tool main .pb-20,
.goklik-tool main .pb-28 { padding-bottom:2.25rem !important; }

/* Homepage green accent replaces the older cyan/indigo system */
.goklik-tool .text-cyan-400,
.goklik-tool .text-cyan-300,
.goklik-tool .hover\:text-cyan-400:hover { color:var(--green) !important; }
.goklik-tool .bg-cyan-400 { background-color:var(--green) !important; }
.goklik-tool .bg-cyan-400\/10 { background-color:rgba(29,209,138,.10) !important; }
.goklik-tool .bg-cyan-400\/15 { background-color:rgba(29,209,138,.15) !important; }
.goklik-tool .bg-cyan-400\/20 { background-color:rgba(29,209,138,.20) !important; }
.goklik-tool .border-cyan-400,
.goklik-tool .border-cyan-400\/20,
.goklik-tool .border-cyan-400\/30,
.goklik-tool .border-cyan-400\/40 { border-color:rgba(29,209,138,.35) !important; }
.goklik-tool .from-cyan-400 { --tw-gradient-from:#1dd18a var(--tw-gradient-from-position) !important; --tw-gradient-to:rgba(29,209,138,0) var(--tw-gradient-to-position) !important; }
.goklik-tool .via-cyan-300 { --tw-gradient-to:rgba(94,226,166,0) var(--tw-gradient-to-position) !important; --tw-gradient-stops:var(--tw-gradient-from),#5ee2a6 var(--tw-gradient-via-position),var(--tw-gradient-to) !important; }
.goklik-tool .to-blue-400,
.goklik-tool .to-blue-500,
.goklik-tool .to-indigo-500 { --tw-gradient-to:#35c9de var(--tw-gradient-to-position) !important; }

/* Shared cards, controls and working surfaces */
.goklik-tool .card,
.goklik-tool .tool-card,
.goklik-tool .stat-pill,
.goklik-tool .action-btn,
.goklik-tool .drop-zone,
.goklik-tool .process-card,
.goklik-tool .modal-card,
.goklik-tool .glass:not(nav) {
  border-color:rgba(255,255,255,.09) !important;
  background:rgba(255,255,255,.04) !important;
  box-shadow:none !important;
}
.goklik-tool .tool-card:hover,
.goklik-tool .drop-zone.dragover,
.goklik-tool .drop-zone.has-file {
  border-color:rgba(29,209,138,.38) !important;
  box-shadow:0 18px 40px -22px rgba(29,209,138,.35) !important;
}
.goklik-tool .tool-card { border-radius:16px !important; }
.goklik-tool .tool-card:hover { transform:translateY(-3px) !important; }
.goklik-tool .drop-zone { padding:30px 20px !important; border-radius:18px !important; }
.goklik-tool .input-premium,
.goklik-tool input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
.goklik-tool textarea,
.goklik-tool select {
  border-color:rgba(255,255,255,.10) !important;
  background:rgba(255,255,255,.035) !important;
}
.goklik-tool input:focus,
.goklik-tool textarea:focus,
.goklik-tool select:focus { border-color:rgba(29,209,138,.52) !important; box-shadow:0 0 0 3px rgba(29,209,138,.08) !important; }
.goklik-tool .generate-btn,
.goklik-tool .btn-generate,
.goklik-tool .btn.cyan {
  background:linear-gradient(135deg,#1dd18a,#16b97a) !important;
  color:#06110c !important;
  border-color:#1dd18a !important;
  box-shadow:0 10px 30px -14px rgba(29,209,138,.5) !important;
  animation:none !important;
}
.goklik-tool .range-track::-webkit-slider-thumb { background:var(--green) !important; }
.goklik-tool .action-btn.active { background:rgba(29,209,138,.12) !important; border-color:rgba(29,209,138,.4) !important; color:var(--green) !important; }
.goklik-tool .back-btn:hover { color:var(--green) !important; }
.goklik-tool .progress-bar > span { background:linear-gradient(90deg,var(--green),var(--cyan)) !important; }
.goklik-tool .pro-tag,
.goklik-tool .pro-badge { color:#68e7ad !important; background:rgba(29,209,138,.10) !important; border-color:rgba(29,209,138,.30) !important; }

/* Invoice preview must remain a printable white document. */
.goklik-tool .paper,
.goklik-tool .paper * { font-family:Inter,Arial,sans-serif !important; }
.goklik-tool .paper { background:#fff !important; color:#111 !important; }
.goklik-tool .paper input,
.goklik-tool .paper textarea,
.goklik-tool .paper select { background:#fff !important; color:#111 !important; border-color:#e5e7eb !important; box-shadow:none !important; }

/* Future feature-level Pro lock (not page-level lock). */
.goklik-tool [data-pro-feature] { position:relative; }
.goklik-tool [data-pro-feature]::after { content:'PRO'; margin-left:7px; padding:2px 6px; border-radius:999px; color:#062015; background:var(--green); font-size:8px; font-weight:900; letter-spacing:.06em; vertical-align:middle; }

@media(max-width:700px){
  body.goklik-tool > main{padding-top:22px!important;padding-bottom:38px!important}
  .goklik-tool main h1.text-3xl,.goklik-tool main h1.text-4xl{font-size:27px!important}
  .goklik-tool main .mb-10{margin-bottom:1.15rem!important}
  .goklik-tool .drop-zone{padding:24px 16px!important}
}


/* V7 tool mobile hardening */
.goklik-tool { width: 100%; overflow-x: hidden; }
.goklik-tool main, .goklik-tool main > div, .goklik-tool section { max-width: 100%; }
.goklik-tool img, .goklik-tool canvas, .goklik-tool svg { max-width: 100%; height: auto; }
@media (max-width: 768px) {
  .goklik-tool input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  .goklik-tool textarea,
  .goklik-tool select { font-size: 16px !important; }
  .goklik-tool button, .goklik-tool a { touch-action: manipulation; }
  .goklik-tool .grid { min-width: 0; }
  .goklik-tool .paper { width: 100% !important; max-width: 100% !important; overflow: hidden; }
  .goklik-tool .paper input,
  .goklik-tool .paper textarea,
  .goklik-tool .paper select { font-size: 16px !important; }
  .goklik-tool table { max-width: 100%; }
}
@media (max-width: 480px) {
  body.goklik-tool > main { padding-top: 18px !important; padding-bottom: 32px !important; }
  .goklik-tool .tool-card { padding: 16px 12px !important; }
  .goklik-tool .drop-zone { padding: 20px 13px !important; }
}


/* V9 universal tool anti-autozoom */
.goklik-tool input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
.goklik-tool textarea,
.goklik-tool select { font-size: 16px !important; }
.goklik-tool input, .goklik-tool textarea, .goklik-tool select { min-width: 0; max-width: 100%; }
@media (max-width: 768px) {
  .goklik-tool main, .goklik-tool section, .goklik-tool article, .goklik-tool form, .goklik-tool .grid { min-width: 0 !important; }
  .goklik-tool table { width: 100%; }
}

/* V10 launch mobile tool gutters — avoid edge-hugging / zoomed-in appearance */
@media (max-width: 768px) {
  body.goklik-tool > main { width: 100% !important; }
  .goklik-tool main > div[class*="max-w-"] {
    width: calc(100% - 44px) !important;
    max-width: calc(100% - 44px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .goklik-tool .drop-zone,
  .goklik-tool .tool-card,
  .goklik-tool .card,
  .goklik-tool form { max-width: 100% !important; }
  .goklik-tool input:not([type="range"]):not([type="checkbox"]):not([type="radio"]),
  .goklik-tool textarea,
  .goklik-tool select { font-size: 16px !important; }
  .goklik-tool .grid > * { min-width: 0; }
}
@media (max-width: 420px) {
  .goklik-tool main > div[class*="max-w-"] {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
  }
}
@media (max-width: 768px) {
  body.goklik-tool > div[style*="max-width:900px"] {
    width: calc(100% - 44px) !important;
    max-width: calc(100% - 44px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 78px !important;
  }
}
@media (max-width: 420px) {
  body.goklik-tool > div[style*="max-width:900px"] {
    width: calc(100% - 40px) !important;
    max-width: calc(100% - 40px) !important;
  }
}