#serpTool{--panel-bg:#ffffff;--border:rgba(10,5,35,.12);--muted:rgba(10,5,35,.65);--shadow:0 18px 40px rgba(10,5,35,.08)}
  #serpTool *{box-sizing:border-box}

  #serpTool .wrap{max-width:1360px;margin:0 auto;padding:0}
  #serpTool .grid{display:grid;grid-template-columns: 1fr 1.2fr;gap:20px}
  @media (max-width: 980px){#serpTool .grid{grid-template-columns:1fr}}

  #serpTool .panel{
    border:1px solid var(--border);
    border-radius:16px;
    box-shadow:var(--shadow);
    overflow:hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
  }

  
/* Remove the global container bottom gap for this tool page */
.main > .container
{
margin-bottom: 0;
}
  #serpTool .panel .head{padding:14px 16px;border-bottom:1px solid var(--border);font-size:18px;font-weight:700;color:var(--berry-black-60);display:flex;align-items:center;justify-content:space-between;gap:10px}
  #serpTool .panel .body{padding:16px}

  #serpTool .serp-google-wordmark{
    display:block;
    height:28px;
    width:auto;
    object-fit:contain;
  }

  /* Prevent header overlap on small screens (logo/title vs mode toggle) */
  @media (max-width: 560px){
    #serpTool .serp-head{flex-wrap:wrap;align-items:center}
    #serpTool .serp-head > div:first-child{flex:1 1 100%;min-width:0}
    #serpTool .serp-head .serp-google-wordmark{height:22px}
    #serpTool .serp-head{font-size:16px}

    #serpTool .serp-head .mode-toggle{width:100%;justify-content:flex-start}
    #serpTool .serp-head .mode-toggle button{flex:1 1 0;font-size:14px;padding:9px 10px}
    #serpTool .serp-head .mode-toggle button.active{font-size:14px}
  }

  #serpTool .tool-row{display:grid;gap:8px;margin-bottom:14px}
  #serpTool label{font-size:16px;font-weight:700;color:var(--berry-black-60)}
  #serpTool .in{display:flex;gap:8px;align-items:center}
  #serpTool input[type="text"],
  #serpTool textarea,
  #serpTool select{
    width:100%;
    background:#fff;
    color:var(--berry-black-60);
    border:1px solid rgba(10,5,35,.18);
    border-radius:12px;
    padding:10px 12px;
    outline:none;
    font-size: 14px;
  }
  #serpTool input[type="text"], #serpTool select{height:44px}
  #serpTool textarea{min-height:96px;resize:vertical}
  #serpTool input:focus,#serpTool textarea:focus,#serpTool select:focus{border-color:rgba(0,106,255,.55);box-shadow:0 0 0 4px rgba(0,106,255,.12)}

  #serpTool .subtle{font-size:12px;color:var(--muted)}
  #serpTool .counts{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;font-size:12px;color:var(--muted)}
  #serpTool .hint{font-size:12px}
  #serpTool .hint.ok{color:#0f7a3d;font-weight:700}
  #serpTool .hint.warn{color:#9a5b00;font-weight:700}
  #serpTool .hint.err{color:#b42318;font-weight:700}
  #serpTool .divider{height:1px;background:rgba(10,5,35,.12);margin:14px 0}

  #serpTool .mode-toggle{display:flex;gap:0;background:rgba(29,78,216,.10);border:1px solid rgba(10,5,35,.10);border-radius:999px;padding:3px}
  #serpTool .mode-toggle button{font-size:16px;border:0;background:transparent;border-radius:999px;padding:10px 14px;font-weight:900;cursor:pointer;color:rgba(10,5,35,.75)}
  #serpTool .mode-toggle button.active{background:#1d4ed8;font-size:16px;color:#fff}

  #serpTool .device-frame{border:1px solid rgba(10,5,35,.10);border-radius:18px;padding:14px;background:rgba(255,255,255,.7)}
  #serpTool .device-chrome{display:block;background:#fff;border:1px solid rgba(10,5,35,.08);border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:0 10px 22px rgba(10,5,35,.06)}
  #serpTool .device-chrome .searchbar{height:34px;border-radius:999px;background:rgba(10,5,35,.06);border:1px solid rgba(10,5,35,.06)}
  #serpTool .device-chrome .tabs{display:flex;gap:14px;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid rgba(10,5,35,.08);color:rgba(10,5,35,.60);font-size:12px}
  #serpTool .device-chrome .tabs .active{color:#1d4ed8;font-weight:900;position:relative}
  #serpTool .device-chrome .tabs .active::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:3px;border-radius:999px;background:#1d4ed8}

  /* Mobile mode: narrower centered preview, slightly adjusted typography */
  #serpTool .device-frame.mobile{max-width:460px;margin:0 auto}
  #serpTool .device-frame.mobile .serp{padding:16px;border-radius:16px}
  #serpTool .device-frame.mobile .title a{font-size:18px}
  #serpTool .device-frame.mobile .crumb{font-size:11px}
  #serpTool .device-frame.mobile .desc{font-size:13px}

  #serpTool .serp{background:#fff;color:#202124;border-radius:14px;padding:18px;border:1px solid #e6e6e6;}
  #serpTool .serp .top{display:flex;align-items:center;gap:10px;margin-bottom:6px}
  #serpTool .favicon{width:18px;height:18px;border-radius:4px;object-fit:contain;display:block;border:1px solid #e1e6ee;background:#fff}
  #serpTool .crumb{font-size:12px;color:#70757a}
  #serpTool .title a{display:inline-block;font-size:20px;line-height:1.3;font-weight:400;color:#1a0dab;text-decoration:none}
  #serpTool .title a:hover{text-decoration:underline}
  #serpTool .sitelinks{height:10px;background:#e9e9ff;border-radius:6px;margin:10px 0 4px}
  #serpTool .desc{margin-top:6px;font-size:14px;line-height:1.58;color:#4d5156;white-space:pre-line;word-wrap:break-word;overflow-wrap:break-word}

  #serpTool .copy-buttons{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;justify-content:flex-end}
  #serpTool .copy-buttons button{border:1px solid rgba(10,5,35,.12);background:#fff;border-radius:12px;padding:10px 12px;font-weight:700;font-size:15px;cursor:pointer}
  #serpTool .copy-buttons button.copied{background:rgba(22,163,74,.12)}

  /* Custom tiny dropdown (matches screenshot vibe) */
  #serpTool .tiny-controls{display:flex;align-items:center;gap:10px;margin-top:4px;position:relative;flex-wrap:wrap}
  #serpTool .tiny-label{font-size:12px;color:var(--muted)}

  /* Hide the native select so only the custom UI shows */
  #serpTool .tiny-select{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

  #serpTool .tiny-select-btn{
    border:1px solid rgba(10,5,35,.14);
    background:#fff;
    border-radius:10px;
    padding:8px 12px;
    font-weight:400;
    cursor:pointer;
    min-width:70px;
    box-shadow:0 6px 14px rgba(10,5,35,.06);
    font-size: 14px;
  }
  #serpTool .tiny-select-btn:focus{outline:none;box-shadow:0 0 0 4px rgba(29,78,216,.18), 0 6px 14px rgba(10,5,35,.06)}

  #serpTool .tiny-menu{
    position:absolute;
    top:38px;
    left:0;
    background:#fff;
    border:1px solid rgba(10,5,35,.12);
    border-radius:12px;
    box-shadow:0 18px 40px rgba(10,5,35,.14);
    padding:8px;
    display:none;
    min-width:260px;
    z-index:50;
  }
  #serpTool .tiny-menu.tiny-menu--sm{min-width:120px}
  #serpTool .tiny-menu.open{display:block}
  #serpTool .tiny-menu ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
  #serpTool .tiny-menu li{padding:10px 12px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:400;color:rgba(10,5,35,.78)}
  #serpTool .tiny-menu li:hover{background:rgba(29,78,216,.10)}
  #serpTool .tiny-menu li.active{background:#1d4ed8;color:#fff}

  /* --- Content + FAQ (match Bulk Meta Tags Extractor styling) --- */
  #serpTool .content-card{
    margin-top: 100px; /* gap after tool section */
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  #serpTool .content-card h2{
    margin: 0 0 12px 0;
    color: black;
    font-size: 30px;
    line-height: 1.25;
    font-weight: 700;
  }
  #serpTool .content-card h3{
    margin: 18px 0 8px;
    color: black;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 600;
  }
  #serpTool .content-card p{
    margin: 0 0 12px;
    color: black;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
  }
  #serpTool .content-card ol,
  #serpTool .content-card ul{
    margin: 0 0 12px;
    padding-left: 26px;
    list-style-position: outside;
    color: black;
    line-height: 1.55;
  }
  #serpTool .content-card ul{ list-style: disc; }
  #serpTool .content-card ol{ list-style: decimal; }
  #serpTool .content-card li{
    margin: 0 0 8px;
    color: black;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
    display: list-item;
    padding-left: 6px;
  }

  /* FAQ styles (scoped to this page) */
  #serpTool .serp-faq.FaqSection .FaqTitle h2 { margin-bottom: 30px; }

  #serpTool .serp-faq.first-faq-block .accordian-wrapper {
    background: linear-gradient(138deg, #fff0 0%, #fff0 100%);
    padding: .15rem;
    border-radius: 15px;
    position: relative;
  }

  #serpTool .serp-faq.first-faq-block .faq-boxes {
    background-color: #fff;
    backdrop-filter: blur(10px);
    padding: 0;
    border-radius: 15px;
    border: 2px solid #a200ff38;
  }

  #serpTool .serp-faq.first-faq-block .faq-boxes.active {
    background-color: #FBF4FF;
    border: 2px solid #A200FF;
  }

  #serpTool .serp-faq .accordion-body {
    padding: 0 15px 18px 22px;
    font-size: 20px;
    font-weight: 400;
    color: #000;
  }

  #serpTool .serp-faq .accordion-button {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 18px 15px 18px 22px;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    background-color: #fff0;
    border: 0;
    border-radius: 0;
    overflow-anchor: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out, border-radius .15s ease;
  }

  #serpTool .serp-faq .accordion-button h3 {
    font-weight: 600;
    font-size: 20px;
    margin: 0;
    line-height: 1.3;
  }

  #serpTool .serp-faq.first-faq-block .get-started-faq-inner .accordion .accordion-item .accordion-button:not(.collapsed)::before {
    border: 6px solid #c3dae7;
    background-color: #0582d2;
    top: 28%;
  }

  #serpTool .serp-faq .accordion-button:not(.collapsed) {
    color: #212529;
    background-color: #fff0;
    transition: 0.2s ease-in all;
    padding-bottom: 12px;
    border: 0;
    box-shadow: none;
  }

  #serpTool .serp-faq .accordion-button h3{ color: #000; }

  #serpTool .serp-faq .accordion-button:focus {
    z-index: 3;
    border-color: #cecbdc;
    outline: 0;
    box-shadow: 0 0 0 .25rem #fff0;
  }

  #serpTool .serp-faq.first-faq-block .accordion-item {
    background-color: #fff0;
    border: 0 solid rgb(0 0 0 / .125);
    margin-bottom: 20px;
  }

  #serpTool .serp-faq.first-faq-block .accordion-body p {
    font-size: 16px;
    color: #000;
    font-weight: 400;
    margin-bottom: 0;
    padding-right: 11%;
    line-height: 26px;
  }

  #serpTool .serp-faq.first-faq-block .accordion-body p a {
    color: #4A2574;
    font-size: 18px;
    line-height: 32px;
    text-decoration: none;
    font-weight: 400;
  }

  #serpTool .serp-faq.first-faq-block .accordion-button:not(.collapsed)::after {
    content: "–";
    transform: none;
  }

  #serpTool .serp-faq.first-faq-block .accordion-button::after {
    margin-left: auto;
    content: "+";
    width: 24px;
    height: 24px;
    min-width: 24px;
    flex: 0 0 24px;
    align-self: center;
    margin-right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    font-weight: 700;
    color: #4A2574;
  }

  /* Collapse behavior (we implement via JS; keep same class names) */
  #serpTool .serp-faq .accordion-collapse{ display: none; }
  #serpTool .serp-faq .accordion-collapse.show{ display: block; }

  @media (max-width: 480px){
    #serpTool .serp-faq.first-faq-block .faq-boxes{ padding-right: 18px; }
  }