/* ==========================================================================
   Premium Public Theme (Light, SaaS-style, Original)
   ========================================================================== */

:root{
  --bg: #f6f8fc;
  --surface: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --line: rgba(15, 23, 42, .10);

  --primary: #0b3b5a;      /* deep blue */
  --accent: #2f80ed;       /* bright blue */
  --accent-2: #7c3aed;     /* violet */
  --success: #16a34a;

  --r12: 12px;
  --r16: 16px;
  --r20: 20px;

  --shadow-sm: 0 6px 18px rgba(2, 6, 23, .06);
  --shadow-md: 0 14px 40px rgba(2, 6, 23, .10);

  --trans: 140ms ease;
}

/* Base */
body.app-public{
  background: var(--bg);
  color: var(--text);
}

.text-muted{ color: var(--muted) !important; }

/* Navbar upgraded but still your layout */
.nav-glass{
  background: rgba(11, 59, 90, .96) !important;
  border-bottom: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(10px);
}

.brand-mark{ color: #8be0ff; }
.brand-name{ letter-spacing: .2px; }

.navbar .nav-link{ color: rgba(255,255,255,.88); font-weight: 600; }
.navbar .nav-link:hover{ color: #fff; }

.btn{ border-radius: 999px; font-weight: 700; }
.btn-outline-light{ border-color: rgba(255,255,255,.30) !important; }
.btn-outline-light:hover{ background: rgba(255,255,255,.14) !important; }

/* ==========================================================================
   Homepage
   ========================================================================== */

.hp-hero{
  position: relative;
  padding: 2.4rem 0 1.6rem;
  overflow: hidden;
}

.hp-hero-bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1100px 500px at 15% 0%, rgba(47,128,237,.18), transparent 60%),
    radial-gradient(900px 480px at 90% 10%, rgba(124,58,237,.14), transparent 55%),
    linear-gradient(180deg, #ffffff 0%, rgba(255,255,255,0) 60%);
  pointer-events: none;
}

.hp-hero-inner{
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

.hp-badge{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .75rem;
  border-radius: 999px;
  background: rgba(47,128,237,.10);
  border: 1px solid rgba(47,128,237,.18);
  color: #0b3b5a;
  font-weight: 800;
  font-size: .9rem;
  margin-bottom: .9rem;
}

.hp-title{
  font-size: clamp(2rem, 3.4vw, 3rem);
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: .85rem;
}

.hp-title-accent{
  display: block;
  margin-top: .25rem;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hp-subtitle{
  max-width: 52rem;
  color: var(--muted);
  font-size: 1.05rem;
  margin-bottom: 1.15rem;
}

/* Search */
.hp-search{
  position: relative;
  display: flex;
  align-items: center;
  max-width: 720px;
}

.hp-search-ico{
  position: absolute;
  left: 16px;
  color: rgba(15,23,42,.45);
}

.hp-search-input{
  width: 100%;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
  border-radius: 999px;
  padding: .95rem 3.1rem .95rem 2.75rem;
  outline: none;
  font-weight: 600;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--trans), border-color var(--trans), transform var(--trans);
}

.hp-search-input:focus{
  border-color: rgba(47,128,237,.35);
  box-shadow: 0 14px 40px rgba(47,128,237,.16);
  transform: translateY(-1px);
}

.hp-search-btn{
  position: absolute;
  right: 10px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 22px rgba(47,128,237,.22);
  transition: transform var(--trans);
}

.hp-search-btn:hover{ transform: translateY(-1px); }

/* Metrics */
.hp-metrics{
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
}

.hp-metric{
  min-width: 140px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r16);
  padding: .85rem .95rem;
  box-shadow: var(--shadow-sm);
}

.hp-metric-num{
  font-weight: 900;
  font-size: 1.15rem;
}

.hp-metric-label{
  color: var(--muted);
  font-weight: 700;
  font-size: .9rem;
  margin-top: .15rem;
}

/* Right panel */
.hp-panel{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r20);
  box-shadow: var(--shadow-md);
  padding: 1.15rem;
}

.hp-panel-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.hp-panel-title{
  font-weight: 900;
  font-size: 1.1rem;
}

.hp-panel-sub{
  color: var(--muted);
  font-weight: 600;
  font-size: .92rem;
  margin-top: .15rem;
}

