*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family: "Segoe UI", sans-serif;
  background: linear-gradient(180deg, #f5f7fb 0%, #edf2fb 100%);
  color:#0f172a;
}

a{
  text-decoration:none;
}

.toolaxis-page{
  min-height:100vh;
  overflow:hidden;
}


/* TOPBAR */
.topbar{
  width:100%;
  max-width:1200px;
  margin:0 auto;
  padding:28px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  position:relative;
  z-index:2;
}

.logo,
.footer-logo{
  font-size:28px;
  font-weight:800;
  color:#ffffff;
}

.topnav{
  display:flex;
  gap:42px;
}

.topnav a{
  color:#ffffff;
  font-size:18px;
  font-weight:500;
  position:relative;
}

.topnav a.active::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:2px;
  background:#ffffff;
  border-radius:999px;
}

.login-btn{
  color:#ffffff;
  border:1px solid rgba(255,255,255,.55);
  padding:12px 28px;
  border-radius:12px;
  font-size:18px;
  font-weight:600;
}

/* HERO */
.hero{
  position:relative;
  margin-top:-96px;
  padding:150px 24px 140px;
  background:
    radial-gradient(circle at 15% 25%, rgba(72,124,255,.35), transparent 30%),
    radial-gradient(circle at 85% 30%, rgba(44,157,255,.28), transparent 26%),
    linear-gradient(180deg, #1450d2 0%, #1970ef 52%, #8fd3ff 100%);
  overflow:hidden;
}

.hero::before,
.hero::after{
  content:"";
  position:absolute;
  left:0;
  width:100%;
  pointer-events:none;
}

.hero::before{
  bottom:100px;
  height:260px;
  background:
    radial-gradient(120% 120% at 0% 100%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%),
    radial-gradient(120% 120% at 100% 100%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 55%);
  opacity:.9;
}

.hero::after{
  bottom:-10px;
  height:260px;
  background:
    radial-gradient(85% 140% at 10% 0%, rgba(255,255,255,.45) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(80% 140% at 40% 0%, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(85% 140% at 75% 0%, rgba(255,255,255,.32) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(85% 140% at 100% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 58%);
}

.hero-content{
  max-width:900px;
  margin:0 auto;
  text-align:center;
  position:relative;
  z-index:2;
}

.hero-content h1{
  font-size:64px;
  line-height:1.12;
  font-weight:800;
  color:#ffffff;
  letter-spacing:-1.5px;
  margin-bottom:22px;
  text-shadow:0 2px 10px rgba(0,0,0,.12);
}

.hero-content p{
  max-width:760px;
  margin:0 auto 34px;
  font-size:24px;
  line-height:1.65;
  color:rgba(255,255,255,.95);
}

.main-btn,
.tool-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color:#ffffff;
  font-weight:700;
  border-radius:10px;
  box-shadow:0 10px 24px rgba(20,80,210,.22);
}

.main-btn{
  min-width:280px;
  padding:18px 34px;
  font-size:20px;
}

.tool-btn{
  min-width:210px;
  padding:14px 24px;
  font-size:18px;
}

/* MAIN TOOL CARDS */
.tools-section{
  max-width:1200px;
  margin:-70px auto 40px;
  padding:0 24px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  position:relative;
  z-index:3;
}

.tool-card.large{
  background:#ffffff;
  border-radius:18px;
  padding:34px 36px;
  display:flex;
  align-items:center;
  gap:26px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.05);
}

.tool-icon{
  width:96px;
  height:96px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:48px;
  background:linear-gradient(180deg, #eef4ff 0%, #dbeafe 100%);
}

.tool-info h3{
  font-size:24px;
  font-weight:800;
  margin-bottom:10px;
  color:#0f172a;
}

.tool-info p{
  font-size:18px;
  color:#475569;
  margin-bottom:22px;
}

/* MORE TOOLS */
.more-tools{
  max-width:1200px;
  margin:18px auto 90px;
  padding:0 24px;
  text-align:center;
}

.more-tools h2{
  font-size:46px;
  font-weight:800;
  color:#0f172a;
  margin-bottom:34px;
  position:relative;
  display:inline-block;
}

.mini-tools{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  margin-bottom:34px;
}

.mini-card{
  background:#ffffff;
  border-radius:18px;
  padding:34px 18px;
  box-shadow:0 12px 30px rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.04);
}

.mini-icon{
  font-size:42px;
  margin-bottom:16px;
}

.mini-card span{
  font-size:18px;
  font-weight:600;
  color:#0f172a;
}

.view-btn{
  min-width:260px;
}

/* FOOTER */
.footer{
  margin-top:40px;
  padding:42px 24px 54px;
  background:
    radial-gradient(circle at 10% 10%, rgba(255,255,255,.08), transparent 30%),
    linear-gradient(180deg, #123a9f 0%, #0d2e82 100%);
}

.footer-logo{
  max-width:1200px;
  margin:0 auto 18px;
}

.footer-links{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  gap:26px;
}

.footer-links a{
  color:rgba(255,255,255,.92);
  font-size:17px;
}

/* RESPONSIVE */
@media (max-width: 992px){
  .hero-content h1{
    font-size:48px;
  }

  .hero-content p{
    font-size:20px;
  }

  .tools-section{
    grid-template-columns:1fr;
  }

  .mini-tools{
    grid-template-columns:repeat(2, 1fr);
  }

  .topnav{
    gap:22px;
  }
}

@media (max-width: 768px){
  .topbar{
    flex-direction:column;
    gap:18px;
  }

  .hero{
    margin-top:0;
    padding:90px 18px 110px;
  }

  .hero-content h1{
    font-size:36px;
  }

  .hero-content p{
    font-size:18px;
  }

  .main-btn{
    min-width:220px;
    font-size:18px;
  }

  .tool-card.large{
    flex-direction:column;
    text-align:center;
  }

  .mini-tools{
    grid-template-columns:1fr;
  }

  .footer-links{
    flex-direction:column;
    gap:14px;
  }
}
/* ===== Final Polish ===== */

/* softer page feeling */
body{
  background:
    linear-gradient(180deg, #f7f9fd 0%, #eef3fb 55%, #f7f9fd 100%) !important;
}

/* top bar width / spacing */
.topbar{
  padding-top:34px;
  padding-bottom:20px;
}

/* logo closer to mockup */
.logo,
.footer-logo{
  font-size:30px;
  font-weight:800;
  letter-spacing:-0.5px;
}

/* nav cleaner */
.topnav a{
  font-weight:500;
  opacity:.96;
}

.login-btn{
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
}

/* hero more like the reference */
.hero{
  padding-top:145px !important;
  padding-bottom:170px !important;
  background:
    radial-gradient(circle at 12% 28%, rgba(54,110,255,.40), transparent 26%),
    radial-gradient(circle at 82% 24%, rgba(68,187,255,.26), transparent 24%),
    linear-gradient(180deg, #1550d8 0%, #1a6ff0 50%, #8dd6ff 100%) !important;
}

/* layered wave effect */
.hero::before{
  bottom:90px !important;
  height:320px !important;
  background:
    radial-gradient(95% 120% at 5% 100%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(95% 120% at 32% 100%, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 64%),
    radial-gradient(95% 120% at 64% 100%, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 66%),
    radial-gradient(95% 120% at 95% 100%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 64%) !important;
  opacity:1;
}

.hero::after{
  bottom:-30px !important;
  height:320px !important;
  background:
    radial-gradient(80% 140% at 0% 0%, rgba(255,255,255,.58) 0%, rgba(255,255,255,0) 58%),
    radial-gradient(80% 140% at 22% 0%, rgba(255,255,255,.48) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(80% 140% at 48% 0%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 61%),
    radial-gradient(80% 140% at 75% 0%, rgba(255,255,255,.36) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(80% 140% at 100% 0%, rgba(255,255,255,.52) 0%, rgba(255,255,255,0) 58%) !important;
}

/* hero text refinement */
.hero-content h1{
  font-size:60px !important;
  line-height:1.14 !important;
  letter-spacing:-1.3px !important;
  margin-bottom:18px !important;
}

.hero-content p{
  font-size:21px !important;
  max-width:720px !important;
  line-height:1.7 !important;
  margin-bottom:30px !important;
}

/* buttons closer to visual */
.main-btn,
.tool-btn{
  border-radius:8px !important;
  background:linear-gradient(180deg, #2b67ea 0%, #1f4fd9 100%) !important;
  box-shadow:
    0 10px 22px rgba(29,78,216,.20),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

.main-btn:hover,
.tool-btn:hover{
  transform:translateY(-1px);
}

/* cards more polished */
.tool-card.large,
.mini-card{
  border:1px solid rgba(148,163,184,.18) !important;
  box-shadow:0 14px 28px rgba(15,23,42,.07) !important;
}

.tool-card.large{
  min-height:196px;
}

.tool-icon{
  width:104px !important;
  height:104px !important;
  border-radius:18px !important;
  background:linear-gradient(180deg, #f8fbff 0%, #e3efff 100%) !important;
  box-shadow:inset 0 0 0 1px rgba(148,163,184,.14);
}

.tool-info h3{
  font-size:22px !important;
}

.tool-info p{
  font-size:17px !important;
  margin-bottom:18px !important;
}

/* explore title line effect */
.more-tools h2{
  padding:0 24px;
}

.more-tools h2::before,
.more-tools h2::after{
  content:"";
  position:absolute;
  top:50%;
  width:160px;
  height:2px;
  background:linear-gradient(90deg, transparent, #d4ddea, transparent);
}

.more-tools h2::before{
  right:100%;
  margin-right:22px;
}

.more-tools h2::after{
  left:100%;
  margin-left:22px;
}

/* mini cards */
.mini-card{
  padding-top:30px !important;
  padding-bottom:30px !important;
}

.mini-card span{
  font-size:17px !important;
}

/* footer more like image */
.footer{
  padding-top:54px !important;
  padding-bottom:64px !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.10), transparent 28%),
    radial-gradient(circle at 85% 20%, rgba(255,255,255,.06), transparent 28%),
    linear-gradient(180deg, #143b9e 0%, #0f2f80 100%) !important;
}

.footer-logo{
  margin-bottom:20px !important;
}

.footer-links a{
  opacity:.94;
}

/* hover */
.tool-card.large:hover,
.mini-card:hover{
  transform:translateY(-3px);
  transition:.2s ease;
}

/* mobile keep clean */
@media (max-width:768px){
  .hero-content h1{
    font-size:38px !important;
  }

  .hero-content p{
    font-size:18px !important;
  }

  .more-tools h2::before,
  .more-tools h2::after{
    display:none;
  }
}
.tool-panel{
  max-width:1200px;
  margin:0 auto 40px;
  padding:0 24px;
}

.tool-panel-box{
  background:#ffffff;
  border-radius:18px;
  padding:30px;
  box-shadow:0 12px 30px rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.05);
}

.tool-panel-box h2{
  font-size:30px;
  margin-bottom:10px;
  color:#0f172a;
}

.tool-panel-box p{
  font-size:17px;
  color:#475569;
  margin-bottom:18px;
}

.tool-panel-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

.tool-panel-row input{
  flex:1;
  min-width:260px;
  height:52px;
  border-radius:10px;
  border:1px solid #cbd5e1;
  padding:0 16px;
  font-size:16px;
}

#qrResult img,
#qrResult canvas{
  margin-top:10px;
  background:#fff;
  padding:10px;
  border-radius:12px;
  border:1px solid #e2e8f0;
}
#qrResult{
  margin-top: 20px;
  min-height: 200px;
  display: block;
}

#qrResult img,
#qrResult canvas{
  display: block;
  margin: 10px 0 0;
  background: #fff;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}
/* AUTH MODAL */
.auth-modal{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:9999;
}

.auth-modal.show{
  display:flex;
}

.auth-box{
  width:100%;
  max-width:460px;
  background:#ffffff;
  border-radius:22px;
  padding:28px;
  box-shadow:0 24px 60px rgba(15,23,42,.18);
  border:1px solid rgba(148,163,184,.18);
  position:relative;
}

.auth-close{
  position:absolute;
  top:14px;
  right:14px;
  width:40px;
  height:40px;
  border:none;
  background:#eff6ff;
  color:#0f172a;
  border-radius:12px;
  font-size:24px;
  cursor:pointer;
}

.auth-tabs{
  display:flex;
  gap:10px;
  margin-bottom:22px;
}

.auth-tab{
  flex:1;
  height:48px;
  border:none;
  border-radius:12px;
  background:#eff6ff;
  color:#1e3a8a;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}

.auth-tab.active{
  background:linear-gradient(180deg, #2563eb 0%, #1d4ed8 100%);
  color:#fff;
}

.auth-form{
  display:none;
}

.auth-form.active{
  display:block;
}

.auth-form h2{
  font-size:28px;
  margin-bottom:8px;
  color:#0f172a;
}

.auth-form p{
  font-size:15px;
  color:#64748b;
  margin-bottom:18px;
}

.auth-form input{
  width:100%;
  height:52px;
  border-radius:12px;
  border:1px solid #cbd5e1;
  padding:0 14px;
  font-size:16px;
  margin-bottom:14px;
}

.auth-submit-btn{
  width:100%;
  margin-top:4px;
}

@media (max-width:768px){
  .auth-box{
    padding:22px 18px;
    border-radius:18px;
  }
}
/* ===== Better mini tools look ===== */

.mini-card{
  position: relative;
  padding: 26px 18px 22px !important;
  border-radius: 20px;
  transition: .22s ease;
}

.mini-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(15,23,42,.10) !important;
}

.mini-icon{
  width: 68px;
  height: 68px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px !important;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #e8f1ff 100%);
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.14);
}

.mini-card span{
  display: block;
  margin-bottom: 14px;
  font-size: 17px !important;
  font-weight: 700;
  color: #0f172a;
}

.mini-card .tool-btn{
  min-width: unset !important;
  width: auto;
  padding: 10px 18px !important;
  font-size: 15px !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 18px rgba(29,78,216,.14) !important;
}

/* more tools section spacing */
.more-tools{
  margin-top: 28px !important;
}

.mini-tools{
  gap: 22px !important;
}

/* make large tool buttons cleaner too */
.tool-card .tool-btn{
  min-width: 190px !important;
  padding: 13px 20px !important;
  border-radius: 12px !important;
  font-size: 16px !important;
}

/* make login button look more premium */
.login-btn{
  border-radius: 999px !important;
  padding: 11px 22px !important;
  backdrop-filter: blur(8px);
}

/* hero button better */
.main-btn{
  border-radius: 14px !important;
  min-width: 240px !important;
}

/* cleaner tool panel inputs */
.tool-panel-row input,
.tool-panel-row select,
.tool-panel-box textarea,
#passwordOutput,
#mortgageResult,
#imageInfo,
#textResult,
#unitResult,
#ipResult,
#currencyResult{
  border: 1px solid #d7dfeb !important;
  background: #fdfefe;
  box-shadow: inset 0 1px 2px rgba(15,23,42,.03);
}

.tool-panel-row input:focus,
.tool-panel-row select:focus,
.tool-panel-box textarea:focus{
  outline: none;
  border-color: #7aa2ff !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.10);
}

/* contact/about look better */
#about .tool-panel-box,
#contact .tool-panel-box{
  border-radius: 22px;
}

/* optional: softer section title */
.more-tools h2{
  font-size: 40px !important;
}
/* ===== Better large tool cards ===== */

.tools-section{
  gap: 24px !important;
}

.tool-card.large{
  position: relative;
  padding: 30px 28px !important;
  border-radius: 24px !important;
  align-items: flex-start !important;
  transition: .25s ease;
  overflow: hidden;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.08), transparent 30%),
    #ffffff !important;
}

.tool-card.large::before{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 5px;
  background: linear-gradient(90deg, #2563eb, #38bdf8);
  opacity: .9;
}

.tool-card.large:hover{
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(15,23,42,.10) !important;
}

.tool-icon{
  width: 84px !important;
  height: 84px !important;
  min-width: 84px;
  border-radius: 22px !important;
  font-size: 38px !important;
  margin-top: 2px;
}

.tool-info{
  flex: 1;
}

.tool-info h3{
  font-size: 24px !important;
  line-height: 1.2;
  margin-bottom: 8px !important;
}

.tool-info p{
  font-size: 16px !important;
  color: #64748b !important;
  margin-bottom: 18px !important;
  line-height: 1.6;
}

.tool-card.large .tool-btn{
  min-width: unset !important;
  width: auto;
  padding: 12px 20px !important;
  font-size: 15px !important;
  border-radius: 14px !important;
}

/* each card slightly unique */
.tool-card.large:nth-child(1) .tool-icon{
  background: linear-gradient(180deg, #eef4ff 0%, #dbeafe 100%) !important;
}

.tool-card.large:nth-child(2) .tool-icon{
  background: linear-gradient(180deg, #effcf6 0%, #d1fae5 100%) !important;
}

.tool-card.large:nth-child(3) .tool-icon{
  background: linear-gradient(180deg, #fff7ed 0%, #ffedd5 100%) !important;
}

.tool-card.large:nth-child(4) .tool-icon{
  background: linear-gradient(180deg, #f5f3ff 0%, #ede9fe 100%) !important;
}

/* cleaner on mobile */
@media (max-width:768px){
  .tool-card.large{
    padding: 24px 20px !important;
    border-radius: 20px !important;
    text-align: left !important;
    flex-direction: row !important;
    align-items: flex-start !important;
  }

  .tool-icon{
    width: 74px !important;
    height: 74px !important;
    min-width: 74px;
    font-size: 32px !important;
  }

  .tool-info h3{
    font-size: 20px !important;
  }

  .tool-card.large .tool-btn{
    width: 100%;
  }
}
/* ===== Better hero section ===== */

.hero{
  position: relative;
  padding-top: 155px !important;
  padding-bottom: 185px !important;
  overflow: hidden;
}

.hero-content{
  max-width: 980px !important;
}

.hero-content h1{
  font-size: 66px !important;
  line-height: 1.08 !important;
  letter-spacing: -1.8px !important;
  margin-bottom: 20px !important;
  max-width: 900px;
}

.hero-content p{
  font-size: 20px !important;
  line-height: 1.75 !important;
  max-width: 690px !important;
  margin: 0 auto 34px !important;
  color: rgba(255,255,255,.92) !important;
}

/* stronger button */
.hero .main-btn{
  min-width: 230px !important;
  padding: 16px 28px !important;
  border-radius: 16px !important;
  font-size: 17px !important;
  position: relative;
  z-index: 2;
}

/* soft glow behind content */
.hero::before{
  filter: blur(2px);
}

.hero::after{
  filter: blur(.5px);
}

/* extra floating light */
.hero-content::before{
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 70%);
  top: -30px;
  right: 40px;
  pointer-events: none;
}

/* trust strip style if we add later */
.hero-subtle{
  margin-top: 18px;
  font-size: 14px;
  color: rgba(255,255,255,.82);
  letter-spacing: .2px;
}

/* smoother spacing on smaller screens */
@media (max-width: 992px){
  .hero{
    padding-top: 130px !important;
    padding-bottom: 150px !important;
  }

  .hero-content h1{
    font-size: 52px !important;
    line-height: 1.12 !important;
  }

  .hero-content p{
    font-size: 18px !important;
    max-width: 620px !important;
  }
}

@media (max-width: 768px){
  .hero{
    padding-top: 95px !important;
    padding-bottom: 120px !important;
  }

  .hero-content h1{
    font-size: 38px !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
  }

  .hero-content p{
    font-size: 17px !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }

  .hero-content::before{
    width: 180px;
    height: 180px;
    top: -10px;
    right: 10px;
  }

  .hero .main-btn{
    min-width: 200px !important;
    font-size: 16px !important;
  }
}
/* ===== About + Contact upgrade ===== */

#about,
#contact{
  max-width: 1200px;
  margin: 60px auto 80px !important;
  padding: 0 24px;
}

#about .tool-panel-box,
#contact .tool-panel-box{
  padding: 40px 42px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top right, rgba(59,130,246,.06), transparent 40%),
    #ffffff;
  box-shadow: 0 20px 45px rgba(15,23,42,.08) !important;
}

/* titles */
#about h2,
#contact h2{
  font-size: 34px !important;
  font-weight: 800;
  margin-bottom: 12px !important;
}

#about p,
#contact p{
  font-size: 17px !important;
  line-height: 1.7;
  color: #64748b;
  max-width: 700px;
}

/* contact form layout */
#contact .tool-panel-row{
  margin-top: 20px;
}

#contact input{
  flex: 1;
  height: 54px !important;
  border-radius: 12px !important;
  border: 1px solid #dbe2ec !important;
  padding: 0 16px !important;
  font-size: 15px;
}

/* textarea */
#contact textarea{
  border-radius: 12px !important;
  border: 1px solid #dbe2ec !important;
  font-size: 15px;
}

