body{margin:0;background:var(--bg)}
.gtopbar{
  position:sticky;top:0;z-index:10;
  display:flex;gap:10px;align-items:center;justify-content:space-between;
  padding:10px 12px;background:#fff;border-bottom:1px solid var(--border)
}
.gt{font-weight:900}
.gbtns{display:flex;gap:8px;flex-wrap:wrap}
.giconbtn{
  border:1px solid var(--border);background:#fff;border-radius:12px;
  padding:8px 10px;font-family:inherit;cursor:pointer
}

.ghead{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap}
.gtitle{font-weight:900;font-size:15px}
.gsub{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.9}
.glogin{
  border:1px solid rgba(37,99,235,.35);
  background:rgba(37,99,235,.08);
  color:var(--text);
  padding:10px 12px;border-radius:14px;font-weight:900
}

.gsearch{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.gminiBtn{
  border:1px solid var(--border);background:#fff;border-radius:14px;
  padding:10px 12px;font-weight:900;cursor:pointer;font-family:inherit
}

.glist{display:grid;gap:10px;margin-top:12px}
.gcard{
  display:flex;gap:12px;align-items:flex-start;
  border:1px solid var(--border);border-radius:18px;background:#fff;
  padding:12px;text-decoration:none;color:inherit
}
.gcard:active{transform:translateY(1px)}
.gcard.locked{opacity:.95}
.gicon{width:46px;height:46px;border-radius:14px;border:1px solid var(--border);background:#fff;object-fit:cover}

.gbody{flex:1;min-width:0}
.grow{display:flex;gap:8px;align-items:center;justify-content:space-between}
.gname{font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gen{margin-top:4px;color:#334155;font-size:12px;direction:ltr;text-align:left;opacity:.9}
.gmeta{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.9}
.gdesc{margin-top:6px;color:#334155;font-size:12px;line-height:1.9}

.gchips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gchip{
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;background:#fff
}
.gchip.good{border-color:#bbf7d0;background:#f0fdf4;color:#166534}
.gchip.bad{border-color:#fecaca;background:#fef2f2;color:#991b1b}

.gempty{
  border:1px dashed var(--border);
  border-radius:18px;padding:14px;
  color:var(--muted);text-align:center;line-height:1.9;margin-top:12px
}
.gdoc{margin-top:12px;line-height:2.0}
.gbox{border:1px solid var(--border);border-radius:18px;padding:14px;background:#fff;margin-top:12px}
.gh{margin:0 0 8px;font-weight:900;font-size:16px}
.gp{margin:0;color:#334155}
.gul{margin:0;padding-right:18px}
.gbox-a{background:linear-gradient(135deg, rgba(37,99,235,.08), rgba(124,58,237,.06))}
.gbox-b{background:linear-gradient(135deg, rgba(14,165,233,.08), rgba(240,249,255,.9))}
.gbox-c{background:linear-gradient(135deg, rgba(22,163,74,.08), rgba(240,253,244,.9))}
.gbox-d{background:linear-gradient(135deg, rgba(245,158,11,.10), rgba(255,251,235,.92))}
.gbox-e{background:linear-gradient(135deg, rgba(236,72,153,.08), rgba(253,242,248,.92))}
.gbox-f{background:linear-gradient(135deg, rgba(239,68,68,.06), rgba(254,242,242,.92))}

/* =========================
   Glossary Viewer (single term)
   ========================= */

.gview{max-width:980px;margin:0 auto;padding:12px}

/* هدر تک‌واژه */
.ghero{
  display:flex;gap:12px;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;
  border:1px solid var(--border);
  border-radius:18px;
  background:#fff;
  padding:12px;
}
.ghero-left{display:flex;gap:12px;align-items:flex-start}
.ghero .gicon{width:52px;height:52px;border-radius:18px}
.gtitle2{font-weight:900;font-size:16px;line-height:1.6;margin:0}
.gmeta2{margin-top:6px;color:var(--muted);font-size:12px;line-height:1.9}
.gsummary2{margin-top:8px;color:#334155;font-size:13px;line-height:2.0}

/* چیپ‌ها */
.gchips2{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.gchip2{
  display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;background:#fff
}

/* بدنه محتوا */
.gcontent{margin-top:12px;line-height:2.0}
.gcontent img{max-width:100%;height:auto;border-radius:14px}

/* باکس‌های محتوا (استفاده از کلاس‌های گرادیان خودتان) */
.gbox{overflow:hidden}
.gbox .gh{display:flex;gap:8px;align-items:center}
.gbox .gh::before{
  content:"";
  width:10px;height:10px;border-radius:999px;
  background:rgba(37,99,235,.55);
  flex:0 0 auto;
}
.gbox-b .gh::before{background:rgba(14,165,233,.55)}
.gbox-c .gh::before{background:rgba(22,163,74,.55)}
.gbox-d .gh::before{background:rgba(245,158,11,.70)}
.gbox-e .gh::before{background:rgba(236,72,153,.60)}
.gbox-f .gh::before{background:rgba(239,68,68,.55)}

/* لینک‌ها در محتوا */
.gcontent a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* موبایل: ریزتر و جمع‌وجورتر */
@media (max-width:520px){
  .ghero .gicon{width:48px;height:48px}
  .gtitle2{font-size:15px}
}
/* =========================================
   Glossary Doc (Viewer Content) – Pro Style
   Needs: HTML uses: .gdoc .gbox + variants
   ========================================= */

/* Root doc spacing */
.gdoc{
  margin-top:12px;
  display:grid;
  gap:12px;
  line-height:2.05;
}

/* Generic card box */
.gbox{
  position:relative;
  border:1px solid rgba(226,232,240,.95);
  border-radius:18px;
  padding:14px 14px 12px;
  background:#fff;
  box-shadow: 0 10px 22px rgba(2,6,23,.04);
  overflow:hidden;
}

/* subtle top accent line */
.gbox::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background: linear-gradient(90deg, rgba(37,99,235,.55), rgba(124,58,237,.45));
  opacity:.9;
}

/* headings */
.gbox h2, .gbox h3{
  margin:0 0 8px;
  font-weight:900;
  letter-spacing:-.2px;
  color: var(--text);
}
.gbox h2{ font-size:16px; }
.gbox h3{ font-size:15px; }

.gbox p{
  margin:0;
  color:#334155;
}
.gbox p + p{ margin-top:8px; }

/* links in content */
.gbox a{
  color:#2563eb;
  text-decoration:none;
  border-bottom:1px dashed rgba(37,99,235,.45);
}
.gbox a:hover{ border-bottom-style:solid; }

/* list styling */
.gbox ul{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:8px;
}
.gbox ul li{
  position:relative;
  padding:10px 12px;
  border:1px solid rgba(226,232,240,.9);
  border-radius:14px;
  background: rgba(255,255,255,.75);
  color:#0f172a;
}

/* bullet icon */
.gbox ul li::before{
  content:"";
  width:10px;height:10px;
  border-radius:999px;
  background: rgba(37,99,235,.35);
  position:absolute;
  right:10px;
  top:14px;
}
.gbox ul li{ padding-right:30px; }

/* Make long scientific paragraphs readable */
.gscience p{
  color:#0f172a;
}
.gscience{
  background: linear-gradient(135deg, rgba(2,132,199,.08), rgba(240,249,255,.92));
  border-color: rgba(14,165,233,.22);
}
.gscience::before{
  background: linear-gradient(90deg, rgba(14,165,233,.65), rgba(37,99,235,.35));
}

/* Intro box: branded and eye-catching */
.gintro{
  background: linear-gradient(135deg, rgba(37,99,235,.10), rgba(124,58,237,.08));
  border-color: rgba(37,99,235,.18);
}
.gintro::before{
  background: linear-gradient(90deg, rgba(37,99,235,.75), rgba(124,58,237,.55));
}

/* Simple definition box */
.gsimple{
  background: linear-gradient(135deg, rgba(22,163,74,.08), rgba(240,253,244,.95));
  border-color: rgba(22,163,74,.18);
}
.gsimple::before{
  background: linear-gradient(90deg, rgba(22,163,74,.70), rgba(14,165,233,.35));
}

/* Use-cases box */
.guse{
  background: linear-gradient(135deg, rgba(245,158,11,.10), rgba(255,251,235,.95));
  border-color: rgba(245,158,11,.18);
}
.guse::before{
  background: linear-gradient(90deg, rgba(245,158,11,.75), rgba(236,72,153,.25));
}
.guse ul li::before{ background: rgba(245,158,11,.45); }

/* Examples box */
.gexamples{
  background: linear-gradient(135deg, rgba(236,72,153,.08), rgba(253,242,248,.95));
  border-color: rgba(236,72,153,.18);
}
.gexamples::before{
  background: linear-gradient(90deg, rgba(236,72,153,.70), rgba(124,58,237,.35));
}
.gexamples ul li::before{ background: rgba(236,72,153,.45); }

/* Optional: add a “label chip” at top-left for section kind */
.gbox[data-tag]{
  padding-top:16px;
}
.gbox[data-tag]::after{
  content: attr(data-tag);
  position:absolute;
  left:12px;
  top:10px;
  font-size:11px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(226,232,240,.9);
  background: rgba(255,255,255,.7);
  color:#0f172a;
  font-weight:900;
}

/* Mobile spacing tuning */
@media (max-width:520px){
  .gbox{ padding:13px 12px 11px; }
  .gbox h2{ font-size:15px; }
  .gbox h3{ font-size:14px; }
  .gbox ul li{ padding:10px 12px 10px 30px; }
}