.hp-panel-link{
  text-decoration: none;
  color: var(--accent);
  font-weight: 800;
  white-space: nowrap;
}

.hp-chip-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .65rem;
}

.hp-chip{
  text-decoration: none;
  color: var(--text);
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 999px;
  padding: .6rem .75rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}

.hp-chip i{ color: var(--accent); }
.hp-chip:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
  border-color: rgba(47,128,237,.22);
}

/* Ad slot */
.hp-ad{
  margin-top: 1rem;
  border-radius: var(--r16);
  border: 1px dashed rgba(15,23,42,.18);
  background: rgba(246,248,252,.8);
  padding: .85rem;
  display: flex;
  gap: .75rem;
  align-items: center;
}

.hp-ad-ico{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(47,128,237,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
}

.hp-ad-title{ font-weight: 900; }
.hp-ad-sub{ color: var(--muted); font-weight: 600; font-size: .92rem; }

/* Sections */
.hp-section{
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.6rem 1.25rem 0;
}

.hp-section-head{ margin-bottom: .9rem; }
.hp-h2{
  font-weight: 900;
  letter-spacing: -.2px;
  font-size: 1.5rem;
  margin-bottom: .2rem;
}
.hp-hint{
  color: var(--muted);
  font-weight: 600;
  margin-bottom: 0;
}

/* Grid cards */
.hp-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.hp-item{ grid-column: span 3; }

.hp-card{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r20);
  padding: 1.05rem;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}

.hp-card:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(47,128,237,.20);
}

.hp-card-top{
  display: flex;
  gap: .85rem;
  align-items: flex-start;
}

.hp-icon{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47,128,237,.10);
  color: var(--accent);
  flex: 0 0 auto;
  font-size: 1.1rem;
}

.hp-icon-alt{
  background: rgba(124,58,237,.10);
  color: var(--accent-2);
}

.hp-card-title{
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1.2;
  margin-top: .05rem;
}

.hp-card-desc{
  color: var(--muted);
  font-weight: 600;
  font-size: .92rem;
  margin-top: .35rem;
}

.hp-card-bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: .9rem;
  border-top: 1px solid rgba(15,23,42,.06);
}

.hp-badges{
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}

.hp-badge-sm{
  font-size: .78rem;
  font-weight: 900;
  padding: .22rem .55rem;
  border-radius: 999px;
  background: rgba(15,23,42,.06);
  color: rgba(15,23,42,.70);
}

.hp-badge-sm-2{ background: rgba(47,128,237,.10); color: rgba(11,59,90,.95); }
.hp-badge-sm-new{ background: rgba(22,163,74,.12); color: rgba(22,163,74,.95); }

.hp-go{
  font-weight: 900;
  color: var(--accent);
  white-space: nowrap;
}

/* Wide ad */
.hp-adwide{
  max-width: 1200px;
  margin: 1.4rem auto 0;
  padding: 0 1.25rem;
}
.hp-adwide-box{
  background: rgba(255,255,255,.92);
  border: 1px dashed rgba(15,23,42,.18);
  border-radius: var(--r20);
  padding: 1rem;
  display: flex;
  gap: .75rem;
  align-items: center;
  box-shadow: var(--shadow-sm);
}
.hp-adwide-title{ font-weight: 900; }
.hp-adwide-sub{ color: var(--muted); font-weight: 600; font-size: .92rem; }

/* Responsive */
@media (max-width: 1200px){
  .hp-item{ grid-column: span 4; }
}
@media (max-width: 992px){
  .hp-item{ grid-column: span 6; }
}
@media (max-width: 576px){
  .hp-item{ grid-column: span 12; }
  .hp-chip-grid{ grid-template-columns: 1fr; }
}

/* ==========================================================================
   Homepage expansions: trust, features, how-it-works, FAQ, CTA
   ========================================================================== */

.hp-trust{
  margin-top: 1.4rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .9rem;
}

.hp-trust-item{
  grid-column: span 4;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r20);
  box-shadow: var(--shadow-sm);
  padding: .95rem 1rem;
  display: flex;
  gap: .75rem;
  align-items: center;
}

.hp-trust-item i{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47,128,237,.10);
  color: var(--accent);
  flex: 0 0 auto;
}

