:root {
  /* Background */
  --bg-main: linear-gradient(120deg, #061a3a 0%, #0a1733 45%, #1a0b2e 100%);
  --bg-card: #161b22;
  --bg-input: #1f2633;

  /* Brand */
  --primary: #ff4d4d;
  --primary-hover: #ff6b6b;

  /* Text */
  --text-main: #e6edf3;
  --text-muted: #8b949e;

  /* Border */
  --border: #30363d;
}

/* =========================
   BASE
========================= */

body {
  background: var(--bg-main);
  background-image:
    radial-gradient(900px circle at 15% 10%, rgba(0,153,255,0.14), transparent 55%),
    radial-gradient(900px circle at 85% 10%, rgba(255,0,204,0.12), transparent 55%),
    var(--bg-main);
  background-attachment: fixed;
  color: var(--text-main);
  font-family: "Inter", system-ui, sans-serif;
}

.container {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =========================
   HEADER / NAV
========================= */

.header-bar {
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.10);
  backdrop-filter: blur(10px);
}

.top-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}

.top-nav a {
  color: var(--text-main);
  text-decoration: none;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
  transition: all 0.25s ease;
}

.top-nav a:hover {
  background: rgba(255,77,77,0.18);
  border-color: rgba(255,77,77,0.35);
}

.logo-section {
  text-align: center;
}

.logo-section img {
  margin-bottom: 10px;
}

/* =========================
   TITLES
========================= */

.tool-title {
  font-size: 34px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: 0.4px;
  text-shadow: 0 10px 30px rgba(0,0,0,0.55);
}

.tool-title::after {
  content: "";
  display: block;
  width: 140px;
  height: 3px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(0,153,255,0),
    rgba(0,153,255,0.6),
    rgba(255,77,77,0.6),
    rgba(167,62,255,0.6),
    rgba(167,62,255,0)
  );
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}

.tool-desc {
  color: var(--text-muted);
  font-size: 16px;
  text-align: center;
  margin-bottom: 20px;
  opacity: 0.92;
}

/* =========================
   GRID + CARDS
========================= */

.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 30px;
}

.tool-card,
.tool-card-item {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.06),
    rgba(255,255,255,0.03)
  );
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  padding: 25px;
  text-align: center;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.48);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  position: relative;
  overflow: hidden;
}

.tool-card::before,
.tool-card-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: radial-gradient(
    600px circle at 20% 10%,
    rgba(255,255,255,0.10),
    transparent 60%
  );
  pointer-events: none;
}

.tool-card-item:hover {
  transform: translateY(-3px);
  border-color: rgba(255,77,77,0.30);
  box-shadow: 0 22px 70px rgba(0,0,0,0.58);
}

.tool-card-item h3 {
  font-size: 20px;
  margin-bottom: 10px;
  color: var(--text-main);
}

.tool-card-item p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: 20px;
}

/* =========================
   BUTTON
========================= */

.btn-primary {
  display: inline-block;
  background: linear-gradient(180deg, #ff6262, #ff3d3d);
  border: none;
  padding: 12px 28px;
  font-size: 16px;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 16px 34px rgba(255,77,77,0.20);
  transition: all 0.25s ease;
}

.btn-primary:hover {
  background: linear-gradient(180deg, #ff7676, #ff4d4d);
  box-shadow: 0 20px 44px rgba(255,77,77,0.26);
}

/* =========================
   UPLOAD BOX
========================= */

.upload-box {
  border: 1px dashed rgba(255,255,255,0.18);
  padding: 30px;
  border-radius: 10px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.05),
    rgba(255,255,255,0.02)
  );
  margin-bottom: 20px;
  text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}

