/* ============================================================
   Bangla Tech Tools — Tool Pages "Modern Premium" Design Layer
   theme.css-এর পরে লোড হয় · সব রং var(--primary) থেকে — Admin
   Appearance থেকে থিম বদলালেও এই ডিজাইন স্বয়ংক্রিয়ভাবে মানিয়ে নেয়।
   ============================================================ */

/* ---------- বেস টাচ ---------- */
::selection { background: color-mix(in srgb, var(--primary) 22%, transparent); }
.tool-page ::-webkit-scrollbar { width: 10px; height: 10px; }
.tool-page ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--primary) 28%, #ffffff); border-radius: 999px; border: 2px solid var(--bg); }
.tool-page ::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--primary) 45%, #ffffff); }

/* ============================================================
   ১) পেজ হিরো — Modern Command Center
   ============================================================ */
.page-hero {
  padding: 3rem 0 3.6rem;
  background:
    radial-gradient(880px 400px at 88% -12%, rgba(255, 255, 255, 0.17), transparent 62%),
    radial-gradient(720px 420px at -8% 112%, rgba(255, 255, 255, 0.13), transparent 60%),
    var(--grad-dark);
  isolation: isolate;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1.4px, transparent 1.4px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 78%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.85), transparent 78%);
}
.page-hero::after {
  width: 480px; height: 480px; top: -200px; right: -130px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.20), transparent 62%);
  animation: thGlow 7s ease-in-out infinite;
}
@keyframes thGlow {
  0%, 100% { transform: scale(1) translateY(0); opacity: .9; }
  50% { transform: scale(1.12) translateY(12px); opacity: 1; }
}
.page-hero .container { position: relative; z-index: 2; }

/* ব্রেডক্রাম্ব → গ্লাস পিল */
.page-hero .breadcrumb {
  display: inline-flex; align-items: center;
  background: rgba(255, 255, 255, 0.13);
  border: 1px solid rgba(255, 255, 255, 0.24);
  padding: .16rem .85rem; border-radius: 999px; margin-bottom: .85rem;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
}

/* হিরো: আইকন ব্যাজ + টাইটেল */
.th-wrap { display: flex; gap: 1.15rem; align-items: flex-start; }
.th-badge {
  width: 76px; height: 76px; border-radius: 22px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.10));
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 16px 34px rgba(11, 30, 75, 0.30), inset 0 1.5px 0 rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
  animation: thFloat 4.6s ease-in-out infinite;
}
.th-badge svg { width: 38px; height: 38px; }
@keyframes thFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-7px) rotate(-2.5deg); }
}
.page-hero h1 {
  font-size: clamp(1.9rem, 4.2vw, 2.65rem);
  text-shadow: 0 2px 18px rgba(11, 30, 75, 0.28);
  letter-spacing: .2px;
}
.page-hero .th-wrap p {
  color: rgba(255, 255, 255, 0.90);
  text-shadow: 0 1px 8px rgba(11, 30, 75, 0.18);
  margin-top: .35rem;
  animation: heroUp .6s ease .12s both;
}

/* ফিচার চিপস */
.th-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.15rem; }
.th-chip {
  display: inline-flex; align-items: center; gap: .42rem;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: #fff; font-weight: 600; font-size: .87rem;
  padding: .3rem .95rem; border-radius: 999px;
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  box-shadow: 0 4px 14px rgba(11, 30, 75, 0.14);
  transition: background .25s ease, transform .25s ease;
  animation: heroUp .6s ease both;
}
.th-chip:nth-child(1) { animation-delay: .18s; }
.th-chip:nth-child(2) { animation-delay: .26s; }
.th-chip:nth-child(3) { animation-delay: .34s; }
.th-chip:nth-child(4) { animation-delay: .42s; }
.th-chip:hover { background: rgba(255, 255, 255, 0.26); transform: translateY(-2px); }
.th-chip svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .95; }
.th-chip .chip-ic { width: 17px; height: 17px; border-radius: 50%; background: rgba(255, 255, 255, 0.28); display: grid; place-items: center; flex-shrink: 0; }
.th-chip .chip-ic svg { width: 10px; height: 10px; }
@keyframes heroUp {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
.page-hero .breadcrumb { animation: heroUp .5s ease both; }
.page-hero .th-wrap { animation: heroUp .55s ease .06s both; }

/* হিরোর নিচে ভাসমান usage-bar */
.tool-panel .usage-bar {
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow: 0 14px 34px rgba(15, 31, 61, 0.14);
  padding: .5rem 1.15rem;
}

/* ============================================================
   ২) ওয়ার্কস্পেস প্যানেল কার্ড
   ============================================================ */
.tool-panel .panel-card {
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--primary) 10%, #e2eaf8);
  box-shadow:
    0 1px 2px rgba(15, 31, 61, 0.05),
    0 12px 28px rgba(15, 31, 61, 0.07),
    0 28px 60px rgba(15, 31, 61, 0.08);
  position: relative;
  transition: box-shadow .3s ease, transform .3s ease;
}
.tool-panel .panel-card::before {
  content: '';
  position: absolute; top: 0; left: 22px; right: 22px; height: 4px;
  border-radius: 0 0 6px 6px;
  background: var(--grad);
  opacity: .85;
  pointer-events: none;
}
.tool-panel .panel-card:hover {
  box-shadow:
    0 2px 4px rgba(15, 31, 61, 0.05),
    0 16px 36px rgba(15, 31, 61, 0.09),
    0 36px 72px rgba(15, 31, 61, 0.10);
}