.hp-trust-title{ font-weight: 900; }
.hp-trust-sub{ color: var(--muted); font-weight: 600; font-size: .92rem; margin-top: .1rem; }

.hp-toplink{
  text-decoration: none;
  color: var(--accent);
  font-weight: 900;
  white-space: nowrap;
}
.hp-toplink:hover{ text-decoration: underline; }

/* Features */
.hp-features{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

.hp-feature{
  grid-column: span 4;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r20);
  box-shadow: var(--shadow-sm);
  padding: 1.05rem;
}

.hp-feature-ico{
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: rgba(124,58,237,.10);
  color: var(--accent-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: .75rem;
}

.hp-feature-title{ font-weight: 900; font-size: 1.05rem; }
.hp-feature-sub{ color: var(--muted); font-weight: 600; font-size: .95rem; margin-top: .35rem; }

/* How it works */
.hp-how{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r20);
  box-shadow: var(--shadow-sm);
  padding: 1.15rem;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
  align-items: start;
}

.hp-how-left{ grid-column: span 4; padding: .25rem .25rem; }
.hp-steps{ grid-column: span 8; display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem; }

.hp-step{
  grid-column: span 4;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r16);
  padding: 1rem;
}

.hp-step-num{
  width: 36px;
  height: 36px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(47,128,237,.10);
  color: var(--accent);
  font-weight: 900;
  margin-bottom: .6rem;
}

.hp-step-title{ font-weight: 900; }
.hp-step-sub{ color: var(--muted); font-weight: 600; font-size: .95rem; margin-top: .35rem; }

/* FAQ accordion */
.hp-acc .accordion-item{
  border-radius: var(--r16);
  overflow: hidden;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: var(--shadow-sm);
  background: rgba(255,255,255,.92);
  margin-bottom: .75rem;
}
.hp-acc .accordion-button{
  font-weight: 900;
  color: var(--text);
  background: rgba(255,255,255,.92);
}
.hp-acc .accordion-button:not(.collapsed){
  background: rgba(47,128,237,.08);
  color: var(--primary);
}
.hp-acc .accordion-body{
  color: var(--muted);
  font-weight: 600;
}

/* CTA */
.hp-cta{
  background: linear-gradient(135deg, rgba(47,128,237,.12), rgba(124,58,237,.10));
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r20);
  box-shadow: var(--shadow-sm);
  padding: 1.2rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.hp-cta-title{
  font-weight: 900;
  font-size: 1.25rem;
}

.hp-cta-sub{
  color: var(--muted);
  font-weight: 600;
  margin-top: .2rem;
}

.hp-cta-actions{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
}

.hp-btn{
  border-radius: 999px !important;
  font-weight: 900 !important;
  padding: .6rem 1rem !important;
}

/* Responsive add-ons */
@media (max-width: 992px){
  .hp-trust-item{ grid-column: span 12; }
  .hp-feature{ grid-column: span 6; }
  .hp-how-left{ grid-column: span 12; }
  .hp-steps{ grid-column: span 12; }
  .hp-step{ grid-column: span 12; }
}
@media (max-width: 576px){
  .hp-feature{ grid-column: span 12; }
}

/* ==========================================================================
   Tools Index Page (All Tools)
   ========================================================================== */