/* send button */
#contact .tool-btn{
  min-width: 200px !important;
  border-radius: 14px !important;
  padding: 14px 22px !important;
  font-size: 16px !important;
}

/* hover */
#contact .tool-btn:hover{
  transform: translateY(-2px);
}

/* mobile */
@media (max-width:768px){

  #about .tool-panel-box,
  #contact .tool-panel-box{
    padding: 30px 24px !important;
  }

  #about h2,
  #contact h2{
    font-size: 28px !important;
  }

}
#converterToolPanel .tool-panel-row select{
  min-width: 200px;
  flex: 1;
}
.mini-card{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  min-height:220px;
}

.mini-card .tool-btn{
  margin-top:14px;
}
#resizeToolPanel .tool-panel-row input[type="number"]{
  min-width: 180px;
}
/* ===== More Tools Grid Fix ===== */

.mini-tools{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:22px;
  margin-bottom:34px;
}

.mini-card{
  background:#ffffff;
  border-radius:18px;
  padding:28px 18px;
  text-align:center;
  box-shadow:0 12px 30px rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.04);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  min-height:200px;
  transition:0.2s ease;
}

.mini-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 38px rgba(15,23,42,.10);
}

.mini-icon{
  font-size:36px;
  margin-bottom:14px;
}

.mini-card span{
  font-size:17px;
  font-weight:700;
  color:#0f172a;
  margin-bottom:12px;
}

