/* WritoryBuzz SEO Tools v5.0 — Exact TechnicalSEO layout, WritoryBuzz brand */
:root {
  --navy:  #0d1b3e;
  --navy2: #162347;
  --gold:  #f5c518;
  --goldk: #d4a800;
  --white: #ffffff;
  --bg:    #f0f2f7;
  --border:#dde2ef;
  --text:  #1a1f36;
  --muted: #6b7394;
  --light: #a8afc8;
  --font:  'Segoe UI',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  --mono:  'Fira Code','Consolas','Courier New',monospace;
}
.wb-tool*{box-sizing:border-box;}

/* ── Page ── */
.wb-tool{font-family:var(--font);color:var(--text);max-width:1160px;margin:0 auto;}

/* ── Page title ── */
.wb-page-title{display:flex;align-items:center;gap:12px;margin:0 0 22px;}
.wb-page-title-icon{font-size:1.5rem;font-family:var(--mono);font-weight:900;color:var(--navy);}
.wb-page-title h1{font-size:1.55rem;font-weight:800;color:var(--navy);margin:0;letter-spacing:-.02em;}

/* ── TOP card: dropdown + description ── */
.wb-top-card{
  background:#fff;border:1px solid var(--border);
  border-radius:10px;
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;margin-bottom:20px;
  box-shadow:0 2px 10px rgba(13,27,62,.05);
  overflow:hidden;
}
.wb-top-left{padding:24px 28px;border-right:1px solid var(--border);}
.wb-top-right{padding:24px 28px;background:#fafbfe;}
.wb-top-qlabel{font-size:.82rem;color:var(--muted);margin:0 0 10px;}
.wb-top-select{
  width:100%;background:#fff;
  border:none;border-bottom:2px solid var(--navy);
  color:var(--text);font-family:var(--font);
  font-size:1rem;font-weight:600;
  padding:6px 28px 6px 26px;
  cursor:pointer;appearance:none;outline:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236b7394' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 4px center;
}
.wb-top-select-icon{font-size:1rem;vertical-align:middle;margin-right:6px;}
.wb-top-desc{font-size:.88rem;color:var(--muted);line-height:1.65;margin:0;}
.wb-top-desc a{color:#1a73e8;text-decoration:none;}
.wb-top-desc a:hover{text-decoration:underline;}

/* ── BOTTOM card: form left, output right ── */
.wb-bottom-card{
  background:#fff;border:1px solid var(--border);
  border-radius:10px;box-shadow:0 2px 10px rgba(13,27,62,.05);
  overflow:hidden;
}

/* card header */
.wb-bottom-head{
  padding:18px 24px 16px;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
}
.wb-bottom-head-left{display:flex;align-items:center;gap:10px;}
.wb-bottom-head-icon{font-size:1.1rem;}
.wb-bottom-head-title{font-size:1.15rem;font-weight:800;color:var(--navy);margin:0;}
.wb-bottom-head-actions{display:flex;gap:8px;}
.wb-circ{
  width:36px;height:36px;border-radius:50%;
  border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:700;color:#fff;
  transition:opacity .15s;
}
.wb-circ:hover{opacity:.85;}
.wb-circ-g{background:#1a73e8;}
.wb-circ-c{background:#1557b0;}
.wb-circ-d{background:#ea4335;}

/* empty state */
.wb-empty{padding:64px 24px;text-align:center;color:var(--light);}
.wb-empty-icon{font-size:3rem;font-family:var(--mono);font-weight:900;opacity:.25;display:block;margin-bottom:12px;color:var(--navy);}
.wb-empty p{font-size:.95rem;margin:0;}

/* ── Form + Output split layout ── */
.wb-split{display:grid;grid-template-columns:1fr 1fr;min-height:400px;}
.wb-form-col{padding:20px 24px;border-right:1px solid var(--border);overflow-y:auto;}
.wb-out-col{background:#1e2a4a;padding:20px 22px;overflow:auto;}

/* ── Minimal form fields (TechnicalSEO style) ── */
.wb-fg{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0 16px;margin-bottom:4px;
}
.wb-fg-2{grid-template-columns:repeat(2,1fr);}
.wb-fg-1{grid-template-columns:1fr;}
.wb-fg-full{grid-column:1/-1;}

.wb-f{padding:10px 0;border-bottom:1px solid var(--border);min-width:0;}
.wb-f label{display:block;font-size:.75rem;color:var(--light);margin-bottom:3px;}
.wb-f input,.wb-f select,.wb-f textarea{
  width:100%;background:none;border:none;outline:none;
  font-family:var(--font);font-size:.88rem;color:var(--text);
  padding:0;
}
.wb-f input::placeholder,.wb-f textarea::placeholder{color:var(--light);}
.wb-f select{cursor:pointer;appearance:none;}
.wb-f textarea{resize:vertical;min-height:56px;line-height:1.5;}

/* section header within form */
.wb-fsec{
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.1em;color:var(--muted);
  margin:18px 0 4px;padding-bottom:4px;
  border-bottom:2px solid var(--navy);
  display:inline-block;
}

/* repeater */
.wb-rep-item{
  background:#f8f9fd;border:1px solid var(--border);
  border-radius:7px;padding:12px;margin-bottom:8px;
}
.wb-rep-head{
  display:flex;justify-content:space-between;align-items:center;
  font-size:.72rem;font-weight:700;color:var(--navy);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px;
}
.wb-rm{
  background:none;border:1px solid var(--border);color:var(--muted);
  border-radius:4px;padding:1px 8px;cursor:pointer;
  font-size:.72rem;font-family:var(--font);transition:all .15s;
}
.wb-rm:hover{border-color:#dc2626;color:#dc2626;}
.wb-add-btn{
  display:flex;align-items:center;justify-content:center;gap:6px;
  width:100%;padding:8px;background:none;
  border:1.5px dashed var(--border);border-radius:7px;
  color:var(--muted);font-size:.83rem;font-weight:600;
  cursor:pointer;font-family:var(--font);transition:all .15s;margin-top:6px;
}
.wb-add-btn:hover{border-color:var(--navy);color:var(--navy);background:#f5f7fc;}

/* generate bar */
.wb-gen-bar{
  padding:14px 24px;background:#f8f9fd;
  border-top:1px solid var(--border);
  display:flex;gap:10px;align-items:center;
}
.wb-btn-gen{
  background:var(--gold);color:var(--navy);
  border:none;border-radius:7px;padding:9px 22px;
  font-family:var(--font);font-size:.9rem;font-weight:700;
  cursor:pointer;transition:background .15s;
}
.wb-btn-gen:hover{background:var(--goldk);}
.wb-btn-clr{
  background:none;color:var(--muted);
  border:1.5px solid var(--border);border-radius:7px;
  padding:9px 16px;font-family:var(--font);
  font-size:.88rem;font-weight:600;cursor:pointer;transition:all .15s;
}
.wb-btn-clr:hover{border-color:var(--navy);color:var(--navy);}

/* ── JSON output ── */
.wb-out-col pre{
  margin:0;font-family:var(--mono);
  font-size:.79rem;line-height:1.75;color:#c9d5f5;white-space:pre;
}
.wst{color:#7ecfff;}  /* script tag */
.jk{color:#93c5fd;}   /* key */
.js{color:#86efac;}   /* string */
.jn{color:#fcd34d;}   /* number */
.jb{color:#c4b5fd;}   /* bool */
.ju{color:#94a3b8;}   /* null */

/* docs row */
.wb-docs-row{
  padding:16px 24px;background:#fafbfe;
  border-top:1px solid var(--border);
  display:grid;grid-template-columns:1fr 1fr;gap:16px;
}
.wb-docs-col-lbl{font-size:.72rem;color:var(--light);margin-bottom:5px;}
.wb-docs-a{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.85rem;color:#1a73e8;text-decoration:none;
}
.wb-docs-a:hover{text-decoration:underline;}
.wb-docs-dot{width:6px;height:6px;border-radius:50%;background:#1a73e8;flex-shrink:0;}

/* responsive */
@media(max-width:900px){
  .wb-top-card{grid-template-columns:1fr;}
  .wb-top-left{border-right:none;border-bottom:1px solid var(--border);}
  .wb-split{grid-template-columns:1fr;}
  .wb-form-col{border-right:none;border-bottom:1px solid var(--border);}
  .wb-out-col{min-height:280px;}
  .wb-fg{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:600px){
  .wb-fg{grid-template-columns:1fr;}
  .wb-docs-row{grid-template-columns:1fr;}
}

/* ── Other tools (WC, KD, Meta) ── */
.wb-ot{font-family:var(--font);color:var(--text);max-width:900px;margin:0 auto;}
.wb-ot-head{margin:0 0 20px;}
.wb-ot-head h1{font-size:1.55rem;font-weight:800;color:var(--navy);margin:0 0 4px;letter-spacing:-.02em;}
.wb-ot-head p{font-size:.93rem;color:var(--muted);margin:0;}
.wb-oc{background:#fff;border:1px solid var(--border);border-radius:10px;overflow:hidden;box-shadow:0 2px 10px rgba(13,27,62,.05);}
.wb-oc-hd{background:var(--navy);padding:14px 20px;display:flex;align-items:center;gap:11px;}
.wb-oc-ico{width:36px;height:36px;background:var(--gold);border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;}
.wb-oc-t{font-size:1rem;font-weight:700;color:#fff;margin:0 0 1px;}
.wb-oc-s{font-size:.79rem;color:rgba(255,255,255,.55);margin:0;}
.wb-oc-bd{padding:20px;}
.wb-field{margin-bottom:13px;}
.wb-label{display:block;font-size:.74rem;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px;}
.wb-req{color:#dc2626;margin-left:2px;}
.wb-input,.wb-select,.wb-textarea{width:100%;background:#fff;border:1.5px solid var(--border);border-radius:7px;color:var(--text);font-family:var(--font);font-size:.88rem;padding:9px 12px;transition:border-color .15s;outline:none;}
.wb-input::placeholder,.wb-textarea::placeholder{color:var(--light);}
.wb-input:focus,.wb-select:focus,.wb-textarea:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(13,27,62,.07);}
.wb-select{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' fill='%236b7394' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;padding-right:32px;}
.wb-textarea{resize:vertical;min-height:80px;}

/* stats */
.wb-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:16px;}
@media(max-width:560px){.wb-stats{grid-template-columns:repeat(2,1fr);}}
.wb-stat{background:#f5f7fc;border:1px solid var(--border);border-radius:8px;padding:14px 10px;text-align:center;}
.wb-stat-n{display:block;font-size:1.55rem;font-weight:800;color:var(--navy);font-family:var(--mono);line-height:1.2;}
.wb-stat-l{display:block;font-size:.68rem;color:var(--light);margin-top:3px;text-transform:uppercase;letter-spacing:.06em;}

/* kd/meta tables */
.wb-tbl{width:100%;border-collapse:collapse;font-size:.875rem;margin-top:14px;}
.wb-tbl th{background:var(--navy);color:rgba(255,255,255,.7);font-size:.69rem;text-transform:uppercase;letter-spacing:.08em;padding:9px 13px;text-align:left;font-weight:600;}
.wb-tbl td{padding:8px 13px;border-bottom:1px solid var(--border);}
.wb-tbl tr:hover td{background:#f8f9fd;}
.wb-bar-w{background:var(--border);border-radius:3px;height:5px;min-width:50px;}
.wb-bar-f{background:var(--navy);border-radius:3px;height:5px;transition:width .4s ease;}
.wb-pill{display:inline-block;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:20px;white-space:nowrap;}
.wb-ok{background:#dcfce7;color:#166534;}
.wb-warn{background:#fef9c3;color:#854d0e;}
.wb-bad{background:#fee2e2;color:#991b1b;}

/* focus bar */
.wb-fb{background:var(--navy);border-radius:8px;padding:12px 16px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:14px;}
.wb-fl{color:rgba(255,255,255,.5);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.wb-fv{color:var(--gold);font-size:1rem;font-weight:800;font-family:var(--mono);}

/* loading */
.wb-loading{text-align:center;padding:28px;color:var(--muted);font-size:.88rem;}
.wb-spin{display:inline-block;width:20px;height:20px;border:3px solid var(--border);border-top-color:var(--navy);border-radius:50%;animation:spin .7s linear infinite;margin-bottom:8px;}
@keyframes spin{to{transform:rotate(360deg)}}
.wb-url-row{display:flex;gap:10px;}
.wb-url-row .wb-input{flex:1;}
.wb-btn-gold{background:var(--gold);color:var(--navy);border:none;border-radius:7px;padding:9px 20px;font-family:var(--font);font-size:.88rem;font-weight:700;cursor:pointer;transition:background .15s;}
.wb-btn-gold:hover{background:var(--goldk);}
.wb-btn-out{background:none;color:var(--muted);border:1.5px solid var(--border);border-radius:7px;padding:9px 16px;font-family:var(--font);font-size:.88rem;font-weight:600;cursor:pointer;transition:all .15s;text-decoration:none;display:inline-block;}
.wb-btn-out:hover{border-color:var(--navy);color:var(--navy);}

/* output for standalone tools */
.wb-out-box{background:var(--navy);border-radius:8px;overflow:auto;margin-bottom:12px;}
.wb-out-box pre{margin:0;padding:18px;font-family:var(--mono);font-size:.79rem;line-height:1.75;color:#c9d5f5;white-space:pre;}

/* hint */
.wb-hint{background:#fffbea;border:1px solid #fde68a;border-left:3px solid var(--gold);border-radius:8px;padding:12px 16px;font-size:.83rem;margin-top:14px;}
.wb-hint h4{color:var(--navy);margin:0 0 6px;font-size:.83rem;font-weight:700;}
.wb-hint ol{margin:0;padding-left:15px;color:var(--muted);line-height:1.85;}
.wb-hint a{color:var(--navy);font-weight:600;}
.wb-hint code{background:#fef9c3;padding:1px 5px;border-radius:4px;font-family:var(--mono);font-size:.8em;color:var(--navy);}

/* toast */
.wb-toast{position:fixed;bottom:22px;right:22px;background:var(--navy);color:#fff;padding:10px 18px;border-radius:8px;font-family:var(--font);font-weight:600;font-size:.875rem;z-index:9999;box-shadow:0 4px 16px rgba(13,27,62,.25);border-left:3px solid var(--gold);animation:tst .22s ease;}
@keyframes tst{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}