.ti-hero{
  background: linear-gradient(180deg, rgba(47,128,237,.08), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.ti-hero-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.6rem 1.25rem 1.4rem;
  display: grid;
  grid-template-columns: 1.4fr .6fr;
  gap: 1.25rem;
  align-items: center;
}

.ti-title{
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: -.3px;
  margin-bottom: .35rem;
}

.ti-sub{
  color: var(--muted);
  font-weight: 600;
  max-width: 38rem;
}

.ti-hero-right{
  display: flex;
  flex-direction: column;
  gap: .75rem;
  align-items: flex-end;
}

/* Search */
.ti-search{
  position: relative;
  width: 100%;
  max-width: 360px;
}

.ti-search-ico{
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(15,23,42,.45);
}

.ti-search-input{
  width: 100%;
  border-radius: 999px;
  padding: .7rem .9rem .7rem 2.5rem;
  border: 1px solid rgba(15,23,42,.10);
  font-weight: 600;
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.ti-search-input:focus{
  outline: none;
  border-color: rgba(47,128,237,.35);
  box-shadow: 0 14px 40px rgba(47,128,237,.14);
}

.ti-meta{
  color: var(--muted);
  font-weight: 700;
  font-size: .9rem;
}

/* Empty state */
.ti-empty{
  grid-column: span 12;
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--muted);
}

.ti-empty-ico{
  width: 72px;
  height: 72px;
  margin: 0 auto 1rem;
  border-radius: 20px;
  background: rgba(47,128,237,.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  font-size: 1.6rem;
}

.ti-empty h3{
  font-weight: 900;
  color: var(--text);
  margin-bottom: .25rem;
}

/* Pagination */
.ti-pagination{
  display: flex;
  justify-content: center;
  margin: 2rem 0 1rem;
}

.ti-pagination .pagination{
  gap: .35rem;
}

.ti-pagination .page-item .page-link{
  border-radius: 10px;
  border: 1px solid rgba(15,23,42,.10);
  color: var(--text);
  font-weight: 800;
  padding: .45rem .7rem;
}

.ti-pagination .page-item.active .page-link{
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  color: #fff;
}

.ti-pagination .page-link:hover{
  background: rgba(47,128,237,.08);
}

/* Responsive */
@media (max-width: 992px){
  .ti-hero-inner{
    grid-template-columns: 1fr;
  }
  .ti-hero-right{
    align-items: flex-start;
  }
  .ti-search{
    max-width: 100%;
  }
}


/* ==========================================================================
   Tool Show Page (Workspace layout)
   ========================================================================== */

.ts-head{
  background: linear-gradient(180deg, rgba(47,128,237,.08), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.ts-head-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.35rem 1.25rem 1.15rem;
}

.ts-back{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 900;
  margin-bottom: .75rem;
}

.ts-back:hover{ text-decoration: underline; }

.ts-titlewrap{ max-width: 56rem; }

.ts-title{
  font-size: 1.9rem;
  font-weight: 950;
  letter-spacing: -.4px;
  margin-bottom: .25rem;
}

.ts-sub{
  color: var(--muted);
  font-weight: 650;
  margin-bottom: .75rem;
  font-size: 1.02rem;
}

.ts-meta{
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.ts-chip{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(47,128,237,.10);
  border: 1px solid rgba(47,128,237,.18);
  color: #0b3b5a;
  font-weight: 900;
  font-size: .85rem;
}

.ts-chip-muted{
  background: rgba(15,23,42,.06);
  border-color: rgba(15,23,42,.08);
  color: rgba(15,23,42,.75);
}

.ts-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.4rem 1.25rem 0;
}

/* Card base consistent with homepage */
.ts-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r20);
  box-shadow: var(--shadow-sm);
}

.ts-card-body{
  padding: 1.1rem;
}

.ts-tool{
  /* Give tool UIs a comfortable workspace */
  padding: .1rem .1rem;
}

/* Article content styling */
.ts-article{
  color: rgba(15,23,42,.90);
  font-weight: 520;
}

.ts-article h1, .ts-article h2, .ts-article h3{
  font-weight: 950;
  letter-spacing: -.2px;
  margin-top: 1rem;
}

.ts-article p{ color: rgba(15,23,42,.86); }

/* Sidebar */
.ts-side{
  display: grid;
  gap: 1rem;
}

.ts-side-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r20);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}

.ts-side-title{
  font-weight: 950;
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .75rem;
}

.ts-side-title i{
  width: 36px;
  height: 36px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(47,128,237,.10);
  color: var(--accent);
}

/* Tips list */
.ts-list{
  margin: 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-weight: 650;
}

.ts-list li{ margin-bottom: .55rem; }
.ts-list li:last-child{ margin-bottom: 0; }

/* Stat line */
.ts-stat{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem .85rem;
  border-radius: var(--r16);
  background: rgba(15,23,42,.04);
  border: 1px solid rgba(15,23,42,.06);
}

.ts-stat-label{
  color: var(--muted);
  font-weight: 800;
}

.ts-stat-value{
  font-weight: 950;
  letter-spacing: -.2px;
}