.mini-card .tool-btn{
  min-width:unset !important;
  width:auto;
  padding:10px 18px !important;
  font-size:15px !important;
  border-radius:999px !important;
}
/* ===== Tools Hub Sections ===== */

.tools-hub{
  max-width: 1200px;
  margin: 50px auto 90px;
  padding: 0 24px;
}

.tools-group{
  margin-bottom: 42px;
}

.tools-group-head{
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.tools-group-head h2{
  font-size: 30px;
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}

.tools-group-head p{
  font-size: 15px;
  color: #64748b;
  margin: 0;
  max-width: 560px;
}

.tools-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 18px;
}

.tools-grid .mini-card{
  min-height: 190px;
  padding: 24px 18px;
  text-align: center;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: 0 12px 30px rgba(15,23,42,.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: .22s ease;
}

.tools-grid .mini-card:hover{
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(15,23,42,.10);
}

.tools-grid .mini-icon{
  width: 70px;
  height: 70px;
  margin: 0 auto 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f8fbff 0%, #e8f1ff 100%);
  box-shadow: inset 0 0 0 1px rgba(148,163,184,.14);
}

.tools-grid .mini-card span{
  display: block;
  margin-bottom: 14px;
  font-size: 17px;
  font-weight: 700;
  color: #0f172a;
}

.tools-grid .mini-card .tool-btn{
  min-width: unset !important;
  width: auto;
  padding: 10px 18px !important;
  font-size: 15px !important;
  border-radius: 999px !important;
}

/* Optional soft color identities */
.pdf-card .mini-icon{
  background: linear-gradient(180deg, #fff5f5 0%, #ffe3e3 100%);
}

.qr-card .mini-icon{
  background: linear-gradient(180deg, #f3f0ff 0%, #e5dbff 100%);
}

@media (max-width: 768px){
  .tools-group-head h2{
    font-size: 25px;
  }

  .tools-grid{
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }

  .tools-grid .mini-card{
    min-height: 175px;
  }
}
/* remove old top tools spacing effect */
.tools-section{
  display:none !important;
}

/* make tools hub come up nicely after hero */
.tools-hub{
  margin-top: -30px !important;
  position: relative;
  z-index: 3;
}
#wifiQrResult img,
#wifiQrResult canvas{
  display:block;
  margin-top:10px;
  background:#fff;
  padding:10px;
  border-radius:12px;
  border:1px solid #e2e8f0;
}
#whatsappQrResult img,
#whatsappQrResult canvas{
  display:block;
  margin-top:10px;
  background:#fff;
  padding:10px;
  border-radius:12px;
  border:1px solid #e2e8f0;
}
#emailQrResult img,
#emailQrResult canvas{
  display:block;
  margin-top:10px;
  background:#fff;
  padding:10px;
  border-radius:12px;
  border:1px solid #e2e8f0;
}
#vcardQrResult img,
#vcardQrResult canvas{
  display:block;
  margin-top:10px;
  background:#fff;
  padding:10px;
  border-radius:12px;
  border:1px solid #e2e8f0;
}
#jpgToPdfPreview img{
  width:120px;
  height:120px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid #e2e8f0;
  background:#fff;
  padding:6px;
}
#pdfToJpgPreview .pdf-page-card{
  width:140px;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:12px;
  padding:8px;
  text-align:center;
}

#pdfToJpgPreview img{
  width:100%;
  height:160px;
  object-fit:cover;
  border-radius:8px;
  margin-bottom:8px;
}

#pdfToJpgPreview .tool-btn{
  width:100%;
  min-width:unset !important;
  padding:10px 12px !important;
  font-size:14px !important;
  border-radius:12px !important;
}
/* ===== MERGE PDF ===== */

#mergePdfToolPanel input[type="file"]{
  min-width:260px;
}

#mergePdfToolPanel .tool-panel-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

#mergePdfToolPanel .tool-btn{
  min-width:210px;
}

#mergePdfResult{
  margin-top:20px;
  width:100%;
  height:50px;
  padding:10px;
  border-radius:10px;
  border:1px solid #ccc;
}
/* FIX PDF TOOLS GRID */

.tools-group .tools-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
}

.tools-group .mini-card{
  width:100%;
}
/* ===== SPLIT PDF ===== */

#splitPdfToolPanel input[type="file"],
#splitPdfToolPanel input[type="text"]{
  min-width:260px;
}

#splitPdfToolPanel .tool-panel-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

#splitPdfToolPanel .tool-btn{
  min-width:210px;
}

#splitPdfResult{
  margin-top:20px;
  width:100%;
  height:50px;
  padding:10px;
  border-radius:10px;
  border:1px solid #ccc;
}
/* ===== COMPRESS PDF ===== */

#compressPdfToolPanel input[type="file"],
#compressPdfToolPanel select{
  min-width:240px;
}

#compressPdfToolPanel .tool-panel-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  align-items:center;
}

#compressPdfToolPanel .tool-btn{
  min-width:210px;
}

#compressPdfResult{
  margin-top:20px;
  width:100%;
  height:50px;
  padding:10px;
  border-radius:10px;
  border:1px solid #ccc;
}
/* ===== NEW HERO ORBIT ===== */

.hero{
  position: relative !important;
  min-height: 720px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 120px 24px 80px !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.14), transparent 22%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(135deg, #1a5cff 0%, #49a6ff 100%) !important;
}

.hero::before,
.hero::after{
  display: none !important;
}

.hero-center{
  position: absolute;
  z-index: 5;
  text-align: center;
  color: #fff;
  padding: 0 16px;
}

.hero-center h1{
  font-size: 86px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -2px;
  margin: 0 0 14px;
  text-shadow: 0 10px 35px rgba(0,0,0,.14);
}

.hero-center p{
  font-size: 24px;
  margin: 0 0 28px;
  color: rgba(255,255,255,.92);
}

.hero-orbit-btn{
  min-width: 220px !important;
  border-radius: 18px !important;
}

.tools-orbit{
  position: relative;
  width: 560px;
  height: 560px;
  animation: orbitSpin 26s linear infinite;
}

.orbit-item{
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  color: #0f172a;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(10px);
  box-shadow:
    0 20px 45px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.55);
  border: 1px solid rgba(255,255,255,.35);
  transition: transform .25s ease, box-shadow .25s ease;
}

