/* ==========================================================
   Tool Digital Hub — Global Futuristic Enhancement
   Applies to homepage + category pages + individual tool pages.
   Visual-only layer. Does not change tool logic.
   ========================================================== */

:root{
  --tdh-bg:#020914;
  --tdh-bg2:#05101d;
  --tdh-panel:rgba(7,24,42,.96);
  --tdh-panel2:rgba(5,17,31,.98);
  --tdh-line:rgba(70,157,255,.20);
  --tdh-cyan:#2be4ff;
  --tdh-blue:#168cff;
  --tdh-violet:#8b5dff;
  --tdh-pink:#f24fd8;
  --tdh-green:#27e98d;
  --tdh-text:#f8fbff;
  --tdh-muted:#9dafc5;
  --tdh-shadow:0 18px 44px rgba(0,0,0,.24);
}

html{
  scroll-behavior:smooth;
  background:var(--tdh-bg);
}

body{
  color:var(--tdh-text);
  background:
    radial-gradient(circle at 10% 5%,rgba(24,139,255,.09),transparent 27%),
    radial-gradient(circle at 90% 12%,rgba(135,75,255,.09),transparent 29%),
    radial-gradient(circle at 52% 78%,rgba(0,209,255,.03),transparent 34%),
    linear-gradient(180deg,var(--tdh-bg),var(--tdh-bg2) 52%,var(--tdh-bg)) !important;
  background-attachment:fixed;
}

/* Subtle page texture */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  opacity:.30;
  background-image:
    linear-gradient(rgba(78,141,215,.025) 1px,transparent 1px),
    linear-gradient(90deg,rgba(78,141,215,.025) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,black,transparent 92%);
}

/* Top navigation / back bars */
.navbar,
header.navbar,
.tool-header,
.topbar{
  background:rgba(2,10,20,.88) !important;
  border-bottom:1px solid rgba(62,143,231,.20) !important;
  box-shadow:0 10px 34px rgba(0,0,0,.22) !important;
  backdrop-filter:blur(14px) saturate(120%);
  -webkit-backdrop-filter:blur(14px) saturate(120%);
}

/* Main tool shells */
.age-shell,
.tool-shell,
.page-shell,
.container{
  position:relative;
}

.age-card,
.tool-card-main,
.tool-panel,
.calculator-box,
.converter-box,
.editor-box,
.upload-box,
.result-box,
.how-section,
.why-box,
.seo-content,
.faq-section,
.faq-box,
.content-card{
  border:1px solid var(--tdh-line) !important;
  background:
    radial-gradient(circle at 50% 0%,rgba(42,142,255,.055),transparent 42%),
    linear-gradient(180deg,var(--tdh-panel),var(--tdh-panel2)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.035),
    var(--tdh-shadow) !important;
}

/* Main card polish */
.age-card,
.tool-card-main,
.tool-panel{
  overflow:hidden;
  isolation:isolate;
}

.age-card::before,
.tool-card-main::before,
.tool-panel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(circle at 7% 3%,rgba(30,197,255,.08),transparent 24%),
    radial-gradient(circle at 94% 0%,rgba(135,79,255,.075),transparent 27%);
}

/* Tool hero icon */
.hero-icon,
.tool-hero-icon,
.tool-icon-large{
  border:1px solid rgba(69,184,255,.32) !important;
  background:
    radial-gradient(circle at 35% 25%,rgba(255,255,255,.10),transparent 28%),
    linear-gradient(145deg,rgba(29,150,255,.22),rgba(117,78,255,.18)) !important;
  box-shadow:
    0 0 30px rgba(37,173,255,.13),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  animation:tdhToolHeroFloat 4.2s ease-in-out infinite;
}

@keyframes tdhToolHeroFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-5px)}
}

/* Titles */
h1,
.tool-title{
  color:#fff;
  text-shadow:0 10px 32px rgba(0,0,0,.20);
}

