/* OceanofTools category-local shared CSS. Tool-specific layout belongs in the page CSS file. */
/* Category-local shared rules. Tool function/layout CSS stays in this category or the page itself. */
.search-container{display:none!important}


/* ===== 2026-08-17 Text Tools responsive workspace ===== */
body.text-tool-page{overflow-x:hidden;background:linear-gradient(180deg,#f5f8fc 0%,#eef4f8 100%);color:#10243a;}
body.text-tool-page *{box-sizing:border-box;min-width:0;}
body.text-tool-page img,body.text-tool-page canvas,body.text-tool-page svg,body.text-tool-page video{max-width:100%;height:auto;}
body.text-tool-page > .hero,
body.text-tool-page .hero:first-of-type{
  width:min(1380px,calc(100% - 24px))!important;max-width:1380px!important;
  margin:14px auto 14px!important;padding:20px 24px!important;border-radius:24px!important;
  background:linear-gradient(135deg,#10254a 0%,#1a4777 100%)!important;color:#fff!important;
  text-align:left!important;box-shadow:0 18px 42px rgba(15,35,58,.14)!important;border:1px solid rgba(255,255,255,.09)!important;
}
body.text-tool-page .hero .hero-icon{display:none!important;}
body.text-tool-page .hero h1{margin:0 0 8px!important;color:#fff!important;-webkit-text-fill-color:#fff!important;background:none!important;font-size:clamp(1.85rem,4vw,2.75rem)!important;line-height:1.08!important;letter-spacing:-.035em!important;}
body.text-tool-page .hero p{max-width:980px!important;margin:0!important;color:rgba(255,255,255,.88)!important;font-size:1rem!important;line-height:1.58!important;}
body.text-tool-page .container1,
body.text-tool-page .container,
body.text-tool-page .tool-container,
body.text-tool-page .main-container{
  width:min(1380px,calc(100% - 24px))!important;max-width:1380px!important;margin:14px auto 22px!important;
}
body.text-tool-page .tool-interface,
body.text-tool-page .input-output-container,
body.text-tool-page .editor-container,
body.text-tool-page .main-content,
body.text-tool-page .controls-container{min-width:0!important;max-width:100%!important;}
body.text-tool-page textarea{width:100%!important;max-width:100%!important;resize:vertical;}
body.text-tool-page input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]),
body.text-tool-page select,body.text-tool-page textarea{max-width:100%!important;}
body.text-tool-page table{max-width:100%;}
body.text-tool-page .table-container,
body.text-tool-page .table-wrapper,
body.text-tool-page .result-table,
body.text-tool-page .output-table{max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;}
body.text-tool-page pre,body.text-tool-page code{max-width:100%;overflow-wrap:anywhere;word-break:break-word;}
body.text-tool-page .button-group,
body.text-tool-page .action-buttons,
body.text-tool-page .controls,
body.text-tool-page .toolbar{flex-wrap:wrap!important;}
body.text-tool-page .stats-grid,
body.text-tool-page .result-grid,
body.text-tool-page .options-grid,
body.text-tool-page .settings-grid{min-width:0!important;}
@media(max-width:900px){
  body.text-tool-page .tool-interface,body.text-tool-page .input-output-container,body.text-tool-page .editor-container,body.text-tool-page .main-content,body.text-tool-page .controls-container{grid-template-columns:1fr!important;flex-direction:column!important;}
  body.text-tool-page [style*="grid-template-columns"]{max-width:100%;}
  body.text-tool-page .input-section,body.text-tool-page .output-section,body.text-tool-page .result-section,body.text-tool-page .settings-section{width:100%!important;max-width:100%!important;}
}
@media(max-width:640px){
  body.text-tool-page > .hero,body.text-tool-page .hero:first-of-type{width:calc(100% - 12px)!important;margin:8px auto 10px!important;padding:16px!important;border-radius:18px!important;}
  body.text-tool-page .hero h1{font-size:1.72rem!important;overflow-wrap:anywhere;}
  body.text-tool-page .hero p{font-size:.93rem!important;line-height:1.5!important;}
  body.text-tool-page .container1,body.text-tool-page .container,body.text-tool-page .tool-container,body.text-tool-page .main-container{width:calc(100% - 12px)!important;margin:10px auto 16px!important;padding-left:12px!important;padding-right:12px!important;border-radius:18px!important;}
  body.text-tool-page .stats-grid,body.text-tool-page .result-grid,body.text-tool-page .options-grid,body.text-tool-page .settings-grid{grid-template-columns:1fr!important;gap:10px!important;}
  body.text-tool-page .button-group,body.text-tool-page .action-buttons,body.text-tool-page .controls,body.text-tool-page .toolbar{display:grid!important;grid-template-columns:1fr!important;gap:9px!important;}
  body.text-tool-page .button-group button,body.text-tool-page .action-buttons button,body.text-tool-page .controls button,body.text-tool-page .toolbar button,body.text-tool-page .btn,body.text-tool-page .action-btn{width:100%!important;max-width:100%!important;}
  body.text-tool-page textarea{min-height:180px;}
}

/* ===== 2026-08-17 Text Tools: compact hero-to-workspace gap ===== */
body.text-tool-page > .hero,
body.text-tool-page .hero:first-of-type{
  margin-bottom:6px!important;
}
body.text-tool-page .hero + br,
body.text-tool-page .search-container + br{
  display:none!important;
}
body.text-tool-page .search-container{
  display:none!important;
  margin:0!important;
  padding:0!important;
  height:0!important;
  min-height:0!important;
}
body.text-tool-page .container1,
body.text-tool-page .container,
body.text-tool-page .tool-container,
body.text-tool-page .main-container{
  margin-top:8px!important;
}

/* Rating belongs after the primary tool actions, never between input/output and buttons. */
body.text-tool-page #ootRatingMount.text-rating-after-actions{
  width:100%!important;
  max-width:100%!important;
  margin:16px 0 0!important;
  order:initial!important;
}
body.text-tool-page #ootRatingMount.text-rating-after-actions .oot-rating-card{
  margin:0!important;
}

@media(max-width:640px){
  body.text-tool-page > .hero,
  body.text-tool-page .hero:first-of-type{margin-bottom:4px!important;}
  body.text-tool-page .container1,
  body.text-tool-page .container,
  body.text-tool-page .tool-container,
  body.text-tool-page .main-container{margin-top:6px!important;}
  body.text-tool-page #ootRatingMount.text-rating-after-actions{margin-top:12px!important;}
}