.orbit-item:hover{
  transform: scale(1.12);
  box-shadow:
    0 25px 55px rgba(15,23,42,.22),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.orbit-qr{ top: 0; left: 225px; }
.orbit-pdf{ top: 90px; right: 20px; }
.orbit-img{ top: 250px; right: 0; }
.orbit-pass{ bottom: 35px; right: 95px; }
.orbit-ip{ bottom: 45px; left: 85px; }
.orbit-unit{ top: 120px; left: 10px; }

@keyframes orbitSpin{
  from{ transform: rotate(0deg); }
  to{ transform: rotate(360deg); }
}

@media (max-width: 992px){
  .hero{
    min-height: 640px;
  }

  .hero-center h1{
    font-size: 64px;
  }

  .hero-center p{
    font-size: 20px;
  }

  .tools-orbit{
    width: 430px;
    height: 430px;
  }

  .orbit-item{
    width: 92px;
    height: 92px;
    font-size: 16px;
    border-radius: 22px;
  }

  .orbit-qr{ top: 0; left: 169px; }
  .orbit-pdf{ top: 72px; right: 10px; }
  .orbit-img{ top: 190px; right: 0; }
  .orbit-pass{ bottom: 25px; right: 70px; }
  .orbit-ip{ bottom: 30px; left: 60px; }
  .orbit-unit{ top: 95px; left: 0; }
}

@media (max-width: 768px){
  .hero{
    min-height: 580px;
    padding: 90px 18px 50px !important;
  }

  .hero-center h1{
    font-size: 44px;
    letter-spacing: -1px;
  }

  .hero-center p{
    font-size: 17px;
    margin-bottom: 20px;
  }

  .tools-orbit{
    width: 300px;
    height: 300px;
  }

  .orbit-item{
    width: 74px;
    height: 74px;
    font-size: 13px;
    border-radius: 18px;
  }

  .orbit-qr{ top: 0; left: 113px; }
  .orbit-pdf{ top: 44px; right: 0; }
  .orbit-img{ top: 126px; right: 0; }
  .orbit-pass{ bottom: 12px; right: 38px; }
  .orbit-ip{ bottom: 14px; left: 34px; }
  .orbit-unit{ top: 52px; left: 0; }
}
/* ===== HERO CLOUD 2030 ===== */

.hero{
  position: relative !important;
  min-height: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 120px 24px 90px !important;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.14), transparent 22%),
    radial-gradient(circle at 80% 30%, rgba(255,255,255,.12), transparent 24%),
    linear-gradient(135deg, #1a5cff 0%, #49a6ff 100%) !important;
}

.hero::before,
.hero::after{
  display: none !important;
}

.hero-center{
  position: relative;
  z-index: 5;
  text-align: center;
  color: #fff;
  padding: 0 16px;
}

.hero-center h1{
  font-size: 86px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -2px;
  margin: 0 0 14px;
  text-shadow: 0 10px 35px rgba(0,0,0,.14);
}

.hero-center p{
  font-size: 24px;
  margin: 0 0 28px;
  color: rgba(255,255,255,.92);
}

.hero-orbit-btn{
  min-width: 220px !important;
  border-radius: 18px !important;
  position: relative;
  z-index: 6;
}

/* hide old orbit if still موجود */
.tools-orbit{
  display:none !important;
}

/* new cloud */
.hero-tool-cloud{
  position: absolute;
  inset: 0;
  max-width: 1200px;
  margin: 0 auto;
  pointer-events: none;
  z-index: 4;
}

.hero-tool{
  position: absolute;
  width: 116px;
  height: 116px;
  border: none;
  border-radius: 28px;
  background: rgba(255,255,255,.92);
  color: #0f172a;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow:
    0 20px 45px rgba(15,23,42,.16),
    inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(10px);
  cursor: pointer;
  pointer-events: auto;
  transition: transform .22s ease, box-shadow .22s ease;
}

.hero-tool:hover{
  transform: translateY(-6px) scale(1.04);
  box-shadow:
    0 26px 55px rgba(15,23,42,.22),
    inset 0 1px 0 rgba(255,255,255,.55);
}

.hero-tool-icon{
  font-size: 30px;
  line-height: 1;
}

.hero-tool-label{
  font-size: 14px;
  font-weight: 800;
  line-height: 1.1;
}

/* positions */
.tool-qr{
  top: 120px;
  left: 120px;
}

.tool-pdf{
  top: 95px;
  right: 120px;
}

.tool-img{
  top: 285px;
  left: 40px;
}

.tool-pass{
  top: 300px;
  right: 55px;
}

.tool-ip{
  bottom: 115px;
  left: 150px;
}

.tool-unit{
  bottom: 105px;
  right: 145px;
}

/* glow accents */
.tool-qr,
.tool-pdf,
.tool-img,
.tool-pass,
.tool-ip,
.tool-unit{
  box-shadow:
    0 18px 40px rgba(15,23,42,.16),
    0 0 0 10px rgba(255,255,255,.05),
    inset 0 1px 0 rgba(255,255,255,.55);
}

/* mobile */
@media (max-width: 992px){
  .hero{
    min-height: 680px;
  }

  .hero-center h1{
    font-size: 64px;
  }

  .hero-center p{
    font-size: 20px;
  }

  .hero-tool{
    width: 96px;
    height: 96px;
    border-radius: 24px;
  }

  .hero-tool-icon{
    font-size: 25px;
  }

  .hero-tool-label{
    font-size: 12px;
  }

  .tool-qr{ top: 110px; left: 35px; }
  .tool-pdf{ top: 95px; right: 35px; }
  .tool-img{ top: 285px; left: 5px; }
  .tool-pass{ top: 295px; right: 10px; }
  .tool-ip{ bottom: 100px; left: 60px; }
  .tool-unit{ bottom: 98px; right: 60px; }
}

@media (max-width: 768px){
  .hero{
    min-height: 640px;
    padding: 95px 18px 60px !important;
  }

  .hero-center h1{
    font-size: 46px;
    letter-spacing: -1px;
  }

  .hero-center p{
    font-size: 17px;
    margin-bottom: 20px;
  }

  .hero-tool{
    width: 78px;
    height: 78px;
    border-radius: 20px;
    gap: 5px;
  }

  .hero-tool-icon{
    font-size: 20px;
  }

  .hero-tool-label{
    font-size: 10px;
  }

  .tool-qr{ top: 110px; left: 8px; }
  .tool-pdf{ top: 105px; right: 8px; }
  .tool-img{ top: 255px; left: 0; }
  .tool-pass{ top: 260px; right: 0; }
  .tool-ip{ bottom: 80px; left: 28px; }
  .tool-unit{ bottom: 80px; right: 28px; }
}
/* ===== TOOLAXIS AI HERO UPGRADE ===== */

/* page background softer + futuristic */
body{
  background:
    radial-gradient(circle at top, rgba(64,139,255,.10), transparent 28%),
    linear-gradient(180deg, #edf4ff 0%, #e9f1ff 40%, #f6f9ff 100%) !important;
  color:#0b1220;
}

/* hero base */
.hero{
  position: relative !important;
  min-height: 780px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:120px 24px 90px !important;
  background:
    radial-gradient(circle at 20% 18%, rgba(0,255,240,.14), transparent 20%),
    radial-gradient(circle at 80% 22%, rgba(92,111,255,.18), transparent 24%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.06), transparent 40%),
    linear-gradient(135deg, #07111f 0%, #0b1e39 34%, #113a75 68%, #1b74ff 100%) !important;
}

.hero::before,
.hero::after{
  display:none !important;
}

/* moving grid */
.hero-grid{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.3));
  opacity:.28;
  transform: perspective(900px) rotateX(68deg) scale(1.4);
  transform-origin: center top;
  animation: gridFloat 10s linear infinite;
  pointer-events:none;
}

/* glowing particles */
.hero-particles{
  position:absolute;
  inset:0;
  pointer-events:none;
  overflow:hidden;
}

