/* =========================
   GLOBAL TWEAKABLE STYLES
========================= */

/* Brand tweaks */
:root {
  --brand-primary: #0b5cff;
  --brand-text: #0f172a;

}

/* Typography tweaks */
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: var(--brand-text);
}

/* Optional: make Tailwind containers feel nicer */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px; /* matches Tailwind px-6 */
}

/* Card feel tweaks */
.card {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  padding: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

/* Simple grid helper (used on billing page) */
.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

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

/* If you don't already have a base .btn, add this */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #ffffff;
  color: #0f172a;
  text-decoration: none;
  cursor: pointer;
  font-weight: 600;
}

.btn:hover {
  background: #f8fafc;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Optional: secondary button (for your Pro button) */
.btn-secondary {
  background: #ffffff;
  color: var(--brand-primary);
  border: 1px solid rgba(11, 92, 255, 0.35);
}

.btn-secondary:hover {
  background: rgba(11, 92, 255, 0.06);
}

/* Optional: small button (used in header) */
.btn-sm {
  height: 34px;
  padding: 0 10px;
  font-size: 0.9rem;
}


/* Button tweaks */
.btn-primary {
  background: var(--brand-primary);
  color: #ffffff;
  border-radius: 8px;
}

.btn-primary:hover {
  background: #0848cc;
}

/* Footer tweaks */
.site-footer {
  border-top: 1px solid #e5e7eb;
  color: #64748b;
}

.site-header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
}

.header-inner {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  font-weight: 800;
  color: var(--brand-primary);
  text-decoration: none;
  font-size: 18px;
}

.header-nav {
  display: flex;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 600;
    line-height: 1;
  padding: 8px 0;
}

.header-nav a {
  text-decoration: none;
  color: #475569;
}

.header-nav a:hover {
  color: #0f172a;
}

.header-nav a.active {
  color: var(--brand-primary);
}

<style>
  .ot-container { max-width: 1120px; }
  .ot-card { border: 1px solid rgba(15, 23, 42, .10); }
  .ot-glow { box-shadow: 0 18px 60px rgba(2, 6, 23, .08); }
  .ot-ring { box-shadow: 0 0 0 6px rgba(37, 99, 235, .10); }

  /* NEW: Textured hero background */
  .ot-hero {
    position: relative;
    overflow: hidden;
  background:
    radial-gradient(800px 500px at 20% 10%, rgba(37,99,235,.12), transparent 60%),
    rgb(230, 240, 255);
  }

  /* Subtle “grain/texture” overlay (no images) */
  .ot-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
      repeating-linear-gradient(
        135deg,
        rgba(15,23,42,.035) 0px,
        rgba(15,23,42,.035) 1px,
        transparent 1px,
        transparent 8px
      );
    opacity: .18;
    mix-blend-mode: multiply;
  }

  /* Keeps hero content above the overlay */
  .ot-hero > * {
    position: relative;
    z-index: 1;
  }
</style>

/* ===== Agent App Shell UI ===== */

.ot-nav{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:#334155;
  text-decoration:none;
}
.ot-nav:hover{ background:#f8fafc; color:#0f172a; }
.ot-nav.ot-active{
  background: rgba(11,92,255,.08);
  color: var(--brand-primary);
  border: 1px solid rgba(11,92,255,.18);
}

.ot-panel{
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  border-radius:18px;
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
}

.ot-panel-header{
  padding:16px 18px;
  border-bottom:1px solid rgba(15,23,42,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.ot-kpi{
  background: rgb(230,240,255);
  border:1px solid rgba(37,99,235,.20);
  border-radius:18px;
  padding:16px;
}

/* =========================
   AGENT DASHBOARD SHELL HELPERS
========================= */

.ot-panel {
  background: #fff;
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 18px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.ot-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:16px 20px;
  border-bottom: 1px solid rgba(15, 23, 42, .08);
}

/* Optional: consistent "page" padding spacing inside shell */
.ot-page-stack { display: grid; gap: 16px; }

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
}