:root {
     --brand: #e31b23;
     --brand-dark: #c2161d;
     --pill-bg: #f7f7f9;
     --card-icon-bg: #fff5f5;
 }

 body {
     font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
     color: #222;
 }

 /* Navbar */
 .navbar-brand span.heart {
     color: var(--brand)
 }

 .nav-link {
     font-weight: 600
 }

 .nav-link:hover {
     color: var(--brand)
 }

 /* Hero */
 .hero {
     padding: 64px 0 24px;
     background: linear-gradient(180deg, #fff, #fafbff)
 }

 .hero h1 {
     font-weight: 800;
     letter-spacing: -.3px
 }

 .hero p.lead {
     color: #4b5563
 }

 /* Filter Pills */
 .tool-filters {
     gap: .75rem;
     flex-wrap: wrap
 }

 .filter-pill {
     border-radius: 999px;
     background: var(--pill-bg);
     border: 1px solid #eee;
     padding: .5rem .9rem;
     font-weight: 600;
     cursor: pointer;
     transition: all .2s
 }

 .filter-pill.active,
 .filter-pill:hover {
     background: #fff;
     border-color: var(--brand);
     color: var(--brand);
     box-shadow: 0 2px 10px rgba(227, 27, 35, .12)
 }

 /* Cards */
 .tool-card {
     border: 1px solid #eee;
     border-radius: 18px;
     padding: 18px;
     background: #fff;
     transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
     height: 100%
 }

 .tool-card:hover {
     transform: translateY(-4px);
     box-shadow: 0 10px 24px rgba(0, 0, 0, .06);
     border-color: #eaeaea
 }

 .tool-icon {
     width: 44px;
     height: 44px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     border-radius: 12px;
     background: var(--card-icon-bg);
     color: var(--brand);
     font-size: 20px
 }

 .tool-card h3 {
     font-size: 1.05rem;
     margin: 12px 0 6px;
     font-weight: 800
 }

 .tool-card p {
     margin: 0;
     color: #6b7280;
     font-size: .94rem
 }

 .tool-card a.stretched-link {
     text-decoration: none
 }

 /* Sections */
 .section-title {
     font-weight: 800;
     letter-spacing: -.2px
 }

 .work-card {
     border-radius: 18px;
     border: 1px solid #eee;
     transition: box-shadow .2s;
     background: #fff
 }

 .work-card:hover {
     box-shadow: 0 12px 28px rgba(0, 0, 0, .08)
 }

 .promo-banner {
     background: #fff7e6;
     border: 1px solid #ffe3b5;
     border-radius: 22px
 }

 .promo-banner .btn {
     background: #ffcc66;
     border: none;
     font-weight: 700
 }

 .trusted {
     color: #6b7280
 }

 /* Footer */
 footer {
     background: #0f172a;
     color: #cbd5e1
 }

 footer a {
     color: #cbd5e1;
     text-decoration: none
 }

 footer a:hover {
     color: #fff
 }

 .footer-title {
     color: #94a3b8;
     font-weight: 700;
     font-size: .9rem;
     margin-bottom: .75rem;
     text-transform: uppercase
 }

 .badge-store {
     border: 1px solid #334155;
     border-radius: 10px;
     padding: .5rem .75rem;
     display: inline-flex;
     gap: .5rem;
     align-items: center
 }

 .language-select {
     background: #0b1220;
     border: 1px solid #23314f;
     color: #cbd5e1;
     border-radius: 10px;
     padding: .5rem .75rem
 }

 /* Utility */
 .muted {
     color: #6b7280
 }
 /* === Merge Tool Styles (FPDI version uses same UI) === */
.tool-hero{
  padding:64px 0 24px;
  background:linear-gradient(180deg,#fff,#fafbff);
}
.merge-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:22px;
  padding:24px;
}
.dropzone{
  min-height:260px;
  border:2px dashed #e5e7eb;
  border-radius:18px;
  background:#fcfcfd;
  transition:.2s ease-in-out;
}
.dropzone:hover{
  border-color:#e31b23;
  box-shadow:0 8px 24px rgba(227,27,35,.10);
  transform:translateY(-2px);
}
.dz-icon{
  font-size:48px;
  color:#e31b23;
  animation:floatY 2.2s ease-in-out infinite;
}
@keyframes floatY{
  0%{ transform: translateY(0) }
  50%{ transform: translateY(-6px) }
  100%{ transform: translateY(0) }
}
.order-card{
  background:#fff;
  border:1px solid #f0f0f0;
  border-radius:16px;
  padding:16px;
}
.sortable li{
  border:1px solid #f1f1f1;
  border-radius:12px;
  padding:10px 12px;
  margin-bottom:10px;
  background:#fff;
  display:flex;
  align-items:center;
  gap:10px;
  transition: box-shadow .15s ease, transform .15s ease;
}
.sortable li.dragging{
  opacity:.85;
  transform:scale(0.99);
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.file-handle{ cursor:grab; color:#9ca3af; font-size:18px; }
.file-name{ flex:1; word-break:break-all }
.file-size{ color:#6b7280; font-size:.85rem }
.file-remove{ color:#ef4444; cursor:pointer }
.progress{ height:10px; border-radius:999px; overflow:hidden; }
/* === Split Tool Styles === */
.input-group .input-group-text i { opacity: .9; }
.range-pill { border-radius: 999px; }
#splitSelected .fw-bold { word-break: break-all; }
/* === Compress Tool tweaks === */
#cmpSelected .fw-bold { word-break: break-all; }
.list-group .list-group-item { border-radius: 12px; margin-bottom: 8px; }