.upload-box input[type="file"] {
  color: var(--text-main);
  background: none;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

.upload-box input[type="file"]::file-selector-button {
  background: var(--primary);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.upload-box input[type="file"]::file-selector-button:hover {
  background: var(--primary-hover);
}

/* =========================
   PROGRESS
========================= */

.progress-wrap {
  margin-top: 12px;
}

.progress-bar {
  width: 100%;
  height: 12px;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff4d4d, #ff6b6b);
  transition: width .08s linear;
}

.progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  margin-top: 6px;
  color: rgba(230,237,243,0.9);
}

.muted {
  color: rgba(139,148,158,0.95);
  font-size: 13px;
  margin-top: 6px;
}

/* =========================
   FOOTER
========================= */

.footer-text {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 60px;
  text-align: center;
  opacity: 0.9;
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 600px) {
  .tool-grid {
    grid-template-columns: 1fr;
  }
}
/* =====================================================
   ULTRA PREMIUM PACK (NO LAYOUT CHANGE)
   Paste at END of CSS
===================================================== */

/* 1) Animated premium background */
body{
  background:
    radial-gradient(900px circle at 15% 10%, rgba(0,153,255,0.20), transparent 55%),
    radial-gradient(900px circle at 85% 12%, rgba(255,0,204,0.16), transparent 55%),
    radial-gradient(900px circle at 50% 95%, rgba(0,255,170,0.08), transparent 60%),
    linear-gradient(120deg, #061a3a 0%, #0a1733 45%, #1a0b2e 100%) !important;
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

/* moving aurora layer (super premium) */
body::before{
  content:"";
  position: fixed;
  inset:-40%;
  z-index:-1;
  background:
    radial-gradient(circle at 20% 30%, rgba(0,153,255,0.22), transparent 45%),
    radial-gradient(circle at 80% 35%, rgba(167,62,255,0.20), transparent 45%),
    radial-gradient(circle at 55% 80%, rgba(255,77,77,0.14), transparent 45%);
  filter: blur(30px);
  opacity: 0.85;
  animation: auroraMove 16s ease-in-out infinite alternate;
  transform: translate3d(0,0,0);
}

@keyframes auroraMove{
  0%   { transform: translate(-3%, -2%) scale(1.02) rotate(0deg); }
  50%  { transform: translate(2%, 3%)   scale(1.06) rotate(6deg); }
  100% { transform: translate(4%, -1%)  scale(1.03) rotate(-4deg); }
}

/* 2) Header/nav = glass + subtle glow */
.header-bar{
  background: rgba(0,0,0,0.14) !important;
  border-bottom: 1px solid rgba(255,255,255,0.12) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
}

.top-nav a{
  background: rgba(255,255,255,0.05) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.28);
  position: relative;
  overflow: hidden;
}

.top-nav a::after{
  content:"";
  position:absolute;
  inset:-60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.10), transparent);
  transform: rotate(25deg) translateX(-40%);
  transition: transform .5s ease;
}

.top-nav a:hover::after{
  transform: rotate(25deg) translateX(40%);
}

.top-nav a:hover{
  background: rgba(255,77,77,0.20) !important;
  border-color: rgba(255,77,77,0.35) !important;
}

/* 3) Ultra glass cards + neon hover border */
.tool-card,
.tool-card-item{
  background: linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.03)) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: 0 22px 75px rgba(0,0,0,0.55) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  position: relative;
  overflow: hidden;
}

/* premium top-left shine */
.tool-card::before,
.tool-card-item::before{
  content:"";
  position:absolute;
  inset:-1px;
  background: radial-gradient(700px circle at 18% 10%, rgba(255,255,255,0.12), transparent 60%);
  pointer-events:none;
}

/* light sweep animation on hover */
.tool-card-item::after{
  content:"";
  position:absolute;
  inset:-70%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: rotate(22deg) translateX(-35%);
  opacity: 0;
  transition: opacity .25s ease, transform .6s ease;
  pointer-events:none;
}

.tool-card-item:hover::after{
  opacity: 1;
  transform: rotate(22deg) translateX(35%);
}

/* neon glow on hover (no layout change) */
.tool-card-item:hover{
  border-color: rgba(0,153,255,0.22) !important;
  box-shadow:
    0 26px 85px rgba(0,0,0,0.62),
    0 0 0 1px rgba(255,255,255,0.06) inset,
    0 0 22px rgba(0,153,255,0.18),
    0 0 28px rgba(167,62,255,0.12) !important;
  transform: translateY(-4px);
}

/* 4) Ultra button = glossy + shine */
.btn-primary{
  background: linear-gradient(180deg, #ff6b6b, #ff3d3d) !important;
  box-shadow:
    0 18px 48px rgba(255,77,77,0.22),
    0 0 0 1px rgba(255,255,255,0.06) inset !important;
  position: relative;
  overflow: hidden;
}

.btn-primary::after{
  content:"";
  position:absolute;
  inset:-60%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.20), transparent);
  transform: rotate(25deg) translateX(-40%);
  transition: transform .6s ease;
}

.btn-primary:hover::after{
  transform: rotate(25deg) translateX(40%);
}

