:root{
  --bg0:#050910;
  --bg1:#071022;

  --text:#e8f2ff;
  --muted:#a8c2e6;

  --brand:#6ea8ff;
  --good:#3fe28a;

  --stroke: rgba(255,255,255,.10);

  --radius: 18px;
  --radius2: 22px;
  --maxw: 1100px;

  --shadow-lg: 0 30px 70px rgba(0,0,0,.55);
  --shadow-md: 0 16px 40px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html{min-height:100%}
body{
  min-height:100%;
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);

  background-color: var(--bg0);
  background-image:
    radial-gradient(1200px 700px at 70% 0%, rgba(110,168,255,.35), transparent 60%),
    radial-gradient(900px 600px at 20% 15%, rgba(75,210,255,.18), transparent 60%),
    linear-gradient(180deg, var(--bg1), var(--bg0) 55%, #04070c);
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

  overflow-x:hidden;
}

a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 18px}

/* =========================================================
   TOP NAV
   ========================================================= */

.topbar{
  position:sticky; top:0; z-index:50;
  backdrop-filter: blur(10px);
  background: rgba(5,9,16,.55);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.brand{
  display:flex; gap:10px; align-items:center;
  font-weight:800; letter-spacing:.2px;
  min-width: 0;
}
.brand-badge{
  width:34px; height:34px;
  border-radius:12px;
  background: linear-gradient(135deg, rgba(110,168,255,.95), rgba(75,210,255,.55));
  box-shadow: 0 12px 30px rgba(110,168,255,.25);
  display:grid; place-items:center;
  font-weight:900;
  color:#031026;
  flex: 0 0 auto;
}
.brand-logo {
  display: block;
  width: 20px;
  height: 20px;
}
.brand span{
  opacity:.95;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.links{
  display:flex; gap:18px; align-items:center;
  color: rgba(232,242,255,.88);
  font-weight:600;
}
.links a{
  padding:10px 12px;
  border-radius:12px;
  transition: background .15s ease, transform .15s ease;
}
.links a:hover{
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}

/* Burger (mobile) */
.burger{
  display:none;
  width:44px; height:44px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color: var(--text);
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.burger:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(110,168,255,.28);
  transform: translateY(-1px);
}
.burger:active{transform: translateY(0)}
.burger svg{display:block}
.burger .icon-x{display:none}
.mobile-open .burger .icon-burger{display:none}
.mobile-open .burger .icon-x{display:block}

/* =========================================================
   MOBILE MENU
   ========================================================= */

.mobile-overlay{
  position: fixed;
  inset: 64px 0 0 0;
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
  z-index: 40;
}
.mobile-open .mobile-overlay{
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu{
  position: absolute;
  left: 18px;
  right: 18px;
  top: 10px;
  border-radius: 18px;
  overflow:hidden;

  background:
    radial-gradient(900px 500px at 80% 0%, rgba(110,168,255,.14), transparent 60%),
    linear-gradient(180deg, rgba(10,18,30,.92), rgba(7,12,20,.92));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-lg);

  transform: translateY(-10px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: transform .18s ease, opacity .18s ease;
}
.mobile-open .mobile-menu{
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.mobile-menu-inner{
  padding: 12px;
  display:grid;
  gap:10px;
}

.m-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .15s ease, transform .15s ease, border-color .15s ease;
  font-weight: 800;
  color: rgba(232,242,255,.92);
}
.m-item:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(110,168,255,.20);
  transform: translateY(-1px);
}
.m-left{
  display:flex; align-items:center; gap:12px; min-width:0;
}
.m-ico{
  width:34px; height:34px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight: 900;
  color:#031026;
  background: linear-gradient(135deg, rgba(110,168,255,.95), rgba(75,210,255,.55));
  box-shadow: 0 14px 24px rgba(110,168,255,.14);
  flex: 0 0 auto;
}
.m-text{
  min-width:0;
  display:grid;
  gap:2px;
}
.m-text strong{
  font-size: 14px;
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.m-text span{
  font-size: 12px;
  font-weight: 700;
  color: rgba(168,194,230,.92);
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
}
.m-arrow{
  width:34px; height:34px;
  border-radius: 14px;
  display:grid; place-items:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  color: rgba(232,242,255,.75);
  flex: 0 0 auto;
}

/* =========================================================
   HOME HERO
   ========================================================= */

.hero{
  padding: 46px 0 22px;
  text-align:center;
}
.hero h1{
  margin:0 auto 10px;
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.02;
  letter-spacing: -.8px;
  max-width: 18ch;
}
.hero .sub{
  margin: 0 auto 18px;
  max-width: 62ch;
  color: rgba(168,194,230,.95);
  font-size: 16px;
  line-height: 1.5;
}

.checks{
  margin: 18px auto 18px;
  display:inline-grid;
  gap:10px;
  text-align:left;
  padding: 14px 16px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}
.check{
  display:flex; gap:10px; align-items:flex-start;
  color: rgba(232,242,255,.92);
  font-weight:600;
}
.check i{
  width:18px; height:18px;
  border-radius:6px;
  background: rgba(63,226,138,.18);
  border: 1px solid rgba(63,226,138,.35);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--good);
  font-style:normal;
  margin-top: 2px;
  flex:0 0 auto;
  line-height: 1;
  font-size: 12px;
}

/* Search */
.searchbar{
  margin: 18px auto 0;
  max-width: 560px;
  display:flex;
  gap:10px;
  align-items:center;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 40px rgba(0,0,0,.25);
}
.searchbar svg{opacity:.8; flex:0 0 auto}
.searchbar input{
  width:100%;
  background:transparent;
  border:0;
  outline:0;
  color: var(--text);
  font-size: 15px;
}
.searchbar input::placeholder{color: rgba(168,194,230,.8)}

/* =========================================================
   HOME TOOL CARDS GRID
   ========================================================= */

.grid{
  padding: 26px 0 26px;
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.card{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  overflow:hidden;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  box-shadow: 0 14px 30px rgba(0,0,0,.25);
}
.card:hover{
  transform: translateY(-2px);
  background: rgba(255,255,255,.09);
  border-color: rgba(110,168,255,.28);
}
.card a{
  display:flex;
  gap:12px;
  padding: 16px 16px 16px;
  align-items:center;
  min-height: 84px;
}
.icon{
  width:42px; height:42px;
  border-radius: 14px;
  display:grid; place-items:center;
  font-weight:900;
  letter-spacing:.2px;
  color:#031026;
  background: linear-gradient(135deg, rgba(110,168,255,.95), rgba(75,210,255,.55));
  box-shadow: 0 18px 30px rgba(110,168,255,.18);
  flex: 0 0 auto;
}
.meta{min-width:0}
.title{
  margin:0;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.desc{
  margin: 4px 0 0;
  font-size: 13px;
  color: rgba(168,194,230,.95);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Footer callout */
.callout{
  margin: 4px auto 48px;
  padding: 22px 16px;
  text-align:center;
  border-radius: var(--radius2);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.callout .big{
  font-size: clamp(18px, 2vw, 24px);
  font-weight: 900;
  letter-spacing: -.4px;
  margin: 0 0 6px;
}
.callout .small{
  margin: 0;
  color: rgba(168,194,230,.95);
  font-weight: 600;
}

/* =========================================================
   TOOL PAGES
   (used by tool-template.php + individual tool pages)
   ========================================================= */

/* Page header */
.page{
  padding: 26px 0 46px;
}
.crumbs{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top: 18px;
  margin-bottom: 12px;
  color: rgba(168,194,230,.95);
  font-weight: 700;
  font-size: 13px;
}
.crumbs a{
  color: rgba(232,242,255,.9);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  transition: background .15s ease, transform .15s ease;
}
.crumbs a:hover{background: rgba(255,255,255,.07); transform: translateY(-1px)}
.crumbs .sep{opacity:.7}

.page-title{
  display:grid;
  gap: 8px;
  text-align:left;
  margin-bottom: 16px;
}
.page-title h1{
  margin:0;
  font-size: clamp(26px, 3vw, 40px);
  letter-spacing: -.6px;
  line-height: 1.05;
}
.page-title p{
  margin:0;
  color: rgba(168,194,230,.96);
  font-size: 15px;
  line-height: 1.5;
  max-width: 70ch;
}

.badges{
  display:flex;
  flex-wrap: wrap;
  gap:10px;
  margin: 10px 0 18px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 10px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  font-weight: 800;
  color: rgba(232,242,255,.92);
  font-size: 13px;
}
.badge i{
  width:18px; height:18px;
  border-radius:6px;
  background: rgba(63,226,138,.18);
  border: 1px solid rgba(63,226,138,.35);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: var(--good);
  font-style:normal;
  line-height: 1;
  font-size: 12px;
  flex: 0 0 auto;
}

/* Tool layout */
.layout{
  display:grid;
  grid-template-columns: 1.55fr .85fr;
  gap: 14px;
  align-items:start;
}
.panel{
  border-radius: var(--radius2);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow-md);
  overflow:hidden;
}
.panel-inner{
  padding: 16px;
}
.panel h2{
  margin: 0 0 10px;
  font-size: 16px;
  letter-spacing: -.2px;
}
.panel .muted{
  margin: 0 0 12px;
  color: rgba(168,194,230,.95);
  font-size: 13px;
  line-height: 1.55;
}

.tool-grid{
  display:grid;
  gap: 12px;
}

textarea, input[type="text"]{
  width:100%;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  color: var(--text);
  padding: 12px 12px;
  outline: none;
  transition: border-color .15s ease, background .15s ease;
  font-size: 14px;
  line-height: 1.5;
}
textarea{
  min-height: 180px;
  resize: vertical;
}
textarea:focus, input[type="text"]:focus{
  border-color: rgba(110,168,255,.35);
  background: rgba(0,0,0,.26);
}

.actions{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: rgba(232,242,255,.95);
  font-weight: 900;
  cursor:pointer;
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  user-select:none;
}
.btn:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(110,168,255,.26);
  transform: translateY(-1px);
}
.btn:active{transform: translateY(0)}
.btn.primary{
  background: rgba(110,168,255,.16);
  border-color: rgba(110,168,255,.26);
}
.btn.primary:hover{
  background: rgba(110,168,255,.20);
  border-color: rgba(110,168,255,.34);
}

.mini{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  color: rgba(168,194,230,.95);
  font-weight: 800;
  font-size: 12px;
  margin-top: 10px;
}
.mini code{
  color: rgba(232,242,255,.92);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  padding: 6px 8px;
  border-radius: 12px;
  font-weight: 900;
  overflow:auto;
  max-width: 65%;
}

/* Sidebar cards */
.side-card{
  padding: 14px;
  display:grid;
  gap: 10px;
}
.side-row{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
}
.side-row .dot{
  width: 12px; height: 12px;
  border-radius: 4px;
  background: rgba(110,168,255,.8);
  box-shadow: 0 10px 20px rgba(110,168,255,.18);
  flex: 0 0 auto;
  margin-top: 4px;
}
.side-row strong{
  font-size: 13px;
  letter-spacing: -.2px;
}
.side-row p{
  margin: 3px 0 0;
  color: rgba(168,194,230,.95);
  font-size: 12px;
  line-height: 1.5;
}

.related a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.05);
  transition: transform .15s ease, background .15s ease, border-color .15s ease;
  font-weight: 900;
}
.related a:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.07);
  border-color: rgba(110,168,255,.20);
}
.related a span{
  color: rgba(168,194,230,.95);
  font-weight: 800;
  font-size: 12px;
}

