/* OceanofTools shared modern tool interface. Loaded last so legacy pages gain one consistent, responsive shell. */
:root{--oot-primary:#5b5bd6;--oot-primary-dark:#4242ad;--oot-secondary:#7c3aed;--oot-bg:#f6f7fb;--oot-card:#fff;--oot-text:#182033;--oot-muted:#64748b;--oot-border:#dfe4ee;--oot-success:#15803d;--oot-danger:#b91c1c;--oot-warning:#a16207;--oot-radius:22px;--oot-shadow:0 18px 55px rgba(27,35,61,.10)}
html{scroll-behavior:smooth}body.oot-modern{margin:0;background:var(--oot-bg);color:var(--oot-text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}body.oot-modern *{box-sizing:border-box}body.oot-modern [hidden]{display:none!important}body.oot-modern img,body.oot-modern canvas,body.oot-modern svg,body.oot-modern video{max-width:100%}body.oot-modern button,body.oot-modern input,body.oot-modern select,body.oot-modern textarea{font:inherit}body.oot-modern button{touch-action:manipulation}body.oot-modern a,body.oot-modern button,body.oot-modern input,body.oot-modern select,body.oot-modern textarea{outline-offset:3px}body.oot-modern :focus-visible{outline:3px solid rgba(91,91,214,.35)}
body.oot-modern>.hero,body.oot-modern main>.hero,body.oot-modern .container1>.hero{width:min(1240px,calc(100% - 28px));margin:28px auto 24px!important;padding:34px!important;border-radius:28px!important;background:linear-gradient(135deg,#4f46e5,#7c3aed)!important;color:#fff!important;box-shadow:var(--oot-shadow)!important;text-align:left!important}body.oot-modern .container1>.hero{width:100%;margin:0 0 24px!important}body.oot-modern .hero h1,body.oot-modern .hero h1 *{margin-top:0!important;color:#fff!important;background:none!important;-webkit-background-clip:initial!important;background-clip:initial!important;-webkit-text-fill-color:#fff!important;line-height:1.08!important;font-size:clamp(2rem,5vw,3.35rem)!important}body.oot-modern .hero p{max-width:850px!important;margin:12px 0 0!important;color:rgba(255,255,255,.92)!important;font-size:1.05rem!important;line-height:1.65!important}body.oot-modern .hero-icon{display:inline-grid!important;place-items:center;width:64px;height:64px;margin:0 0 15px!important;border-radius:19px!important;background:rgba(255,255,255,.16)!important;color:#fff!important;font-size:1.7rem!important}
body.oot-modern .container1,body.oot-modern .container2,body.oot-modern .tool-container,body.oot-modern .calculator-container,body.oot-modern .main-container,body.oot-modern .content-container{width:min(1240px,calc(100% - 28px))!important;max-width:1240px!important;margin:24px auto!important;border:1px solid var(--oot-border)!important;border-radius:var(--oot-radius)!important;background:var(--oot-card)!important;box-shadow:var(--oot-shadow)!important;padding:28px!important;overflow:visible!important}body.oot-modern .container1 .container1,body.oot-modern .container1 .container2,body.oot-modern .container2 .container1,body.oot-modern .tool-container .container1{width:100%!important;margin:18px 0!important;box-shadow:none!important}
body.oot-modern .content-section,body.oot-modern .faq-section,body.oot-modern .how-to-use,body.oot-modern .features-section,body.oot-modern .about-section{border-color:var(--oot-border)!important;border-radius:18px!important;background:#fff!important;color:var(--oot-text)!important}body.oot-modern h1,body.oot-modern h2,body.oot-modern h3{color:var(--oot-text);overflow-wrap:anywhere}body.oot-modern h2{line-height:1.2}body.oot-modern p,body.oot-modern li{line-height:1.65}body.oot-modern .section-description,body.oot-modern .description,body.oot-modern .subtitle,body.oot-modern .help-text{color:var(--oot-muted)!important}
body.oot-modern input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=range]):not([type=file]),body.oot-modern select,body.oot-modern textarea{max-width:100%;min-height:44px;padding:10px 12px;border:1px solid #cfd5e2!important;border-radius:11px!important;background:#fff!important;color:var(--oot-text)!important;box-shadow:none!important}body.oot-modern textarea{resize:vertical;line-height:1.5}body.oot-modern input:focus,body.oot-modern select:focus,body.oot-modern textarea:focus{border-color:var(--oot-primary)!important;box-shadow:0 0 0 3px rgba(91,91,214,.12)!important}body.oot-modern input[type=file]{max-width:100%}body.oot-modern input[type=checkbox],body.oot-modern input[type=radio]{accent-color:var(--oot-primary)}
body.oot-modern .btn,body.oot-modern .primary-btn,body.oot-modern .action-btn,body.oot-modern .convert-btn,body.oot-modern .calculate-btn,body.oot-modern .process-btn,body.oot-modern .download-btn,body.oot-modern .upload-btn,body.oot-modern button[class*=primary],body.oot-modern button[class*=convert],body.oot-modern button[class*=calculate],body.oot-modern button[class*=generate]{min-height:44px;border-radius:11px!important;font-weight:750!important;transition:transform .18s ease,box-shadow .18s ease,opacity .18s ease}body.oot-modern .primary-btn,body.oot-modern .convert-btn,body.oot-modern .calculate-btn,body.oot-modern .process-btn,body.oot-modern button[class*=primary],body.oot-modern button[class*=convert],body.oot-modern button[class*=calculate],body.oot-modern button[class*=generate]{border:1px solid transparent!important;background:linear-gradient(135deg,var(--oot-primary),var(--oot-secondary))!important;color:#fff!important;box-shadow:0 9px 24px rgba(91,91,214,.22)!important}body.oot-modern button:hover:not(:disabled),body.oot-modern .btn:hover{transform:translateY(-1px)}body.oot-modern button:disabled{cursor:not-allowed;opacity:.55;transform:none!important;box-shadow:none!important}
body.oot-modern .drop-zone,body.oot-modern .upload-area,body.oot-modern .file-upload,body.oot-modern [class*=dropzone]{border:2px dashed #a7afc4!important;border-radius:18px!important;background:linear-gradient(180deg,#fafaff,#f5f6ff)!important;transition:.2s ease}body.oot-modern .is-dragging{border-color:var(--oot-primary)!important;background:#f0efff!important}
body.oot-modern .result,body.oot-modern .result-section,body.oot-modern .output-section,body.oot-modern .output-container,body.oot-modern .preview-section{min-width:0;border-radius:16px!important}body.oot-modern .success,body.oot-modern .success-message{border:1px solid #bde5c7!important;background:#f0fff4!important;color:var(--oot-success)!important}body.oot-modern .error,body.oot-modern .error-message{border:1px solid #f2c6c6!important;background:#fff4f4!important;color:var(--oot-danger)!important}
body.oot-modern table{width:100%;border-collapse:collapse}body.oot-modern th,body.oot-modern td{padding:10px 12px;border:1px solid var(--oot-border);text-align:left}body.oot-modern th{background:#f4f5fb}.oot-table-wrap{max-width:100%;overflow:auto;border-radius:12px}.oot-table-wrap table{min-width:520px}
body.oot-modern .tool-interface,body.oot-modern .input-output-container,body.oot-modern .editor-container,body.oot-modern .controls-container,body.oot-modern .main-content{min-width:0}body.oot-modern canvas{height:auto!important}body.oot-modern iframe{max-width:100%;border-radius:14px}
body.oot-modern .faq-item,body.oot-modern details{border-radius:13px}body.oot-modern details summary{cursor:pointer}.oot-toast{position:fixed;right:18px;bottom:18px;z-index:99999;width:min(390px,calc(100% - 36px));padding:13px 15px;border:1px solid #f2c6c6;border-radius:13px;background:#fff4f4;color:var(--oot-danger);box-shadow:0 16px 50px rgba(15,23,42,.18);font-weight:650}.oot-toast.is-success{border-color:#bde5c7;background:#f0fff4;color:var(--oot-success)}.oot-toast button{float:right;border:0;background:transparent;color:inherit;font-size:1.1rem}.oot-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
@media(max-width:900px){body.oot-modern .tool-interface,body.oot-modern .input-output-container,body.oot-modern .editor-container,body.oot-modern .controls-container,body.oot-modern .main-content{grid-template-columns:1fr!important;flex-direction:column!important}body.oot-modern [style*="grid-template-columns"]{max-width:100%}body.oot-modern .sidebar,body.oot-modern [class*=sidebar]{position:static!important;width:100%!important;max-width:none!important}}
@media(max-width:720px){body.oot-modern>.hero,body.oot-modern main>.hero,body.oot-modern .container1>.hero{width:min(100% - 18px,1240px);padding:24px 19px!important;border-radius:20px!important;margin-top:14px!important}body.oot-modern .container1>.hero{width:100%}body.oot-modern .container1,body.oot-modern .container2,body.oot-modern .tool-container,body.oot-modern .calculator-container,body.oot-modern .main-container,body.oot-modern .content-container{width:min(100% - 18px,1240px)!important;margin:14px auto!important;padding:18px!important;border-radius:18px!important}body.oot-modern .container1 .container1,body.oot-modern .container1 .container2{width:100%!important}body.oot-modern .tool-interface>*,body.oot-modern .input-section,body.oot-modern .output-section{min-width:0!important;width:100%!important}body.oot-modern .button-group,body.oot-modern .actions,body.oot-modern .action-buttons,body.oot-modern .controls{flex-wrap:wrap!important}body.oot-modern .button-group>button,body.oot-modern .actions>button,body.oot-modern .action-buttons>button{flex:1 1 145px;min-height:46px}body.oot-modern input,body.oot-modern select,body.oot-modern textarea{font-size:16px!important}body.oot-modern .search-container{width:min(100% - 18px,1240px)!important;margin-left:auto!important;margin-right:auto!important}body.oot-modern pre,body.oot-modern code{white-space:pre-wrap;overflow-wrap:anywhere}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body.oot-modern *,body.oot-modern *:before,body.oot-modern *:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Mobile containment for long documentation examples and legacy flex rows. */
body.oot-modern .doc-container,
body.oot-modern .docs-container,
body.oot-modern .documentation,
body.oot-modern .doc-section,
body.oot-modern .doc-steps,
body.oot-modern .doc-step,
body.oot-modern .doc-step-content,
body.oot-modern .feature-card,
body.oot-modern .section-content {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
body.oot-modern .doc-code-block,
body.oot-modern .code-block,
body.oot-modern pre {
  max-width: 100%;
  overflow-x: auto;
}
@media(max-width:720px){
  body.oot-modern .doc-step{gap:12px!important;padding-left:14px!important;padding-right:14px!important}
  body.oot-modern .doc-step-content{width:auto!important;flex:1 1 auto!important}
  body.oot-modern .doc-step-number{flex:0 0 auto!important}
}
/* Progressive mobile table scrolling works even if JavaScript is unavailable. */
@media(max-width:720px){
  body.oot-modern table:not(.oot-no-scroll){display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  body.oot-modern table:not(.oot-no-scroll) caption{display:block;width:100%}
}