/* সেকশন টাইটেল (info কার্ডের h2) */
.pc-title {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-size: 1.3rem;
  color: var(--primary-700); margin: 0 0 .4rem; line-height: 1.4;
}
.pc-title::before {
  content: ''; width: 5px; height: 1.35em; flex-shrink: 0;
  border-radius: 4px; background: var(--grad);
  box-shadow: 0 4px 10px color-mix(in srgb, var(--primary) 38%, transparent);
}
.pc-sub { color: var(--muted); font-weight: 600; font-size: 1.02rem; margin: .2rem 0 .5rem; display: flex; align-items: center; gap: .45rem; }

/* ============================================================
   ৩) ফর্ম — ইনপুট, লেবেল, বাটন, সেগমেন্টেড কন্ট্রোল
   ============================================================ */
.field > label { font-weight: 700; font-size: .93rem; letter-spacing: .1px; color: var(--text); }

.input, select.input, textarea.input {
  border-radius: 14px;
  border: 2px solid color-mix(in srgb, var(--primary) 12%, #e2eaf8);
  background: color-mix(in srgb, var(--primary) 3%, #ffffff);
  padding: .78rem 1.05rem;
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.input:hover { border-color: color-mix(in srgb, var(--primary) 30%, #e2eaf8); }
.input:focus {
  background: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 13%, transparent), 0 8px 20px color-mix(in srgb, var(--primary) 10%, transparent);
}
textarea.input { border-radius: 16px; }

/* বাটন পলিশ (থিমের background অক্ষত রেখে) */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.38) 50%, transparent 66%);
  transform: translateX(-130%) skewX(-8deg);
  transition: transform .65s ease;
}
.btn:hover::after { transform: translateX(130%) skewX(-8deg); }
.btn:active { transform: translateY(0) scale(.975); }
.btn-lg { padding: .9rem 2.2rem; border-radius: 18px; }

/* সেগমেন্টেড কন্ট্রোল */
.unit-toggle, .type-tabs {
  background: color-mix(in srgb, var(--primary) 6%, #ffffff);
  border: 1.5px solid color-mix(in srgb, var(--primary) 12%, #e2eaf8);
  padding: .3rem; gap: .3rem;
  box-shadow: inset 0 2px 6px rgba(15, 31, 61, 0.05);
}
.unit-toggle button, .type-tabs button { border-radius: 999px; }
.unit-toggle button.active, .type-tabs button.active {
  box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 35%, transparent);
}
.op-tab { border-radius: 14px; }
.op-tab.active { box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 34%, transparent); }
.tab-btn.active, .chip.active { box-shadow: 0 6px 16px color-mix(in srgb, var(--primary) 34%, transparent); }

/* ============================================================
   ৪) ফলাফল — রেজাল্ট বক্স, স্ট্যাট, বড় সংখ্যা
   ============================================================ */
.result-box {
  border-radius: 18px;
  border-width: 1.5px;
  box-shadow: 0 12px 30px rgba(15, 31, 61, 0.07);
  padding: 1.6rem;
}
.result-title { display: flex; align-items: center; gap: .5rem; font-size: 1.08rem; }

.stat-box {
  border-radius: 15px;
  border: 1px solid color-mix(in srgb, var(--primary) 11%, #e2eaf8);
  background: linear-gradient(180deg, #ffffff, color-mix(in srgb, var(--primary) 4%, #ffffff));
  padding: .95rem .6rem;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.stat-box:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 34%, #ffffff);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 16%, transparent);
}
.stat-box .val {
  background: linear-gradient(120deg, var(--primary-700), var(--sky));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--primary-600);
}

.main-result .big {
  background: linear-gradient(120deg, var(--primary-700) 10%, var(--primary) 45%, var(--sky) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: var(--primary-600);
  filter: drop-shadow(0 10px 18px color-mix(in srgb, var(--primary) 24%, transparent));
}
.main-result .cat-label { box-shadow: 0 10px 24px rgba(15, 31, 61, 0.22); }

.progress { background: color-mix(in srgb, var(--primary) 10%, #e6edfb); }
.progress > span { box-shadow: 0 0 12px color-mix(in srgb, var(--primary) 40%, transparent); }

.kw-chip {
  border: 1.5px solid color-mix(in srgb, var(--primary) 12%, #e2eaf8);
  background: color-mix(in srgb, var(--primary) 3%, #ffffff);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.kw-chip:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--primary) 40%, #ffffff);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--primary) 14%, transparent);
}

/* ============================================================
   ৫) ড্রপজোন ও ফাইল
   ============================================================ */
.drop-zone, .bgr-drop {
  border: 2.5px dashed color-mix(in srgb, var(--primary) 26%, #ffffff);
  border-radius: 20px;
  background:
    radial-gradient(420px 180px at 50% 0%, color-mix(in srgb, var(--primary) 7%, transparent), transparent 70%),
    color-mix(in srgb, var(--primary) 4%, #ffffff);
  transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease;
}
.drop-zone:hover, .drop-zone.dragover, .bgr-drop:hover, .bgr-drop.drag {
  border-color: var(--primary);
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 10%, transparent), 0 18px 40px color-mix(in srgb, var(--primary) 12%, transparent);
  background:
    radial-gradient(420px 180px at 50% 0%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%),
    color-mix(in srgb, var(--primary) 6%, #ffffff);
}
.drop-zone .tool-icon, .bgr-drop .bd-ic {
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.drop-zone:hover .tool-icon, .bgr-drop:hover .bd-ic { transform: translateY(-5px) scale(1.08); }
.drop-zone .tool-icon {
  background: var(--grad); color: #fff;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 36%, transparent);
}
.file-item { border-radius: 14px; transition: box-shadow .2s ease, border-color .2s ease; }
.file-item:hover { border-color: color-mix(in srgb, var(--primary) 30%, #e2eaf8); box-shadow: var(--shadow-sm); }
.file-thumb { border-radius: 12px; }

/* ============================================================
   ৬) টেবিল ও FAQ
   ============================================================ */
.table-wrap { border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--primary) 10%, #e2eaf8); box-shadow: 0 6px 18px rgba(15, 31, 61, 0.05); }
th { background: color-mix(in srgb, var(--primary) 8%, #ffffff); }
tbody tr { transition: background .18s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--primary) 5%, #ffffff); }

.faq details {
  border-radius: 14px;
  border: 1.5px solid color-mix(in srgb, var(--primary) 10%, #e2eaf8);
  transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}
.faq details:hover { border-color: color-mix(in srgb, var(--primary) 30%, #ffffff); }
.faq details[open] {
  background: color-mix(in srgb, var(--primary) 3%, #ffffff);
  border-color: color-mix(in srgb, var(--primary) 38%, #ffffff);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 12%, transparent);
}

/* ============================================================
   ৭) টুল-নির্দিষ্ট কম্পোনেন্ট
   ============================================================ */
/* QR */
.qr-stage { border-radius: 18px; border: 1.5px solid color-mix(in srgb, var(--primary) 10%, #e2eaf8); }

/* AI output */
.ai-output { border-radius: 16px; }
.ai-output.empty { border-style: dashed; }

/* BG remover প্যান */
.bgr-pane { border-radius: 16px; }

/* টেমপ্লেট কার্ড */
.tpl-card { border-radius: 16px; }
.tpl-card.active { box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 18%, transparent); }

/* dyn লিস্ট */
.dyn-item { border-radius: 14px; transition: border-color .2s ease, box-shadow .2s ease; }
.dyn-item:hover { border-color: color-mix(in srgb, var(--primary) 28%, #e2eaf8); box-shadow: var(--shadow-sm); }

/* প্রিভিউ শেল */
.preview-shell { border-radius: 18px; }

/* workspace টাইটেল */
.workspace-title { gap: .55rem; }

/* ============================================================
   ৮) Related Tools — আধুনিক মিনি কার্ড
   ============================================================ */
.rel-section { padding-top: .6rem !important; }
.rel-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.rel-card {
  --rc: var(--primary);
  display: flex; align-items: center; gap: .8rem;
  background: #fff; border: 1.5px solid color-mix(in srgb, var(--primary) 8%, #e2eaf8);
  border-radius: 17px; padding: .9rem .95rem;
  text-decoration: none !important; color: var(--text);
  box-shadow: 0 4px 14px rgba(15, 31, 61, 0.05);
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
  position: relative; overflow: hidden;
}
.rel-card::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3.5px;
  background: linear-gradient(90deg, var(--rc), transparent);
  transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.rel-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--rc) 45%, #ffffff); box-shadow: 0 18px 38px color-mix(in srgb, var(--rc) 18%, transparent); }
.rel-card:hover::after { transform: scaleX(1); }
.rel-ic {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(140deg, var(--rc), color-mix(in srgb, var(--rc) 72%, #1f2a50));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--rc) 32%, transparent);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.rel-card:hover .rel-ic { transform: rotate(-6deg) scale(1.08); }
.rel-ic svg { width: 22px; height: 22px; }
.rel-tx { min-width: 0; flex: 1; }
.rel-tx b { display: block; font-size: .97rem; line-height: 1.4; color: var(--text); font-family: var(--font-display); }
.rel-tx small { display: block; color: var(--muted); font-size: .79rem; line-height: 1.45; }
.rel-arrow {
  flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--rc) 10%, #ffffff); color: var(--rc);
  transition: transform .26s ease, background .26s ease, color .26s ease;
}
.rel-arrow svg { width: 14px; height: 14px; }
.rel-card:hover .rel-arrow { background: var(--rc); color: #fff; transform: translateX(3px); }

/* Related রঙ */
.rc-age   { --rc: #7c3aed; }
.rc-bmi   { --rc: #16a34a; }
.rc-word  { --rc: #0d9488; }
.rc-img   { --rc: #0284c7; }
.rc-pdf   { --rc: #e5342b; }
.rc-qr    { --rc: #d97706; }
.rc-cv    { --rc: #2563eb; }
.rc-inv   { --rc: #0f766e; }
.rc-ai    { --rc: #6d28d9; }
.rc-bgr   { --rc: #db2777; }

/* ============================================================
   ৯) রেসপনসিভ
   ============================================================ */
@media (max-width: 1024px) {
  .rel-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .page-hero { padding: 2.2rem 0 3rem; }
  .th-badge { width: 60px; height: 60px; border-radius: 18px; }
  .th-badge svg { width: 30px; height: 30px; }
  .th-wrap { gap: .85rem; }
  .th-chips { gap: .4rem; }
  .th-chip { font-size: .8rem; padding: .24rem .8rem; }
  .tool-panel .panel-card { border-radius: 20px; }
  .tool-panel .panel-card::before { left: 16px; right: 16px; }
  .result-box { padding: 1.2rem; }
  .rel-grid { grid-template-columns: 1fr; gap: .7rem; }
  .rel-card { padding: .8rem .85rem; }
}
@media (max-width: 420px) {
  .th-badge { width: 52px; height: 52px; border-radius: 15px; }
  .th-badge svg { width: 26px; height: 26px; }
  .page-hero h1 { font-size: 1.65rem; }
  .stat-box .val { font-size: 1.3rem; }
}

/* মোশন কমানোর পছন্দ */
@media (prefers-reduced-motion: reduce) {
  .th-badge, .page-hero::after, .th-chip { animation: none !important; }
}

/* ============================================================
   ১০) প্রযুক্তি খবর — আধুনিক নিউজ কার্ড
   (news.html · grid-এ data-cat বসে: latest/ai/mobile/cyber)
   ============================================================ */
.news-grid { gap: 1.15rem; }
.news-card {
  --nc: var(--primary);
  border-radius: 18px;
  border: 1.5px solid color-mix(in srgb, var(--primary) 9%, #e2eaf8);
  box-shadow: 0 4px 14px rgba(15, 31, 61, 0.05);
  overflow: hidden;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.news-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--nc) 42%, #ffffff);
  box-shadow: 0 22px 44px color-mix(in srgb, var(--nc) 17%, transparent);
}
.news-thumb {
  position: relative;
  aspect-ratio: 16/8.4;
  background:
    radial-gradient(360px 150px at 85% -40%, rgba(255, 255, 255, 0.34), transparent 62%),
    radial-gradient(280px 140px at -10% 130%, rgba(255, 255, 255, 0.16), transparent 60%),
    linear-gradient(135deg, color-mix(in srgb, var(--nc) 82%, #0b1e4b), color-mix(in srgb, var(--nc) 52%, #ffffff));
  color: #fff;
}
.news-thumb::before {
  content: '';
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(200deg, rgba(0,0,0,.9), transparent 62%);
  mask-image: linear-gradient(200deg, rgba(0,0,0,.9), transparent 62%);
}
.news-thumb .thumb-ic {
  position: relative; z-index: 1;
  width: 64px; height: 64px; border-radius: 19px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.17);
  border: 1.5px solid rgba(255, 255, 255, 0.42);
  box-shadow: 0 12px 26px rgba(11, 30, 75, 0.22), inset 0 1.5px 0 rgba(255, 255, 255, 0.45);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
}
.news-thumb .thumb-ic svg { width: 30px; height: 30px; opacity: 1; }
.news-card:hover .thumb-ic { transform: translateY(-5px) rotate(-4deg) scale(1.07); }
.news-body { padding: 1.15rem 1.25rem 1.3rem; }
.news-meta { align-items: center; }
.source-chip {
  background: color-mix(in srgb, var(--nc) 12%, #ffffff);
  color: color-mix(in srgb, var(--nc) 80%, #0b1e4b);
  border: 1px solid color-mix(in srgb, var(--nc) 22%, #ffffff);
  font-weight: 700; font-size: .74rem;
  padding: .14rem .7rem; border-radius: 999px;
  transition: background .25s ease, color .25s ease;
}
.news-card:hover .source-chip { background: var(--nc); color: #fff; border-color: var(--nc); }
.news-card h3 a { transition: color .2s ease; }
.news-card h3 a:hover { color: var(--nc); }
.news-foot .tool-go { font-weight: 700; }

/* ক্যাটাগরি অনুযায়ী রং */
.news-grid[data-cat="latest"] { --ncg: #7c3aed; }
.news-grid[data-cat="ai"]     { --ncg: #6d28d9; }
.news-grid[data-cat="mobile"] { --ncg: #0284c7; }
.news-grid[data-cat="cyber"]  { --ncg: #e11d48; }
.news-grid[data-cat] .news-card { --nc: var(--ncg); }

/* ============================================================
   ১১) AI টুলস গাইড — আধুনিক টুল কার্ড
   (শুধু .tools-grid-এর ভেতরের .ai-card — অন্য পেজ অগ্রাহ্য)
   ============================================================ */
.tools-grid .ai-card {
  --ac2: var(--primary);
  border-radius: 18px;
  border: 1.5px solid color-mix(in srgb, var(--primary) 9%, #e2eaf8);
  box-shadow: 0 4px 14px rgba(15, 31, 61, 0.05);
  padding: 1.35rem;
  position: relative; overflow: hidden;
  transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}
.tools-grid .ai-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3.5px;
  background: linear-gradient(90deg, var(--ac2), transparent 72%);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.tools-grid .ai-card:hover {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--ac2) 42%, #ffffff);
  box-shadow: 0 22px 44px color-mix(in srgb, var(--ac2) 16%, transparent);
}
.tools-grid .ai-card:hover::before { transform: scaleX(1); }
.tools-grid .ai-card .ai-logo {
  width: 48px; height: 48px; border-radius: 14px;
  background: linear-gradient(140deg, var(--ac2), color-mix(in srgb, var(--ac2) 72%, #1f2a50));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--ac2) 32%, transparent);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.tools-grid .ai-card:hover .ai-logo { transform: rotate(-6deg) scale(1.08); }
.tools-grid .ai-card h3 { font-family: var(--font-display); }
.tools-grid .ai-card .tool-go { font-weight: 700; }
.badge { border-radius: 999px; }

/* কার্ড অনুযায়ী ঘুরে ঘুরে রং */
.tools-grid .ai-card:nth-child(4n+1) { --ac2: #7c3aed; }
.tools-grid .ai-card:nth-child(4n+2) { --ac2: #0284c7; }
.tools-grid .ai-card:nth-child(4n+3) { --ac2: #0d9488; }
.tools-grid .ai-card:nth-child(4n+4) { --ac2: #d97706; }

/* ============================================================
   ১২) নিউজ ও AI কার্ড — রেসপনসিভ
   ============================================================ */
@media (max-width: 768px) {
  .news-grid { gap: .85rem; }
  .news-card { border-radius: 15px; }
  .news-body { padding: 1rem 1.05rem 1.1rem; }
  .news-thumb { aspect-ratio: 16/8; }
  .news-thumb .thumb-ic { width: 54px; height: 54px; border-radius: 16px; }
  .news-thumb .thumb-ic svg { width: 25px; height: 25px; }
  .tools-grid .ai-card { border-radius: 15px; padding: 1.15rem; }
  .tools-grid .ai-card .ai-logo { width: 42px; height: 42px; border-radius: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .news-thumb .thumb-ic, .tools-grid .ai-card .ai-logo { transition: none !important; }
}