/* Saare rules is page tak scoped hain; Word Counter aur Text Case Converter par asar nahi hoga. */
.qtd-slug-page .qtd-slug-card { max-width: 850px; margin: 0 auto; }
.qtd-slug-page .qtd-slug-card h2 { margin: 0 0 20px; font-size: 1.5rem; }
.qtd-slug-page .qtd-slug-card > label { display: block; font-weight: 700; margin: 18px 0 8px; }
/* Chhota input area output ko first screen par visible rakhta hai. */
.qtd-slug-page .qtd-slug-card textarea { min-height: 120px; }
.qtd-slug-page #slug-output, .qtd-slug-page #slug-max { font: inherit; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 12px; color: var(--text); }
.qtd-slug-page #slug-output { width: 100%; background: #f8fafc; }
.qtd-slug-page :is(#slug-output, #slug-max, #slug-input):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
/* Checkbox controls wrap karte hain, isliye mobile par horizontal scroll nahi hota. */
.qtd-slug-page .qtd-slug-options { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin: 18px 0; }
.qtd-slug-page .qtd-slug-options label { display: inline-flex; align-items: center; gap: 8px; }
.qtd-slug-page #slug-max { width: 85px; }
.qtd-slug-page .qtd-slug-hint { min-height: 1.5em; margin: 8px 0; color: var(--text-light); }
.qtd-slug-page .button-group .qtd-slug-secondary { background: #e5e7eb; color: var(--text); }
.qtd-slug-page .button-group .qtd-slug-secondary:hover { background: #d1d5db; }
/* Guide site ke normal container tak failta hai, Text Case page ki tarah; sections ko saans lene ki jagah milti hai. */
.qtd-slug-page .qtd-slug-content { max-width: none; }
.qtd-slug-page .qtd-slug-content h2:not(:first-child) { margin-top: 76px; }
.qtd-slug-page .qtd-slug-content li { margin-bottom: 10px; line-height: 1.7; }
.qtd-slug-page details.faq { padding: 0; margin-bottom: 10px; border-radius: 12px; box-shadow: none; }
.qtd-slug-page details.faq:hover { transform: none; }
.qtd-slug-page details.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; list-style: none; cursor: pointer; font-weight: 700; }
.qtd-slug-page details.faq summary::-webkit-details-marker { display: none; }
.qtd-slug-page details.faq summary::after { content: '+'; color: var(--primary-dark); font-size: 1.35rem; }
.qtd-slug-page details.faq[open] summary::after { content: '−'; }
.qtd-slug-page details.faq summary:focus-visible { outline: 2px solid var(--primary-dark); outline-offset: 2px; }
.qtd-slug-page details.faq > p { padding: 0 18px 16px; }
@media (max-width: 600px) { .qtd-slug-page .qtd-slug-options { display: grid; grid-template-columns: 1fr auto; } .qtd-slug-page .qtd-slug-options label:nth-child(-n+2) { grid-column: 1 / -1; } }
/* Single/Bulk tabs aur controls tool card ke andar hi rehte hain. */
.qtd-slug-page .qtd-slug-tabs { display:flex; gap:8px; border-bottom:1px solid var(--border); margin-bottom:22px; }
.qtd-slug-page .qtd-slug-tabs button { border:0; background:transparent; padding:12px 18px; font:inherit; font-weight:700; cursor:pointer; color:var(--text-light); }
.qtd-slug-page .qtd-slug-tabs button[aria-selected="true"] { color:var(--primary-dark); border-bottom:3px solid var(--primary); }
.qtd-slug-page [hidden] { display:none !important; }
.qtd-slug-page .qtd-slug-card label { display:block; font-weight:600; margin:16px 0 8px; }
.qtd-slug-page .qtd-slug-card textarea { min-height:110px; }
.qtd-slug-page .qtd-slug-card :is(input[type="text"],input[type="url"],select) { width:100%; padding:12px; border:1px solid var(--border); border-radius:var(--radius-sm); font:inherit; }
.qtd-slug-page .qtd-slug-card :is(input,select,textarea,button,summary):focus-visible { outline:2px solid var(--primary-dark); outline-offset:2px; }
/* Advanced settings collapsed hain, lekin dono modes ke liye ek hi setting set apply hota hai. */
.qtd-slug-page .qtd-slug-settings { padding:14px 16px; background:#f8fafc; border:1px solid var(--border); border-radius:var(--radius); margin:18px 0; }
.qtd-slug-page .qtd-slug-settings summary { cursor:pointer; font-weight:700; }
.qtd-slug-page .qtd-slug-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px 18px; align-items:center; }
.qtd-slug-page .qtd-slug-options label:has(input[type="checkbox"]) { display:flex; gap:8px; align-items:center; }
.qtd-slug-page .qtd-slug-options input[type="number"] { width:90px; padding:10px; border:1px solid var(--border); border-radius:8px; }
.qtd-slug-page .qtd-slug-stats, .qtd-slug-page #slug-hint, .qtd-slug-page #slug-bulk-status { color:var(--text-light); margin-top:8px; }
/* Variants ke result long ho sakte hain; wrapping mobile overflow ko rokta hai. */
.qtd-slug-page .qtd-slug-variants { display:grid; gap:8px; }
.qtd-slug-page .qtd-slug-variants button { text-align:left; background:#f8fafc; border:1px solid var(--border); border-radius:8px; padding:10px 14px; cursor:pointer; font:inherit; overflow-wrap:anywhere; }
.qtd-slug-page .qtd-slug-variants span { color:var(--primary-dark); display:block; }
/* Variant select button ko full width aur alag copy icon ko fixed touch area deta hai. */
.qtd-slug-page .qtd-slug-variant-row { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; }
.qtd-slug-page .qtd-slug-variants .qtd-slug-variant-copy { display:grid; place-items:center; padding:8px; color:var(--primary-dark); }
.qtd-slug-page .qtd-slug-variants .qtd-slug-variant-copy:hover, .qtd-slug-page .qtd-slug-variants button:focus-visible { border-color:var(--primary-dark); background:#eff6ff; }
.qtd-slug-page .qtd-slug-preview { margin-top:22px; padding:16px; border:1px solid var(--border); border-radius:var(--radius); overflow-wrap:anywhere; }
.qtd-slug-page .qtd-slug-preview p { margin:12px 0; }
.qtd-slug-page .qtd-slug-table-wrap { overflow-x:auto; margin-top:18px; }
.qtd-slug-page .qtd-slug-table-wrap table { width:100%; min-width:600px; border-collapse:collapse; }
.qtd-slug-page .qtd-slug-table-wrap th, .qtd-slug-page .qtd-slug-table-wrap td { text-align:left; padding:10px; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.qtd-slug-page .qtd-slug-table-wrap td input { min-width:190px; }
.qtd-slug-page .qtd-slug-table-wrap button { padding:8px 12px; border:0; border-radius:8px; color:#fff; background:var(--primary); cursor:pointer; }
/* Bulk results mein narrow Action column ke andar text wrap ki jagah accessible copy icon rehta hai. */
.qtd-slug-page .qtd-slug-table-wrap .qtd-slug-row-copy { width:44px; height:44px; padding:0; display:grid; place-items:center; }
/* Action heading poora ek line par rahe; narrow screens par table ka existing horizontal scroll kaam karega. */
.qtd-slug-page .qtd-slug-table-wrap th:last-child, .qtd-slug-page .qtd-slug-table-wrap td:last-child { width:90px; min-width:90px; white-space:nowrap; }
.qtd-slug-page .qtd-slug-table-wrap th:nth-child(3) { min-width:95px; }
.qtd-slug-page .qtd-slug-table-wrap .qtd-slug-row-copy:focus-visible { outline:2px solid var(--primary-dark); outline-offset:2px; }
.qtd-slug-page .qtd-slug-content code { overflow-wrap:anywhere; }
/* Related links ko peer tool pages jaise clickable cards mein dikhate hain. */
.qtd-slug-page .qtd-slug-related { list-style:none; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.qtd-slug-page .qtd-slug-related li { margin:0; }
.qtd-slug-page .qtd-slug-related a { display:block; padding:16px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); color:var(--text); text-decoration:none; }
.qtd-slug-page .qtd-slug-related a:hover, .qtd-slug-page .qtd-slug-related a:focus-visible { border-color:var(--primary); color:var(--primary-dark); }
@media(max-width:600px) { .qtd-slug-page .qtd-slug-options { grid-template-columns:1fr; } .qtd-slug-page .qtd-slug-tabs button { flex:1; } }

/* Hero aur tool ke darmiyan khaali vertical space kam: sirf slug page par. */
.qtd-slug-page > .hero { padding-top: 34px; padding-bottom: 12px; }
.qtd-slug-page > .tool-section { padding-top: 18px; }

/* Desktop: tabs poori width mein; input/output left, advanced options right.
   Isse main text box ko zyada jagah milti hai aur settings saath nazar aati hain. */
@media (min-width: 900px) {
  .qtd-slug-page .qtd-slug-card {
    max-width: 1120px;
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(275px, 1fr);
    grid-template-areas: "tabs tabs" "tool options";
    column-gap: 26px;
    align-items: start;
  }
  .qtd-slug-page .qtd-slug-tabs { grid-area: tabs; }
  .qtd-slug-page .qtd-slug-settings { grid-area: options; margin: 0; }
  .qtd-slug-page :is(#slug-single, #slug-bulk) { grid-area: tool; min-width: 0; }
  /* Sidebar mein labels aur fields ek column mein readable rehte hain. */
  .qtd-slug-page .qtd-slug-options { grid-template-columns: 1fr; }
  .qtd-slug-page .qtd-slug-options label { margin: 10px 0 3px; }
}

/* Chhoti screens par original stacked layout; input options se pehle aata hai. */
@media (max-width: 899px) {
  .qtd-slug-page .qtd-slug-card { display: flex; flex-direction: column; }
  .qtd-slug-page .qtd-slug-tabs { order: 0; }
  .qtd-slug-page :is(#slug-single, #slug-bulk) { order: 1; width: 100%; }
  .qtd-slug-page .qtd-slug-settings { order: 2; width: 100%; }
}

/* Title input ke left mein action buttons; result aur variants poori column width lete hain. */
.qtd-slug-page .qtd-slug-input-layout { display:grid; grid-template-columns:142px minmax(0,1fr); gap:18px; align-items:start; }
.qtd-slug-page .qtd-slug-input-field { min-width:0; }
.qtd-slug-page .qtd-slug-input-field label { margin-top:0; }
.qtd-slug-page .qtd-slug-actions { display:flex; flex-direction:column; gap:8px; margin:0; padding-top:27px; }
.qtd-slug-page .qtd-slug-actions button { width:100%; padding:10px 8px; text-align:center; line-height:1.25; }
.qtd-slug-page .qtd-slug-result-field { min-width:0; margin-top:20px; }
/* Final slug field ke saath copy icon; input available jagah le aur icon stable touch target rahe. */
.qtd-slug-page .qtd-slug-copy-field { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:8px; align-items:stretch; }
.qtd-slug-page .qtd-slug-inline-copy { display:inline-grid; place-items:center; width:44px; min-height:44px; padding:8px; border:1px solid var(--border); border-radius:8px; background:#f8fafc; color:var(--primary-dark); cursor:pointer; vertical-align:middle; }
.qtd-slug-page .qtd-slug-inline-copy:hover, .qtd-slug-page .qtd-slug-inline-copy:focus-visible { border-color:var(--primary-dark); background:#eff6ff; }
/* Full URL ka copy icon preview link ke bilkul paas dikhe, aur invalid/empty preview mein hide rahe. */
.qtd-slug-page #slug-copy-url { margin-left:8px; }
.qtd-slug-page #slug-hint { min-height:1.5em; margin:8px 0 0; }
.qtd-slug-page .qtd-slug-result-field + h2 { margin:22px 0 12px; }
/* Phone par title box pehle, action buttons uske neeche wrap karte hain. */
@media(max-width:650px) {
  .qtd-slug-page .qtd-slug-input-layout { display:flex; flex-direction:column; gap:10px; }
  .qtd-slug-page .qtd-slug-input-field { order:0; width:100%; }
  .qtd-slug-page .qtd-slug-actions { order:1; flex-direction:row; flex-wrap:wrap; padding-top:0; width:100%; }
  .qtd-slug-page .qtd-slug-actions button { width:auto; flex:1 1 130px; }
}

/* Bulk tab mein actions aur CSV import left, titles textarea right. */
.qtd-slug-page .qtd-slug-bulk-layout { display:grid; grid-template-columns:142px minmax(0,1fr); gap:18px; align-items:start; }
.qtd-slug-page .qtd-slug-bulk-side, .qtd-slug-page .qtd-slug-bulk-field { min-width:0; }
.qtd-slug-page .qtd-slug-bulk-field label { margin-top:0; }
.qtd-slug-page .qtd-slug-bulk-actions { display:flex; flex-direction:column; gap:8px; margin:0; padding-top:27px; }
.qtd-slug-page .qtd-slug-bulk-actions button { width:100%; padding:10px 8px; text-align:center; line-height:1.25; }
/* File input accessible rehta hai; styled label icon ke saath click target hai. */
.qtd-slug-page .qtd-slug-csv-label { display:flex!important; align-items:center; justify-content:center; gap:7px; margin:14px 0 4px!important; padding:10px 8px; border:1px solid var(--primary); border-radius:var(--radius); color:var(--primary-dark); font-weight:700; cursor:pointer; text-align:center; line-height:1.25; }
.qtd-slug-page .qtd-slug-csv-label:hover { background:#eff6ff; }
.qtd-slug-page .qtd-slug-file-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
.qtd-slug-page .qtd-slug-csv-label:has(+ .qtd-slug-file-input:focus-visible) { outline:2px solid var(--primary-dark); outline-offset:2px; }
.qtd-slug-page #slug-csv-note { display:block; color:var(--text-light); line-height:1.35; }
.qtd-slug-page .qtd-slug-bulk-side > label[for="slug-csv-column"] { margin-top:12px; font-size:.86rem; }
/* Phone par textarea pehle aur controls uske neeche, bina horizontal scrolling. */
@media(max-width:650px) {
  .qtd-slug-page .qtd-slug-bulk-layout { display:flex; flex-direction:column; gap:10px; }
  .qtd-slug-page .qtd-slug-bulk-field { order:0; width:100%; }
  .qtd-slug-page .qtd-slug-bulk-side { order:1; width:100%; }
  .qtd-slug-page .qtd-slug-bulk-actions { flex-direction:row; flex-wrap:wrap; padding-top:0; }
  .qtd-slug-page .qtd-slug-bulk-actions button { width:auto; flex:1 1 130px; }
}

/* CSV selection aur batch summary ko action ke turant paas readable feedback deta hai. */
.qtd-slug-page .qtd-slug-csv-filename { display:block; margin-top:6px; color:var(--primary-dark); font-size:.85rem; font-weight:600; overflow-wrap:anywhere; }
.qtd-slug-page #slug-bulk-status.qtd-slug-summary { padding:12px 14px; border-left:3px solid var(--primary); border-radius:8px; background:#eff6ff; color:var(--text); font-weight:600; }

/* Copy/download/clear ka message action buttons ke bilkul neeche dikhata hai. */
.qtd-slug-page .qtd-slug-action-feedback { display:block; width:100%; min-height:1.2em; margin-top:2px; color:var(--primary-dark); font-size:.85rem; font-weight:700; line-height:1.35; overflow-wrap:anywhere; }
.qtd-slug-page .qtd-slug-action-feedback:empty { display:none; }

/* 375px phone: shared button-group rule forces every button into one row.
   Slug page ke Single aur Bulk actions ko do columns mein readable touch targets milte hain. */
@media (max-width: 480px) {
  .qtd-slug-page .tool-card .qtd-slug-actions,
  .qtd-slug-page .tool-card .qtd-slug-bulk-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .qtd-slug-page .tool-card .qtd-slug-actions button,
  .qtd-slug-page .tool-card .qtd-slug-bulk-actions button {
    width: 100%;
    min-width: 0;
    font-size: .85rem;
    padding: 10px 6px;
    overflow-wrap: anywhere;
  }
}

/* Bulk table apne wrapper mein hi horizontally scroll kare; flex child ki
   intrinsic table width page ko viewport se bahar na dhakele. */
.qtd-slug-page .qtd-slug-card,
.qtd-slug-page #slug-bulk,
.qtd-slug-page .qtd-slug-table-wrap { min-width: 0; }
.qtd-slug-page .qtd-slug-table-wrap { max-width: 100%; }

/* Mobile par settings ka compact menu tabs ke turant baad aata hai.
   Native details/summary keyboard aur screen reader se bhi khulta hai. */
@media (max-width: 650px) {
  .qtd-slug-page .qtd-slug-tabs { margin-bottom: 8px; }
  .qtd-slug-page .qtd-slug-settings { order: 1; width: 100%; margin: 0 0 18px; }
  .qtd-slug-page :is(#slug-single, #slug-bulk) { order: 2; min-width: 0; }
  .qtd-slug-page .qtd-slug-settings summary { display: flex; align-items: center; gap: 12px; list-style: none; }
  .qtd-slug-page .qtd-slug-settings summary::-webkit-details-marker { display: none; }
  /* Teen lines menu ki pehchaan deti hain; khulne par bhi label clear rehta hai. */
  .qtd-slug-page .qtd-slug-settings summary::before {
    content: ''; flex: none; width: 19px; height: 15px;
    background: linear-gradient(currentColor,currentColor) 0 0 / 19px 2px no-repeat,
                linear-gradient(currentColor,currentColor) 0 6px / 19px 2px no-repeat,
                linear-gradient(currentColor,currentColor) 0 12px / 19px 2px no-repeat;
  }
  .qtd-slug-page > .hero { padding-bottom: 8px; }
  .qtd-slug-page > .tool-section { padding-top: 8px; }
}

/* Odd fifth Single action ko poori row deta hai, taaki akela half-width button na lage. */
@media (max-width: 480px) {
  .qtd-slug-page .tool-card .qtd-slug-actions button:last-child { grid-column: 1 / -1; }
}

/* Shared content style list item ko card banata hai; related links par ek hi card rakho. */
.qtd-slug-page .qtd-slug-related li,
.qtd-slug-page .qtd-slug-related li:hover {
  padding: 0; border: 0; background: transparent; box-shadow: none; transform: none;
}

/* Phone ke first screen par tool jaldi dikhe: hero copy wahi hai, sirf type aur gaps compact hain. */
@media (max-width: 650px) {
  .qtd-slug-page > .hero { padding: 12px 0 4px; }
  .qtd-slug-page > .hero h1 { font-size: 1.45rem; line-height: 1.18; margin-bottom: 6px; }
  .qtd-slug-page > .hero p { font-size: .88rem; line-height: 1.4; }
  .qtd-slug-page > .tool-section { padding-top: 8px; }

  /* Closed settings bar chhoti rahe; open state mein controls ke liye padding mile. */
  .qtd-slug-page .qtd-slug-settings { padding: 7px 11px; margin-bottom: 12px; }
  .qtd-slug-page .qtd-slug-settings[open] { padding: 11px; }
  .qtd-slug-page .qtd-slug-settings summary { min-height: 30px; gap: 9px; font-size: .9rem; line-height: 1.2; }
  .qtd-slug-page .qtd-slug-settings summary::before {
    width: 16px; height: 13px;
    background-size: 16px 2px, 16px 2px, 16px 2px;
    background-position: 0 0, 0 5px, 0 10px;
  }
}

/* Mobile Bulk input shuru mein compact rahe; zyada titles textarea ke andar
   scroll hote hain aur user resize handle se zarurat par ise bada kar sakta hai. */
@media (max-width: 650px) {
  .qtd-slug-page #slug-bulk-input { height: 150px; min-height: 120px; overflow-y: auto; }
}

/* Paanch Bulk actions mein akela Clear button poori last row le. */
@media (max-width: 480px) {
  .qtd-slug-page .tool-card .qtd-slug-bulk-actions button:last-child { grid-column: 1 / -1; }
}