.hero-particles::before,
.hero-particles::after{
  content:"";
  position:absolute;
  inset:-10%;
  background:
    radial-gradient(circle at 15% 30%, rgba(0,255,240,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 28% 55%, rgba(255,255,255,.28) 0 2px, transparent 3px),
    radial-gradient(circle at 42% 22%, rgba(117,167,255,.24) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 38%, rgba(0,255,240,.20) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 18%, rgba(255,255,255,.24) 0 2px, transparent 3px),
    radial-gradient(circle at 82% 52%, rgba(117,167,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 62% 72%, rgba(255,255,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 78%, rgba(0,255,240,.18) 0 2px, transparent 3px);
  opacity:.9;
}

.hero-particles::before{
  animation: particlesFloat 14s ease-in-out infinite alternate;
}

.hero-particles::after{
  animation: particlesFloat2 18s ease-in-out infinite alternate;
  opacity:.5;
}

/* center text */
.hero-center{
  position:relative;
  z-index:5;
  text-align:center;
  color:#fff;
}

.hero-center h1{
  font-size:88px;
  line-height:1;
  font-weight:900;
  letter-spacing:-2.5px;
  margin:0 0 14px;
  text-shadow:
    0 10px 35px rgba(0,0,0,.28),
    0 0 18px rgba(110,194,255,.18);
}

.hero-center p{
  font-size:24px;
  margin:0 0 28px;
  color:rgba(233,244,255,.92);
  text-shadow:0 3px 18px rgba(0,0,0,.18);
}

/* button */
.hero-orbit-btn{
  min-width:230px !important;
  border-radius:18px !important;
  background:linear-gradient(135deg, #00d9ff 0%, #2a6bff 55%, #7347ff 100%) !important;
  box-shadow:
    0 18px 40px rgba(0,106,255,.28),
    0 0 0 1px rgba(255,255,255,.10) inset !important;
}

/* cloud */
.hero-tool-cloud{
  position:absolute;
  inset:0;
  max-width:1200px;
  margin:0 auto;
  pointer-events:none;
  z-index:4;
}

.hero-tool{
  position:absolute;
  width:118px;
  height:118px;
  border:none;
  border-radius:30px;
  background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.78));
  color:#091321;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  backdrop-filter: blur(14px);
  cursor:pointer;
  pointer-events:auto;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  border:1px solid rgba(255,255,255,.26);
  box-shadow:
    0 20px 50px rgba(3,12,28,.28),
    0 0 0 1px rgba(255,255,255,.18) inset,
    0 0 40px rgba(0,217,255,.08);
}

.hero-tool:hover{
  transform: translateY(-8px) scale(1.05);
  box-shadow:
    0 26px 60px rgba(3,12,28,.34),
    0 0 0 1px rgba(255,255,255,.26) inset,
    0 0 55px rgba(0,217,255,.18);
}

.hero-tool-icon{
  font-size:31px;
  line-height:1;
}

.hero-tool-label{
  font-size:14px;
  font-weight:800;
  line-height:1.1;
}

/* floating animation */
.tool-qr,
.tool-pdf,
.tool-img,
.tool-pass,
.tool-ip,
.tool-unit{
  animation: toolFloat 4.5s ease-in-out infinite;
}

.tool-pdf{ animation-delay: .3s; }
.tool-img{ animation-delay: .7s; }
.tool-pass{ animation-delay: 1s; }
.tool-ip{ animation-delay: 1.4s; }
.tool-unit{ animation-delay: 1.8s; }

/* positions */
.tool-qr{ top: 125px; left: 110px; }
.tool-pdf{ top: 95px; right: 115px; }
.tool-img{ top: 300px; left: 35px; }
.tool-pass{ top: 295px; right: 45px; }
.tool-ip{ bottom: 115px; left: 145px; }
.tool-unit{ bottom: 110px; right: 145px; }

/* navbar over dark hero */
.topbar{
  position:relative;
  z-index:20;
}

.logo,
.topnav a,
.login-btn{
  color:#f8fbff !important;
}

.login-btn{
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
}

/* tools area lift */
.tools-hub{
  position:relative;
  z-index:3;
  margin-top:-45px !important;
}

/* sections look more premium */
.tools-group{
  background:linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.92));
  border:1px solid rgba(164,180,214,.18);
  border-radius:28px;
  padding:26px;
  box-shadow:0 18px 42px rgba(15,23,42,.06);
}

.tools-group + .tools-group{
  margin-top:26px;
}

.tools-group-head h2{
  color:#0a1730 !important;
}

.tools-group-head p{
  color:#63738d !important;
}

.tools-grid .mini-card{
  background:
    radial-gradient(circle at top right, rgba(67,125,255,.08), transparent 35%),
    #ffffff !important;
  border:1px solid rgba(166,183,217,.18) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.06) !important;
}

.tools-grid .mini-card:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 42px rgba(15,23,42,.10) !important;
}

/* animations */
@keyframes gridFloat{
  from{ transform: perspective(900px) rotateX(68deg) scale(1.4) translateY(0); }
  to{ transform: perspective(900px) rotateX(68deg) scale(1.4) translateY(22px); }
}

@keyframes particlesFloat{
  from{ transform: translateY(0) translateX(0); }
  to{ transform: translateY(-18px) translateX(12px); }
}

@keyframes particlesFloat2{
  from{ transform: translateY(10px) translateX(0); }
  to{ transform: translateY(-14px) translateX(-10px); }
}

@keyframes toolFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}

/* mobile */
@media (max-width: 992px){
  .hero{
    min-height:700px;
  }

  .hero-center h1{
    font-size:64px;
  }

  .hero-center p{
    font-size:20px;
  }

  .hero-tool{
    width:98px;
    height:98px;
    border-radius:24px;
  }

  .hero-tool-icon{
    font-size:25px;
  }

  .hero-tool-label{
    font-size:12px;
  }

  .tool-qr{ top: 120px; left: 35px; }
  .tool-pdf{ top: 100px; right: 35px; }
  .tool-img{ top: 300px; left: 0; }
  .tool-pass{ top: 300px; right: 0; }
  .tool-ip{ bottom: 100px; left: 55px; }
  .tool-unit{ bottom: 100px; right: 55px; }
}

@media (max-width: 768px){
  .hero{
    min-height:650px;
    padding:95px 18px 60px !important;
  }

  .hero-center h1{
    font-size:46px;
    letter-spacing:-1px;
  }

  .hero-center p{
    font-size:17px;
    margin-bottom:20px;
  }

  .hero-tool{
    width:78px;
    height:78px;
    border-radius:20px;
    gap:5px;
  }

  .hero-tool-icon{
    font-size:20px;
  }

  .hero-tool-label{
    font-size:10px;
  }

  .tool-qr{ top: 120px; left: 8px; }
  .tool-pdf{ top: 110px; right: 8px; }
  .tool-img{ top: 260px; left: 0; }
  .tool-pass{ top: 260px; right: 0; }
  .tool-ip{ bottom: 82px; left: 28px; }
  .tool-unit{ bottom: 82px; right: 28px; }

  .tools-group{
    padding:20px;
    border-radius:22px;
  }
}
/* ===== TOOLAXIS AI HERO OVERRIDE ===== */

.hero{
  position: relative !important;
  min-height: 760px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:hidden !important;
  padding:120px 24px 90px !important;

  background:
  radial-gradient(circle at 20% 18%, rgba(0,255,240,.10), transparent 20%),
  radial-gradient(circle at 80% 22%, rgba(139,92,246,.16), transparent 24%),
  radial-gradient(circle at 50% 50%, rgba(255,255,255,.05), transparent 40%),
  linear-gradient(135deg, #050816 0%, #0a1530 35%, #11295a 68%, #1c4ed8 100%) !important;
}

/* glowing grid background */

.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
  linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
  linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);

  background-size:40px 40px;
  opacity:.25;
  transform: perspective(900px) rotateX(65deg) scale(1.5);
  animation:gridMove 10s linear infinite;
}

/* floating particles */

.hero::after{
  content:"";
  position:absolute;
  inset:0;

  background:
  radial-gradient(circle at 10% 30%, rgba(0,255,240,.25) 0 2px, transparent 3px),
  radial-gradient(circle at 25% 70%, rgba(255,255,255,.35) 0 2px, transparent 3px),
  radial-gradient(circle at 50% 20%, rgba(139,92,246,.25) 0 2px, transparent 3px),
  radial-gradient(circle at 70% 60%, rgba(0,255,240,.20) 0 2px, transparent 3px),
  radial-gradient(circle at 90% 40%, rgba(255,255,255,.30) 0 2px, transparent 3px);

  animation:particlesMove 16s ease-in-out infinite alternate;
}

/* hero text */

.hero-center{
  position:relative;
  z-index:5;
  text-align:center;
  color:#fff;
}

.hero-center h1{
  font-size:88px;
  font-weight:900;
  letter-spacing:-2px;
  text-shadow:0 10px 40px rgba(0,0,0,.3);
}

.hero-center p{
  font-size:24px;
  opacity:.9;
}

/* floating tool cards */

.hero-tool{
  backdrop-filter: blur(12px);
  background:rgba(255,255,255,.85);
  border-radius:28px;
  box-shadow:
  0 20px 50px rgba(0,0,0,.25),
  0 0 40px rgba(0,255,240,.1);
}

/* animations */

@keyframes gridMove{
  from{transform: perspective(900px) rotateX(65deg) scale(1.5) translateY(0)}
  to{transform: perspective(900px) rotateX(65deg) scale(1.5) translateY(20px)}
}

@keyframes particlesMove{
  from{transform:translateY(0)}
  to{transform:translateY(-20px)}
}
/* ===== TOOLAXIS AI BACKGROUND ===== */

body{

background:
radial-gradient(circle at 10% 20%, rgba(0,255,240,.18), transparent 30%),
radial-gradient(circle at 80% 30%, rgba(139,92,246,.22), transparent 30%),
radial-gradient(circle at 40% 70%, rgba(29,78,216,.20), transparent 35%),
linear-gradient(135deg,#050816 0%,#0a1530 35%,#0d2345 65%,#122d66 100%);

color:#e6f0ff;

}

/* glow layer */

body::before{

content:"";
position:fixed;
inset:0;
z-index:-1;

background:

radial-gradient(circle at 20% 40%, rgba(0,255,240,.15) 0%, transparent 40%),
radial-gradient(circle at 80% 60%, rgba(139,92,246,.20) 0%, transparent 45%),
radial-gradient(circle at 50% 20%, rgba(255,255,255,.08) 0%, transparent 30%);

filter:blur(80px);

animation:aiGlow 12s ease-in-out infinite alternate;

}

/* subtle grid */

body::after{

content:"";
position:fixed;
inset:0;
z-index:-1;

background-image:
linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);

background-size:60px 60px;

opacity:.15;

}

/* cards style */

.tools-group,
.mini-card,
.tool-card.large{

background:rgba(255,255,255,.05) !important;
border:1px solid rgba(255,255,255,.08) !important;
backdrop-filter:blur(10px);

color:#fff;

}

/* buttons glow */