/* Ad container */
.ts-adbox{
  border-radius: var(--r16);
  border: 1px dashed rgba(15,23,42,.16);
  background: rgba(246,248,252,.8);
  padding: .75rem;
  overflow: hidden;
}

/* Tool sidebar HTML */
.ts-side-html{
  color: rgba(15,23,42,.86);
  font-weight: 620;
}

.ts-side-html a{
  color: var(--accent);
  font-weight: 850;
}

/* Make tool forms match theme (improves included $uiView too) */
.ts-card input.form-control,
.ts-card textarea.form-control,
.ts-card select.form-select{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: none;
  font-weight: 650;
}

.ts-card .btn{
  font-weight: 900;
}

/* Responsive */
@media (max-width: 992px){
  .ts-title{ font-size: 1.6rem; }
  .ts-card-body{ padding: 1rem; }
}


/* ==========================================================================
   Tool UI System (applies inside tool show page)
   ========================================================================== */

.ts-tool .row.g-3{
  --gap: 1rem;
  row-gap: var(--gap);
}

.ts-tool .form-label{
  font-weight: 900;
  color: rgba(15,23,42,.90);
  margin-bottom: .45rem;
}

.ts-tool .form-control,
.ts-tool .form-select{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.12);
  background: #fff;
  box-shadow: 0 2px 10px rgba(2,6,23,.04);
  font-weight: 650;
}

.ts-tool .form-control:focus,
.ts-tool .form-select:focus{
  border-color: rgba(47,128,237,.35);
  box-shadow: 0 14px 40px rgba(47,128,237,.14);
}

.ts-tool textarea.form-control{
  min-height: 220px;
  padding: .85rem .95rem;
  line-height: 1.5;
}

.ts-tool input.form-control{
  padding: .75rem .9rem;
}

/* Action bar (buttons row) */
.ts-tool .d-flex.flex-wrap.gap-2{
  padding: .75rem;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(246,248,252,.85);
  border-radius: var(--r16);
  box-shadow: 0 2px 10px rgba(2,6,23,.04);
}

/* Buttons – make them look premium */
.ts-tool .btn{
  border-radius: 999px;
  font-weight: 900;
  padding: .55rem .95rem;
}

.ts-tool .btn-primary{
  border: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 22px rgba(47,128,237,.18);
}

.ts-tool .btn-primary:hover{
  filter: brightness(.98);
  transform: translateY(-1px);
}

.ts-tool .btn-outline-primary{
  border-color: rgba(47,128,237,.35);
  color: var(--accent);
  font-weight: 900;
}

.ts-tool .btn-outline-primary:hover{
  background: rgba(47,128,237,.08);
  border-color: rgba(47,128,237,.40);
}

.ts-tool .btn-outline-secondary{
  border-color: rgba(15,23,42,.18);
  color: rgba(15,23,42,.82);
  font-weight: 900;
}

.ts-tool .btn-outline-secondary:hover{
  background: rgba(15,23,42,.06);
}

.ts-tool .btn-outline-danger{
  border-color: rgba(220,38,38,.25);
  color: rgba(220,38,38,.92);
  font-weight: 900;
}

.ts-tool .btn-outline-danger:hover{
  background: rgba(220,38,38,.08);
  border-color: rgba(220,38,38,.35);
}

/* Output panel look */
.ts-tool textarea[readonly],
.ts-tool input[readonly]{
  background: rgba(246,248,252,.9);
}

/* Error / helper text */
.ts-tool .text-danger.small{
  font-weight: 800;
}

/* Mono tweak */
.ts-tool .mono{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .92rem;
}

/* Tool UI Panels (optional markup upgrade) */
.ts-tool .tu-panel{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r20);
  padding: 1rem;
  box-shadow: 0 2px 10px rgba(2,6,23,.04);
}

.ts-tool .tu-head{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .6rem;
}

.ts-tool .tu-title{
  font-weight: 950;
  letter-spacing: -.2px;
}

.ts-tool .tu-sub{
  color: var(--muted);
  font-weight: 650;
  font-size: .9rem;
}

.ts-tool .tu-actions{
  border-radius: var(--r20);
}

/* ==========================================================================
   Static Pages (Privacy, Terms, About, etc.)
   ========================================================================== */