.btn-primary:hover{
  box-shadow:
    0 22px 58px rgba(255,77,77,0.28),
    0 0 22px rgba(255,77,77,0.16),
    0 0 0 1px rgba(255,255,255,0.08) inset !important;
}

/* 5) Title glow + premium underline */
.tool-title{
  text-shadow:
    0 12px 40px rgba(0,0,0,0.60),
    0 0 18px rgba(0,153,255,0.10);
}

.tool-title::after{
  background: linear-gradient(90deg,
    rgba(0,153,255,0),
    rgba(0,153,255,0.75),
    rgba(255,77,77,0.65),
    rgba(167,62,255,0.70),
    rgba(167,62,255,0)
  ) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.42);
}

/* 6) Upload box premium */
.upload-box{
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
  border: 1px dashed rgba(255,255,255,0.20) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.05),
    0 18px 60px rgba(0,0,0,0.35);
}

/* 7) Progress = premium colors (no size change) */
.progress-bar{
  background: rgba(255,255,255,0.10) !important;
}
.progress-fill{
  background: linear-gradient(90deg, #ff4d4d, #ff7a7a) !important;
}
.progress-meta{
  color: rgba(230,237,243,0.92) !important;
}
.muted{
  color: rgba(139,148,158,0.95) !important;
}
/* =====================================================
   ICONS + MICRO ANIMATIONS (NO HTML CHANGE, NO LAYOUT)
   Paste at END of CSS
===================================================== */

/* Smooth transitions (no layout changes) */
.tool-card-item h3,
.tool-card-item p,
.tool-card-item .btn-primary{
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}

/* Title slightly lifts on hover */
.tool-card-item:hover h3{
  transform: translateY(-2px);
}

/* Description becomes a bit clearer */
.tool-card-item:hover p{
  opacity: 0.95;
}

/* Button micro bounce */
.tool-card-item:hover .btn-primary{
  transform: translateY(-1px);
}

/* Add icon before tool title (works without HTML edits) */
.tool-card-item h3{
  position: relative;
  padding-top: 2px;
}

/* Default icon */
.tool-card-item h3::before{
  content: "✨";
  display: inline-block;
  margin-right: 10px;
  transform: translateY(1px);
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.35));
  transition: transform .35s ease, filter .35s ease;
}

/* Icon float on hover */
.tool-card-item:hover h3::before{
  transform: translateY(-2px) rotate(-6deg) scale(1.06);
  filter: drop-shadow(0 14px 26px rgba(0,0,0,0.45));
}

/* Tool-specific icons (keyword based) */
.tool-card-item h3{
  text-transform: none; /* safe */
}

/* JPG to PDF */
.tool-card-item h3[title*="JPG"],
.tool-card-item h3:has(+ *) {}
/* Fallback keyword matching by text isn't possible in pure CSS reliably,
   so we use attribute selectors if you already have titles or data attributes.
   If not, use below simple mapping by link href (works most of the time). */

/* If your card contains a link with tool slug, icon changes */
.tool-card-item a[href*="jpg"][href*="pdf"] ~ h3::before,
.tool-card-item a[href*="jpg-to-pdf"] ~ h3::before{ content:"🖼️"; }

.tool-card-item a[href*="age"] ~ h3::before{ content:"🎂"; }
.tool-card-item a[href*="bmi"] ~ h3::before{ content:"🏃"; }
.tool-card-item a[href*="emi"] ~ h3::before{ content:"💳"; }
.tool-card-item a[href*="gst"] ~ h3::before{ content:"🧾"; }
.tool-card-item a[href*="sip"] ~ h3::before{ content:"📈"; }
.tool-card-item a[href*="pdf"] ~ h3::before{ content:"📄"; }

/* If your markup is: <h3>...</h3><a ...>Start</a>
   then above sibling selector won't work. So we also try common structure:
   h3 then button/link right after */
.tool-card-item h3 + a[href*="age"]::before{ content:"🎂"; }
.tool-card-item h3 + a[href*="bmi"]::before{ content:"🏃"; }
.tool-card-item h3 + a[href*="emi"]::before{ content:"💳"; }
.tool-card-item h3 + a[href*="gst"]::before{ content:"🧾"; }
.tool-card-item h3 + a[href*="sip"]::before{ content:"📈"; }

/* Reduced motion support */
@media (prefers-reduced-motion: reduce){
  body::before,
  .tool-card-item,
  .tool-card-item::after,
  .top-nav a::after,
  .btn-primary::after{
    animation: none !important;
    transition: none !important;
  }
}