.age-card > h1,
.tool-card-main > h1,
.tool-panel > h1,
.tool-title{
  background:linear-gradient(90deg,#fff 0 45%,#60d8ff 68%,#a46cff 88%,#f45bd8 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent !important;
}

/* Subtitles and body text */
.subtitle,
.tool-subtitle,
.seo-content p,
.how-section p,
.why-box p,
.faq-section p{
  color:var(--tdh-muted) !important;
}

/* Inputs / textareas / selects */
input,
textarea,
select{
  background:rgba(3,15,28,.88) !important;
  color:#f8fbff !important;
  border:1px solid rgba(68,151,237,.26) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  transition:border-color .22s ease,box-shadow .22s ease,transform .22s ease;
}

input:focus,
textarea:focus,
select:focus{
  outline:none !important;
  border-color:rgba(46,211,255,.60) !important;
  box-shadow:
    0 0 0 3px rgba(38,181,255,.08),
    0 0 24px rgba(38,181,255,.10) !important;
  transform:translateY(-1px);
}

input::placeholder,
textarea::placeholder{
  color:#6f849d !important;
}

/* Primary buttons */
button,
.btn,
.primary-btn,
.calculate-btn,
.convert-btn,
.download-btn,
.action-btn{
  border:1px solid rgba(100,204,255,.30) !important;
  color:#fff !important;
  background:linear-gradient(90deg,#147fff,#25c9ff 55%,#825dff) !important;
  box-shadow:0 9px 24px rgba(22,143,255,.22),0 0 24px rgba(77,93,255,.08) !important;
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease !important;
}

button:hover,
.btn:hover,
.primary-btn:hover,
.calculate-btn:hover,
.convert-btn:hover,
.download-btn:hover,
.action-btn:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
  box-shadow:0 14px 30px rgba(24,154,255,.28),0 0 28px rgba(106,81,255,.12) !important;
}

button:active,
.btn:active,
.primary-btn:active,
.calculate-btn:active,
.convert-btn:active,
.download-btn:active,
.action-btn:active{
  transform:scale(.98);
}

/* Secondary / back links */
.back-link,
.back-home,
.secondary-btn,
a.back{
  color:#63dcff !important;
  border-color:rgba(71,175,255,.24) !important;
  transition:transform .2s ease,color .2s ease,background .2s ease;
}

.back-link:hover,
.back-home:hover,
.secondary-btn:hover,
a.back:hover{
  transform:translateX(-2px);
  color:#fff !important;
  background:rgba(29,145,255,.08);
}

/* Results */
.result,
.result-box,
.output,
.output-box,
.preview-box{
  background:
    radial-gradient(circle at 50% 0%,rgba(37,203,255,.06),transparent 46%),
    rgba(4,17,31,.94) !important;
  border-color:rgba(68,172,255,.24) !important;
}

/* How-to / steps */
.steps-grid,
.features-grid,
.info-grid{
  gap:16px !important;
}

.step,
.step-card,
.feature-card,
.info-card{
  border:1px solid rgba(70,151,233,.17) !important;
  background:linear-gradient(180deg,rgba(9,29,49,.90),rgba(5,18,32,.95)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 25px rgba(0,0,0,.13);
  transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease;
}

.step:hover,
.step-card:hover,
.feature-card:hover,
.info-card:hover{
  transform:translateY(-4px);
  border-color:rgba(49,200,255,.34) !important;
  box-shadow:0 14px 28px rgba(0,0,0,.20),0 0 20px rgba(38,178,255,.07);
}

/* Section headings */
.how-section h2,
.why-box h2,
.seo-content h2,
.faq-section h2,
.faq-box h2{
  color:#fff !important;
  position:relative;
}

.how-section h2::after,
.why-box h2::after,
.seo-content h2::after,
.faq-section h2::after,
.faq-box h2::after{
  content:"";
  display:block;
  width:54px;
  height:3px;
  margin-top:8px;
  border-radius:999px;
  background:linear-gradient(90deg,#20dfff,#765cff,#f24fd8);
  box-shadow:0 0 14px rgba(42,194,255,.20);
}

/* File inputs */
input[type="file"]{
  padding:12px !important;
  border-style:dashed !important;
}

input[type="file"]::file-selector-button{
  border:0;
  border-radius:10px;
  margin-right:12px;
  padding:9px 13px;
  color:#fff;
  background:linear-gradient(90deg,#157fff,#755dff);
  cursor:pointer;
}

/* Tables */
table{
  background:rgba(4,16,29,.90) !important;
  border-color:rgba(70,151,233,.16) !important;
}

th{
  background:rgba(24,124,221,.12) !important;
  color:#eef9ff !important;
}

td{
  border-color:rgba(70,151,233,.12) !important;
}

/* Footer */
footer,
.footer{
  background:#020913 !important;
  border-top:1px solid rgba(56,131,207,.18) !important;
}

/* Smooth rendering and performance */
img{
  max-width:100%;
}

@media(max-width:760px){
  body{background-attachment:scroll}

  .age-card,
  .tool-card-main,
  .tool-panel,
  .calculator-box,
  .converter-box,
  .editor-box,
  .how-section,
  .why-box,
  .seo-content,
  .faq-section{
    border-radius:16px !important;
  }

  .hero-icon,
  .tool-hero-icon,
  .tool-icon-large{
    animation:none !important;
  }
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero-icon,
  .tool-hero-icon,
  .tool-icon-large{
    animation:none !important;
  }
  *,
  *::before,
  *::after{
    transition-duration:.001ms !important;
  }
}