.pg-head{
  background: linear-gradient(180deg, rgba(47,128,237,.08), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.pg-head-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1.1rem;
}

.pg-title{
  font-size: 1.9rem;
  font-weight: 950;
  letter-spacing: -.4px;
  margin-bottom: .35rem;
}

.pg-meta{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 700;
}

.pg-meta-item{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.08);
  font-size: .9rem;
}

.pg-wrap{
  max-width: 1200px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 0;
}

.pg-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r20);
  box-shadow: var(--shadow-sm);
  padding: 1.15rem;
}

/* Prose typography for policy pages */
.prose{
  color: rgba(15,23,42,.88);
  font-weight: 560;
  line-height: 1.7;
}

.prose h1, .prose h2, .prose h3{
  font-weight: 950;
  letter-spacing: -.25px;
  color: var(--text);
  margin-top: 1.2rem;
  margin-bottom: .55rem;
}

.prose p{
  margin-bottom: .85rem;
}

.prose ul, .prose ol{
  margin: .6rem 0 1rem;
  padding-left: 1.25rem;
}

.prose li{
  margin-bottom: .45rem;
}

.prose a{
  color: var(--accent);
  font-weight: 850;
  text-decoration: none;
}

.prose a:hover{
  text-decoration: underline;
}

.prose blockquote{
  border-left: 4px solid rgba(47,128,237,.35);
  background: rgba(47,128,237,.06);
  padding: .75rem 1rem;
  border-radius: 12px;
  color: rgba(15,23,42,.82);
  margin: 1rem 0;
}


/* ==========================================================================
   Blog Post (Single) + Blog Typography
   ========================================================================== */