/* Tool page footer */
.footer{
  margin-top: 18px;
  padding: 18px 0 38px;
  color: rgba(168,194,230,.9);
  font-size: 12px;
  line-height: 1.6;
  text-align:center;
}
.footer a{
  color: rgba(232,242,255,.9);
  border-bottom: 1px dashed rgba(232,242,255,.25);
}

/* =========================================================
   HELPERS
   ========================================================= */

.muted-note{opacity:.75; font-size:12px; margin-top:10px}
.hidden{display:none!important}
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Prevent background scroll when menu open */
.mobile-open{
  overflow: hidden;
  touch-action: none;
}

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

@media (max-width: 980px){
  .grid{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .links{gap:10px}
  .layout{grid-template-columns: 1fr;}
}

@media (max-width: 640px){
  .links{display:none;}
  .burger{display:inline-flex;}
  body{background-attachment: scroll;}
}

@media (max-width: 520px){
  .grid{grid-template-columns: 1fr;}
  .checks{width: 100%; max-width: 520px;}
  .searchbar{max-width: 100%;}
  .hero{padding-top: 34px;}
  .page{padding-bottom: 34px;}
  textarea{min-height: 160px;}
}

@media (prefers-reduced-motion: reduce){
  *{transition:none!important; scroll-behavior:auto!important}
  body{background-attachment: scroll;}
  .mobile-menu, .mobile-overlay{transition:none!important}
}