* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Inter', -apple-system, system-ui, 'Segoe UI', Roboto, sans-serif; }
body {
  background: #fbf3e8;
  min-height: 100vh;
  padding: 20px;
  transition: background 0.3s, color 0.3s;
  position: relative;
  overflow-x: hidden;
}
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" opacity="0.08"><path d="M50 0 L61.8 38.2 L100 50 L61.8 61.8 L50 100 L38.2 61.8 L0 50 L38.2 38.2 L50 0Z" fill="%23e67e22"/><circle cx="50" cy="50" r="18" fill="none" stroke="%23d4a373" stroke-width="2"/><path d="M50 20 L55 40 L75 45 L55 50 L50 70 L45 50 L25 45 L45 40 L50 20Z" fill="%23c0392b" opacity="0.3"/><circle cx="25" cy="25" r="6" fill="%23f39c12" opacity="0.2"/><circle cx="75" cy="75" r="8" fill="%232ecc71" opacity="0.2"/><circle cx="20" cy="80" r="5" fill="%233498db" opacity="0.2"/></svg>');
  background-size: 180px 180px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 0;
}
body.dark-mode { background: #1a1a2e; color: #e0e0e0; }
body.dark-mode::before { opacity: 0.15; }
body.dark-mode .app-header,
body.dark-mode .stat-badge,
body.dark-mode .tool-card,
body.dark-mode .footer-note,
body.dark-mode .tool-page-panel,
body.dark-mode .drop-zone,
body.dark-mode .file-list,
body.dark-mode .input-group input,
body.dark-mode .input-group select,
body.dark-mode .input-group textarea,
body.dark-mode .preview-area,
body.dark-mode .canvas-wrap,
body.dark-mode .page-thumb,
body.dark-mode .sig-canvas,
body.dark-mode .note-box,
body.dark-mode .info-table {
  background: #2a2a3e !important;
  border-color: #444466 !important;
  color: #e0e0e0 !important;
}
body.dark-mode .stat-badge { color: #ccc; }
body.dark-mode .tool-card .tool-name { color: #eee; }
body.dark-mode .logo-area h1 { color: #f0e6d3; }
body.dark-mode .logo-area span { color: #aaa; }
body.dark-mode .back-btn { background: #3a3a5a; color: #ddd; }
body.dark-mode .back-btn:hover { background: #4a4a6a; }
body.dark-mode .footer-note { border-color: #444466; }
body.dark-mode .tool-card:hover { border-color: #e67e22; }
body.dark-mode .panel-header { border-color: #444466; }
body.dark-mode .drop-zone:hover { border-color: #e67e22; background: #2a2a4a; }
body.dark-mode .file-item { border-color: #444466; }
body.dark-mode .file-item .name { color: #ddd; }
body.dark-mode .btn-secondary { background: #3a3a5a; color: #ddd; border-color: #555577; }
body.dark-mode .btn-secondary:hover { background: #4a4a6a; }
body.dark-mode .status-msg { background: #2a3a3a; color: #8fbc8f; }
body.dark-mode .status-msg.error { background: #3a2a2a; color: #f0a0a0; }
body.dark-mode .status-msg.info { background: #2a2a4a; color: #87ceeb; }
body.dark-mode .note-box { background: #3a3a1a; border-left-color: #f39c12; color: #e0d0a0; }
body.dark-mode .stat-badge i { color: #e67e22; }
body.dark-mode .tool-card i { color: #e67e22; }
body.dark-mode .tool-card:hover i { color: #f39c12; }
body.dark-mode .logo-icon { background: linear-gradient(135deg, #e67e22, #f39c12); }
body.dark-mode .btn-primary { background: linear-gradient(135deg, #e67e22, #f39c12); }
body.dark-mode .theme-toggle { background: #2a2a3e; color: #eee; border-color: #444466; }
body.dark-mode .theme-toggle:hover { background: #3a3a5a; }
body.dark-mode .search-wrapper { background: #2a2a3e; border-color: #444466; }
body.dark-mode .search-wrapper input { color: #e0e0e0; }
body.dark-mode .search-wrapper input::placeholder { color: #7a8a9a; }

.app-header { max-width: 1400px; margin: 0 auto 30px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; position: relative; z-index: 1; }
.logo-area { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.logo-icon { background: linear-gradient(135deg, #c0392b, #e67e22); color: white; width: 60px; height: 60px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 32px; box-shadow: 0 10px 20px -8px rgba(192,57,43,0.35); flex-shrink:0; }
.logo-area h1 { font-weight: 800; font-size: 2.2rem; color: #0b2a3b; letter-spacing: -0.02em; }
.logo-area span { color: #4d6f83; font-weight: 400; font-size: 1rem; }
.header-stats { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.stat-badge { background: white; padding: 8px 20px; border-radius: 60px; font-size: 0.9rem; color: #1d445b; box-shadow: 0 2px 8px rgba(0,0,0,0.04); border: 1px solid #e0eaf0; }
.stat-badge i { color: #c0392b; margin-right: 8px; }
.header-controls { display: flex; gap: 12px; align-items: center; }
.theme-toggle, .back-btn { background: white; border: 1px solid #e0eaf0; border-radius: 40px; padding: 10px 20px; font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.3s; color: #1d445b; box-shadow: 0 2px 8px rgba(0,0,0,0.04); text-decoration:none; }
.theme-toggle:hover, .back-btn:hover { background: #f0f6fc; border-color: #c0392b; }

.search-wrapper { display: flex; align-items: center; gap: 6px; background: white; border: 1px solid #e0eaf0; border-radius: 60px; padding: 4px 4px 4px 18px; box-shadow: 0 2px 8px rgba(0,0,0,0.04); transition: 0.2s; min-width: 180px; }
.search-wrapper:focus-within { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,0.12); }
.search-wrapper i { color: #8aa9bb; font-size: 0.95rem; }
.search-wrapper input { border: none; background: transparent; padding: 10px 0; font-size: 0.9rem; width: 100%; outline: none; color: #1d445b; }
.search-wrapper input::placeholder { color: #a0bccf; font-weight: 400; }
.search-wrapper .clear-search { background: none; border: none; color: #b0c8d8; padding: 6px 12px 6px 6px; border-radius: 40px; cursor: pointer; font-size: 1rem; display: none; }
.search-wrapper .clear-search.visible { display: block; }
.search-wrapper .clear-search:hover { color: #c0392b; }

.tool-grid { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 24px; position: relative; z-index: 1; }
.tool-card { background: white; border-radius: 28px; padding: 28px 16px 22px; display: flex; flex-direction: column; align-items: center; text-align: center; border: 1px solid #e8eef3; transition: all 0.25s ease; cursor: pointer; min-height: 185px; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,0.03); position: relative; overflow: hidden; text-decoration:none; }
.tool-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(192,57,43,0.04), transparent); opacity: 0; transition: 0.3s; }
.tool-card:hover::before { opacity: 1; }
.tool-card:hover { transform: translateY(-6px); box-shadow: 0 16px 40px -12px rgba(0,30,50,0.18); border-color: #c0392b; }
.tool-card i { font-size: 3.2rem; color: #c0392b; margin-bottom: 14px; transition: 0.3s; }
.tool-card:hover i { transform: scale(1.05); color: #a83226; }
.tool-card .tool-name { font-weight: 600; font-size: 0.95rem; color: #12303f; line-height: 1.3; }
.tool-card .tool-badge { font-size: 0.6rem; background: #eaf1f9; padding: 3px 12px; border-radius: 40px; margin-top: 10px; color: #2c5770; font-weight: 600; letter-spacing: 0.3px; text-transform: uppercase; }
.tool-card .hot-badge { background: #c0392b; color: white; }
.tool-card.hidden { display: none; }

.footer-note { max-width: 1400px; margin: 40px auto 0; font-size: 0.85rem; color: #5e7e92; display: flex; justify-content: center; gap: 32px; flex-wrap: wrap; border-top: 1px solid #dae6ef; padding-top: 30px; position: relative; z-index: 1; }
.footer-note a { color: #c0392b; text-decoration: none; font-weight: 500; }
.footer-note a:hover { text-decoration: underline; }
.footer-note i { color: #c0392b; margin-right: 6px; }
.footer-pages { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.footer-pages a { color: #5e7e92; text-decoration: none; font-weight: 500; transition: 0.2s; }
.footer-pages a:hover { color: #c0392b; text-decoration: underline; }

.tool-page-panel { background: white; max-width: 960px; width: 100%; margin: 0 auto; border-radius: 44px; padding: 35px 40px; position: relative; z-index:1; box-shadow: 0 20px 60px -20px rgba(0,30,50,0.15); }
.panel-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 2px solid #f0f5fa; flex-wrap:wrap; gap:14px; }
.panel-header h2 { display: flex; align-items: center; gap: 14px; font-size: 1.8rem; color: #0b2a3b; }
.panel-header h2 i { color: #c0392b; font-size: 2.2rem; }
.panel-body { color: #1d3d51; }
.tool-interface { background: #f8fafc; border-radius: 24px; padding: 28px; border: 1px solid #e8eef3; }
.drop-zone { border: 2.5px dashed #c0d4e2; border-radius: 20px; padding: 35px 20px; text-align: center; cursor: pointer; transition: 0.25s; background: white; }
.drop-zone:hover { border-color: #c0392b; background: #fef6f4; }
.drop-zone i { font-size: 3.2rem; color: #b13e3e; margin-bottom: 10px; display: block; }
.drop-zone p { font-weight: 500; color: #1f3d4f; }
.file-list { background: #f2f8fe; border-radius: 16px; padding: 12px 16px; margin: 14px 0; max-height: 220px; overflow-y: auto; }
.file-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 6px; border-bottom: 1px solid #dae6ef; }
.file-item:last-child { border-bottom: none; }
.file-item .name { display: flex; align-items: center; gap: 12px; font-weight: 500; color: #153243; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.file-item .name i { color: #c0392b; font-size: 1.2rem; }
.file-item .remove-btn { background: none; border: none; color: #a94442; cursor: pointer; padding: 6px 10px; border-radius: 30px; font-size: 1.1rem; transition: 0.15s; }
.file-item .remove-btn:hover { background: #f0d6d6; }
.btn { padding: 14px 32px; border-radius: 60px; font-weight: 600; border: none; cursor: pointer; transition: 0.25s; display: inline-flex; align-items: center; gap: 12px; font-size: 1rem; }
.btn-primary { background: linear-gradient(135deg, #c0392b, #e74c3c); color: white; box-shadow: 0 8px 20px -8px rgba(192,57,43,0.35); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -8px rgba(192,57,43,0.45); }
.btn-secondary { background: #eef4fa; color: #1e3f53; border: 1px solid #cbdbe8; }
.btn-secondary:hover { background: #e1eaf3; transform: translateY(-2px); }
.btn-success { background: #27ae60; color: white; box-shadow: 0 8px 20px -8px rgba(39,174,96,0.35); }
.btn-success:hover { transform: translateY(-2px); }
.btn:disabled { opacity: 0.5; pointer-events: none; }
.status-msg { margin-top: 14px; padding: 12px 24px; border-radius: 40px; background: #e4f0e8; color: #1c5a3c; font-weight: 500; display: inline-block; }
.status-msg.error { background: #fce8e6; color: #8f2e24; }
.status-msg.info { background: #dbeafe; color: #1a4a7a; }
.input-group { margin: 14px 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.input-group input, .input-group select, .input-group textarea { padding: 12px 18px; border-radius: 40px; border: 1.5px solid #cbdbe8; font-size: 0.95rem; background: white; flex: 1; min-width: 160px; transition: 0.2s; }
.input-group textarea { border-radius: 16px; }
.input-group input:focus, .input-group select:focus, .input-group textarea:focus { outline: none; border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,0.1); }
.input-group label { font-weight: 600; color: #1d445b; min-width: 100px; }
.action-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 16px; }
.preview-area { background: white; border-radius: 16px; padding: 16px; border: 1px solid #e0eaf0; margin: 12px 0; max-height: 300px; overflow-y: auto; font-size: 0.95rem; white-space: pre-wrap; font-family: monospace; }
.canvas-wrap { border: 1px solid #dae6ef; border-radius: 12px; overflow: hidden; margin: 10px 0; background: #fff; }
.canvas-wrap canvas { max-width: 100%; display: block; }
.sig-canvas { border: 2px solid #c0d4e2; border-radius: 12px; cursor: crosshair; background: white; touch-action: none; max-width:100%; display:block; margin: 12px 0; }
.info-table { width: 100%; border-collapse: collapse; margin: 12px 0; }
.info-table td { padding: 10px 14px; border-bottom: 1px solid #e8eef3; font-size: 0.92rem; }
.info-table td:first-child { font-weight: 600; color: #1d445b; width: 40%; }
.note-box { background: #fff8e1; border-left: 4px solid #f39c12; padding: 12px 16px; border-radius: 0 12px 12px 0; margin: 10px 0; font-size: 0.9rem; color: #7d6008; }
.mandala-bg { position: fixed; bottom: 20px; right: 20px; opacity: 0.04; font-size: 160px; pointer-events: none; z-index: 0; }

.static-page-panel { background: white; max-width: 700px; width:100%; margin: 0 auto; border-radius: 44px; padding: 35px 40px; position:relative; z-index:1; box-shadow: 0 20px 60px -20px rgba(0,30,50,0.15); }
body.dark-mode .static-page-panel { background:#2a2a3e !important; color:#e0e0e0 !important; }

/* ─── Long-form tool content sections ─────────────────────────────────── */
.content-section { margin-top: 44px; padding-top: 36px; border-top: 2px solid #f0f5fa; }
body.dark-mode .content-section { border-color: #444466; }
.content-section h3 { font-size: 1.5rem; color: #0b2a3b; margin-bottom: 16px; display: flex; align-items: center; gap: 12px; }
body.dark-mode .content-section h3 { color: #f0e6d3; }
.content-section h3 i { color: #c0392b; font-size: 1.3rem; }
body.dark-mode .content-section h3 i { color: #e67e22; }
.content-section p { line-height: 1.75; color: #33505f; margin-bottom: 16px; font-size: 1rem; }
body.dark-mode .content-section p { color: #c8c8d8; }
.content-section + .content-section { margin-top: 36px; padding-top: 30px; }

.steps-list { list-style: none; counter-reset: step-counter; padding: 0; margin: 0; }
.steps-list li { counter-increment: step-counter; position: relative; padding: 14px 0 14px 52px; border-bottom: 1px solid #f0f5fa; line-height: 1.6; color: #1d3d51; }
body.dark-mode .steps-list li { border-color: #444466; color: #dcdce8; }
.steps-list li:last-child { border-bottom: none; }
.steps-list li::before { content: counter(step-counter); position: absolute; left: 0; top: 12px; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #c0392b, #e74c3c); color: white; font-weight: 700; font-size: 0.95rem; display: flex; align-items: center; justify-content: center; }

.faq-item { border-bottom: 1px solid #f0f5fa; padding: 16px 0; }
body.dark-mode .faq-item { border-color: #444466; }
.faq-item:last-child { border-bottom: none; }
.faq-item .faq-q { font-weight: 700; color: #12303f; margin-bottom: 8px; display: flex; gap: 10px; align-items: flex-start; font-size: 1.02rem; }
body.dark-mode .faq-item .faq-q { color: #f0e6d3; }
.faq-item .faq-q i { color: #c0392b; margin-top: 3px; flex-shrink: 0; }
.faq-item .faq-a { color: #33505f; line-height: 1.7; padding-left: 26px; }
body.dark-mode .faq-item .faq-a { color: #c8c8d8; }

.benefits-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.benefits-list li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.5; color: #1d3d51; background: #f8fafc; border: 1px solid #e8eef3; padding: 12px 16px; border-radius: 14px; }
body.dark-mode .benefits-list li { background: #23233a; border-color: #444466; color: #dcdce8; }
.benefits-list li i { color: #27ae60; margin-top: 3px; flex-shrink: 0; }

.related-tools-grid { display: flex; flex-wrap: wrap; gap: 12px; }
.related-tool-link { display: inline-flex; align-items: center; gap: 10px; background: #eef4fa; border: 1px solid #cbdbe8; color: #1e3f53; text-decoration: none; padding: 10px 20px; border-radius: 40px; font-weight: 600; font-size: 0.92rem; transition: 0.2s; }
.related-tool-link:hover { background: #c0392b; border-color: #c0392b; color: white; transform: translateY(-2px); }
body.dark-mode .related-tool-link { background: #3a3a5a; border-color: #555577; color: #ddd; }
body.dark-mode .related-tool-link:hover { background: #e67e22; border-color: #e67e22; color: #1a1a2e; }
.related-tool-link i { color: #c0392b; }
.related-tool-link:hover i { color: white; }
body.dark-mode .related-tool-link:hover i { color: #1a1a2e; }

/* ─── Scroll-to-top button ─────────────────────────────────────────────── */
.scroll-top-btn {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  background: linear-gradient(135deg, #c0392b, #e74c3c);
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px -8px rgba(192,57,43,0.5);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.2s;
  z-index: 900;
}
.scroll-top-btn.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.scroll-top-btn:hover {
  background: linear-gradient(135deg, #a83226, #c0392b);
  transform: translateY(-3px);
}
body.dark-mode .scroll-top-btn {
  background: linear-gradient(135deg, #e67e22, #f39c12);
  box-shadow: 0 10px 24px -8px rgba(230,126,34,0.5);
}
body.dark-mode .scroll-top-btn:hover {
  background: linear-gradient(135deg, #d1691a, #e67e22);
}
@media (max-width: 600px) {
  .scroll-top-btn { right: 16px; bottom: 16px; width: 46px; height: 46px; font-size: 1.05rem; }
}

@media (max-width: 600px) {
  .tool-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; }
  .tool-page-panel, .static-page-panel { padding: 20px; border-radius: 28px; }
  .tool-card i { font-size: 2.6rem; }
  .tool-card { min-height: 155px; padding: 20px 12px; }
  .panel-header h2 { font-size: 1.4rem; }
  .search-wrapper { min-width: 120px; }
}
.tool-page-panel::-webkit-scrollbar, .file-list::-webkit-scrollbar, .preview-area::-webkit-scrollbar { width: 6px; }
.tool-page-panel::-webkit-scrollbar-track, .file-list::-webkit-scrollbar-track, .preview-area::-webkit-scrollbar-track { background: #f0f5fa; border-radius: 10px; }
.tool-page-panel::-webkit-scrollbar-thumb, .file-list::-webkit-scrollbar-thumb, .preview-area::-webkit-scrollbar-thumb { background: #c0d4e2; border-radius: 10px; }