.tool-btn,
.main-btn{

background:linear-gradient(135deg,#00eaff,#2563eb,#7c3aed) !important;

box-shadow:
0 10px 30px rgba(0,234,255,.25),
0 0 20px rgba(124,58,237,.25);

}

/* hover lift */

.mini-card:hover,
.tool-card.large:hover{

transform:translateY(-6px) scale(1.02);

box-shadow:
0 25px 60px rgba(0,0,0,.4),
0 0 40px rgba(0,234,255,.15);

}

/* glow animation */

@keyframes aiGlow{

0%{
transform:scale(1);
}

100%{
transform:scale(1.1);
}

}
/* ===== TOOLAXIS FULL AI THEME ===== */

/* page background */
body{
  background:
    radial-gradient(circle at 12% 20%, rgba(0,255,240,.10), transparent 28%),
    radial-gradient(circle at 82% 26%, rgba(124,58,237,.12), transparent 30%),
    linear-gradient(180deg, #07111f 0%, #0d1b34 28%, #12284f 58%, #0d1930 100%) !important;
  color:#eaf2ff;
}

/* section wrapper under hero */
.tools-hub{
  position:relative;
  z-index:3;
  margin-top:-40px !important;
}

/* every tools section */
.tools-group{
  background:
    linear-gradient(180deg, rgba(15,25,48,.72), rgba(12,20,40,.82)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:28px !important;
  padding:26px !important;
  box-shadow:
    0 20px 45px rgba(0,0,0,.28),
    0 0 0 1px rgba(255,255,255,.03) inset,
    0 0 40px rgba(0,255,240,.05);
  backdrop-filter: blur(12px);
}

/* headings inside sections */
.tools-group-head h2{
  color:#f4f8ff !important;
}

.tools-group-head p{
  color:rgba(220,232,255,.72) !important;
}

/* cards */
.tools-grid .mini-card{
  background:
    radial-gradient(circle at top right, rgba(0,255,240,.06), transparent 35%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 14px 34px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.02) inset !important;
  color:#ffffff !important;
}

.tools-grid .mini-card:hover{
  transform:translateY(-6px);
  box-shadow:
    0 20px 45px rgba(0,0,0,.30),
    0 0 26px rgba(0,255,240,.10) !important;
}

.tools-grid .mini-card span{
  color:#f4f8ff !important;
}

/* icons in cards */
.tools-grid .mini-icon{
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.08),
    0 10px 25px rgba(0,0,0,.16);
}

/* pdf / qr slight color identity */
.pdf-card .mini-icon{
  background:linear-gradient(180deg, rgba(255,120,120,.15), rgba(255,120,120,.08)) !important;
}

.qr-card .mini-icon{
  background:linear-gradient(180deg, rgba(140,120,255,.16), rgba(140,120,255,.08)) !important;
}

/* tool panels */
.tool-panel-box{
  background:
    linear-gradient(180deg, rgba(14,24,46,.92), rgba(9,18,36,.96)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 20px 45px rgba(0,0,0,.32),
    0 0 0 1px rgba(255,255,255,.03) inset !important;
  color:#ffffff !important;
}

.tool-panel-box h2{
  color:#ffffff !important;
}

.tool-panel-box p{
  color:rgba(226,236,255,.74) !important;
}

/* inputs */
.tool-panel-row input,
.tool-panel-row select,
.tool-panel-box textarea,
#passwordOutput,
#mortgageResult,
#imageInfo,
#textResult,
#unitResult,
#ipResult,
#currencyResult,
#jpgToPdfResult,
#mergePdfResult,
#splitPdfResult,
#compressPdfResult,
#pdfToJpgResult,
#resizeResult,
#converterResult{
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#ffffff !important;
  box-shadow:none !important;
}

.tool-panel-row input::placeholder,
.tool-panel-box textarea::placeholder{
  color:rgba(226,236,255,.44);
}

.tool-panel-row input:focus,
.tool-panel-row select:focus,
.tool-panel-box textarea:focus{
  outline:none;
  border-color:rgba(0,255,240,.40) !important;
  box-shadow:0 0 0 4px rgba(0,255,240,.08) !important;
}

/* buttons */
.tool-btn,
.main-btn{
  background:linear-gradient(135deg, #00d9ff 0%, #2563eb 52%, #7c3aed 100%) !important;
  color:#ffffff !important;
  box-shadow:
    0 12px 28px rgba(0,217,255,.16),
    0 0 18px rgba(124,58,237,.12) !important;
}

/* about / contact */
#about .tool-panel-box,
#contact .tool-panel-box{
  background:
    linear-gradient(180deg, rgba(14,24,46,.92), rgba(9,18,36,.96)) !important;
}

/* navbar links over dark hero */
.logo,
.topnav a,
.login-btn{
  color:#f7fbff !important;
}

/* ===== AI CORE SHAPE ===== */
.hero-ai-core{
  position:absolute;
  width:240px;
  height:240px;
  border-radius:50%;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:2;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 28%, transparent 58%),
    conic-gradient(
      from 0deg,
      rgba(0,255,240,.22),
      rgba(124,58,237,.20),
      rgba(37,99,235,.22),
      rgba(0,255,240,.22)
    );
  filter:blur(0.2px);
  animation: aiPulse 5s ease-in-out infinite;
}

.hero-ai-core::before{
  content:"";
  position:absolute;
  inset:26px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  box-shadow:
    0 0 30px rgba(0,255,240,.10),
    inset 0 0 20px rgba(124,58,237,.08);
}

.hero-ai-core::after{
  content:"";
  position:absolute;
  inset:74px;
  border-radius:50%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.28), rgba(255,255,255,.04) 62%, transparent 70%);
  box-shadow:
    0 0 40px rgba(0,255,240,.14),
    0 0 70px rgba(124,58,237,.12);
}

@keyframes aiPulse{
  0%,100%{
    transform:translate(-50%,-50%) scale(1);
    opacity:.92;
  }
  50%{
    transform:translate(-50%,-50%) scale(1.06);
    opacity:1;
  }
}

/* keep hero tools above the core */
.hero-tool-cloud{
  z-index:4;
}

.hero-center{
  z-index:5;
}

/* mobile */
@media (max-width:768px){
  .tools-group{
    padding:20px !important;
    border-radius:22px !important;
  }

  .hero-ai-core{
    width:170px;
    height:170px;
  }
}
/* ===== CV BUILDER ===== */

.cv-builder-box{
  padding: 32px !important;
}

.cv-builder-head{
  margin-bottom: 22px;
}

.cv-builder-head h2{
  margin-bottom: 8px;
}

.cv-builder-layout{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items:start;
}

.cv-form-side,
.cv-preview-side{
  min-width:0;
}

.cv-form-group{
  margin-bottom: 18px;
  padding: 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}

.cv-form-group h3{
  margin: 0 0 14px;
  font-size: 18px;
  color: #fff;
}

.cv-form-group input,
.cv-form-group textarea{
  width:100%;
  margin-bottom:12px;
  height:52px;
  border-radius:12px;
  padding:0 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#fff;
}

.cv-form-group textarea{
  height:110px;
  padding:14px;
  resize:vertical;
}

.cv-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.cv-actions .tool-btn{
  min-width:190px;
}

.cv-preview{
  background:#ffffff;
  color:#111827;
  border-radius: 22px;
  padding: 28px;
  box-shadow: 0 20px 40px rgba(0,0,0,.20);
}

.cv-preview-top{
  display:flex;
  gap:18px;
  align-items:center;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:18px;
  margin-bottom:18px;
}

#cvPreviewPhoto{
  width:84px;
  height:84px;
  object-fit:cover;
  border-radius:18px;
  border:1px solid #d1d5db;
}

.cv-preview h1{
  font-size:32px;
  margin:0 0 4px;
}

.cv-preview h2{
  font-size:18px;
  margin:0 0 8px;
  color:#2563eb;
  font-weight:700;
}

.cv-preview-section{
  margin-top:16px;
}

.cv-preview-section h3{
  font-size:16px;
  margin:0 0 8px;
  color:#111827;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:6px;
}

.cv-preview-section p{
  margin:0;
  color:#374151;
  line-height:1.65;
  white-space:pre-line;
}

@media (max-width: 992px){
  .cv-builder-layout{
    grid-template-columns: 1fr;
  }
}
/* ===== CV BUILDER PRO ===== */

.cv-builder-box{
  padding:36px !important;
  background:
    linear-gradient(180deg, rgba(10,18,34,.96), rgba(7,14,28,.98)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:28px !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.03) inset !important;
}

.cv-builder-head{
  margin-bottom:24px;
}

.cv-builder-head h2{
  margin:0 0 8px;
  font-size:34px !important;
  color:#ffffff !important;
}

.cv-builder-head p{
  margin:0;
  color:rgba(226,236,255,.74) !important;
  font-size:16px;
}

.cv-builder-layout{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:26px;
  align-items:start;
}

.cv-form-side,
.cv-preview-side{
  min-width:0;
}

.cv-form-side{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px;
  padding:22px;
}

.cv-form-group{
  margin-bottom:18px;
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.cv-form-group h3{
  margin:0 0 14px;
  font-size:18px;
  color:#ffffff;
  font-weight:800;
}

.cv-form-group input,
.cv-form-group textarea{
  width:100%;
  margin-bottom:12px;
  min-height:54px;
  border-radius:14px;
  padding:0 15px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#ffffff;
  font-size:15px;
  transition:.2s ease;
}

.cv-form-group textarea{
  min-height:120px;
  padding:14px 15px;
  resize:vertical;
}

.cv-form-group input::placeholder,
.cv-form-group textarea::placeholder{
  color:rgba(226,236,255,.42);
}

.cv-form-group input:focus,
.cv-form-group textarea:focus{
  outline:none;
  border-color:rgba(0,255,240,.35);
  box-shadow:0 0 0 4px rgba(0,255,240,.08);
}

.cv-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
}

.cv-actions .tool-btn{
  min-width:190px;
}

/* ===== preview side ===== */

.cv-preview-side{
  position:sticky;
  top:24px;
}

