/* ===== Base ===== */
*{box-sizing:border-box}
:root{--bg:#0b1220;--card:#0f172a;--muted:#94a3b8;--text:#e5e7eb;--brand:#467FF7}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,Segoe UI,Roboto,Arial}
a{color:var(--brand);text-decoration:none}
.container{width:min(1100px,92%);margin:auto}

/* ===== Header (AI TG style) ===== */
.dbx-header{position:sticky;top:0;z-index:50;width:100%;background:#fff;color:#1f2937;border-bottom:1px solid #e5e7eb;box-shadow:0 1px 10px rgba(0,0,0,.04)}
.dbx-max{max-width:1120px;margin:0 auto;padding:14px 16px;display:flex;align-items:center;justify-content:space-between}
.dbx-left{display:flex;align-items:center;gap:40px}
.dbx-brand{display:flex;align-items:center;gap:8px}
.dbx-nav{display:none;gap:24px;font-weight:600;color:#111827}
@media (min-width:768px){.dbx-nav{display:flex}}
.dbx-nav a{color:#111827}
.dbx-nav a:hover,.dd-btn:hover{color:#0d5bd8}
.dd{position:relative}
.dd-btn{background:transparent;border:0;font:inherit;color:#111827;cursor:pointer}
.dd-panel{position:absolute;top:36px;left:0;min-width:180px;background:#fff;border:1px solid #e5e7eb;border-radius:8px;box-shadow:0 10px 20px rgba(0,0,0,.08);padding:10px 12px;display:none;z-index:60}
.dd.open .dd-panel{display:block}
.dd-muted{color:#6b7280}
.dbx-right{display:flex;align-items:center;gap:12px}
.dbx-select{border:1px solid #d1d5db;padding:6px 10px;border-radius:8px;font-size:14px;background:#fff;color:#111827}
.dbx-btn{background:#0d5bd8;color:#fff;border:0;padding:8px 14px;border-radius:8px;font-size:14px;font-weight:600;cursor:pointer}
.dbx-btn:hover{background:#0b4fc2}

/* ===== Home sections ===== */
.hero{padding:56px 0 26px;text-align:center}
.hero h1{font-size:clamp(28px,4vw,40px);margin:0 0 8px}
.hero p{color:var(--muted);margin:0}

.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;padding:28px 0 56px}
.card{background:var(--card);border:1px solid #1f2937;padding:18px;border-radius:16px;display:flex;flex-direction:column;gap:10px}
.card h3{margin:8px 0 0;font-size:18px}
.card p{margin:0;color:var(--muted);font-size:14px}
.btn{display:inline-block;padding:10px 14px;border-radius:10px;background:var(--brand);color:#fff;font-weight:600;margin-top:auto;text-align:center}
.btn:hover,.btn:focus{filter:brightness(1.1)}

/* ===== Tool pages ===== */
.tool{padding:32px 0 64px}
.tool h1{margin:6px 0 6px;font-size:28px}
.tool .sub{color:var(--muted);margin-top:0}
textarea,input,select{width:100%;background:#0b1220;color:var(--text);border:1px solid #1f2937;border-radius:12px;padding:14px;outline:none}
textarea{min-height:220px;resize:vertical}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
.stats>div{background:var(--card);border:1px solid #1f2937;padding:12px;border-radius:12px;text-align:center}
.small{font-size:13px;color:var(--muted)}
@media (max-width:820px){.stats{grid-template-columns:1fr}}

/* ===== Footer (white like AI TG) ===== */
.dbx-footer{width:100%;margin-top:24px;background:#fff;color:#4b5563;border-top:1px solid #e5e7eb;text-align:center;padding:16px 12px}
.dbx-share{display:flex;justify-content:center;gap:20px;margin-bottom:10px}
.dbx-policies{color:#6b7280;font-size:14px}
.dbx-link{color:#2563eb;text-decoration:underline;margin:0 8px}
.dbx-copy{color:#6b7280;font-size:14px;margin:8px 0 0}
.sep{color:#9ca3af}

/* ==== Make Tools header match AI Topic Generator ==== */

/* Overall bar height & subtle divider */
.dbx-header{
  background:#fff;
  border-bottom:1px solid #e5e7eb;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}
.dbx-max{
  max-width:1200px;              /* same feel as AI TG */
  height:80px;                   /* fixed bar height */
  padding:0 20px;                /* left/right breathing room */
  display:flex; align-items:center; justify-content:space-between;
}

/* Logo */
.dbx-logo{ height:70px; width:auto; display:block; }

/* Nav */
.dbx-left{ gap:28px; }
.dbx-nav{ gap:28px; font-size:16px; font-weight:600; }
.dbx-nav a{ color:#0f172a; }
.dbx-nav a:hover{ color:#0d5bd8; }

/* Dropdown buttons look like links */
.dd-btn{
  background:transparent; border:0; padding:0;
  font:inherit; color:#0f172a; cursor:pointer;
  display:flex; align-items:center; gap:6px;
}
.dd-btn:hover{ color:#0d5bd8; }
.dd-panel a{ display:block; padding:6px 4px; color:#0f172a; text-decoration:none; }
.dd-panel a:hover{ color:#0d5bd8; }

/* Right side controls: language + Sign In */
.dbx-right{ display:flex; align-items:center; gap:14px; }

/* Language select (40px tall like AI TG) */
.dbx-select{
  height:38px; padding:0 12px; border-radius:10px;
  min-width: 20pxpx;
  border:1px solid #d1d5db; background:#fff; color:#0f172a; font-size:14px;
}

/* CTA button (Sign In) — same height & feel */
.dbx-btn{
  height:38px; padding:0 16px; border-radius:10px;
  min-width: 40pxpx;
  background:#0d5bd8; color:#fff; font-weight:700; font-size:14px;
  border:0; cursor:pointer;
  box-shadow:0 1px 0 rgba(13,91,216,.4);
  display:inline-flex; align-items:center; justify-content:center;
}
.dbx-btn:hover{ background:#0b50c6; }

/* Keep dropdown panel tidy under the new height */
.dd-panel{ top:48px; }

/* Optional: ensure hero doesn't jump under the shorter header */
.hero{ padding-top:56px; }

/* Mobile tweaks */
@media (max-width:768px){
  .dbx-max{ height:64px; }
  .dbx-logo{ height:28px; }
  .dbx-right{ gap:10px; }
}

/* === Unify CTA + Language widths === */
:root{
  --ctl-w: 112px;   /* change this number to taste (100–130px) */
  --ctl-h: 40px;
}

/* Language (Translate) — make it narrower */
.dbx-select{
  width: var(--ctl-w);
  height: var(--ctl-h);
  padding: 0 12px;            /* keep it compact */
  border-radius: 10px;
}

/* Sign In button — match the same width & height */
.dbx-btn{
  min-width: var(--ctl-w);    /* same width as select */
  height: var(--ctl-h);
  padding: 0 0;               /* width is controlled by min-width now */
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* (Optional) On small screens, make them a bit slimmer */
@media (max-width: 768px){
  :root{ --ctl-w: 96px; --ctl-h: 36px; }
}

/* Sticky header polish */
.dbx-header{ position: sticky; top:0; z-index:1000; }
.dbx-header.is-scrolled{
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  border-bottom-color: transparent;
  backdrop-filter: saturate(120%) blur(2px);
}

/* ===== Card hover effects ===== */
.card{
  position:relative;
  overflow:hidden;            /* needed for the glow/shine mask */
  transition:
    transform .22s cubic-bezier(.2,.7,.3,1),
    box-shadow .22s cubic-bezier(.2,.7,.3,1),
    border-color .22s ease,
    background-color .22s ease;
  will-change: transform;
}

/* soft lift + stronger shadow + subtle border tint */
.card:hover{
  transform: translateY(-6px);
  box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 6px 12px rgba(0,0,0,.18);
  border-color: rgba(70,127,247,.45); /* brand tint */
}

/* raise the CTA slightly on hover */
.card .btn{
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.card:hover .btn{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(70,127,247,.35);
}

/* cursor-follow glow (JS updates --mx/--my) */
.card::before{
  content:"";
  position:absolute; inset:-1px; border-radius:16px;
  background:
    radial-gradient(420px circle at var(--mx,50%) var(--my,50%),
      rgba(70,127,247,.14), transparent 45%);
  opacity:0; pointer-events:none;
  transition: opacity .18s ease;
}
.card:hover::before{ opacity:1; }

/* glossy sweep */
.card::after{
  content:"";
  position:absolute; inset:0; border-radius:16px;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.08) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .6s cubic-bezier(.2,.7,.3,1);
  pointer-events:none;
}
.card:hover::after{ transform: translateX(120%); }

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .card, .card .btn{ transition: none; }
  .card:hover{ transform:none; box-shadow: 0 10px 24px rgba(0,0,0,.22); }
  .card::before, .card::after{ display:none; }
}