.bp-head{
  background: linear-gradient(180deg, rgba(47,128,237,.08), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.bp-head-inner{
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1.1rem;
}

.bp-back{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 900;
  margin-bottom: .75rem;
}

.bp-back:hover{ text-decoration: underline; }

.bp-titlewrap{ max-width: 56rem; }

.bp-title{
  font-size: clamp(1.85rem, 3.2vw, 2.4rem);
  font-weight: 950;
  letter-spacing: -.5px;
  line-height: 1.08;
  margin-bottom: .65rem;
}

.bp-meta{
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 750;
}

.bp-meta-item{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(15,23,42,.05);
  border: 1px solid rgba(15,23,42,.08);
  font-size: .9rem;
}

.bp-wrap{
  max-width: 900px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 0;
}

.bp-card{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r20);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.bp-cover{
  border-bottom: 1px solid rgba(15,23,42,.08);
  background: rgba(15,23,42,.03);
}

.bp-cover img{
  width: 100%;
  height: auto;
  display: block;
}

/* Blog content typography */
.blog-prose{
  padding: 1.25rem;
  color: rgba(15,23,42,.90);
  font-weight: 560;
  line-height: 1.85;
  font-size: 1.03rem;
}

/* Headings */
.blog-prose h2{
  font-weight: 950;
  letter-spacing: -.35px;
  line-height: 1.15;
  margin: 1.45rem 0 .6rem;
  font-size: 1.55rem;
}

.blog-prose h3{
  font-weight: 950;
  letter-spacing: -.25px;
  line-height: 1.2;
  margin: 1.15rem 0 .5rem;
  font-size: 1.25rem;
}

.blog-prose h4{
  font-weight: 900;
  letter-spacing: -.15px;
  line-height: 1.25;
  margin: 1rem 0 .45rem;
  font-size: 1.08rem;
}

/* Paragraphs + links */
.blog-prose p{
  margin: 0 0 1rem;
  color: rgba(15,23,42,.88);
}

.blog-prose a{
  color: var(--accent);
  font-weight: 850;
  text-decoration: none;
}

.blog-prose a:hover{
  text-decoration: underline;
}

/* Lists */
.blog-prose ul,
.blog-prose ol{
  margin: .6rem 0 1.1rem;
  padding-left: 1.25rem;
}

.blog-prose li{
  margin-bottom: .45rem;
  color: rgba(15,23,42,.88);
}

/* Blockquotes */
.blog-prose blockquote{
  margin: 1.1rem 0;
  padding: .9rem 1rem;
  border-left: 4px solid rgba(47,128,237,.35);
  background: rgba(47,128,237,.06);
  border-radius: 12px;
  color: rgba(15,23,42,.86);
}

.blog-prose blockquote p{
  margin: 0;
}

/* Images inside content */
.blog-prose img{
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 10px 28px rgba(2,6,23,.10);
  margin: .75rem 0 1rem;
}

/* Tables */
.blog-prose table{
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.25rem;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  overflow: hidden;
}

.blog-prose th,
.blog-prose td{
  padding: .75rem .85rem;
  border-bottom: 1px solid rgba(15,23,42,.08);
  text-align: left;
}

.blog-prose th{
  background: rgba(15,23,42,.04);
  font-weight: 950;
}

/* Code blocks */
.blog-prose pre{
  background: #0b1220;
  color: rgba(255,255,255,.92);
  padding: 1rem;
  border-radius: 16px;
  overflow: auto;
  margin: 1rem 0 1.25rem;
  box-shadow: 0 14px 40px rgba(2,6,23,.18);
  border: 1px solid rgba(255,255,255,.08);
}

.blog-prose code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
  font-size: .95em;
}

.blog-prose :not(pre) > code{
  background: rgba(15,23,42,.06);
  border: 1px solid rgba(15,23,42,.08);
  padding: .12rem .35rem;
  border-radius: 8px;
}

/* Horizontal rule */
.blog-prose hr{
  border: none;
  height: 1px;
  background: rgba(15,23,42,.10);
  margin: 1.4rem 0;
}

/* Responsive spacing */
@media (max-width: 576px){
  .blog-prose{
    padding: 1rem;
    font-size: 1rem;
  }
}


/* ==========================================================================
   Blog Index – Compact Editorial Layout
   ========================================================================== */

.bi-list-compact{
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

.bi-row{
  display: flex;
  gap: .9rem;
  padding: .75rem;
  border-radius: var(--r16);
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: var(--shadow-sm);
}

.bi-thumb{
  width: 120px;
  height: 80px;
  flex: 0 0 auto;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(15,23,42,.05);
}

.bi-thumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bi-row-body{
  flex: 1;
  min-width: 0;
}

.bi-h2{
  margin: 0 0 .25rem;
  line-height: 1.2;
}

.bi-h2 a{
  color: var(--text);
  font-weight: 900;
  text-decoration: none;
  font-size: 1.05rem;
}

.bi-h2 a:hover{
  text-decoration: underline;
}

.bi-meta{
  font-size: .85rem;
  color: var(--muted);
  font-weight: 650;
  margin-bottom: .35rem;
  display: flex;
  gap: .4rem;
  align-items: center;
}

.bi-excerpt{
  margin: 0;
  color: rgba(15,23,42,.82);
  font-size: .95rem;
  line-height: 1.6;
  font-weight: 550;
}

/* Responsive */
@media (max-width: 576px){
  .bi-row{
    flex-direction: column;
  }

  .bi-thumb{
    width: 100%;
    height: 160px;
  }
}

/* ==========================================================================
   Blog Index – Grid Cards (compact, multi-column)
   ========================================================================== */

.bi-grid{
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1rem;
}

/* 3 columns on large, 2 on md, 1 on mobile */
.bi-gcard{
  grid-column: span 4;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: var(--r20);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.bi-gcard:hover{
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: rgba(47,128,237,.18);
}

/* Thumbnail with fixed ratio */
.bi-gthumb{
  display: block;
  aspect-ratio: 16 / 9;
  background: rgba(15,23,42,.04);
  border-bottom: 1px solid rgba(15,23,42,.08);
  overflow: hidden;
}

.bi-gthumb img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.bi-gthumb-placeholder{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(15,23,42,.35);
  font-size: 1.4rem;
}

/* Body */
.bi-gbody{
  padding: .95rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  flex: 1;
}

.bi-gmeta{
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  color: var(--muted);
  font-weight: 750;
  font-size: .85rem;
}

.bi-gmeta span{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

/* Title */
.bi-gt{
  margin: 0;
  line-height: 1.25;
}

.bi-gt a{
  color: var(--text);
  font-weight: 950;
  text-decoration: none;
  font-size: 1.05rem;
  letter-spacing: -.2px;
}

.bi-gt a:hover{
  text-decoration: underline;
}

/* Excerpt (clamped so cards stay compact) */
.bi-gex{
  margin: 0;
  color: rgba(15,23,42,.82);
  font-weight: 560;
  font-size: .95rem;
  line-height: 1.6;

  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Action */
.bi-gactions{
  margin-top: auto;
  display: flex;
  justify-content: flex-end;
  padding-top: .35rem;
}

.bi-gread{
  text-decoration: none;
  font-weight: 950;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

.bi-gread:hover{ text-decoration: underline; }

/* Empty state should span full width */
.bi-empty{
  grid-column: 1 / -1;
}

/* Responsive columns */
@media (max-width: 992px){
  .bi-gcard{ grid-column: span 6; } /* 2 per row */
}

@media (max-width: 576px){
  .bi-gcard{ grid-column: span 12; } /* 1 per row */
}


/* ==========================================================================
   Blog Category Header
   ========================================================================== */

.bc-head{
  background: linear-gradient(180deg, rgba(47,128,237,.08), rgba(255,255,255,0));
  border-bottom: 1px solid rgba(15,23,42,.08);
}

.bc-head-inner{
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 1.1rem;
}

.bc-back{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--accent);
  text-decoration: none;
  font-weight: 900;
  margin-bottom: .75rem;
}

.bc-back:hover{ text-decoration: underline; }

.bc-title{
  font-size: clamp(1.75rem, 3vw, 2.2rem);
  font-weight: 950;
  letter-spacing: -.45px;
  margin-bottom: .4rem;
}

.bc-sub{
  color: var(--muted);
  font-weight: 650;
  margin-bottom: .75rem;
  max-width: 52rem;
}

.bc-meta{
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
}

.bc-pill{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  background: rgba(47,128,237,.10);
  border: 1px solid rgba(47,128,237,.18);
  color: #0b3b5a;
  font-weight: 900;
  font-size: .85rem;
}

.bc-pill-muted{
  background: rgba(15,23,42,.05);
  border-color: rgba(15,23,42,.08);
  color: rgba(15,23,42,.75);
}


/* ==========================================================================
   Professional Footer
   ========================================================================== */

.pf-footer{
  margin-top: 2rem;
  background: #0b3b5a;
  color: rgba(255,255,255,.92);
  border-top: 1px solid rgba(255,255,255,.10);
}

.pf-footer-top{
  display: grid;
  grid-template-columns: 1.2fr 1.8fr;
  gap: 2rem;
  padding: 2.25rem 0 1.5rem;
}

.pf-brand-title{
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 900;
  font-size: 1.25rem;
  letter-spacing: .2px;
}

.pf-brand-mark{
  color: #8be0ff;
}

.pf-brand-sub{
  margin: .65rem 0 1rem;
  color: rgba(255,255,255,.78);
  font-weight: 600;
  max-width: 34rem;
}

.pf-social{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.pf-social-link{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform 140ms ease, background 140ms ease, border-color 140ms ease;
}

.pf-social-link:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
  border-color: rgba(139,224,255,.35);
}

.pf-cols{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.pf-col-title{
  font-weight: 900;
  margin-bottom: .75rem;
  color: #8be0ff;
  letter-spacing: .2px;
}

.pf-link{
  display: inline-block;
  text-decoration: none;
  color: rgba(255,255,255,.82);
  font-weight: 700;
  margin-bottom: .55rem;
}

.pf-link:hover{
  color: #fff;
  text-decoration: underline;
}

.pf-muted{
  display: block;
  color: rgba(255,255,255,.68);
  font-weight: 600;
  font-size: .92rem;
  margin-top: .25rem;
}

.pf-footer-bottom{
  padding: 1rem 0 1.25rem;
  border-top: 1px solid rgba(255,255,255,.10);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
}

.pf-copy{
  color: rgba(255,255,255,.82);
  font-weight: 700;
}

.pf-mini{
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  color: rgba(255,255,255,.68);
  font-weight: 700;
  font-size: .92rem;
}

.pf-dot{
  opacity: .7;
}

/* Responsive */
@media (max-width: 992px){
  .pf-footer-top{
    grid-template-columns: 1fr;
  }
  .pf-cols{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px){
  .pf-cols{
    grid-template-columns: 1fr;
  }
}