.cv-preview{
  background:#ffffff;
  color:#111827;
  border-radius:26px;
  padding:34px;
  box-shadow:
    0 25px 55px rgba(0,0,0,.28),
    0 0 0 1px rgba(17,24,39,.04);
  min-height:700px;
}

.cv-preview-top{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:18px;
  align-items:center;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:22px;
  margin-bottom:22px;
}

#cvPreviewPhoto{
  width:96px;
  height:96px;
  object-fit:cover;
  border-radius:22px;
  border:1px solid #d1d5db;
  background:#f3f4f6;
}

.cv-preview h1{
  font-size:40px;
  line-height:1.05;
  margin:0 0 6px;
  color:#0f172a;
  font-weight:900;
  letter-spacing:-1px;
}

.cv-preview h2{
  font-size:18px;
  margin:0 0 10px;
  color:#2563eb;
  font-weight:800;
}

#cvPreviewContact{
  margin:0;
  color:#475569;
  line-height:1.6;
  font-size:14px;
}

.cv-preview-section{
  margin-top:22px;
}

.cv-preview-section h3{
  font-size:16px;
  margin:0 0 10px;
  color:#111827;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.cv-preview-section p{
  margin:0;
  color:#334155;
  line-height:1.75;
  white-space:pre-line;
  font-size:15px;
}

/* experience / education items if we add later */
.cv-preview-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cv-preview-item{
  padding:0;
}

.cv-preview-item-title{
  font-weight:800;
  color:#0f172a;
  margin-bottom:4px;
}

.cv-preview-item-meta{
  color:#2563eb;
  font-size:14px;
  margin-bottom:6px;
}

.cv-preview-item-text{
  color:#475569;
  line-height:1.7;
  font-size:14px;
}

/* skill tags */
.cv-skill-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.cv-skill-tag{
  padding:8px 12px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:13px;
  font-weight:700;
  border:1px solid #dbeafe;
}

/* responsive */
@media (max-width: 1100px){
  .cv-builder-layout{
    grid-template-columns: 1fr;
  }

  .cv-preview-side{
    position:relative;
    top:auto;
  }
}

@media (max-width: 768px){
  .cv-builder-box{
    padding:22px !important;
    border-radius:22px !important;
  }

  .cv-form-side{
    padding:16px;
    border-radius:18px;
  }

  .cv-preview{
    padding:22px;
    border-radius:20px;
  }

  .cv-preview-top{
    grid-template-columns:1fr;
    text-align:center;
  }

  #cvPreviewPhoto{
    margin:0 auto;
  }

  .cv-preview h1{
    font-size:30px;
  }
}
/* ===== CV BUILDER PRO ===== */

.cv-builder-box{
  padding:36px !important;
  background:
    linear-gradient(180deg, rgba(10,18,34,.96), rgba(7,14,28,.98)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:28px !important;
  box-shadow:
    0 24px 60px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.03) inset !important;
}

.cv-builder-head{
  margin-bottom:24px;
}

.cv-builder-head h2{
  margin:0 0 8px;
  font-size:34px !important;
  color:#ffffff !important;
}

.cv-builder-head p{
  margin:0;
  color:rgba(226,236,255,.74) !important;
  font-size:16px;
}

.cv-builder-layout{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap:26px;
  align-items:start;
}

.cv-form-side,
.cv-preview-side{
  min-width:0;
}

.cv-form-side{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:24px;
  padding:22px;
}

.cv-stepper{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom:18px;
}

.cv-step{
  padding:10px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.72);
  font-size:13px;
  font-weight:700;
}

.cv-step.active{
  background:linear-gradient(135deg, rgba(0,217,255,.16), rgba(124,58,237,.16));
  color:#fff;
  border-color:rgba(255,255,255,.12);
}

.cv-form-group{
  margin-bottom:18px;
  padding:18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}

.cv-group-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}

.cv-form-group h3{
  margin:0;
  font-size:18px;
  color:#ffffff;
  font-weight:800;
}

.cv-form-group input,
.cv-form-group textarea{
  width:100%;
  margin-bottom:12px;
  min-height:54px;
  border-radius:14px;
  padding:0 15px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#ffffff;
  font-size:15px;
  transition:.2s ease;
}

.cv-form-group textarea{
  min-height:120px;
  padding:14px 15px;
  resize:vertical;
}

.cv-form-group input::placeholder,
.cv-form-group textarea::placeholder{
  color:rgba(226,236,255,.42);
}

.cv-form-group input:focus,
.cv-form-group textarea:focus{
  outline:none;
  border-color:rgba(0,255,240,.35);
  box-shadow:0 0 0 4px rgba(0,255,240,.08);
}

.cv-repeat-item{
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  margin-bottom:12px;
}

.cv-repeat-item:last-child{
  margin-bottom:0;
}

.cv-repeat-item textarea{
  min-height:90px;
}

.small-btn{
  min-width:auto !important;
  padding:10px 14px !important;
  font-size:14px !important;
  border-radius:12px !important;
}

.remove-item-btn{
  min-width:auto !important;
  padding:8px 12px !important;
  font-size:13px !important;
  border-radius:10px !important;
  margin-top:4px;
}

.cv-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:8px;
}

.cv-actions .tool-btn{
  min-width:190px;
}

/* preview */

.cv-preview-side{
  position:sticky;
  top:24px;
}

.cv-preview{
  background:#ffffff;
  color:#111827;
  border-radius:26px;
  padding:34px;
  box-shadow:
    0 25px 55px rgba(0,0,0,.28),
    0 0 0 1px rgba(17,24,39,.04);
  min-height:700px;
}

.cv-preview-top{
  display:grid;
  grid-template-columns:96px 1fr;
  gap:18px;
  align-items:center;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:22px;
  margin-bottom:22px;
}

#cvPreviewPhoto{
  width:96px;
  height:96px;
  object-fit:cover;
  border-radius:22px;
  border:1px solid #d1d5db;
  background:#f3f4f6;
}

.cv-preview h1{
  font-size:40px;
  line-height:1.05;
  margin:0 0 6px;
  color:#0f172a;
  font-weight:900;
  letter-spacing:-1px;
}

.cv-preview h2{
  font-size:18px;
  margin:0 0 10px;
  color:#2563eb;
  font-weight:800;
}

#cvPreviewContact{
  margin:0;
  color:#475569;
  line-height:1.6;
  font-size:14px;
}

.cv-preview-section{
  margin-top:22px;
}

.cv-preview-section h3{
  font-size:16px;
  margin:0 0 10px;
  color:#111827;
  border-bottom:1px solid #e5e7eb;
  padding-bottom:8px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.4px;
}

.cv-preview-section p{
  margin:0;
  color:#334155;
  line-height:1.75;
  white-space:pre-line;
  font-size:15px;
}

.cv-preview-list{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.cv-preview-item-title{
  font-weight:800;
  color:#0f172a;
  margin-bottom:4px;
  font-size:15px;
}

.cv-preview-item-meta{
  color:#2563eb;
  font-size:14px;
  margin-bottom:6px;
  font-weight:700;
}

.cv-preview-item-text{
  color:#475569;
  line-height:1.7;
  font-size:14px;
  white-space:pre-line;
}

.cv-preview-empty{
  color:#64748b;
  font-size:14px;
}

.cv-skill-tags,
.cv-skill-tags-editor{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.cv-skill-tag,
.cv-skill-tag-editor{
  padding:8px 12px;
  border-radius:999px;
  background:#eff6ff;
  color:#1d4ed8;
  font-size:13px;
  font-weight:700;
  border:1px solid #dbeafe;
}

.cv-skill-tag-editor{
  background:rgba(255,255,255,.08);
  color:#fff;
  border:1px solid rgba(255,255,255,.10);
}

.cv-skill-tag-editor button{
  margin-left:8px;
  border:none;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-weight:700;
}

@media (max-width: 1100px){
  .cv-builder-layout{
    grid-template-columns: 1fr;
  }

  .cv-preview-side{
    position:relative;
    top:auto;
  }
}

@media (max-width: 768px){
  .cv-builder-box{
    padding:22px !important;
    border-radius:22px !important;
  }

  .cv-form-side{
    padding:16px;
    border-radius:18px;
  }

  .cv-preview{
    padding:22px;
    border-radius:20px;
  }

  .cv-preview-top{
    grid-template-columns:1fr;
    text-align:center;
  }

  #cvPreviewPhoto{
    margin:0 auto;
  }

  .cv-preview h1{
    font-size:30px;
  }
}
/* ===== CV PREVIEW PRO TEMPLATE ===== */

.cv-preview{
  background:#ffffff !important;
  color:#1f2937 !important;
  border-radius:24px !important;
  padding:0 !important;
  overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,.28) !important;
  min-height:820px;
}

.cv-preview-shell{
  display:grid;
  grid-template-columns:280px 1fr;
  min-height:820px;
  background:#ffffff;
}

/* ===== SIDEBAR ===== */
.cv-preview-sidebar{
  color:#ffffff;
  display:flex;
  flex-direction:column;
  background:var(--cv-sidebar,#17367a);
}

.cv-sidebar-top{
  padding:34px 28px 24px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:220px;
}

#cvPreviewPhoto{
  width:170px !important;
  height:170px !important;
  border-radius:999px !important;
  object-fit:cover !important;
  border:6px solid rgba(255,255,255,.18) !important;
  background:#fff !important;
  display:block;
}

.cv-sidebar-namebox{
  padding:24px 22px;
  background:rgba(255,255,255,.10);
}

.cv-sidebar-namebox h1{
  font-size:28px !important;
  line-height:1.05 !important;
  margin:0 0 8px !important;
  color:#ffffff !important;
  font-weight:900 !important;
  letter-spacing:.3px;
}

