.new-tool-page { padding-top: 2.4rem; }
.new-tool-page .tool-hero { margin-bottom: 2rem; }
.new-tool-page .tool-hero h1 { margin-bottom: .8rem; }
.new-tool-page .tool-hero p { max-width: 760px; }
.new-tool-card {
  width: min(100%, 920px); background: var(--surface); border: 1px solid var(--border-color);
  border-radius: 24px; box-shadow: var(--shadow-md); padding: 1.5rem; margin: 0 auto 2rem;
}
.dark .new-tool-card { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.08); }
.new-tool-card h2 { font-size: 1.25rem; margin-bottom: 1rem; color: var(--text-main); }
.new-tool-card h3 { font-size: 1.05rem; margin: 1.3rem 0 .7rem; color: var(--text-main); }
.new-tool-card p, .new-tool-card li { color: var(--text-muted); line-height: 1.85; }
.new-tool-card ul { padding-right: 1.2rem; }
.tool-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.tool-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tool-field { display: flex; flex-direction: column; gap: .45rem; margin-bottom: 1rem; }
.tool-field label { font-weight: 800; color: var(--text-main); }
.tool-input, .tool-textarea, .tool-select {
  width: 100%; border: 1px solid var(--border-color); border-radius: 13px; background: var(--bg-color);
  color: var(--text-main); padding: .85rem 1rem; font: inherit; transition: var(--transition);
}
.tool-textarea { min-height: 230px; resize: vertical; line-height: 1.8; }
.tool-textarea.code, .tool-output.code, .tool-input.code { direction: ltr; text-align: left; font-family: 'Fira Code', 'Courier New', monospace; }
.tool-input:focus, .tool-textarea:focus, .tool-select:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(99,102,241,.12); outline: none; }
.tool-file {
  display: block; width: 100%; padding: 1.15rem; border: 2px dashed var(--border-color); border-radius: 16px;
  background: var(--bg-color); color: var(--text-main); cursor: pointer; text-align: center; transition: var(--transition);
}
.tool-file:hover, .tool-file:focus-within { border-color: var(--primary); background: rgba(99,102,241,.06); }
.tool-file input { display: block; width: 100%; margin-top: .7rem; }
.tool-actions { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: 1rem; }
.tool-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; border: 0; border-radius: 12px;
  padding: .8rem 1.2rem; color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary));
  font: inherit; font-weight: 800; cursor: pointer; transition: var(--transition); box-shadow: 0 5px 16px rgba(79,70,229,.2);
}
.tool-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(79,70,229,.3); }
.tool-btn.secondary { background: var(--surface); color: var(--text-main); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); }
.tool-btn.danger { background: #dc2626; }
.tool-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.tool-status { min-height: 1.5rem; margin-top: .8rem; color: var(--text-muted); font-weight: 700; }
.tool-status.success { color: #059669; }
.tool-status.error { color: #dc2626; }
.tool-output {
  width: 100%; min-height: 170px; padding: 1rem; border: 1px solid var(--border-color); border-radius: 13px;
  background: var(--bg-color); color: var(--text-main); white-space: pre-wrap; overflow: auto; line-height: 1.75;
}
.tool-output.large { min-height: 280px; }
.tool-output.html-output { direction: ltr; text-align: left; }
.file-list { display: grid; gap: .6rem; margin-top: 1rem; }
.file-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--bg-color); border: 1px solid var(--border-color); }
.file-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-item small { color: var(--text-muted); white-space: nowrap; }
.drop-zone { padding: 1.5rem; border: 2px dashed var(--border-color); border-radius: 16px; text-align: center; background: var(--bg-color); }
.drop-zone.dragging { border-color: var(--primary); background: rgba(99,102,241,.08); }
.preview-box { margin-top: 1rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-color); }
.preview-box img { display: block; max-width: 100%; max-height: 230px; margin: auto; border-radius: 10px; background: repeating-conic-gradient(#e5e7eb 0 25%, #fff 0 50%) 50% / 20px 20px; }
.meta-preview { border: 1px solid var(--border-color); border-radius: 14px; padding: 1rem; background: var(--surface); }
.meta-preview .preview-title { color: #1a0dab; font-size: 1.2rem; margin-bottom: .35rem; }
.meta-preview .preview-url { color: #188038; font-size: .9rem; direction: ltr; text-align: left; }
.meta-preview .preview-desc { color: var(--text-muted); margin-top: .45rem; line-height: 1.7; }
.diff-result { direction: ltr; text-align: left; font-family: 'Fira Code', monospace; font-size: .9rem; }
.diff-line { display: block; padding: .15rem .4rem; white-space: pre-wrap; }
.diff-line.added { color: #166534; background: rgba(34,197,94,.13); }
.diff-line.removed { color: #991b1b; background: rgba(239,68,68,.13); }
.diff-line.same { color: var(--text-muted); }
.copy-row { display: flex; gap: .6rem; align-items: stretch; }
.copy-row .tool-output { flex: 1; }
.favicon-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-top: 1rem; }
.favicon-size { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: .8rem; border: 1px solid var(--border-color); border-radius: 13px; background: var(--bg-color); }
.favicon-size canvas { width: 64px; height: 64px; image-rendering: auto; border-radius: 8px; background: #fff; }
.notice-box { padding: 1rem 1.1rem; border-radius: 13px; background: rgba(99,102,241,.08); border: 1px solid rgba(99,102,241,.2); color: var(--text-muted); line-height: 1.8; margin-bottom: 1rem; }
@media (max-width: 760px) {
  .new-tool-page { padding-top: 1.5rem; }
  .new-tool-card { padding: 1rem; border-radius: 18px; }
  .tool-grid-2, .tool-grid-3 { grid-template-columns: 1fr; }
  .tool-actions { flex-direction: column; align-items: stretch; }
  .tool-btn { width: 100%; }
  .copy-row { flex-direction: column; }
  .favicon-grid { grid-template-columns: repeat(2, 1fr); }
}

.new-info-wrapper { width: min(100%, 920px); margin: 0 auto 2rem; }
.new-info-wrapper .content-section { background: var(--surface); border: 1px solid var(--border-color); border-radius: 24px; box-shadow: var(--shadow-md); padding: 1.5rem; margin-bottom: 1.25rem; }
.dark .new-info-wrapper .content-section { background: rgba(255,255,255,.025); border-color: rgba(255,255,255,.08); }
.new-info-wrapper .section-title { display: flex; align-items: center; gap: .65rem; color: var(--text-main); font-size: 1.35rem; margin: 0 0 1.1rem; }
.new-info-wrapper .section-title i { color: var(--primary); }
.new-info-wrapper .content-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.new-info-wrapper .content-card { min-height: 145px; padding: 1.05rem; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-color); }
.new-info-wrapper .content-card i { display: inline-flex; width: 38px; height: 38px; align-items: center; justify-content: center; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); margin-bottom: .65rem; }
.new-info-wrapper .content-card h3 { color: var(--text-main); font-size: 1.05rem; margin: 0 0 .4rem; }
.new-info-wrapper .content-card p { color: var(--text-muted); line-height: 1.8; margin: 0; }
.new-info-wrapper .steps-list { display: grid; gap: .75rem; list-style: none; padding: 0; margin: 0; counter-reset: step; }
.new-info-wrapper .steps-list li { counter-increment: step; position: relative; display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem .85rem 1rem; border: 1px solid var(--border-color); border-radius: 14px; background: var(--bg-color); color: var(--text-muted); line-height: 1.8; }
.new-info-wrapper .steps-list li::before { content: counter(step); flex: 0 0 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 900; }
.new-tool-page .related-tools-section { width: min(100%, 920px); margin: 0 auto 2rem; }
.new-tool-page .related-tools-header { text-align: center; margin-bottom: 1rem; }
.new-tool-page .related-tools-title { display: inline-flex; align-items: center; gap: .6rem; justify-content: center; color: var(--text-main); font-size: 1.45rem; margin: 0; }
.new-tool-page .related-tools-title i { color: var(--primary); }
.new-tool-page .related-tools-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.new-tool-page .related-tool-card { min-width: 0; display: flex; align-items: center; gap: .8rem; padding: 1rem; border: 1px solid var(--border-color); border-radius: 16px; background: var(--surface); color: var(--text-main); text-decoration: none; transition: var(--transition); }
.new-tool-page .related-tool-card:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: var(--shadow-hover); }
.new-tool-page .related-tool-icon { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); }
.new-tool-page .related-tool-info { min-width: 0; }
.new-tool-page .related-tool-name { font-weight: 900; color: var(--text-main); margin-bottom: .2rem; }
.new-tool-page .related-tool-desc { color: var(--text-muted); line-height: 1.55; font-size: .9rem; overflow-wrap: anywhere; }
.media-tool-card { width: min(100%, 1000px); }
.media-tool-card .tool-output-canvas { display: block; width: 100%; max-width: 100%; height: auto; border: 1px solid var(--border-color); border-radius: 16px; background: #eef2ff; margin: 1rem auto 0; }
.media-tool-card video { display: block; width: 100%; max-height: 480px; border-radius: 14px; background: #020617; margin-top: 1rem; }
.media-tool-card .range-row { display: flex; align-items: center; gap: .8rem; }
.media-tool-card .range-row input[type=range] { flex: 1; }
.media-tool-card .range-value { min-width: 4.5rem; text-align: center; padding: .4rem .65rem; border-radius: 9px; background: rgba(99,102,241,.1); color: var(--primary); font-weight: 800; }
.media-tool-card .color-input { width: 100%; height: 48px; padding: .25rem; border: 1px solid var(--border-color); border-radius: 12px; background: var(--bg-color); }
.media-tool-card .canvas-help { color: var(--text-muted); line-height: 1.75; margin-top: .7rem; }
@media (max-width: 760px) {
  .new-info-wrapper .content-section { padding: 1rem; border-radius: 18px; }
  .new-info-wrapper .content-grid, .new-tool-page .related-tools-grid { grid-template-columns: 1fr; }
  .media-tool-card .tool-grid-2, .media-tool-card .tool-grid-3 { grid-template-columns: 1fr; }
}

.new-tool-page .new-info-wrapper{display:block;clear:both;width:min(100%,1040px);margin:1.5rem auto 2rem}
.new-tool-page .new-info-wrapper .content-section{display:block;box-sizing:border-box;width:100%;background:var(--surface,#fff);border:1px solid var(--border-color,#e2e8f0);border-radius:24px;box-shadow:var(--shadow-md,0 14px 40px rgba(15,23,42,.08));padding:1.5rem;margin:0 0 1.25rem;overflow:hidden}
.new-tool-page .new-info-wrapper .content-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;width:100%}
.new-tool-page .new-info-wrapper .content-card{display:block;box-sizing:border-box;min-height:150px;padding:1.1rem;border:1px solid var(--border-color,#e2e8f0);border-radius:16px;background:var(--bg-color,#f8fafc);color:var(--text-main,#0f172a)}
.new-tool-page .new-info-wrapper .content-card p,.new-tool-page .new-info-wrapper .info-lead{color:var(--text-muted,#64748b);line-height:1.85}
.new-tool-page .new-info-wrapper .steps-list{display:grid;gap:.75rem;padding:0;margin:0;list-style:none}
.new-tool-page .new-info-wrapper .steps-list li{display:flex;align-items:flex-start;gap:.75rem;padding:.85rem 1rem;border:1px solid var(--border-color,#e2e8f0);border-radius:14px;background:var(--bg-color,#f8fafc);color:var(--text-main,#0f172a);line-height:1.8}
.new-tool-page .new-info-wrapper .steps-list li::before{flex:0 0 30px;display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:var(--primary,#4f46e5);color:#fff;font-weight:900}
.new-tool-page .faq-section{display:block;box-sizing:border-box;width:min(100%,1040px);margin:0 auto 1.5rem;padding:1.5rem;background:var(--surface,#fff);border:1px solid var(--border-color,#e2e8f0);border-radius:24px;box-shadow:var(--shadow-md,0 14px 40px rgba(15,23,42,.08));overflow:hidden}
.new-tool-page .faq-section h2{display:flex;align-items:center;gap:.6rem;color:var(--text-main,#0f172a);margin:0 0 1rem}
.new-tool-page .faq-item{display:block;margin:.75rem 0;border:1px solid var(--border-color,#e2e8f0);border-radius:16px;background:var(--bg-color,#f8fafc);overflow:hidden}
.new-tool-page .faq-question{display:flex;align-items:center;gap:.55rem;padding:1rem;color:var(--text-main,#0f172a);font-weight:900;line-height:1.7}
.new-tool-page .faq-question i{color:var(--primary,#4f46e5)}
.new-tool-page .faq-answer{display:block;padding:0 1rem 1rem;color:var(--text-muted,#64748b);line-height:1.85}
.new-tool-page .related-tools-section{display:block;box-sizing:border-box;width:min(100%,1040px);margin:0 auto 2rem;padding:1.5rem;background:var(--surface,#fff);border:1px solid var(--border-color,#e2e8f0);border-radius:24px;box-shadow:var(--shadow-md,0 14px 40px rgba(15,23,42,.08));overflow:hidden}
.new-tool-page .related-tools-header{display:block;text-align:center;margin:0 0 1rem}
.new-tool-page .related-tools-title{display:inline-flex;align-items:center;gap:.6rem;color:var(--text-main,#0f172a);margin:0}
.new-tool-page .related-tools-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;width:100%}
.new-tool-page .related-tool-card{display:flex;align-items:center;gap:.8rem;min-width:0;box-sizing:border-box;padding:1rem;border:1px solid var(--border-color,#e2e8f0);border-radius:16px;background:var(--bg-color,#f8fafc);color:var(--text-main,#0f172a);text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.new-tool-page .related-tool-card:hover{transform:translateY(-3px);border-color:var(--primary,#4f46e5);box-shadow:0 14px 28px rgba(79,70,229,.14)}
.new-tool-page .related-tool-icon{flex:0 0 44px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:13px;background:linear-gradient(135deg,var(--primary,#4f46e5),var(--secondary,#ec4899));color:#fff}
.new-tool-page .related-tool-info{min-width:0}.new-tool-page .related-tool-name{color:var(--text-main,#0f172a);font-weight:900;margin-bottom:.2rem}.new-tool-page .related-tool-desc{color:var(--text-muted,#64748b);font-size:.9rem;line-height:1.55;overflow-wrap:anywhere}
.dark .new-tool-page .new-info-wrapper .content-section,.dark .new-tool-page .faq-section,.dark .new-tool-page .related-tools-section{background:rgba(15,23,42,.88);border-color:rgba(148,163,184,.2);box-shadow:0 18px 48px rgba(0,0,0,.24)}
.dark .new-tool-page .new-info-wrapper .content-card,.dark .new-tool-page .new-info-wrapper .steps-list li,.dark .new-tool-page .faq-item,.dark .new-tool-page .related-tool-card{background:rgba(30,41,59,.72);border-color:rgba(148,163,184,.18)}
@media (max-width:760px){.new-tool-page .new-info-wrapper .content-grid,.new-tool-page .related-tools-grid{grid-template-columns:1fr}.new-tool-page .new-info-wrapper .content-section,.new-tool-page .faq-section,.new-tool-page .related-tools-section{padding:1rem;border-radius:18px}}

.new-tool-page .new-info-wrapper,
.new-tool-page .faq-section,
.new-tool-page .related-tools-section { display:block !important; visibility:visible !important; opacity:1 !important; }
.new-tool-page .new-info-wrapper { width:min(100%,1040px) !important; margin-inline:auto !important; }
.new-tool-page .new-info-wrapper .content-section,
.new-tool-page .faq-section,
.new-tool-page .related-tools-section { box-sizing:border-box !important; float:none !important; clear:both !important; }
.new-tool-page .new-info-wrapper .content-grid,
.new-tool-page .related-tools-grid { display:grid !important; width:100% !important; align-items:stretch !important; }
.new-tool-page .new-info-wrapper .content-card,
.new-tool-page .faq-item,
.new-tool-page .related-tool-card { display:flex !important; flex-direction:column !important; position:relative !important; white-space:normal !important; }
.new-tool-page .new-info-wrapper .content-card h3,
.new-tool-page .new-info-wrapper .content-card p,
.new-tool-page .faq-question,
.new-tool-page .faq-answer,
.new-tool-page .related-tool-name,
.new-tool-page .related-tool-desc { display:block !important; white-space:normal !important; overflow-wrap:anywhere !important; }
.new-tool-page .faq-question { flex-direction:row !important; }
.new-tool-page .related-tool-card { flex-direction:row !important; }
@media (max-width:760px) {
  .new-tool-page .new-info-wrapper .content-grid,
  .new-tool-page .related-tools-grid { grid-template-columns:1fr !important; }
}

/* Final unscoped resilience layer: generated tool pages use these classes directly. */
.new-info-wrapper,
.new-info-wrapper .content-section,
.faq-section,
.related-tools-section{display:block !important;box-sizing:border-box !important;width:100% !important;max-width:1040px !important;margin-inline:auto !important;float:none !important;clear:both !important;overflow:visible !important;}
.new-info-wrapper{margin-block:1.5rem !important;}
.new-info-wrapper .content-section,
.faq-section,
.related-tools-section{padding:1.5rem !important;border:1px solid var(--border-color,#e2e8f0) !important;border-radius:24px !important;background:var(--surface,#fff) !important;box-shadow:0 14px 40px rgba(15,23,42,.08) !important;}
.new-info-wrapper .content-grid,
.related-tools-grid{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:1rem !important;width:100% !important;align-items:stretch !important;}
.new-info-wrapper .content-card,
.related-tool-card{display:flex !important;position:relative !important;min-width:0 !important;box-sizing:border-box !important;flex-direction:column !important;gap:.55rem !important;padding:1rem !important;border:1px solid var(--border-color,#e2e8f0) !important;border-radius:16px !important;background:var(--bg-color,#f8fafc) !important;white-space:normal !important;overflow-wrap:anywhere !important;}
.new-info-wrapper .content-card h3,
.new-info-wrapper .content-card p,
.related-tool-name,
.related-tool-desc{display:block !important;margin:0 !important;white-space:normal !important;overflow-wrap:anywhere !important;line-height:1.75 !important;}
.new-info-wrapper .content-card h3,
.related-tool-name{color:var(--text-main,#0f172a) !important;font-weight:900 !important;}
.new-info-wrapper .content-card p,
.related-tool-desc{color:var(--text-muted,#64748b) !important;}
.faq-section h2,.related-tools-title{display:flex !important;align-items:center !important;gap:.6rem !important;margin:0 0 1rem !important;color:var(--text-main,#0f172a) !important;}
.faq-item{display:block !important;margin:.75rem 0 !important;border:1px solid var(--border-color,#e2e8f0) !important;border-radius:16px !important;background:var(--bg-color,#f8fafc) !important;overflow:hidden !important;white-space:normal !important;}
.faq-question{display:flex !important;align-items:center !important;gap:.55rem !important;padding:1rem !important;color:var(--text-main,#0f172a) !important;font-weight:900 !important;line-height:1.7 !important;white-space:normal !important;}
.faq-answer{display:block !important;padding:0 1rem 1rem !important;color:var(--text-muted,#64748b) !important;line-height:1.85 !important;white-space:normal !important;overflow-wrap:anywhere !important;}
.related-tools-section{margin-bottom:2rem !important;}
.related-tools-header{text-align:center !important;margin:0 0 1rem !important;}
.related-tool-card{flex-direction:row !important;align-items:center !important;text-decoration:none !important;color:var(--text-main,#0f172a) !important;}
.related-tool-icon{flex:0 0 44px !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;width:44px !important;height:44px !important;border-radius:13px !important;background:linear-gradient(135deg,var(--primary,#4f46e5),var(--secondary,#ec4899)) !important;color:#fff !important;}
.related-tool-info{min-width:0 !important;display:block !important;}
.dark .new-info-wrapper .content-section,.dark .faq-section,.dark .related-tools-section{background:rgba(15,23,42,.9) !important;border-color:rgba(148,163,184,.22) !important;box-shadow:0 18px 48px rgba(0,0,0,.24) !important;}
.dark .new-info-wrapper .content-card,.dark .faq-item,.dark .related-tool-card{background:rgba(30,41,59,.78) !important;border-color:rgba(148,163,184,.2) !important;}
.dark .new-info-wrapper .content-card h3,.dark .faq-section h2,.dark .faq-question,.dark .related-tools-title,.dark .related-tool-name{color:#f8fafc !important;}
.dark .new-info-wrapper .content-card p,.dark .faq-answer,.dark .related-tool-desc{color:#cbd5e1 !important;}
@media (max-width:760px){.new-info-wrapper .content-grid,.related-tools-grid{grid-template-columns:1fr !important}.new-info-wrapper .content-section,.faq-section,.related-tools-section{padding:1rem !important;border-radius:18px !important;}}