/* Glavia marketing toolkit — shared styles for UTM Builder / Link Checker / QR Generator */
body{ background:#FAFAF6; }

.tk-hero{ padding:56px 0 8px; text-align:center; }
.tk-hero .eyebrow{ margin-bottom:18px; }
.tk-hero h1{ font-size:40px; font-weight:800; letter-spacing:-1.2px; line-height:1.12; max-width:820px; margin:0 auto 16px; }
.tk-hero .lede{ font-size:17px; color:var(--gray-text); max-width:660px; margin:0 auto; line-height:1.6; }

/* cross-tool navigation pills */
.tk-nav{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin:26px auto 0; }
.tk-nav a{ font-size:13.5px; font-weight:700; color:var(--ink); border:1px solid var(--line-soft); border-radius:var(--radius-pill); padding:8px 16px; text-decoration:none; background:var(--paper); transition:background .15s, color .15s; }
.tk-nav a:hover{ border-color:var(--ink); }
.tk-nav a.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.tk-wrap{ max-width:760px; margin:32px auto 0; }
.tk-soon{ border:1px dashed var(--line-soft); border-radius:var(--radius-card); padding:48px 24px; text-align:center; color:var(--gray-text); font-size:15px; background:var(--paper); }

/* ---- UTM Builder form ---- */
.utm-form{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius-card); padding:26px 26px 8px; text-align:left; }
.uf-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 18px; }
.uf-field{ margin-bottom:18px; }
.uf-field label{ display:block; font-size:13.5px; font-weight:700; color:var(--ink); margin-bottom:6px; }
.uf-field .req{ color:#DC2626; }
.uf-field .opt{ color:var(--gray-text); font-weight:600; font-size:12px; }
.uf-field input{ width:100%; padding:12px 14px; border:1.5px solid var(--line-soft); border-radius:12px; font-size:14.5px; font-family:inherit; background:#fff; }
.uf-field input:focus{ outline:none; border-color:var(--ink); }
.uf-hint{ font-size:12px; color:var(--gray-text); margin:6px 0 0; }
.uf-note{ font-size:13px; color:var(--gray-text); margin-top:16px; text-align:left; line-height:1.55; }
.uf-note b{ color:var(--ink); }

.uf-presets{ margin-bottom:20px; }
.uf-presets .qr-lbl{ display:block; margin-bottom:8px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.chip{ font-size:12.5px; font-weight:700; border:1px solid var(--line-soft); background:#fff; border-radius:var(--radius-pill); padding:6px 13px; cursor:pointer; color:var(--ink); font-family:inherit; }
.chip:hover{ border-color:var(--ink); }
.uf-tokens{ margin-top:9px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.uf-tok-label{ font-size:11.5px; color:var(--gray-text); font-weight:700; }
.uf-tokens .chip{ font-size:12px; padding:5px 11px; font-weight:600; }

.utm-recent{ margin-top:24px; text-align:left; }
.utm-recent h3{ font-size:14px; font-weight:800; margin:0 0 10px; display:flex; justify-content:space-between; align-items:center; }
.utm-recent .clear{ font-size:12px; font-weight:600; color:var(--gray-text); cursor:pointer; background:none; border:none; font-family:inherit; }
.utm-recent .clear:hover{ color:var(--ink); }
.ur-item{ display:flex; align-items:center; gap:10px; border:1px solid var(--line-soft); border-radius:12px; padding:9px 12px; margin-bottom:8px; background:var(--paper); }
.ur-url{ flex:1; font-size:12.5px; font-family:ui-monospace,Menlo,Consolas,monospace; word-break:break-all; color:var(--gray-text); }
.ur-copy{ flex:0 0 auto; font-size:12px; font-weight:700; border:1px solid var(--line-soft); background:#fff; border-radius:var(--radius-pill); padding:5px 12px; cursor:pointer; font-family:inherit; color:var(--ink); }
.ur-copy:hover{ border-color:var(--ink); }

.utm-empty{ margin-top:18px; text-align:center; color:var(--gray-text); font-size:14px; }
.utm-out{ margin-top:18px; background:var(--ink); color:var(--paper); border-radius:var(--radius-card); padding:22px 24px; text-align:left; }
.utm-out .uo-label{ font-size:12px; text-transform:uppercase; letter-spacing:.5px; color:#B9B9B3; margin-bottom:8px; font-weight:700; }
.utm-out .uo-url{ font-size:14px; word-break:break-all; line-height:1.55; background:rgba(255,255,255,.08); border-radius:10px; padding:12px 14px; font-family:ui-monospace,Menlo,Consolas,monospace; }
.uo-actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.uo-msg{ font-size:13px; margin:10px 0 0; min-height:16px; color:var(--mint); font-weight:600; }
.uo-msg.err{ color:#FCA5A5; }
.uo-ga4{ margin-top:14px; font-size:13px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.uo-ga4 .lbl{ color:#B9B9B3; font-weight:600; }
.uo-ga4 .val{ padding:4px 11px; border-radius:var(--radius-pill); font-size:12px; font-weight:800; }
.uo-ga4 .val.ok{ background:#16A34A; color:#fff; }
.uo-ga4 .val.warn{ background:#D97706; color:#fff; }
.uo-ga4-note{ font-size:12px; color:#C9C9C3; margin:7px 0 0; line-height:1.5; }
.uf-suggest .sg{ font-size:13px; color:#92400E; background:#FEF3C7; border-radius:10px; padding:9px 13px; margin-top:10px; cursor:pointer; line-height:1.45; }
.uf-suggest .sg .pick{ text-decoration:underline; }
.btn-light{ background:rgba(255,255,255,.14); color:var(--paper); border:1px solid rgba(255,255,255,.25); }
.btn-light:hover{ background:rgba(255,255,255,.22); color:var(--paper); }

/* ---- Link Checker ---- */
.lc-form{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius-card); padding:22px 24px; text-align:left; }
.lc-modes{ display:inline-flex; gap:4px; background:#EFEFEA; border-radius:var(--radius-pill); padding:4px; margin-bottom:16px; }
.lc-mode{ border:none; background:transparent; font-family:inherit; font-size:13px; font-weight:700; color:var(--gray-text); padding:7px 16px; border-radius:var(--radius-pill); cursor:pointer; }
.lc-mode.active{ background:var(--ink); color:var(--paper); }
.lc-row{ display:flex; gap:10px; }
.lc-row input{ flex:1; padding:13px 15px; border:1.5px solid var(--line-soft); border-radius:12px; font-size:14.5px; font-family:inherit; }
.lc-row input:focus{ outline:none; border-color:var(--ink); }
#lc-urls{ width:100%; padding:13px 15px; border:1.5px solid var(--line-soft); border-radius:12px; font-size:13.5px; font-family:ui-monospace,Menlo,Consolas,monospace; resize:vertical; margin-bottom:12px; box-sizing:border-box; }
#lc-urls:focus{ outline:none; border-color:var(--ink); }
.lc-note{ font-size:12.5px; color:var(--gray-text); margin:12px 0 0; }
.lc-results{ margin-top:22px; text-align:left; }
.lc-loading{ text-align:center; color:var(--gray-text); padding:30px; font-size:14px; }

.lc-card{ border:1px solid var(--line-soft); border-radius:var(--radius-card); padding:22px 24px; margin-bottom:14px; background:var(--paper); }
.lc-head{ display:flex; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
.lc-badge{ font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; padding:5px 11px; border-radius:var(--radius-pill); flex:0 0 auto; }
.lc-badge.ok{ background:#DCFCE7; color:#166534; }
.lc-badge.warn{ background:#FEF3C7; color:#92400E; }
.lc-badge.bad{ background:#FEE2E2; color:#991B1B; }
.lc-badge.neutral{ background:#EDEDE8; color:#555; }
.lc-warning{ font-size:14.5px; line-height:1.5; color:var(--ink); font-weight:600; }
.lc-sub{ font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--gray-text); font-weight:800; margin:16px 0 8px; }
.lc-url-line{ font-size:12.5px; word-break:break-all; font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--gray-text); margin:3px 0; }
.lc-url-line b{ color:var(--ink); }
.lc-chain{ list-style:none; padding:0; margin:0; }
.lc-chain li{ display:flex; align-items:baseline; gap:10px; font-size:12.5px; padding:7px 0; border-top:1px solid var(--line-soft); font-family:ui-monospace,Menlo,Consolas,monospace; word-break:break-all; }
.lc-chain li:first-child{ border-top:none; }
.lc-code{ flex:0 0 auto; font-weight:800; }
.lc-code.g{ color:#166534; } .lc-code.r{ color:#991B1B; } .lc-code.y{ color:#92400E; }
.lc-utm{ display:flex; flex-wrap:wrap; gap:8px; }
.lc-utm .u{ font-size:12.5px; font-weight:700; border-radius:var(--radius-pill); padding:6px 12px; }
.lc-utm .u.ok{ background:#DCFCE7; color:#166534; }
.lc-utm .u.lost{ background:#FEE2E2; color:#991B1B; }
.lc-utm .u.lost s{ text-decoration:line-through; }
.lc-chain li .lc-hop{ flex:1; }
.lc-ms{ flex:0 0 auto; color:var(--gray-text); font-size:11.5px; }
.lc-flags{ display:flex; flex-direction:column; gap:8px; }
.lc-flag{ display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.45; border-radius:10px; padding:9px 12px; }
.lc-flag .fi{ flex:0 0 auto; width:18px; height:18px; border-radius:50%; text-align:center; line-height:18px; font-weight:800; font-size:11px; color:#fff; }
.lc-flag.warn{ background:#FEF3C7; color:#92400E; } .lc-flag.warn .fi{ background:#D97706; }
.lc-flag.info{ background:#EFF6FF; color:#1E40AF; } .lc-flag.info .fi{ background:#3B82F6; }
.lc-flag.ok{ background:#DCFCE7; color:#166534; } .lc-flag.ok .fi{ background:#16A34A; }
.lc-actions{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }
.lc-ts-btn{ display:inline-block; font-size:13px; font-weight:700; color:var(--ink); border:1.5px solid var(--ink); border-radius:var(--radius-pill); padding:8px 16px; text-decoration:none; }
.lc-ts-btn:hover{ background:var(--ink); color:var(--paper); }
.lc-error-box{ border:2px solid var(--ink); border-radius:var(--radius-card); padding:22px; text-align:center; }
.lc-error-box strong{ display:block; font-size:16px; margin-bottom:6px; }
.lc-error-box p{ font-size:14px; color:var(--gray-text); margin:0; }

/* ---- QR generator ---- */
.qr-form{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius-card); padding:24px 26px; text-align:left; }
.qr-form .uf-field{ margin-bottom:20px; }
.qr-controls{ display:flex; flex-wrap:wrap; gap:26px; align-items:flex-start; }
.qr-ctrl{ display:flex; flex-direction:column; gap:8px; }
.qr-lbl{ font-size:12px; text-transform:uppercase; letter-spacing:.4px; font-weight:800; color:var(--gray-text); }
.qr-swatches{ display:flex; gap:8px; }
.qr-sw{ width:30px; height:30px; border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0; box-shadow:0 0 0 1px var(--line-soft) inset; }
.qr-sw.active{ border-color:var(--ink); }
.qr-sizes{ display:inline-flex; gap:4px; background:#EFEFEA; border-radius:var(--radius-pill); padding:4px; }
.qr-size{ border:none; background:transparent; font-family:inherit; font-size:13px; font-weight:700; color:var(--gray-text); padding:7px 14px; border-radius:var(--radius-pill); cursor:pointer; }
.qr-size.active{ background:var(--ink); color:var(--paper); }
.qr-check{ display:inline-flex; align-items:center; gap:7px; font-size:14px; color:var(--ink); cursor:pointer; }

.qr-preview{ margin-top:22px; display:flex; justify-content:center; }
.qr-preview .qr-empty{ color:var(--gray-text); font-size:14px; padding:40px; text-align:center; }
.qr-preview svg{ width:260px; height:260px; border:1px solid var(--line-soft); border-radius:16px; background:#fff; padding:10px; box-sizing:border-box; }
.qr-actions{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:18px; }
.btn-outline{ background:transparent; color:var(--ink); border:1.5px solid var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.qr-logo-row{ display:flex; align-items:center; gap:4px; }
.qr-logo-btn{ display:inline-block; font-size:13px; font-weight:700; border:1.5px solid var(--line-soft); border-radius:var(--radius-pill); padding:7px 14px; cursor:pointer; color:var(--ink); background:#fff; }
.qr-logo-btn:hover{ border-color:var(--ink); }
.qr-logo-clear{ font-size:12px; font-weight:700; border:none; background:none; color:var(--gray-text); cursor:pointer; }
.qr-logo-clear:hover{ color:var(--ink); }
.qr-eff{ text-align:center; font-size:12px; color:var(--gray-text); word-break:break-all; margin:12px auto 0; max-width:620px; line-height:1.5; }
.qr-eff b{ color:var(--ink); }
.qr-safe{ text-align:center; font-size:12.5px; margin:12px auto 0; max-width:560px; border-radius:10px; padding:9px 13px; line-height:1.45; }
.qr-safe.warn{ background:#FEF3C7; color:#92400E; }
.qr-safe.info{ background:#EFF6FF; color:#1E40AF; }
#qr-print{ display:none; }
@media print{
  body *{ visibility:hidden; }
  #qr-print, #qr-print *{ visibility:visible; }
  #qr-print{ display:block; position:absolute; left:0; right:0; top:0; }
  .qp-inner{ text-align:center; padding-top:70px; }
  #qr-print-code svg{ width:340px; height:340px; }
  .qp-cta{ font-size:34px; font-weight:800; letter-spacing:2px; margin-top:22px; }
  .qp-url{ font-size:13px; color:#444; margin-top:12px; word-break:break-all; padding:0 40px; }
}

/* ---- SEO/GEO content block ---- */
.tk-content{ max-width:760px; margin:0 auto; text-align:left; }
.tk-content h2{ font-size:24px; font-weight:800; letter-spacing:-0.4px; margin:0 0 14px; }
.tk-content h3{ font-size:17px; font-weight:800; margin:24px 0 8px; }
.tk-content p{ font-size:15px; line-height:1.7; color:var(--gray-text); margin:0 0 14px; }
.tk-content ol, .tk-content ul{ font-size:15px; line-height:1.7; color:var(--gray-text); padding-left:22px; margin:0 0 14px; }
.tk-content li{ margin-bottom:6px; }
.tk-content li b{ color:var(--ink); }
.tk-content a{ font-weight:600; }

/* ---- cross-tool flow band (the connected-workflow moat) ---- */
.tk-flow{ max-width:940px; margin:0 auto; text-align:center; }
.tk-flow h2{ font-size:26px; font-weight:800; letter-spacing:-0.5px; margin-bottom:8px; }
.tk-flow-lede{ font-size:15px; color:var(--gray-text); max-width:620px; margin:0 auto 26px; line-height:1.6; }
.tk-flow-steps{ display:flex; align-items:stretch; justify-content:center; gap:8px; flex-wrap:wrap; }
.tk-step{ flex:1 1 180px; max-width:210px; text-decoration:none; border:1px solid var(--line-soft); border-radius:var(--radius-card); padding:18px 16px; background:var(--paper); display:flex; flex-direction:column; text-align:left; transition:border-color .15s; }
.tk-step:hover{ border-color:var(--ink); }
.tk-step.active{ background:var(--ink); border-color:var(--ink); }
.tk-step .n{ width:24px; height:24px; border-radius:50%; background:var(--ink); color:var(--paper); font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:8px; }
.tk-step.active .n{ background:var(--mint); color:var(--ink); }
.tk-step b{ font-size:14.5px; color:var(--ink); margin-bottom:3px; }
.tk-step .d{ font-size:12.5px; color:var(--gray-text); line-height:1.4; }
.tk-step.active b, .tk-step.active .d{ color:var(--paper); }
.tk-arrow{ align-self:center; color:var(--gray-text); font-size:20px; font-weight:700; }
@media (max-width:720px){ .tk-arrow{ transform:rotate(90deg); } .tk-step{ flex-basis:100%; max-width:100%; } }

/* ---- FAQ (shared) ---- */
.tk-faq{ max-width:760px; margin:8px auto 0; }
.tk-faq h2{ font-size:26px; font-weight:800; letter-spacing:-0.5px; text-align:center; margin-bottom:26px; }
.tk-faq details{ border:1px solid var(--line-soft); border-radius:14px; padding:4px 20px; margin-bottom:12px; background:var(--paper); }
.tk-faq summary{ list-style:none; cursor:pointer; font-weight:700; font-size:16px; padding:16px 0; position:relative; padding-right:28px; }
.tk-faq summary::-webkit-details-marker{ display:none; }
.tk-faq summary::after{ content:"+"; position:absolute; right:2px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:400; color:var(--gray-text); }
.tk-faq details[open] summary::after{ content:"–"; }
.tk-faq p{ font-size:15px; line-height:1.65; color:var(--gray-text); margin:0 0 16px; }
.tk-faq a{ font-weight:600; }

@media (max-width:640px){
  .tk-hero{ padding:40px 0 4px; }
  .tk-hero h1{ font-size:29px; letter-spacing:-0.8px; }
  .tk-hero .lede{ font-size:15.5px; }
  .uf-grid{ grid-template-columns:1fr; }
  .utm-form{ padding:20px 18px 4px; }
  .lc-row{ flex-direction:column; }
  .qr-controls{ gap:18px; }
}