.cv-sidebar-namebox h2{
  margin:0 !important;
  color:rgba(255,255,255,.85) !important;
  font-size:14px !important;
  text-transform:uppercase;
  letter-spacing:4px;
  font-weight:700 !important;
}

.cv-sidebar-block{
  padding:22px;
  border-top:1px solid rgba(255,255,255,.10);
}

.cv-sidebar-block h4{
  margin:0 0 12px;
  color:#ffffff;
  font-size:15px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.8px;
}

#cvPreviewContact{
  margin:0 !important;
  color:rgba(255,255,255,.92) !important;
  font-size:14px !important;
  line-height:1.8 !important;
  white-space:pre-line;
}

.cv-preview-sidebar .cv-skill-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.cv-preview-sidebar .cv-skill-tag{
  background:rgba(255,255,255,.12) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

/* ===== MAIN ===== */
.cv-preview-main{
  background:#ffffff;
  padding:34px 38px;
}

.cv-preview-main .cv-preview-section{
  margin-top:0;
  margin-bottom:28px;
}

.cv-preview-main .cv-preview-section:last-child{
  margin-bottom:0;
}

.cv-preview-main .cv-preview-section h3{
  display:inline-block;
  margin:0 0 16px !important;
  padding-bottom:8px;
  color:var(--cv-accent,#294d8f) !important;
  border-bottom:4px solid var(--cv-accent,#294d8f) !important;
  font-size:20px !important;
  font-weight:900 !important;
  text-transform:uppercase;
  letter-spacing:3px;
}

.cv-preview-main .cv-preview-section p{
  color:#41546f !important;
  font-size:15px !important;
  line-height:1.85 !important;
}

.cv-preview-list{
  display:flex;
  flex-direction:column;
  gap:22px;
}

.cv-preview-item-title{
  font-size:18px !important;
  font-weight:900 !important;
  color:#4b5563 !important;
  line-height:1.45;
  margin-bottom:4px;
}

.cv-preview-item-meta{
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--cv-accent,#294d8f) !important;
  margin-bottom:10px !important;
}

.cv-preview-item-text{
  color:#475569 !important;
  line-height:1.85 !important;
  font-size:15px !important;
  white-space:pre-line;
}

.cv-preview-empty{
  color:#7b8aa0 !important;
  font-size:14px;
}

/* ===== THEME COLORS ===== */
.cv-theme-navy{
  --cv-sidebar:#17367a;
  --cv-accent:#334f8f;
}

.cv-theme-emerald{
  --cv-sidebar:#0f4f4a;
  --cv-accent:#15736a;
}

.cv-theme-charcoal{
  --cv-sidebar:#222831;
  --cv-accent:#3f4a5a;
}

/* form select match */
#cvTheme{
  width:100%;
  margin-bottom:12px;
  min-height:54px;
  border-radius:14px;
  padding:0 15px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  color:#ffffff;
  font-size:15px;
}

#cvTheme:focus{
  outline:none;
  border-color:rgba(0,255,240,.35);
  box-shadow:0 0 0 4px rgba(0,255,240,.08);
}

/* contact lines prettier in pdf */
#cvPreviewContact{
  word-break:break-word;
}

/* mobile */
@media (max-width: 900px){
  .cv-preview-shell{
    grid-template-columns:1fr;
  }

  .cv-sidebar-top{
    min-height:unset;
    padding-top:28px;
  }

  #cvPreviewPhoto{
    width:130px !important;
    height:130px !important;
  }

  .cv-preview-main{
    padding:24px;
  }
}
/* ===== CV BUILDER FINAL POLISH ===== */

.cv-preview{
  background:#ffffff !important;
  color:#1f2937 !important;
  border-radius:24px !important;
  padding:0 !important;
  overflow:hidden;
  box-shadow:0 24px 50px rgba(0,0,0,.28) !important;
  min-height:960px;
}

.cv-preview-shell{
  display:grid;
  grid-template-columns:200px 1fr;
  min-height:960px;
  background:#ffffff;
}

/* LEFT SIDEBAR */
.cv-preview-sidebar{
  color:#ffffff;
  display:flex;
  flex-direction:column;
  background:var(--cv-sidebar,#17367a);
}

.cv-sidebar-top{
  padding:30px 22px 20px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:200px;
}

#cvPreviewPhoto{
  width:155px !important;
  height:155px !important;
  border-radius:999px !important;
  object-fit:cover !important;
  border:6px solid rgba(255,255,255,.16) !important;
  background:#fff !important;
  display:block;
}

.cv-sidebar-namebox{
  padding:22px 20px;
  background:rgba(255,255,255,.12);
}

.cv-sidebar-namebox h1{
  font-size:24px !important;
  line-height:1.05 !important;
  margin:0 0 8px !important;
  color:#ffffff !important;
  font-weight:900 !important;
  letter-spacing:.3px;
}

.cv-sidebar-namebox h2{
  margin:0 !important;
  color:rgba(255,255,255,.88) !important;
  font-size:13px !important;
  text-transform:uppercase;
  letter-spacing:4px;
  font-weight:700 !important;
}

.cv-sidebar-block{
  padding:20px;
  border-top:1px solid rgba(255,255,255,.10);
}

.cv-sidebar-block h4{
  margin:0 0 12px;
  color:#ffffff;
  font-size:14px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.8px;
}

#cvPreviewContact{
  margin:0 !important;
  color:rgba(255,255,255,.94) !important;
  font-size:13px !important;
  line-height:1.9 !important;
  white-space:pre-line;
  word-break:break-word;
}

.cv-preview-sidebar .cv-skill-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.cv-preview-sidebar .cv-skill-tag{
  background:rgba(255,255,255,.12) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

/* RIGHT MAIN */
.cv-preview-main{
  background:#ffffff;
  padding:32px 34px;
}

.cv-preview-main .cv-preview-section{
  margin-top:0;
  margin-bottom:26px;
}

.cv-preview-main .cv-preview-section:last-child{
  margin-bottom:0;
}

.cv-preview-main .cv-preview-section h3{
  display:inline-block;
  margin:0 0 14px !important;
  padding-bottom:7px;
  color:var(--cv-accent,#294d8f) !important;
  border-bottom:4px solid var(--cv-accent,#294d8f) !important;
  font-size:18px !important;
  font-weight:900 !important;
  text-transform:uppercase;
  letter-spacing:3px;
}

.cv-preview-main .cv-preview-section p{
  color:#41546f !important;
  font-size:14px !important;
  line-height:1.85 !important;
}

.cv-preview-list{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.cv-preview-item-title{
  font-size:16px !important;
  font-weight:900 !important;
  color:#4b5563 !important;
  line-height:1.45;
  margin-bottom:4px;
}

.cv-preview-item-meta{
  font-size:14px !important;
  font-weight:700 !important;
  color:var(--cv-accent,#294d8f) !important;
  margin-bottom:8px !important;
}

.cv-preview-item-text{
  color:#475569 !important;
  line-height:1.85 !important;
  font-size:14px !important;
  white-space:pre-line;
}

.cv-preview-empty{
  color:#7b8aa0 !important;
  font-size:14px;
}

/* THEMES */
.cv-theme-navy{
  --cv-sidebar:#17367a;
  --cv-accent:#334f8f;
}

.cv-theme-emerald{
  --cv-sidebar:#0f4f4a;
  --cv-accent:#15736a;
}

.cv-theme-charcoal{
  --cv-sidebar:#222831;
  --cv-accent:#3f4a5a;
}

/* MOBILE */
@media (max-width: 900px){
  .cv-preview-shell{
    grid-template-columns:1fr;
  }

  .cv-sidebar-top{
    min-height:unset;
    padding-top:28px;
  }

  #cvPreviewPhoto{
    width:130px !important;
    height:130px !important;
  }

  .cv-preview-main{
    padding:24px;
  }
}
/* ===== CV BUILDER A4 LAYOUT FIX ===== */

/* A4 size */
.cv-preview{
  width:794px !important;
  min-height:1123px !important;
  background:#ffffff !important;
  margin:auto !important;
  border-radius:6px !important;
  box-shadow:0 15px 40px rgba(0,0,0,.25) !important;
  padding:0 !important;
  overflow:hidden;
}

/* layout columns */
.cv-preview-shell{
  display:grid !important;
  grid-template-columns:190px 1fr !important;
  min-height:1123px;
}

/* sidebar */
.cv-preview-sidebar{
  background:var(--cv-sidebar,#17367a) !important;
  color:#fff !important;
}

/* main content */
.cv-preview-main{
  padding:36px 42px !important;
  background:#ffffff !important;
}

/* profile photo */
#cvPreviewPhoto{
  width:150px !important;
  height:150px !important;
  border-radius:100% !important;
  object-fit:cover !important;
  border:5px solid rgba(255,255,255,.2) !important;
}

/* text improvements */
.cv-preview-main .cv-preview-section h3{
  font-size:18px !important;
  border-bottom:3px solid var(--cv-accent,#334f8f) !important;
  padding-bottom:6px;
}

.cv-preview-item-title{
  font-size:16px !important;
  font-weight:800 !important;
}

.cv-preview-item-text{
  font-size:14px !important;
  line-height:1.8 !important;
}

/* skills */
.cv-preview-sidebar .cv-skill-tag{
  background:rgba(255,255,255,.15) !important;
  border:1px solid rgba(255,255,255,.2) !important;
}

/* mobile */
@media(max-width:900px){

  .cv-preview{
    width:100% !important;
    min-height:auto !important;
  }

  .cv-preview-shell{
    grid-template-columns:1fr !important;
  }

}