/* Toolinium shared tool-page design system — auto-extracted common styles */
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif;}
html{overflow-x:hidden;width:100%;max-width:100vw;}
body{background:#020817;color:white;display:flex;justify-content:center;padding:40px 20px;position:relative;overflow-x:hidden;width:100%;max-width:100vw;}
img,video,canvas,svg,table,iframe{max-width:100%;}
pre{overflow-x:auto;max-width:100%;}
table{display:block;overflow-x:auto;white-space:nowrap;}
input,select,textarea,button{max-width:100%;}
p,li,td,th,span,div,h1,h2,h3,h4,a{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;}
code,pre{word-break:break-all;}
.container{width:100%;max-width:1200px;background:#07152f;border:1px solid #17315f;border-radius:28px;padding:22px;}
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:10px;}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700;}
.logo img{width:38px;height:38px;border-radius:10px;}
.home-btn{padding:10px 16px;border-radius:14px;background:#0f1d3b;border:1px solid #1f3f75;color:#cbd5e1;text-decoration:none;font-size:14px;}
.title{font-size:32px;font-weight:800;margin-bottom:6px;}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.card{background:#081224;border:1px solid #1a3159;border-radius:22px;padding:22px;}
textarea{resize:vertical;min-height:90px;}
.btns{display:flex;gap:12px;margin-top:18px;flex-wrap:wrap;}
.btn{flex:1;border:none;padding:14px;border-radius:14px;font-weight:700;cursor:pointer;transition:0.3s;font-size:14px;min-width:140px;}
.primary{background:#2563eb;color:white;}
.secondary{background:#101d38;border:1px solid #294577;color:white;}
.features{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:25px; }
.feature{ background:#081224; border:1px solid #1b3563; border-radius:20px; padding:22px; text-align:center; }
.feature i{font-size:26px;color:#3b82f6;margin-bottom:10px;}
.feature h3{ margin-bottom:10px; }
.feature p{ color:#94a3b8; line-height:1.6; font-size:14px; }
.sec-card{ background:#081224; border:1px solid #1a3159; border-radius:22px; padding:22px; margin-top:20px; }
.sec-title{ font-size:22px; font-weight:800; margin-bottom:14px; }
.sec-text{ color:#cbd5e1; line-height:1.8; font-size:14px; }
.how-list{ padding-left:20px; line-height:2.2; color:#cbd5e1; font-size:14px; }
.faq h3{ margin-top:18px; margin-bottom:6px; font-size:16px; color:#dbeafe; }
.faq p{ color:#94a3b8; line-height:1.8; font-size:14px; }
.related-tools{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.related-tools a{ padding:10px 16px; background:#0f1d3b; border:1px solid #294577; border-radius:12px; text-decoration:none; color:#cbd5e1; transition:0.3s; font-size:14px; }
.related-tools a:hover{ background:#1b3563; color:white; }
.footer{ margin-top:28px; text-align:center; color:#94a3b8; font-size:13px; padding-top:18px; border-top:1px solid #1a3159; }
body::before { content: ''; position: absolute; width: 300px; height: 300px; background: radial-gradient(circle, rgba(37, 99, 235, 0.15) 0%, transparent 70%); top: -50px; right: -50px; z-index: 0; pointer-events: none; }
body::after { content: ''; position: absolute; width: 400px; height: 400px; background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%); bottom: -100px; left: -100px; z-index: 0; pointer-events: none; }
.tool-container { background: rgba(15, 23, 42, 0.6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 24px; width: 100%; max-width: 900px; padding: 40px; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5); position: relative; z-index: 1; overflow-x: hidden; }
.home-btn:hover{background:#1a3060;}
.topbar{position:relative;z-index:5;}
.home-btn{position:relative;z-index:5;pointer-events:auto;-webkit-tap-highlight-color:rgba(59,130,246,0.35);touch-action:manipulation;}
h1{color:#60a5fa;margin-bottom:10px;}
.label{display:block;margin-bottom:8px;font-size:13px;color:#94a3b8;font-weight:600;}
.primary:hover{background:#1d4ed8;}
.secondary:hover{background:#17284b;}
.feature:hover{border-color:#3b82f6;transform:translateY(-4px);}
.badge{display:inline-block;padding:7px 16px;border-radius:999px;background:#0d2149;border:1px solid #1f4fa3;color:#60a5fa;font-size:12px;margin-bottom:18px;font-weight:600;}
.desc{color:#94a3b8;line-height:1.7;margin-bottom:28px;max-width:750px;}
.main-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.stat-box{background:#0b1730;border:1px solid #1f3c70;border-radius:14px;padding:14px;text-align:center;}
input[type="file"]{display:none;}
.preview-box{background:#0b1730;border:1px solid #203d6f;border-radius:18px;min-height:220px;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px;}
h2{color:#a78bfa;margin:30px 0 10px;font-size:20px;border-left:4px solid #2563eb;padding-left:12px;}
h3{color:#34d399;margin:20px 0 8px;font-size:16px;}
.info{background:#0b1c38;border:1px solid #1e3a6e;border-radius:10px;padding:12px 16px;margin-bottom:10px;font-size:14px;color:#94a3b8;line-height:1.7;}
pre{background:#050d1d;border:1px solid #1a3159;border-radius:12px;padding:16px;overflow-x:auto;font-size:13px;color:#a5f3fc;line-height:1.8;white-space:pre-wrap;word-break:break-all;}
.copy-note{background:#0a2e1a;border:1px solid #16a34a;border-radius:8px;padding:8px 14px;font-size:13px;color:#4ade80;margin-bottom:8px;}
.subtitle{color:#94a3b8;font-size:14px;margin-bottom:24px;}
.upload-box{border:2px dashed #24467f;border-radius:16px;padding:30px 18px;text-align:center;cursor:pointer;background:#0b1730;transition:0.3s;}
.upload-box:hover{border-color:#3b82f6;}
.upload-box i{font-size:32px;color:#3b82f6;margin-bottom:10px;}
.upload-box p{color:#94a3b8;font-size:13px;}
.logo-box{width:38px;height:38px;border-radius:10px;background:#2563eb;display:flex;align-items:center;justify-content:center;}
.stat-box span{display:block;color:#94a3b8;font-size:11px;margin-bottom:6px;}
.progress-bar{height:100%;background:linear-gradient(90deg,#2563eb,#60a5fa);width:0%;transition:width 0.2s;}
.card-title{font-size:15px;font-weight:700;color:#dbeafe;margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.form-group{margin-bottom:16px;}
select option{background:#0b1730;}

/* ============================================
   GLOBAL MOBILE RESPONSIVENESS SAFETY NET
   Applies as fallback across all 92 tool pages
   ============================================ */
@media (max-width: 1024px) {
  .main-grid{grid-template-columns:1fr !important;}
  .grid{grid-template-columns:1fr 1fr;}
}

@media (max-width: 768px) {
  body{padding:24px 14px;}
  .tool-container{padding:24px 18px !important;}
  .container{padding:16px;}
  .title,.tool-title{font-size:26px !important;}
  .features{grid-template-columns:1fr 1fr !important;gap:12px;}
  .grid{grid-template-columns:1fr !important;}
  .stats-grid{grid-template-columns:1fr 1fr !important;}
  .thumb-grid{grid-template-columns:repeat(2,1fr) !important;}
  .form-row{grid-template-columns:1fr !important;}
  .related-tools{gap:8px;}
  .related-tools a{font-size:13px;padding:8px 12px;}
}

@media (max-width: 480px) {
  body{padding:16px 10px;}
  .tool-container{padding:18px 14px !important;}
  .topbar{margin-bottom:16px;}
  .logo{font-size:16px;gap:6px;}
  .logo img{width:30px;height:30px;}
  .home-btn{padding:8px 12px;font-size:13px;}
  .title,.tool-title{font-size:22px !important;}
  .desc,.tool-subtitle{font-size:13px !important;}
  .features{grid-template-columns:1fr !important;}
  .btns{flex-direction:column;}
  .btn{width:100%;min-width:0;}
  .thumb-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px;}
  .stats-grid{grid-template-columns:1fr 1fr !important;gap:8px;}
  .sec-title{font-size:18px !important;}
  pre{font-size:12px;}
}


/* Toolinium v2 shared UX layer */
.t2-guide{margin-top:28px;padding:26px;background:linear-gradient(145deg,rgba(49,89,232,.08),rgba(124,92,245,.05));border:1px solid rgba(49,89,232,.16);border-radius:22px}
.t2-guide-head{max-width:760px}.t2-kicker{display:inline-block;padding:5px 10px;border-radius:999px;background:rgba(49,89,232,.10);border:1px solid rgba(49,89,232,.18);color:#3159e8;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase}
.t2-guide h2{margin:10px 0 8px;font-size:23px;color:inherit;border:0;padding:0}.t2-guide-head p{color:#64748b;line-height:1.7;font-size:14px}
.t2-guide-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:14px;margin-top:18px}
.t2-guide-card{padding:18px;background:rgba(255,255,255,.035);border:1px solid rgba(127,151,194,.16);border-radius:16px}
.t2-guide-card h3{margin:0 0 12px;font-size:15px}.t2-guide-card h3 i{color:#3159e8;margin-right:7px}
.t2-guide-card ul{padding-left:20px;color:#64748b;line-height:1.8;font-size:13px}
.t2-related{display:flex;flex-wrap:wrap;gap:9px}.t2-related a{display:flex;align-items:center;gap:7px;padding:10px 12px;border-radius:11px;text-decoration:none;color:#475569;background:rgba(127,151,194,.08);border:1px solid rgba(127,151,194,.18);font-size:12px;font-weight:700}
.t2-related a:hover{color:#3159e8;border-color:rgba(49,89,232,.35);transform:translateY(-1px)}
.t2-related i{font-size:9px}.t2-share{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;padding:14px 16px;border:1px solid rgba(127,151,194,.16);border-radius:15px;background:rgba(127,151,194,.05)}
.t2-share strong{display:block;font-size:13px}.t2-share span{display:block;margin-top:2px;color:#64748b;font-size:11px}.t2-share button{border:0;border-radius:10px;padding:10px 13px;background:#3159e8;color:#fff;font-weight:700;cursor:pointer;white-space:nowrap}.t2-footer-note{margin:18px 2px 0;color:#64748b;font-size:11.5px;line-height:1.6}.t2-footer-note i{color:#0fa66b;margin-right:5px}
@media(max-width:700px){.t2-guide{padding:19px;border-radius:18px}.t2-guide-grid{grid-template-columns:1fr}.t2-guide h2{font-size:20px}.t2-share{align-items:stretch;flex-direction:column}.t2-share button{width:100%}}

/* Toolinium shared ad-slot placeholders — empty until AdSense is approved */
.toolinium-ad-slot{width:100%;min-height:90px;margin:24px auto;border:1px dashed rgba(96,165,250,.18);border-radius:14px;background:rgba(15,23,42,.18);display:flex;align-items:center;justify-content:center;color:transparent;overflow:hidden;}
.toolinium-ad-slot[data-ad-ready="false"]{visibility:hidden;min-height:1px;height:1px;margin:6px auto;}
@media(max-width:600px){.toolinium-ad-slot{min-height:70px;margin:18px auto;}}


/* ===== Related Tools (shared fallback style) ===== */
.related-tools{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.related-tools a{padding:10px 16px;background:#0f1d3b;border:1px solid #294577;border-radius:12px;text-decoration:none;color:#cbd5e1;transition:.3s;font-size:14px;display:inline-block;}
.related-tools a:hover{background:#1b3563;color:#fff;}

/* ===== Connection Status Banner (overlay, never pushes layout) ===== */
.ti-conn-banner{position:fixed;top:0;left:0;right:0;width:100%;z-index:99999;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 16px;font-size:14px;font-weight:600;
  font-family:'Segoe UI',Arial,sans-serif;color:#fff;text-align:center;
  transform:translateY(-110%);transition:transform .35s ease;
  box-shadow:0 4px 18px rgba(0,0,0,.25);pointer-events:none;}
.ti-conn-banner.show{transform:translateY(0);}
.ti-conn-banner.offline{background:linear-gradient(90deg,#dc2626,#b91c1c);}
.ti-conn-banner.online{background:linear-gradient(90deg,#16a34a,#15803d);}
@media (max-width:600px){.ti-conn-banner{font-size:12.5px;padding:8px 10px;}}