/* ======================================
       OmniPostr Base Tokens & Globals
       ====================================== */
    :root {
      --blue:#1E88E5;
      --blue-700:#1565C0;
      --blue-900:#0D47A1;
      --accent:#FF7A59;
      --accent-700:#FF5A3D;
      --ink:#0F172A;
      --slate:#475569;
      --muted:#64748B;
      --bg:#FFFFFF;
      --bg-soft:#F8FAFC;
      --border:#E2E8F0;
      --radius-lg:24px;
      --radius:20px;
      --shadow-sm:0 8px 24px rgba(15,23,42,.08);
      --shadow-md:0 12px 30px rgba(15,23,42,.12);
      --shadow-lg:0 25px 50px rgba(15,23,42,.15);
      --gradient:linear-gradient(90deg, #1E88E5, #0D47A1);
    }

    * {
      box-sizing:border-box;
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
    }

    body {
      font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
      margin:0;
      padding:0;
      color:var(--ink);
      background-color:var(--bg-soft);
      background-image:
        radial-gradient(circle at 50% 0%, rgba(30,136,229,0.05), transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(255,122,89,0.03), transparent 30%);
      background-size:100% 1000px;
      background-repeat:no-repeat;
      min-height:100vh;
      line-height:1.6;
    }

    h1,h2,h3,h4,h5,h6 {
      margin-top:0;
      font-weight:800;
      line-height:1.2;
    }

    a {
      color:var(--blue);
      text-decoration:none;
      transition:color .2s;
    }
    a:hover:not(.btn) {
      color:var(--blue-700);
      text-decoration:underline;
    }

    .container {
      max-width:1200px;
      margin:0 auto;
      padding:0 1rem;
    }

    section {
      padding:5rem 0;
    }

    /*
    ======================================
    Navigation
    ======================================
    */
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      padding: 1rem 0;
      transition: background 0.35s ease, box-shadow 0.35s ease, transform 0.3s ease-in-out;
      border-bottom: 1px solid transparent;
    }

    nav.nav-scrolled {
      transform: translateY(-100%);
    }

    nav.nav-soft {
      transform: translateY(0);
      box-shadow: 0 4px 12px rgba(15,23,42,.08);
      backdrop-filter: blur(12px);
      background:
        linear-gradient(
          90deg,
          rgba(30,136,229,0.05),
          rgba(255,122,89,0.04),
          rgba(13,71,161,0.05)
        );
    }

    nav.nav-soft::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: linear-gradient(
        90deg,
        var(--blue) 0%,
        var(--accent) 50%,
        var(--blue-900) 100%
      );
      opacity: 0.22;
      pointer-events: none;
    }

    nav .nav-content {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      font-size: 1.5rem;
      font-weight: 900;
      color: var(--ink);
      text-decoration: none;
      transition: color 0.2s;
    }
    
    .logo:hover {
      color: var(--blue);
      text-decoration: none;
    }

    .nav-links {
      display: flex;
      gap: 2rem;
    }

    .nav-links a {
      color: #1f2937;
      font-weight: 500;
      padding: 0.4rem 0.75rem;
      border-radius: 6px;
      transition: background 0.25s ease, color 0.25s ease;
    }

    .nav-links a:hover:not(.btn) {
      background: rgba(30,136,229,0.08);
      color: var(--blue-700);
      text-decoration: none;
    }

    .nav-toggle {
      display: none;
      background: none;
      border: none;
      font-size: 1.5rem;
      cursor: pointer;
      color: var(--ink);
    }

    /*
    ======================================
    Buttons (TWEAKED)
    ======================================
    */
    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-weight: 700;
        padding: 1rem 2rem;
        border-radius: 12px;
        cursor: pointer;
        user-select: none;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        border: none;
    }

    .btn-primary {
        background-color: var(--blue);
        color: white;
        border: 2px solid var(--blue);
        box-shadow: 0 4px 12px rgba(30, 136, 229, 0.3);
        transition: all 0.2s ease-out;
    }
    
    .btn-primary:hover {
        background-color: var(--blue-700);
        border-color: var(--blue-700);
        color: white !important;
        transform: translateY(-1px);
        box-shadow: 0 6px 16px rgba(30, 136, 229, 0.35);
    }

    .btn-primary:active {
        transform: translateY(0px);
        box-shadow: 0 2px 8px rgba(30, 136, 229, 0.25);
    }

    .btn-secondary {
      background-color: transparent;
      color: var(--ink);
      border: 2px solid var(--border);
      box-shadow: none;
      transition: all 0.3s;
    }
    
    .btn-secondary:hover {
      border-color: var(--blue);
      color: var(--blue);
      background-color: var(--bg);
      transform: translateY(-1px);
      box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    }

    .btn-secondary:active {
      transform: translateY(0px);
      box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    }

    /* ======================================
       Custom Scrollbar – OmniPostr Style
       ====================================== */
    html {
      scrollbar-width: thin;
      scrollbar-color: var(--blue) #ffffff; /* Firefox */
    }

    /* Chrome, Edge, Safari */
    ::-webkit-scrollbar {
      width: 12px;
      height: 12px;
    }

    ::-webkit-scrollbar-track {
      background: rgba(80,150,255,0.15); /* Pure white background */
    }

    ::-webkit-scrollbar-thumb {
      background-color: var(--blue);       /* Main blue */
      border-radius: 10px;
      border: 3px solid #ffffff;           /* Gives a clean inset look */
    }

    ::-webkit-scrollbar-thumb:hover {
      background-color: var(--blue-700);   /* Darker blue on hover */
    }

    /* Scrollbar buttons (arrows) */
    ::-webkit-scrollbar-button {
      background-color: var(--blue);
    }

    ::-webkit-scrollbar-button:hover {
      background-color: var(--blue-700);
    }

    /* ======================================
       Custom Scrollbar for Scroll Areas
       ====================================== */
    /* Firefox */
    .scroll-area {
      scrollbar-width: thin;
      scrollbar-color: var(--blue) #ffffff;
    }

    /* WebKit (Chrome, Edge, Safari) */
    .scroll-area::-webkit-scrollbar {
      width: 10px;
    }

    .scroll-area::-webkit-scrollbar-track {
      background: #ffffff;                 /* White background */
    }

    .scroll-area::-webkit-scrollbar-thumb {
      background-color: var(--blue);       /* OmniPostr primary blue */
      border-radius: 10px;
      border: 2px solid #ffffff;           /* Clean inset look */
    }

    .scroll-area::-webkit-scrollbar-thumb:hover {
      background-color: var(--blue-700);   /* Darker blue on hover */
    }

    .scroll-area::-webkit-scrollbar-button {
      background-color: var(--blue);
    }

    .scroll-area::-webkit-scrollbar-button:hover {
      background-color: var(--blue-700);
    }

    /* ======================================
       Generator Section
       ====================================== */
    #generator {
      padding-top:8rem;
      padding-bottom:3rem;
    }

    .generator-header {
      text-align:center;
      margin-bottom:3rem;
    }

    .generator-header h1 {
      font-size:clamp(2.5rem, 5vw, 3.5rem);
      margin-bottom:1rem;
      background:linear-gradient(135deg, var(--blue) 0%, var(--accent) 100%);
      -webkit-background-clip:text;
      -webkit-text-fill-color:transparent;
      background-clip:text;
    }

    .generator-header p {
      font-size:1.25rem;
      color:var(--slate);
      max-width:700px;
      margin:0 auto;
    }

    .generator-card {
      background:white;
      border-radius:var(--radius-lg);
      padding:3rem;
      box-shadow:var(--shadow-md);
      max-width:800px;
      margin:0 auto;
      border:1px solid var(--border);
    }

    /* Content Type Selector */
    .content-type-selector {
      display:grid;
      grid-template-columns:repeat(3, 1fr);
      gap:1rem;
      margin-bottom:2.5rem;
    }

    .content-type-btn {
      background:white;
      border:2px solid var(--border);
      border-radius:16px;
      padding:1.5rem 1rem;
      cursor:pointer;
      transition:all .25s ease;
      text-align:center;
    }

    .content-type-btn:hover {
      border-color:var(--blue);
      transform:translateY(-2px);
      box-shadow:0 8px 20px rgba(30,136,229,.15);
    }

    .content-type-btn.active {
      background:var(--blue);
      border-color:var(--blue);
      color:white;
      box-shadow:0 8px 20px rgba(30,136,229,.40);
    }

    .content-type-btn .icon {
      font-size:2rem;
      margin-bottom:0.5rem;
    }

    .content-type-btn .label {
      font-weight:600;
      font-size:0.95rem;
    }

    .content-type-btn .desc {
      font-size:0.75rem;
      color:var(--muted);
      margin-top:0.25rem;
    }

    .content-type-btn.active .desc {
      color:rgba(255,255,255,0.85);
    }

    /* Form Styles */
    .form-group {
      display:flex;
      flex-direction:column;
      gap:0.5rem;
      margin-bottom:1.5rem;
    }

    label {
      font-size:0.85rem;
      font-weight:600;
      letter-spacing:0.05em;
      text-transform:uppercase;
      color:var(--muted);
    }

    input,
    textarea {
      width:100%;
      border-radius:999px;
      border:1px solid var(--border);
      padding:0.85rem 1.2rem;
      font-size:0.95rem;
      font-family:inherit;
      background:white;
      color:var(--ink);
      outline:none;
      transition:all .2s ease;
    }

    textarea {
      border-radius:20px;
      min-height:140px;
      padding:1rem 1.2rem;
      resize:vertical;
    }

    input:focus,
    textarea:focus {
      border-color:var(--blue);
      box-shadow:0 0 0 3px rgba(30,136,229,0.1), 0 8px 24px rgba(15,23,42,0.12);
      transform:translateY(-1px);
    }

    /* ======================================
       Accessibility - Focus Indicators
       ====================================== */
    
    /* Global focus indicator for keyboard navigation */
    *:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
    }

    /* Enhanced focus for buttons */
    button:focus-visible,
    .btn:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
      box-shadow: 0 0 0 4px rgba(30,136,229,0.15);
    }

    /* Focus for interactive cards */
    .dash-stat-card:focus-visible,
    .activity-item:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
      transform: translateY(-2px);
    }

    /* Focus for links */
    a:focus-visible {
      outline: 2px solid var(--blue);
      outline-offset: 2px;
      text-decoration: underline;
    }

    /* Remove default outline to use custom */
    *:focus {
      outline: none;
    }

    input::placeholder,
    textarea::placeholder {
      color:#9CA3AF;
    }

    .input-hint {
      font-size:0.8rem;
      color:var(--muted);
      margin-top:0.25rem;
    }

    .input-hint a {
      color:var(--blue);
      font-weight:600;
    }

    /* Input Mode Toggle */
    .input-mode-toggle {
      display:inline-flex;
      padding:0.25rem;
      border-radius:999px;
      background:#E5EDF9;
      border:1px solid rgba(148,163,184,0.7);
      box-shadow:0 8px 24px rgba(15,23,42,0.10);
      gap:0.25rem;
      margin-bottom:1.5rem;
    }

    .mode-btn {
      padding:0.4rem 1.2rem;
      border-radius:999px;
      font-size:0.82rem;
      font-weight:600;
      border:none;
      background:transparent;
      color:var(--slate);
      cursor:pointer;
      transition:background 0.18s ease,color 0.18s ease,box-shadow 0.18s ease,transform 0.12s ease;
      font-family:inherit;
      white-space:nowrap;
    }

    .mode-btn.active {
      background:#ffffff;
      color:var(--blue-900);
      box-shadow:0 10px 26px rgba(15,23,42,0.18);
      transform:translateY(-1px);
    }

    .mode-btn:hover:not(.active) {
      color:var(--blue-700);
    }

    /* mock: white capsule */
      border:1px solid rgba(148,163,184,0.55);
      box-shadow:0 10px 24px rgba(15,23,42,0.10);
      gap:0.25rem;
      margin-bottom:1.5rem;
    }

    .mode-btn {
      padding:0.4rem 1.2rem;
      border-radius:999px;
      font-size:0.82rem;
      font-weight:600;
      border:none;
      background:transparent;
      color:var(--slate);
      cursor:pointer;
      transition:background 0.18s ease,color 0.18s ease,box-shadow 0.18s ease,transform 0.12s ease;
      font-family:inherit;
      white-space:nowrap;
    }

    .mode-btn.active {
      background:rgba(74,163,255,0.18); /* OmniPostr light blue active */
      color:var(--blue-900);
      box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
      transform:none;
    }

    .mode-btn:hover:not(.active) {
      color:var(--blue-700);
    }

    /* Submit Button */
    .generate-btn {
      width:100%;
      padding:1.2rem;
      border:none;
      border-radius:999px;
      background:var(--blue);
      color:white;
      font-size:1.1rem;
      font-weight:700;
      cursor:pointer;
      transition:all .25s ease;
      box-shadow:0 12px 28px rgba(30,136,229,0.4);
      margin-top:1rem;
    }

    .generate-btn:hover:not(:disabled) {
      background:var(--blue-700);
      transform:translateY(-2px);
      box-shadow:0 16px 36px rgba(30,136,229,0.5);
    }

    .generate-btn:active:not(:disabled) {
      background:var(--blue-900);
      transform:translateY(0);
    }

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

    /* Loading State */
    .loading-overlay {
      display:none;
      position:fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:rgba(15,23,42,0.8);
      backdrop-filter:blur(4px);
      z-index:9999;
      align-items:center;
      justify-content:center;
    }

    .loading-overlay.active {
      display:flex;
    }

    .loading-content {
      background:white;
      border-radius:var(--radius-lg);
      padding:3rem;
      text-align:center;
      max-width:400px;
      box-shadow:var(--shadow-lg);
    }

    .loading-spinner {
      width:60px;
      height:60px;
      border:4px solid var(--border);
      border-top-color:var(--blue);
      border-radius:50%;
      animation:spin 1s linear infinite;
      margin:0 auto 1.5rem;
    }

    @keyframes spin {
      to { transform:rotate(360deg); }
    }

    .loading-content h3 {
      font-size:1.5rem;
      margin-bottom:0.5rem;
    }

    .loading-content p {
      color:var(--slate);
      font-size:1rem;
    }

    /* Error Message */
    .error-message {
      display:none;
      background:#FEE2E2;
      border:1px solid #FCA5A5;
      color:#991B1B;
      padding:1rem 1.25rem;
      border-radius:12px;
      margin-bottom:1.5rem;
      font-size:0.9rem;
    }

    .error-message.active {
      display:block;
    }

    /* ======================================
       Footer
       ====================================== */
    footer {
      border-top: 1px solid var(--border);
      margin-top: 4rem;
      padding: 4rem 0 1.75rem;
      background: linear-gradient(
        90deg,
        rgba(30,136,229,0.12),
        rgba(255,122,89,0.10),
        rgba(13,71,161,0.14)
      );
    }

    footer .container {
      background: rgba(255,255,255,0.94);
      border-radius: 24px;
      box-shadow: 0 -10px 30px rgba(15,23,42,0.12);
      padding-top: 3rem;
      padding-bottom: 0.1rem;
      margin-bottom: 1.7rem;
    }

    .footer-content {
      display: flex;
      justify-content: space-between;
      gap: 2rem;
      padding-bottom: 0.1rem;
      flex-wrap: wrap;
    }

    .footer-column {
      flex: 1 1 200px;
    }

    .footer-column:first-child {
      flex: 1 1 300px;
      max-width: 350px;
    }

    .footer-logo {
      font-size: 1.5rem;
      font-weight: 900;
      margin-bottom: 0.5rem;
      color: var(--ink);
      text-decoration: none;
      display: inline-block;
      transition: color 0.2s;
    }
    
    .footer-logo:hover {
      color: var(--blue);
      text-decoration: none;
    }

    .footer-tagline {
      font-weight: 600;
      color: var(--slate);
      margin-top: 0;
    }

    .footer-column h4 {
      font-size: 1.1rem;
      font-weight: 700;
      margin-bottom: 1.5rem;
      color: var(--ink);
    }

    .footer-column ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .footer-column ul li {
      margin-bottom: 0.75rem;
    }

    .footer-column ul li a {
      color: var(--slate);
      font-weight: 500;
    }

    .footer-column ul li a:hover:not(.btn) {
      color: var(--blue);
      text-decoration: none;
    }

    .footer-bottom {
      padding: 1.5rem 0;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: space-between;
      font-size: 0.875rem;
      color: var(--muted);
      flex-wrap: wrap;
      gap: 1rem;
    }

    .footer-bottom p {
      margin: 0;
    }

    /* Responsive */
    @media (max-width: 900px) {
      .nav-links {
        display: none;
      }
      .nav-toggle {
        display: block;
      }
      
      nav.nav-open .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: var(--bg);
        border-top: 1px solid var(--border);
        padding: 1rem;
        box-shadow: 0 10px 30px rgba(15,23,42,0.15);
      }
      
      .footer-content {
        flex-direction: column;
      }
    }

    @media (max-width: 768px) {
      .content-type-selector {
        grid-template-columns:1fr;
      }
      
      .generator-card {
        padding:2rem 1.5rem;
      }

      #generator {
        padding-top:6rem;
      }

      .dash-stats-grid {
        grid-template-columns:1fr;
      }
    }

    /* ======================================
       API Key Status Display
       ====================================== */
    .api-key-status {
      display:flex;
      align-items:center;
      justify-content:space-between;
      background:var(--bg-soft);
      padding:1rem 1.5rem;
      border-radius:16px;
      margin-bottom:2rem;
      border:1px solid var(--border);
    }

    .status-content {
      display:flex;
      align-items:center;
      gap:0.75rem;
    }

    .status-icon {
      color:var(--blue);
      font-size:1.2rem;
    }

    .status-text {
      font-weight:600;
      color:var(--ink);
    }

    .status-key {
      font-family:'Courier New', monospace;
      color:var(--muted);
      font-size:0.9rem;
      background:white;
      padding:0.25rem 0.75rem;
      border-radius:6px;
      border:1px solid var(--border);
    }

    .btn-ghost-sm {
      background:transparent;
      border:1px solid var(--border);
      padding:0.5rem 1rem;
      border-radius:8px;
      font-size:0.85rem;
      font-weight:600;
      color:var(--slate);
      cursor:pointer;
      transition:all .2s;
    }

    .btn-ghost-sm:hover {
      border-color:var(--blue);
      color:var(--blue);
      background:rgba(30,136,229,0.05);
    }

    /* ======================================
       Dashboard Stats Section
       ====================================== */
    .dash-stats-grid {
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
      gap:1.5rem;
      margin-bottom:3rem;
    }

    .dash-stat-card {
      background:white;
      border:1px solid var(--border);
      border-radius:var(--radius);
      padding:1.75rem;
      box-shadow:var(--shadow-sm);
      transition:all .25s ease;
    }

    .dash-stat-card:hover {
      transform:translateY(-2px);
      box-shadow:var(--shadow-md);
      border-color:rgba(30,136,229,0.3);
    }

    .stat-header {
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      margin-bottom:1.25rem;
    }

    .stat-title {
      font-size:0.85rem;
      font-weight:600;
      text-transform:uppercase;
      letter-spacing:0.05em;
      color:var(--muted);
      margin-bottom:0.25rem;
    }

    .stat-subtitle {
      font-size:0.8rem;
      color:var(--slate);
      margin:0;
    }

    .stat-icon {
      font-size:2rem;
      opacity:0.7;
    }

    .stat-value {
      font-size:2.5rem;
      font-weight:800;
      color:var(--ink);
      margin-bottom:0.5rem;
    }

    .stat-meta {
      font-size:0.9rem;
      color:var(--slate);
    }

    .stat-progress {
      margin-top:1rem;
    }

    .progress-bar {
      height:8px;
      background:var(--bg-soft);
      border-radius:999px;
      overflow:hidden;
      margin-bottom:0.5rem;
    }

    .progress-fill {
      height:100%;
      background:linear-gradient(90deg, var(--blue), var(--accent));
      transition:width .5s ease;
      border-radius:999px;
    }

    .progress-label {
      display:flex;
      justify-content:space-between;
      font-size:0.85rem;
      color:var(--muted);
    }

    /* Activity Section */
    .activity-section {
      background:white;
      border:1px solid var(--border);
      border-radius:var(--radius-lg);
      padding:2rem;
      box-shadow:var(--shadow-sm);
    }

    .activity-header {
      display:flex;
      justify-content:space-between;
      align-items:flex-start;
      margin-bottom:1.5rem;
      padding-bottom:1rem;
      border-bottom:1px solid var(--border);
    }

    .activity-header h3 {
      font-size:1.5rem;
      margin-bottom:0.25rem;
    }

    .activity-header p {
      font-size:0.9rem;
      color:var(--slate);
      margin:0;
    }


.activity-actions {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:0.75rem;
}

.activity-filters {
  display:flex;
  gap:0.5rem;
  flex-wrap:wrap;
  justify-content:flex-end;
}

/* OmniPostr-style filter pills (keep consistent) */
.activity-filter-btn {
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  padding:0.35rem 0.75rem;
  border-radius:999px;
  border:1px solid var(--border);
  background:var(--bg-soft);
  color:var(--ink);
  font-weight:600;
  font-size:0.85rem;
  cursor:pointer;
  transition:all .2s;
  user-select:none;
  min-width: 80px; /* FIX CLS: Prevent button width shifts */
  box-sizing: border-box; /* FIX CLS: Ensure consistent sizing */
}

.activity-filter-btn:hover{
      background:white;
      box-shadow:var(--shadow-sm);
    }

    .activity-filter-btn.active{
      background:rgba(30,136,229,0.10);
      border-color:rgba(30,136,229,0.35);
      color:var(--blue-700);
    }

    .activity-list {
      display:flex;
      flex-direction:column;
      gap:0.75rem;
    }

    .activity-item {
      display:flex;
      justify-content:space-between;
      align-items:center;
      padding:0.75rem 0.9rem;
      background:var(--bg-soft);
      border-radius:12px;
      border:1px solid var(--border);
      transition:all .2s;
    }

    .activity-item:hover {
      background:white;
      box-shadow:var(--shadow-sm);
    }

    .activity-main {
      flex:1;
    }


    .activity-row-actions{
      display:flex;
      flex-direction:column;
      align-items:flex-end;
      gap:0.4rem;
      flex-shrink:0;
      margin-left:0.75rem;
    }
    .activity-row-badges{
      display:flex;
      gap:0.4rem;
      align-items:center;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .activity-row-buttons{
      display:flex;
      gap:0.5rem;
      align-items:center;
    }
    .copy-activity-btn,
    .view-activity-btn{
      padding:0.34rem 0.6rem !important;
      border-radius:999px !important;
      font-size:12px !important;
      font-weight:600 !important;
      line-height:1 !important;
    }
    .copy-activity-btn{
      background:rgba(30,136,229,0.06) !important;
      border:1px solid rgba(30,136,229,0.20) !important;
      color:var(--blue-700) !important;
    }

    .activity-tag{
      padding:0.2rem 0.55rem !important;
      font-size:12px !important;
      border-radius:999px !important;
      line-height:1.1 !important;
    }


    .activity-label {
      font-weight:550;
      font-size:13.5px;
      color:var(--ink);
      margin-bottom:0.25rem;
    }

    .activity-meta {
      font-size:0.85rem;
      color:var(--slate);
    }

    .activity-tag {
      padding:0.4rem 0.9rem;
      border-radius:999px;
      font-size:0.8rem;
      font-weight:600;
      background:rgba(16,185,129,0.1);
      color:#047857;
      border:1px solid rgba(16,185,129,0.3);
    }

    .activity-badge{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:1.35rem;
      height:1.15rem;
      padding:0 0.45rem;
      border-radius:999px;
      font-size:0.75rem;
      font-weight:700;
      line-height:1;
      background:rgba(148,163,184,0.16);
      color:var(--slate);
      border:1px solid rgba(148,163,184,0.20);
    }

    /* Badge follows OmniPostr pill feel */
    .activity-filter-btn.active .activity-badge{
      background:rgba(30,136,229,0.12);
      border-color:rgba(30,136,229,0.22);
      color:var(--blue-700);
    }

    .activity-filter-btn:hover .activity-badge{
      background:rgba(30,136,229,0.10);
      border-color:rgba(30,136,229,0.18);
      color:var(--blue-700);
    }

    .activity-filter-btn.active .activity-badge {
      background:rgba(30,136,229,0.12);
      border-color:rgba(30,136,229,0.35);
      color:var(--blue-700);
    }

    .activity-loadmore-wrap {
      display:flex;
    }
.section-header {
      text-align:center;
    }

    .section-header h2 {
      font-size:clamp(2rem, 4vw, 2.75rem);
      margin-bottom:0.5rem;
    }

    .section-header p {
      color:var(--slate);
      font-size:1.1rem;
      max-width:650px;
      margin:0 auto;
    }
  

/* ===== OmniPostr Premium Workspace (Mock-style) ===== */
#dashboard-stats{ padding: 0 !important; margin-top: 18px; }
#dashboard-stats .container{ max-width: 1220px; margin: 0 auto; padding: 0 18px 40px; }
.op-workspace{
  display: grid;
  grid-template-columns: 2fr 1.05fr;
  gap: 18px;
  align-items: start;
}

/* Center workspace when showing only API key gate */
.op-workspace.show-api-gate-only {
  grid-template-columns: 1fr;
  max-width: 800px;
  margin: 0 auto;
}

.op-workspace-left{ display:flex; flex-direction:column; gap: 18px; min-width: 0; }
.op-workspace-right{ min-width: 0; }

.op-main-card{
  border-radius: 28px;
  background: rgba(255,255,255,0.78);
  border: 1px solid rgba(226,232,240,0.85);
  box-shadow: 0 18px 55px rgba(2,6,23,0.12);
  backdrop-filter: blur(10px);
}
.op-activity-card{ padding: 16px 16px 12px; }
.op-stats-card{ padding: 16px; position: sticky; top: 18px; }

.op-stats-mini-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

/* Make existing dash stat cards look like mock stat tiles, but compact */
.op-mini-stat{
  text-align: left !important;
  padding: 12px 12px 10px !important;
  min-width: 0 !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,0.75) !important;
  border: 1px solid rgba(226,232,240,0.9) !important;
  box-shadow: 0 10px 28px rgba(2,6,23,0.08) !important;
}
.op-mini-stat:hover{ transform: translateY(-2px); box-shadow: 0 18px 40px rgba(2,6,23,0.12) !important; }
.op-mini-stat .stat-title, .op-mini-stat .dash-stat-title{
  font-size: 11px !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  opacity: .75 !important;
  margin-bottom: 8px !important;
}
.op-mini-stat .stat-value, .op-mini-stat .dash-stat-value{
  font-size: 26px !important;
  line-height: 1.05 !important;
  font-weight: 650 !important;
  color: #0f172a !important;
}
.op-mini-stat .stat-subtext, .op-mini-stat .dash-stat-subtext{
  margin-top: 8px !important;
  font-size: 13px !important;
  opacity: .72 !important;
  color: #334155 !important;
}

/* Tighter activity section inside its main card */
.op-activity-card .activity-header{ padding: 6px 6px 10px; }
.op-activity-card #activityList{ margin-top: 10px; }

/* Responsive: stack sidebar under on small screens */
@media (max-width: 980px){
  .op-workspace{ grid-template-columns: 1fr; }
  .op-stats-card{ position: static; }
  .op-stats-mini-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px){
  .op-stats-mini-grid{ grid-template-columns: 1fr; }
}

/* ======================================
   Enhanced Mobile Responsive Design
   ====================================== */

/* Tablet (768px) */
@media (max-width: 768px) {
  /* Reduce container padding */
  .container {
    padding: 0 0.75rem;
  }

  /* Stack stats cards */
  .dash-stats-grid {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  /* Smaller stat values on mobile */
  .stat-value,
  .dash-stat-value {
    font-size: 1.75rem !important;
  }

  /* Reduce button padding */
  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
  }

  /* Smaller header */
  .generator-header h1 {
    font-size: 2rem !important;
  }

  .generator-header p {
    font-size: 1rem !important;
  }

  /* Content type selector - smaller */
  .content-type-selector {
    gap: 0.5rem;
  }

  /* Logout button - smaller on mobile */
  #op-logout-btn {
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
  
  border-radius: 12px !important;
}
}

/* Mobile Portrait (640px) */
@media (max-width: 640px) {
  /* Further reduce padding */
  body {
    font-size: 14px;
  }

  .container {
    padding: 0 0.5rem;
  }

  /* Generator section spacing */
  #generator {
    padding-top: 6rem;
    padding-bottom: 2rem;
  }

  /* Stack all stat mini-grid items */
  .op-stats-mini-grid {
    grid-template-columns: 1fr !important;
  }

  /* Smaller stat cards */
  .dash-stat-card,
  .op-mini-stat {
    padding: 0.75rem !important;
  }

  /* Hide secondary info on very small screens */
  .stat-subtitle,
  .stat-meta {
    font-size: 0.7rem !important;
  }

  /* Buttons full width on mobile */
  .btn {
    width: 100%;
    justify-content: center;
  }

  /* Input fields full width */
  input,
  textarea {
    font-size: 16px; /* Prevent zoom on iOS */
  }

  /* Modal/overlay adjustments */
  .generator-card {
    padding: 1.25rem !important;
    border-radius: 16px !important;
  }

  /* Top bar API key - hide on very small */
  .api-key-status.op-topbar {
    padding: 8px 10px;
  }

  .op-apikey {
    max-width: 150px;
    font-size: 0.8rem;
  }
}

/* Mobile Small (480px) */
@media (max-width: 480px) {
  /* Ultra compact mode */
  .generator-header h1 {
    font-size: 1.75rem !important;
  }

  .stat-value,
  .dash-stat-value {
    font-size: 1.5rem !important;
  }

  /* Hide decorative elements */
  .stat-icon {
    display: none;
  }

  .op-mini-ring {
    display: none;
  }

  /* Compact logout button */
  #op-logout-btn span {
    display: none; /* Show only icon */
  }

  #op-logout-btn {
    padding: 0.5rem;
  }
}

/* Landscape orientation adjustments */
@media (max-height: 600px) and (orientation: landscape) {
  #generator {
    padding-top: 4rem;
  }

  .generator-header {
    margin-bottom: 1.5rem;
  }

  .generator-header h1 {
    font-size: 1.75rem !important;
    margin-bottom: 0.5rem;
  }

  .generator-header p {
    font-size: 0.9rem !important;
  }
}

/* ===== Mock UI System Step 1–2 ===== */

/* Segmented control (URL / Text Prompt) - mock style */
.input-mode-toggle{
  position: relative !important;
  display: inline-flex !important;
  gap: 0 !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.06) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.input-mode-toggle::before{
  content:"";
  position:absolute;
  top:4px; bottom:4px;
  left:4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(30,136,229,.18), rgba(124,58,237,.14), rgba(255,122,89,.16));
  box-shadow: 0 8px 18px rgba(30,136,229,.14);
  transform: translateX(0);
  transition: transform .22s ease;
  pointer-events:none;
}
.input-mode-toggle[data-active="prompt"]::before{
  transform: translateX(100%);
}

.input-mode-toggle .mode-btn{
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 128px;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(15,23,42,.72) !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: color .18s ease, transform .18s ease;
}
.input-mode-toggle .mode-btn.active{
  color: rgba(15,23,42,.92) !important;
}
.input-mode-toggle .mode-btn:active{
  transform: translateY(1px);
}

/* Accent outline / highlight (use sparingly) */
:root{
  --op-accent-blue: rgba(30,136,229,.95);
  --op-accent-violet: rgba(124,58,237,.88);
  --op-accent-orange: rgba(255,122,89,.92);
  --op-outline: linear-gradient(135deg, var(--op-accent-blue), var(--op-accent-violet), var(--op-accent-orange));
}

/* Active content type card gets premium outline */
.content-type-btn.active{
  position: relative;
}
.content-type-btn.active::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 22px;
  background: var(--op-outline);
  z-index: 0;
  filter: blur(.2px);
  opacity: .55;
}
.content-type-btn.active > *{ position: relative; z-index: 1; }
.content-type-btn.active{
  box-shadow: 0 18px 40px rgba(30,136,229,.16) !important;
}

/* Primary CTA gets subtle gradient outline + glow */
.generate-btn{
  position: relative;
  overflow: hidden;
}
.generate-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  background: var(--op-outline);
  opacity: .35;
  filter: blur(.2px);
  z-index:0;
}
.generate-btn > *{ position: relative; z-index: 1; }
.generate-btn{
  box-shadow: 0 18px 44px rgba(30,136,229,.18) !important;
}

/* Active filter chip gets gradient halo (not too loud) */
.activity-filter-btn.active{
  position: relative;
  box-shadow: 0 10px 22px rgba(30,136,229,.10) !important;
}
.activity-filter-btn.active::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 999px;
  background: var(--op-outline);
  opacity: .20;
  filter: blur(.6px);
  z-index:-1;
}

/* Insights card gets a thin gradient edge (focus surface) */
.insights-card{
  position: relative;
  overflow: hidden;
}
.insights-card::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 18px;
  padding: 1px;
  background: var(--op-outline);
  -webkit-mask: 
    linear-gradient(#000 0 0) content-box, 
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: .45;
  pointer-events:none;
}


/* === v31: Active content-type card background = OmniPostr blue (match mock)
   - Do NOT touch the small inner icon pill colors (kept from v29)
   - Only replaces the "transient" outline/overlay tint on the ACTIVE card
=== */
.content-type-btn.active{
  background: linear-gradient(180deg, #1E88E5 0%, #0D47A1 100%) !important;
  border-color: rgba(30,136,229,.28) !important;
  box-shadow: 0 14px 34px rgba(30,136,229,.26) !important;
}
.content-type-btn.active::after{
  /* remove multi-color transient outline tint */
  background: linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 55%, rgba(0,0,0,.10) 100%) !important;
  opacity: .55 !important;
}



    /* === Mock-precision overrides (v32) === */
    /* Trigger (URL / Text Prompt) capsule — match mock: white glass + subtle blue active segment */
    .input-mode-toggle{
      position: relative;
      padding: 8px;
      gap: 8px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(203,213,225,.95);
      box-shadow: 0 22px 50px rgba(15,23,42,.12);
      backdrop-filter: blur(10px);
    }
    .mode-btn{
      padding: 10px 18px;
      border-radius: 999px;
      font-weight: 600;
      color: rgba(51,65,85,.85);
    }
    .mode-btn:hover:not(.active){
      color: rgba(30,41,59,.95);
      background: rgba(148,163,184,.18);
    }
    .mode-btn.active{
      color: var(--blue-900);
    }
    .mode-highlight{
      top: 8px;
      bottom: 8px;
      left: 8px;
      width: calc(50% - 8px);
      background: linear-gradient(180deg,
        rgba(214,236,255,.96) 0%,
        rgba(245,250,255,.98) 55%,
        rgba(255,255,255,.96) 100%);
      border: 1px solid rgba(30,136,229,.38);
      box-shadow:
        0 18px 34px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,.80);
    }

    /* Generate Content Package button — same OmniPostr blue as active card + premium glow */
    .generate-btn{
      background: linear-gradient(180deg, var(--blue) 0%, var(--blue-700) 100%) !important;
      box-shadow:
        0 18px 42px rgba(30,136,229,.30),
        inset 0 1px 0 rgba(255,255,255,.35);
      letter-spacing: .01em;
    }
    .generate-btn:hover{
      transform: translateY(-1px);
      box-shadow:
        0 22px 55px rgba(30,136,229,.34),
        inset 0 1px 0 rgba(255,255,255,.35);
      filter: brightness(1.02);
    }
    .generate-btn:active{
      transform: translateY(0px) scale(.99);
      box-shadow:
        0 0 0 6px rgba(30,136,229,.18),
        0 16px 40px rgba(30,136,229,.28),
        inset 0 1px 0 rgba(255,255,255,.25);
      filter: brightness(.98);
    }

    /* Keep Long Form subtitle on one line to match Social/Video rhythm */
    .content-type-btn[data-type="longform"] .desc{
      white-space:nowrap;
      font-size:0.88rem;
    }


/* === v39: mock-precision trigger + card height alignment (SAFE OVERRIDES) === */

/* A) Content type cards: restore taller height like v37 (no color changes) */
.content-type-btn{
  min-height: 132px; /* taller for consistent grid rhythm */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

/* B) URL / Text Prompt toggle: match mock dashboard (white capsule + light-blue active) */
.input-mode-toggle{
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(226,232,240,.9) !important;
  padding: 6px !important;
  gap: 8px !important;
  border-radius: 999px !important;
  box-shadow: none !important; /* keep it clean/flat like mock */
}

/* Remove sliding highlight layer if present (mock doesn't use it) */
.input-mode-toggle .mode-highlight{
  display:none !important;
}

.mode-btn{
  border: 0 !important;
  background: transparent !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  color: #475569 !important;
  box-shadow: none !important;
}

.mode-btn.active{
  background: rgba(30,136,229,.14) !important;
  color: #12307a !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.10) !important;
}

/* Keep icons on both modes; ensure monochrome */
.mode-btn "
/* Monochrome icon system (replaces emoji icons) */
.op-ico{
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 8px;
  background-color: currentColor;
  opacity: .78;
  -webkit-mask: var(--op-ico) no-repeat center / contain;
  mask: var(--op-ico) no-repeat center / contain;
}



/* === MOCK-EXACT URL/TEXT TOGGLE (only) === */
.input-mode-toggle{
  display:flex !important;
  gap: 8px !important;
  border-radius: 999px !important;
  padding: 6px !important;
  width: fit-content !important;
  border: 1px solid rgba(226,232,240,.9) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: none !important;
}
.input-mode-toggle .mode-btn{
  border:0 !important;
  background: transparent !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  color: #475569 !important;
  cursor: pointer;
  display:flex;
  align-items:center;
  gap: 10px;
}
.input-mode-toggle .mode-btn.active{
  background: rgba(30,136,229,.14) !important; /* single flat light blue */
  color: #12307a !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.10) !important;
}
.input-mode-toggle .mode-btn .mode-ico{
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  opacity: .85;
}
/* hide any previous highlight layer if present */
.input-mode-toggle .mode-highlight{ display:none !important; }


/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}

/* =========================
   Quality Agent (Production)
   ========================= */
.quality-card{
  border: 1px solid rgba(30,136,229,.18);
  background: linear-gradient(180deg, rgba(30,136,229,.08), rgba(30,136,229,.02));
}
.quality-card .stat-value{
  display:flex;
  align-items:baseline;
  gap:.25rem;
}
.quality-out-of{
  font-size: .9rem;
  opacity: .7;
  font-weight: 600;
}
.quality-pill{
  display:inline-flex;
  align-items:center;
  gap:.35rem;
  padding:.28rem .55rem;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.01em;
  border:1px solid rgba(148,163,184,.25);
  background: rgba(2,6,23,.18);
  color: rgba(226,232,240,.92);
  margin-right:.4rem;
  margin-bottom:.4rem;
}
.quality-pill--excellent{ border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.12); }
.quality-pill--good{ border-color: rgba(59,130,246,.35); background: rgba(59,130,246,.12); }
.quality-pill--fair{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.12); }
.quality-pill--low{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.12); }


/* Quality tag (colored) */
.activity-tag--quality{
  border-color: rgba(31,42,68,0.10) !important;
  background: rgba(255,255,255,0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(31,42,68,0.06);
}
.activity-tag--quality .activity-qicon{
  display:inline-block;
  margin-right:6px;
  font-weight:900;
  font-size:18px !important;
  line-height:1;
  line-height:1;
  transform: translateY(-0.5px);
  text-shadow: 0 0 0 rgba(0,0,0,0.20), 0.3px 0 rgba(0,0,0,0.10);

  color: var(--qcol);
}
.activity-tag--quality{
  color: rgba(31,42,68,0.95) !important;
}
.activity-tag--quality{
  --qcol:#7C3AED;
}

/* === Quality tier icon polish (v15.1b) === */
.activity-tag--quality .activity-qicon{
  font-size: 18px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -0.01em;
  text-shadow: 0 0 0 currentColor, 0 1px 0 rgba(0,0,0,0.10);
}
.activity-tag--quality[data-tier="excellent"]{ --qcol:#7C3AED; }
.activity-tag--quality[data-tier="good"]{ --qcol:#22C55E; }
.activity-tag--quality[data-tier="fair"]{ --qcol:#F97316; }
.activity-tag--quality[data-tier="low"]{ --qcol:#EF4444; }

/* Content Quality shield icon: match other stat icons (neutral grey) */
.stat-card.quality-card .stat-icon{ color: rgba(100,116,139,0.9); }
.stat-card.quality-card .stat-icon .op-ico[data-ico="shieldcheck"]{
  width: 18px;
  height: 18px;
  display: inline-block;
  background-color: currentColor;
  opacity: .78;
}

.quality-trends-card{
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(31,42,68,0.10);
  border-radius: 14px;
  padding: 10px 12px;
  min-height: 120px; /* Reserve space for chart + meta to prevent CLS */
}

/* Quality card icon fallback SVG should match other stat icons */
#qualityCardIcon svg{
  width: 18px !important;
  height: 18px !important;
  color: rgba(100,116,139,0.9);
}
#qualityCardIcon svg path, #qualityCardIcon svg polyline{
  stroke: rgba(100,116,139,0.9) !important;
}

.quality-trends-meta{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(31,42,68,0.75);
}
.regen-activity-btn{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(124,58,237,0.25);
  background: rgba(124,58,237,0.08);
  color: rgba(55,25,110,0.95);
}
.regen-activity-btn:disabled{
  opacity: .6;
  cursor: not-allowed;
}

/* Manual regenerate: slightly more neutral than Auto‑Improve */
.regen-manual-btn{
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid rgba(30,136,229,0.28);
  background: rgba(30,136,229,0.08);
  color: rgba(13,71,161,0.95);
}
.regen-manual-btn:disabled{
  opacity: .6;
  cursor: not-allowed;
}


/* ===== App Mode Toggle (hide marketing hero/footer when logged in) ===== */
body.op-app-mode .op-nav,
body.op-app-mode .hero,
body.op-app-mode .landing-footer,
body.op-app-mode .site-footer,
body.op-app-mode body.op-app-mode #dashboard-stats {
  padding-top: 0 !important;
}


/* Monochrome icon: shield-check (for Content Quality) */
.op-ico[data-ico="shieldcheck"]{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202%20l7%204v6c0%205.25-3.44%2010.74-7%2012-3.56-1.26-7-6.75-7-12V6l7-4z'%20fill='black'/%3E%3Cpath%20d='M10.2%2012.9%20l-1.4-1.4-1.4%201.4%202.8%202.8%206.4-6.4-1.4-1.4-5%205z'%20fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M12%202%20l7%204v6c0%205.25-3.44%2010.74-7%2012-3.56-1.26-7-6.75-7-12V6l7-4z'%20fill='black'/%3E%3Cpath%20d='M10.2%2012.9%20l-1.4-1.4-1.4%201.4%202.8%202.8%206.4-6.4-1.4-1.4-5%205z'%20fill='black'/%3E%3C/svg%3E");
}


/* Quality card icon (no grey placeholder) */
#qualityCardIcon{ color: rgba(124,58,237,0.92); }
#qualityCardIcon .quality-shield-ico{ display:block; }
/* =========================
   UI Clean-up Overrides (v15.1e)
   - unify Recent Activity pills/buttons
   - single blue shade
   - align stat-card icons/dots consistently
   ========================= */
:root{
  --op-blue: #2563EB;           /* single primary blue */
  --op-blue-10: rgba(37,99,235,0.10);
  --op-blue-16: rgba(37,99,235,0.16);
  --op-blue-24: rgba(37,99,235,0.24);
}

/* Recent Activity: unify badge + button sizing */
.activity-row-badges .activity-tag,
.activity-row-buttons .copy-activity-btn,
.activity-row-buttons .view-activity-btn,
.activity-row-buttons .regen-activity-btn,
.activity-row-buttons .regen-manual-btn{
  font-size: 13px !important;
  font-weight: 750 !important;
  line-height: 1 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  letter-spacing: 0 !important;
}

/* Make Quality pill visually consistent */
.activity-tag--quality{
  background: rgba(255,255,255,0.76) !important;
  border-color: rgba(31,42,68,0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(31,42,68,0.06);
}
.activity-tag--quality .activity-qicon{
  font-size: 18px !important;
  font-weight: 900 !important;
  margin-right: 8px !important;
  transform: translateY(-1px) !important;
  text-shadow: 0 0 0 rgba(0,0,0,0.22), 0.4px 0 rgba(0,0,0,0.10);
}

/* Single blue shade across action buttons */
.activity-row-buttons .copy-activity-btn,
.activity-row-buttons .view-activity-btn{
  border-color: var(--op-blue-24) !important;
  background: var(--op-blue-10) !important;
  color: var(--op-blue) !important;
  box-shadow: none !important;
}
.activity-row-buttons .copy-activity-btn:hover,
.activity-row-buttons .view-activity-btn:hover{
  background: var(--op-blue-16) !important;
}

/* Completed pill: keep green but unify typography */
.activity-row-badges .activity-tag{
  border-color: rgba(31,42,68,0.12) !important;
}

/* Tabs: unify blue */
.filter-tab.active, .tab.active, .segmented button.active{
  background: var(--op-blue-10) !important;
  border-color: var(--op-blue-24) !important;
  color: var(--op-blue) !important;
}

/* Stat cards: align header, icon, and dots consistently */
.op-mini-stat .stat-header{
  display:flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
.op-mini-stat .stat-icon{
  width: 22px !important;
  height: 22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  opacity: .75 !important;
  margin-top: 1px !important;
}
.stat-dot{
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  margin-top: 2px !important;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.88) !important;
}
.stat-dot--social{ background:#2563EB !important; }  /* blue */
.stat-dot--video{ background:#7C3AED !important; }   /* purple */
.stat-dot--longform{ background:#F97316 !important; }/* orange */

/* QC subcard icon positioning (top-right, monochrome) */
.regen-compare{position:relative;}
.regen-compare__ico{position:absolute; right:10px; top:10px; opacity:.85;}
.regen-compare__ico .op-ico{width:16px; height:16px;}
.regen-compare__label{padding-right:28px;}
.qc-ico--pos{color:#15803d;}
.qc-ico--neg{color:#b45309;}
.qc-ico--zero{color:#475569;}


/* Regenerate / Regenerate Again: match Copy URL / View style + micro-movement */
.regen-activity-btn, .regen-manual-btn, .regen-manual, .regen-activity{
  background: var(--op-blue-10) !important;
  border: 1px solid var(--op-blue-24) !important;
  color: var(--op-blue) !important;
  border-radius: 999px !important;
  height: 34px !important;
  padding: 0 14px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, border-color 160ms ease, color 160ms ease !important;
}
.regen-activity-btn:hover, .regen-manual-btn:hover, .regen-manual:hover, .regen-activity:hover{
  transform: translateY(-1px) !important;
  box-shadow: 0 10px 24px rgba(2,6,23,0.12) !important;
  background: rgba(37,99,235,0.16) !important;
  border-color: rgba(37,99,235,0.28) !important;
  color: rgba(29,78,216,1) !important;
}
.regen-activity-btn:active, .regen-manual-btn:active, .regen-manual:active, .regen-activity:active{
  transform: translateY(0px) !important;
  box-shadow: 0 6px 16px rgba(2,6,23,0.10) !important;
}
.regen-activity-btn:disabled, .regen-manual-btn:disabled, .regen-manual:disabled, .regen-activity:disabled{
  background: rgba(148,163,184,0.12) !important;
  border-color: rgba(148,163,184,0.25) !important;
  color: rgba(100,116,139,0.8) !important;
  box-shadow: none !important;
  transform: none !important;
}


/* QC comparison values: prevent overflow */
.regen-compare__vals{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; max-width:100%;}
.regen-compare__vals span{white-space:nowrap;}
.regen-compare__arrow{display:inline-block; opacity:.6;} /* hide the arrow icon inside QC line */

.regen-compare__subcard{overflow:hidden;} .regen-compare__subcard .regen-compare__vals{font-size:13px; line-height:1.25;}

/* QC row: prevent overflow + keep monochrome arrow */
.regen-compare__row{display:flex; align-items:baseline; gap:8px; flex-wrap:nowrap; max-width:100%; overflow:hidden;}
.regen-compare__row > span{white-space:nowrap; max-width:100%;}
.regen-compare__arrow{display:inline; color: rgba(100,116,139,.9); background: transparent !important; border:0 !important; padding:0 !important;}
.regen-compare__delta{opacity:.9; margin-left:4px; white-space:nowrap;}




/* OmniPostr Dashboard – Generating Overlay Glass Style */

.loading-overlay {
  background:
    radial-gradient(900px 520px at 18% 6%, rgba(30,136,229,0.22), transparent 60%),
    radial-gradient(900px 520px at 82% 12%, rgba(255,122,89,0.18), transparent 62%),
    radial-gradient(900px 600px at 50% 115%, rgba(13,71,161,0.20), transparent 60%),
    rgba(15,23,42,0.55) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
}

.loading-content {
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.92),
    rgba(248,250,252,0.96)
  ) !important;
  border: 1px solid rgba(148,163,184,0.35);
  box-shadow:
    0 26px 70px rgba(15,23,42,0.28),
    0 0 0 1px rgba(30,136,229,0.10);
  position: relative;
  overflow: hidden;
}

.loading-content::after {
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: inherit;
  pointer-events:none;
  background:
    radial-gradient(520px 200px at 12% 0%, rgba(30,136,229,0.14), transparent 60%),
    radial-gradient(520px 200px at 88% 100%, rgba(255,122,89,0.12), transparent 60%);
  opacity: .65;
}

/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




/* OmniPostr Generating Spinner – visible upgrade */

.spinner {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background:
    conic-gradient(
      from 0deg,
      #1E88E5,
      #FF7A59,
      #1E88E5
    );
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  animation: spin 1.1s linear infinite;
  box-shadow:
    0 0 18px rgba(30,136,229,0.55),
    0 0 36px rgba(255,122,89,0.35);
}

.spinner::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,136,229,0.35), transparent 70%);
  opacity: 0.6;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ==========================================================================
   OmniPostr Generation Overlay Reskin
   Final winning overlay skin for dashboard + dashboard_new
   ========================================================================== */

#loadingOverlay.loading-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(1100px 700px at 14% 8%, rgba(28, 77, 215, 0.16), transparent 58%),
    radial-gradient(980px 620px at 84% 10%, rgba(255, 122, 89, 0.13), transparent 60%),
    radial-gradient(1100px 720px at 50% 110%, rgba(129, 155, 255, 0.14), transparent 62%),
    rgba(241, 245, 249, 0.36) !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  animation: omniOverlayBackdropDrift 18s ease-in-out infinite;
}

#loadingOverlay.loading-overlay.active {
  display: flex !important;
}

#loadingOverlay.loading-overlay::before,
#loadingOverlay.loading-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#loadingOverlay.loading-overlay::before {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  opacity: 0.92;
}

#loadingOverlay.loading-overlay::after {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.08));
}

#loadingOverlay .loading-overlay__blob,
#loadingOverlay .loading-overlay__particle {
  position: absolute;
  pointer-events: none;
}

#loadingOverlay .loading-overlay__blob {
  width: 360px;
  height: 360px;
  border-radius: 999px;
  filter: blur(48px);
  opacity: 0.32;
  animation: omniOverlayBlobFloat 20s ease-in-out infinite;
}

#loadingOverlay .loading-overlay__blob--one {
  top: -110px;
  left: -120px;
  background: radial-gradient(circle, rgba(28, 77, 215, 0.2), rgba(129, 155, 255, 0.04) 68%, transparent 74%);
}

#loadingOverlay .loading-overlay__blob--two {
  right: -120px;
  bottom: -150px;
  background: radial-gradient(circle, rgba(255, 122, 89, 0.16), rgba(129, 155, 255, 0.06) 64%, transparent 74%);
  animation-duration: 24s;
  animation-direction: reverse;
}

#loadingOverlay .loading-overlay__particle {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(129, 155, 255, 0.24);
  box-shadow: 0 0 16px rgba(129, 155, 255, 0.22);
  opacity: 0.72;
  filter: blur(0.2px);
  animation: omniOverlayParticleFloat 11s ease-in-out infinite;
}

#loadingOverlay .loading-overlay__particle--1 { top: 17%; left: 22%; animation-delay: -0.5s; }
#loadingOverlay .loading-overlay__particle--2 { top: 26%; left: 74%; width: 7px; height: 7px; animation-delay: -1.8s; }
#loadingOverlay .loading-overlay__particle--3 { top: 62%; left: 18%; width: 8px; height: 8px; animation-delay: -3.2s; }
#loadingOverlay .loading-overlay__particle--4 { top: 68%; right: 16%; animation-delay: -2.4s; }
#loadingOverlay .loading-overlay__particle--5 { top: 34%; right: 26%; width: 6px; height: 6px; animation-delay: -4.6s; }
#loadingOverlay .loading-overlay__particle--6 { top: 78%; left: 68%; width: 5px; height: 5px; animation-delay: -6.2s; }

#loadingOverlay .loading-content {
  position: relative;
  z-index: 2;
  width: min(100%, 430px);
  min-height: 0 !important;
  padding: 30px 28px 24px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start !important;
  gap: 0;
  text-align: center;
  border-radius: 6px !important;
  border: 1px solid rgba(226, 232, 240, 0.82) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.72)) !important;
  box-shadow:
    0 24px 80px rgba(15, 23, 42, 0.14),
    0 12px 36px rgba(28, 77, 215, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
  overflow: hidden;
  animation: omniOverlayCardIn 0.46s cubic-bezier(0.22, 1, 0.36, 1) both;
}

#loadingOverlay .loading-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, #1c4dd7 0%, #819bff 42%, #ff7a59 72%, #1c4dd7 100%);
  background-size: 200% 100%;
  animation: omniOverlayStripeShift 6s linear infinite;
}

#loadingOverlay .loading-content::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
  pointer-events: none;
}

#loadingOverlay .loading-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 20px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(248, 250, 252, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.72);
  color: #64748b;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#loadingOverlay .loading-kicker__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1c4dd7 0%, #819bff 100%);
  box-shadow: 0 0 0 4px rgba(129, 155, 255, 0.12);
}

#loadingOverlay .loading-spinner {
  position: relative;
  width: 88px !important;
  height: 88px !important;
  border: none !important;
  border-radius: 50%;
  margin: 0 0 18px;
  display: grid !important;
  place-items: center;
  background: conic-gradient(from 0deg, #1c4dd7 0%, #819bff 26%, #ff7a59 58%, #1c4dd7 100%) !important;
  box-shadow:
    0 16px 36px rgba(28, 77, 215, 0.16),
    0 0 0 12px rgba(129, 155, 255, 0.08) !important;
  animation:
    omniOverlaySpinnerSpin 1.35s linear infinite,
    omniOverlaySpinnerPulse 3.1s ease-in-out infinite !important;
}

#loadingOverlay .loading-spinner::after {
  content: "";
  position: absolute;
  inset: -10px !important;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(129, 155, 255, 0.2), transparent 68%) !important;
  opacity: 0.9 !important;
}

#loadingOverlay .loading-spinner__core {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
  color: #1c4dd7;
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 24px;
  line-height: 1;
  box-shadow:
    inset 0 0 0 1px rgba(226, 232, 240, 0.82),
    0 10px 22px rgba(148, 163, 184, 0.16);
  animation: omniOverlaySparklePulse 2.2s ease-in-out infinite;
}

#loadingOverlay .loading-content h3 {
  margin: 0 0 10px;
  color: #1f2937;
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.85rem, 2vw, 2.15rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

#loadingOverlay .loading-content p {
  margin: 0;
  min-height: 2.8em !important;
  max-width: 30ch;
  color: #475569 !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.55;
}

#loadingOverlay .loading-footer {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 18px;
  color: #64748b;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#loadingOverlay .loading-footer__line {
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, rgba(129, 155, 255, 0), rgba(129, 155, 255, 0.9), rgba(129, 155, 255, 0));
}

#loadingOverlay.success .loading-content,
#loadingOverlay .loading-content.op-success {
  border-color: rgba(16, 185, 129, 0.26) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(236, 253, 245, 0.76)) !important;
  box-shadow:
    0 24px 80px rgba(5, 150, 105, 0.12),
    0 12px 36px rgba(16, 185, 129, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

#loadingOverlay.success .loading-content::before,
#loadingOverlay .loading-content.op-success::before {
  background: linear-gradient(90deg, #10b981 0%, #34d399 44%, #6ee7b7 72%, #10b981 100%);
}

#loadingOverlay.success .loading-spinner,
#loadingOverlay .loading-content.op-success .loading-spinner {
  background: conic-gradient(from 0deg, #10b981 0%, #34d399 45%, #0f766e 100%) !important;
  box-shadow:
    0 16px 36px rgba(16, 185, 129, 0.16),
    0 0 0 12px rgba(16, 185, 129, 0.08) !important;
}

#loadingOverlay.success .loading-spinner::after,
#loadingOverlay .loading-content.op-success .loading-spinner::after {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.22), transparent 68%) !important;
}

#loadingOverlay.success .loading-spinner__core,
#loadingOverlay .loading-content.op-success .loading-spinner__core {
  color: #059669;
}

#loadingOverlay.success .loading-kicker__dot,
#loadingOverlay .loading-content.op-success .loading-kicker__dot {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

#loadingOverlay.success .loading-content h3,
#loadingOverlay .loading-content.op-success h3 {
  color: #047857 !important;
}

#loadingOverlay.success .loading-content p,
#loadingOverlay .loading-content.op-success p,
#loadingOverlay.success .loading-footer,
#loadingOverlay .loading-content.op-success .loading-footer {
  color: #0f766e !important;
}

@keyframes omniOverlayBackdropDrift {
  0%, 100% { background-position: 0% 50%, 100% 20%, 50% 100%, 0 0; }
  50% { background-position: 10% 46%, 92% 12%, 52% 94%, 0 0; }
}

@keyframes omniOverlayBlobFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -14px, 0) scale(1.08); }
}

@keyframes omniOverlayParticleFloat {
  0%, 100% { transform: translate3d(0, 0, 0); opacity: 0.4; }
  50% { transform: translate3d(0, -18px, 0); opacity: 0.95; }
}

@keyframes omniOverlayCardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes omniOverlayStripeShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@keyframes omniOverlaySpinnerSpin {
  to { transform: rotate(360deg); }
}

@keyframes omniOverlaySpinnerPulse {
  0%, 100% { box-shadow: 0 16px 36px rgba(28, 77, 215, 0.16), 0 0 0 12px rgba(129, 155, 255, 0.08); }
  50% { box-shadow: 0 18px 40px rgba(28, 77, 215, 0.2), 0 0 0 16px rgba(129, 155, 255, 0.12); }
}

@keyframes omniOverlaySparklePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}

@media (max-width: 768px) {
  #loadingOverlay.loading-overlay {
    padding: 18px;
  }

  #loadingOverlay .loading-content {
    width: min(100%, 390px);
    padding: 26px 20px 20px !important;
  }

  #loadingOverlay .loading-spinner {
    width: 76px !important;
    height: 76px !important;
    margin-bottom: 16px;
  }

  #loadingOverlay .loading-spinner__core {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  #loadingOverlay .loading-content h3 {
    font-size: 1.62rem;
  }

  #loadingOverlay .loading-content p {
    max-width: 26ch;
    font-size: 0.94rem;
  }

  #loadingOverlay .loading-footer {
    gap: 10px;
    font-size: 10px;
    letter-spacing: 0.1em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #loadingOverlay.loading-overlay,
  #loadingOverlay .loading-overlay__blob,
  #loadingOverlay .loading-overlay__particle,
  #loadingOverlay .loading-content,
  #loadingOverlay .loading-content::before,
  #loadingOverlay .loading-spinner,
  #loadingOverlay .loading-spinner::after,
  #loadingOverlay .loading-spinner__core {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




/* ===============================
   OmniPostr – Tier-based Spinner + Stages
   (Safe: style + non-invasive JS)
   =============================== */

/* Default spinner palette (Starter) */
:root {
  --spin-a: #1E88E5;
  --spin-b: #FF7A59;
  --spin-c: #1E88E5;
  --spin-glow-a: rgba(30,136,229,0.55);
  --spin-glow-b: rgba(255,122,89,0.35);
}

/* Tier palettes */
body.tier-starter {
  --spin-a: #1E88E5;
  --spin-b: #FF7A59;
  --spin-c: #1E88E5;
  --spin-glow-a: rgba(30,136,229,0.55);
  --spin-glow-b: rgba(255,122,89,0.35);
}

body.tier-growth {
  --spin-a: #8B5CF6;   /* violet */
  --spin-b: #FF7A59;   /* warm accent */
  --spin-c: #8B5CF6;
  --spin-glow-a: rgba(139,92,246,0.55);
  --spin-glow-b: rgba(255,122,89,0.30);
}

body.tier-scale {
  --spin-a: #F97316;   /* enterprise neon orange */
  --spin-b: #22C55E;   /* subtle contrast */
  --spin-c: #F97316;
  --spin-glow-a: rgba(249,115,22,0.55);
  --spin-glow-b: rgba(34,197,94,0.25);
}

/* ======================================
   Plan Status Card - Tier-Specific Gradients
   ====================================== */

/* Starter Plan - Blue/Orange transient gradient */
body.tier-starter .dash-stat-card:has(#statPlanName) {
  position: relative;
  overflow: hidden;
}

body.tier-starter .dash-stat-card:has(#statPlanName)::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  right: -20%;
  bottom: -20%;
  background:
    radial-gradient(circle at 18% -8%, rgba(56, 189, 248, 0.22), transparent 72%),
    radial-gradient(circle at 82% 102%, rgba(255, 148, 94, 0.18), transparent 78%),
    linear-gradient(to bottom,
      rgba(56, 189, 248, 0.08) 0%,
      rgba(37, 99, 235, 0.10) 30%,
      rgba(59, 130, 246, 0.08) 50%,
      rgba(255, 184, 122, 0.06) 75%,
      rgba(255, 148, 94, 0.04) 100%
    );
  z-index: 0;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.7;
}

body.tier-starter .dash-stat-card:has(#statPlanName) > * {
  position: relative;
  z-index: 1;
}

/* Growth Plan - Violet/Orange transient gradient */
body.tier-growth .dash-stat-card:has(#statPlanName) {
  position: relative;
  overflow: hidden;
}

body.tier-growth .dash-stat-card:has(#statPlanName)::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  right: -20%;
  bottom: -20%;
  background:
    radial-gradient(circle at 18% 0%, rgba(139, 92, 246, 0.20), transparent 72%),
    radial-gradient(circle at 82% 95%, rgba(255, 140, 90, 0.16), transparent 78%),
    linear-gradient(to bottom,
      rgba(129, 140, 248, 0.12) 0%,
      rgba(139, 92, 246, 0.10) 25%,
      rgba(168, 85, 247, 0.08) 45%,
      rgba(255, 168, 120, 0.06) 70%,
      rgba(255, 140, 90, 0.04) 100%
    );
  z-index: 0;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.7;
}

body.tier-growth .dash-stat-card:has(#statPlanName) > * {
  position: relative;
  z-index: 1;
}

/* Scale Plan - Orange/Green (Cyan/Orange) transient gradient */
body.tier-scale .dash-stat-card:has(#statPlanName) {
  position: relative;
  overflow: hidden;
}

body.tier-scale .dash-stat-card:has(#statPlanName)::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  right: -20%;
  bottom: -20%;
  background:
    radial-gradient(circle at 22% -5%, rgba(16, 255, 230, 0.18), transparent 72%),
    radial-gradient(circle at 80% 100%, rgba(255, 120, 60, 0.16), transparent 78%),
    linear-gradient(to bottom,
      rgba(16, 255, 230, 0.08) 0%,
      rgba(16, 255, 230, 0.10) 30%,
      rgba(16, 255, 230, 0.08) 50%,
      rgba(255, 160, 90, 0.06) 70%,
      rgba(255, 110, 40, 0.04) 100%
    );
  z-index: 0;
  pointer-events: none;
  filter: blur(40px);
  opacity: 0.7;
}

body.tier-scale .dash-stat-card:has(#statPlanName) > * {
  position: relative;
  z-index: 1;
}

/* ======================================
   Plan Status Card - Border & Icon Colors by Plan
   ====================================== */

/* Starter Plan - Blue border and icon */
#planStatusCard.plan-starter {
  border-color: #1E88E5 !important;
  border-width: 2px;
}

#planStatusCard.plan-starter .stat-icon .op-ico {
  background-color: #1E88E5 !important;
}

/* Growth Plan - Violet border and icon */
#planStatusCard.plan-growth {
  border-color: #8B5CF6 !important;
  border-width: 2px;
}

#planStatusCard.plan-growth .stat-icon .op-ico {
  background-color: #8B5CF6 !important;
}

/* Scale Plan - Orange border and icon */
#planStatusCard.plan-scale {
  border-color: #F97316 !important;
  border-width: 2px;
}

#planStatusCard.plan-scale .stat-icon .op-ico {
  background-color: #F97316 !important;
}

/* Finishing state: slow + green */
.loading-spinner.is-finishing {
  animation-duration: 2.35s !important;
  box-shadow:
    0 0 18px rgba(34,197,94,0.55),
    0 0 42px rgba(34,197,94,0.28) !important;
}

.loading-spinner.is-finishing::after {
  background: radial-gradient(circle, rgba(34,197,94,0.36), transparent 70%) !important;
  animation-duration: 1.3s !important;
}

body.gen-finishing {
  --spin-a: #34D399;
  --spin-b: #16A34A;
  --spin-c: #34D399;
  --spin-glow-a: rgba(34,197,94,0.55);
  --spin-glow-b: rgba(34,197,94,0.25);
}

/* Apply to the actual dashboard spinner element */
.loading-spinner {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, var(--spin-a), var(--spin-b), var(--spin-c));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 0);
  animation: spin 1.1s linear infinite;
  box-shadow: 0 0 18px var(--spin-glow-a), 0 0 36px var(--spin-glow-b);
}

.loading-spinner::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(30,136,229,0.35), transparent 70%);
  opacity: 0.65;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes spin { to { transform: rotate(360deg);} }
@keyframes pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.95; } }

/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




/* ===============================
   Fixes: constant loading card size + single-ring spinner
   =============================== */

/* Keep loading card height constant even when stage text wraps */
.loading-content {
  min-height: 320px; /* keeps layout stable */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.loading-content p {
  min-height: 3.2em; /* reserve space for up to ~2 lines */
  max-width: 34ch;
}

/* Ensure ONLY the gradient ring shows (remove legacy border spinner) */
.loading-spinner {
  border: none !important;
  width: 60px !important;
  height: 60px !important;
  background: conic-gradient(from 0deg, var(--spin-a), var(--spin-b), var(--spin-c)) !important;
  box-shadow: 0 0 18px var(--spin-glow-a), 0 0 36px var(--spin-glow-b) !important;
}

/* Pulse halo adjusted to avoid "double spinner" look */
.loading-spinner::after {
  inset: -8px !important;
  opacity: 0.55 !important;
}

/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




/* ===============================
   OmniPostr Atmospheric Generate Backdrop
   =============================== */

.loading-overlay {
  background:
    radial-gradient(1200px 700px at 15% 5%, rgba(30,136,229,0.22), transparent 55%),
    radial-gradient(1000px 600px at 85% 10%, rgba(255,122,89,0.18), transparent 60%),
    radial-gradient(1200px 700px at 50% 120%, rgba(13,71,161,0.22), transparent 55%),
    rgba(15,23,42,0.55) !important;
  backdrop-filter: blur(14px) saturate(120%);
}

.loading-content {
  position: relative;
  z-index: 2;
}

.loading-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(800px 360px at 50% 45%, rgba(30,136,229,0.18), transparent 60%),
    radial-gradient(900px 420px at 60% 55%, rgba(255,122,89,0.14), transparent 65%);
  opacity: 0.7;
}

/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




/* ===============================
   OmniPostr – Atmospheric Enhancements
   Slow drift, vignette, Scale intensity
   =============================== */

/* Slow, barely noticeable gradient drift */
@keyframes omniDrift {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%;
  }
  50% {
    background-position: 5% 3%, 95% 4%, 50% 95%;
  }
  100% {
    background-position: 0% 0%, 100% 0%, 50% 100%;
  }
}

.loading-overlay {
  animation: omniDrift 14s ease-in-out infinite;
  background-size: 120% 120%, 120% 120%, 120% 120%, auto;
}

/* Subtle vignette to center attention */
.loading-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse at center,
      rgba(0,0,0,0) 45%,
      rgba(15,23,42,0.25) 100%
    );
  opacity: 0.55;
}

/* Scale plan: slightly stronger intensity */
body.tier-scale .loading-overlay {
  background:
    radial-gradient(1200px 700px at 15% 5%, rgba(249,115,22,0.32), transparent 55%),
    radial-gradient(1000px 600px at 85% 10%, rgba(255,122,89,0.28), transparent 60%),
    radial-gradient(1200px 700px at 50% 120%, rgba(34,197,94,0.22), transparent 55%),
    rgba(15,23,42,0.55) !important;
}

/* ===============================
   OmniPostr Dashboard – Background (Style-only)
   =============================== */
body {
  /* OmniPostr Atmospheric SaaS Background */
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(30,136,229,0.18), transparent 55%),
    radial-gradient(1000px 700px at 85% 0%, rgba(255,122,89,0.14), transparent 60%),
    radial-gradient(1200px 800px at 50% 120%, rgba(13,71,161,0.18), transparent 55%),
    linear-gradient(180deg, #F8FAFC 0%, #F8FAFC 100%);
}

/* Subtle vignette to center attention (global, non-interactive) */
body::before {
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at center,
      rgba(15,23,42,0) 45%,
      rgba(15,23,42,0.08) 100%);
}

/* Ensure main app content layers above vignette */
main, header, nav, footer, .container, .dashboard-shell, .page, .app, .dash-wrapper {
  position: relative;
  z-index: 1;
}


/* ===============================
   OmniPostr Dashboard – Premium Enhancements
   Drift + Scale intensity + Noise grain
   =============================== */

/* Ultra-slow background drift (subtle) */
@keyframes omniBgDrift {
  0%   { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%; }
  50%  { background-position: 6% 4%, 94% 3%, 50% 92%, 0% 0%; }
  100% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%; }
}
body {
  background-size: 120% 120%, 120% 120%, 120% 120%, auto;
  animation: omniBgDrift 48s ease-in-out infinite;
}

/* Slightly stronger background for Scale users only
   - activate by adding class 'tier-scale' on <body>
*/
body.tier-scale {
  background:
    radial-gradient(1200px 800px at 15% -10%, rgba(249,115,22,0.26), transparent 55%),
    radial-gradient(1000px 700px at 85% 0%, rgba(255,122,89,0.20), transparent 60%),
    radial-gradient(1200px 800px at 50% 120%, rgba(34,197,94,0.16), transparent 55%),
    linear-gradient(180deg, #F8FAFC 0%, #F8FAFC 100%);
  background-size: 120% 120%, 120% 120%, 120% 120%, auto;
  animation: omniBgDrift 44s ease-in-out infinite;
}

/* Premium noise grain (very subtle) */
body::after {
  content:"";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.06;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}


/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




  /* Injected override: use EXACT iframe mock dashboard background */
  body {
    background:
    radial-gradient(1050px 680px at 20% 16%, rgba(30,136,229,.18), transparent 58%),
    radial-gradient(950px 680px at 80% 22%, rgba(255,122,89,.14), transparent 58%),
    radial-gradient(980px 720px at 50% 92%, rgba(13,71,161,.12), transparent 62%),
    linear-gradient(180deg, #ffffff 0%, #f6f8ff 55%, #eef5ff 100%);
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
  }

/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




  /* Option A: keep OmniPostr footer full-width even inside centered dashboard containers */
  html, body { overflow-x: hidden; }
  footer {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

/* --- Premium compact list + chips tuning (facelift pass: compact) --- */
.activity-filters { gap: 0.35rem !important; }
.activity-filter-btn{
  padding: 0.35rem 0.6rem !important;
  font-size: 0.82rem !important;
  border-radius: 999px !important;
}
.activity-filter-btn .activity-badge{
  min-width: 1.15rem !important;
  height: 1.05rem !important;
  padding: 0 0.38rem !important;
  font-size: 0.70rem !important;
}

/* Activity rows: compact, list-like, still premium */
.activity-list{ gap: 0.6rem !important; }
.activity-item{
  padding: 0.7rem 0.85rem !important;
  border-radius: 12px !important;
}
.activity-main{ min-width: 0 !important; }
.activity-label{
  font-size: 0.95rem !important;
  line-height: 1.25 !important;
  margin-bottom: 0.15rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.activity-meta{
  font-size: 0.78rem !important;
  line-height: 1.2 !important;
}

/* Completed pill */
.activity-tag{
  padding: 0.28rem 0.6rem !important;
  font-size: 0.76rem !important;
  border-radius: 999px !important;
  line-height: 1 !important;
}

/* View button (overrides inline styles safely) */
.view-activity-btn{
  padding: 0.30rem 0.60rem !important;
  font-size: 0.80rem !important;
  border-radius: 999px !important;
}

/* Make the right-side controls align without increasing row height */
.activity-item > div:last-child{
  gap: 0.4rem !important;
}


/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




    /* ======================================
       Premium UI Softening + Mock Fidelity
       (CSS-only overrides; no JS logic changes)
       ====================================== */

    :root{
      --op-text: #0f172a;
      --op-muted: rgba(15,23,42,.62);
      --op-muted2: rgba(15,23,42,.48);
      --op-glass: rgba(255,255,255,.72);
      --op-glass-strong: rgba(255,255,255,.84);
      --op-border-soft: rgba(148,163,184,.42);
      --op-shadow-soft: 0 18px 55px rgba(15,23,42,.14);
    }

    body{
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji" !important;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      color: var(--op-text);
      letter-spacing: -0.01em;
    }

    h1,h2,h3{
      letter-spacing: -0.02em;
    }

    /* Make global typography feel lighter/softer */
    .section-title,
    label{
      color: rgba(15,23,42,.78) !important;
      font-weight: 650 !important;
    }

    /* =========================
       Production card controls
       ========================= */

    .content-type-selector{
      gap: 0.85rem !important;
      margin-bottom: 1.6rem !important;
    }

    .content-type-btn{
      border-radius: 20px !important;
      border: 1px solid var(--op-border-soft) !important;
      background: var(--op-glass) !important;
      backdrop-filter: blur(10px);
      box-shadow: 0 14px 40px rgba(15,23,42,.12) !important;
      padding: 1rem 1rem !important;
      text-align: left !important;
      transform: translateY(0);
    }

    .content-type-btn .icon{
      width: 44px;
      height: 44px;
      border-radius: 16px;
      display: grid;
      place-items: center;
      background: rgba(30,136,229,.10);
      border: 1px solid rgba(30,136,229,.16);
      margin-bottom: .75rem;
      font-size: 1.25rem !important;
    }

    .content-type-btn .label{
      font-size: 1.05rem !important;
      font-weight: 750 !important;
      color: rgba(15,23,42,.92) !important;
      margin-bottom: .2rem !important;
    }

    .content-type-btn .desc{
      font-size: .88rem !important;
      line-height: 1.25 !important;
      color: var(--op-muted) !important;
      font-weight: 520 !important;
    }

    .content-type-btn:hover{
      transform: translateY(-2px);
      box-shadow: var(--op-shadow-soft) !important;
      border-color: rgba(30,136,229,.26) !important;
    }

    .content-type-btn.active{
      background: linear-gradient(180deg, rgba(30,136,229,.92), rgba(30,136,229,.78)) !important;
      border-color: rgba(30,136,229,.55) !important;
      box-shadow: 0 20px 65px rgba(30,136,229,.22) !important;
    }

    .content-type-btn.active .icon{
      background: rgba(255,255,255,.22);
      border-color: rgba(255,255,255,.22);
    }

    
    /* Active content-type icon pill color by type (only the small inner pill) */
    .content-type-btn.active[data-type="social"] .icon{
      background: rgba(30,136,229,.20) !important;
      border-color: rgba(30,136,229,.32) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 22px rgba(30,136,229,.16) !important;
    }
    .content-type-btn.active[data-type="video"] .icon{
      background: rgba(139,92,246,.18) !important;
      border-color: rgba(139,92,246,.30) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 22px rgba(139,92,246,.14) !important;
    }
    .content-type-btn.active[data-type="longform"] .icon{
      background: rgba(251,146,60,.18) !important;
      border-color: rgba(251,146,60,.30) !important;
      box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 10px 22px rgba(251,146,60,.14) !important;
    }
.content-type-btn.active .label,
    .content-type-btn.active .desc{
      color: rgba(255,255,255,.95) !important;
    }

    /* URL / Text Prompt toggle – more mock-like */
    .input-mode-toggle{
      background: rgba(255,255,255,.66) !important;
      border: 1px solid var(--op-border-soft) !important;
      box-shadow: 0 14px 40px rgba(15,23,42,.12) !important;
      padding: .22rem !important;
      gap: .25rem !important;
    }
    .mode-btn{
      padding: .42rem 1.05rem !important;
      font-size: .82rem !important;
      font-weight: 700 !important;
      color: rgba(15,23,42,.70) !important;
    }
    .mode-btn.active{
      background: rgba(30,136,229,.12) !important;
      color: rgba(15,23,42,.90) !important;
      box-shadow: none !important;
    }

    /* Inputs */
    input[type="url"], input[type="text"], textarea{
      background: rgba(255,255,255,.78) !important;
      border: 1px solid rgba(148,163,184,.45) !important;
      box-shadow: 0 8px 24px rgba(15,23,42,.08);
      font-weight: 520;
    }

    /* Main CTA */
    .generate-btn{
      border-radius: 999px !important;
      height: 56px !important;
      font-size: 1.02rem !important;
      font-weight: 800 !important;
      letter-spacing: -0.01em;
      box-shadow: 0 18px 65px rgba(30,136,229,.24) !important;
      background: linear-gradient(135deg, rgba(30,136,229,.96), rgba(30,136,229,.78)) !important;
    }
    .generate-btn:hover{
      transform: translateY(-1px) !important;
      box-shadow: 0 22px 80px rgba(30,136,229,.26) !important;
    }

    /* =========================
       Recent Activity compaction
       ========================= */

    .activity-filters{
      gap: .5rem !important;
    }

    .activity-filter-btn{
      padding: .38rem .7rem !important;
      border-radius: 999px !important;
      font-size: .82rem !important;
      font-weight: 750 !important;
      background: rgba(255,255,255,.72) !important;
      border: 1px solid rgba(148,163,184,.40) !important;
    }

    .activity-filter-btn.active{
      background: rgba(30,136,229,.12) !important;
      border-color: rgba(30,136,229,.22) !important;
    }

    .activity-item{
      padding: .9rem 1rem !important;
      border-radius: 16px !important;
      background: rgba(255,255,255,.70) !important;
      border: 1px solid rgba(148,163,184,.35) !important;
    }

    .activity-label{
      font-weight: 750 !important;
      color: rgba(15,23,42,.92) !important;
      font-size: .96rem !important;
    }
    .activity-meta{
      color: var(--op-muted2) !important;
      font-size: .80rem !important;
    }

    .activity-actions{
      display:flex;
      align-items:center;
      gap:.5rem;
      flex-wrap: wrap;
      justify-content: flex-end;
    }

    .activity-tag{
      padding: .28rem .58rem !important;
      border-radius: 999px !important;
      font-size: .76rem !important;
      font-weight: 750 !important;
      border: 1px solid rgba(34,197,94,.25) !important;
      background: rgba(34,197,94,.12) !important;
      color: rgba(21,128,61,.95) !important;
    }

    .activity-tag--quality{
      border-color: rgba(30,136,229,.22) !important;
      background: rgba(30,136,229,.10) !important;
      color: rgba(30,136,229,.95) !important;
    }

    /* Quality tier colors (history badges) */
    .activity-tag--quality.activity-tag--excellent{
      border-color: rgba(21,128,61,.28) !important;
      background: rgba(21,128,61,.10) !important;
      color: rgba(21,128,61,.96) !important;
    }
    .activity-tag--quality.activity-tag--good{
      border-color: rgba(202,138,4,.28) !important;
      background: rgba(202,138,4,.10) !important;
      color: rgba(202,138,4,.96) !important;
    }
    .activity-tag--quality.activity-tag--fair{
      border-color: rgba(234,88,12,.28) !important;
      background: rgba(234,88,12,.10) !important;
      color: rgba(234,88,12,.96) !important;
    }
    .activity-tag--quality.activity-tag--low{
      border-color: rgba(220,38,38,.30) !important;
      background: rgba(220,38,38,.10) !important;
      color: rgba(220,38,38,.96) !important;
    }

    .view-activity-btn{
      padding: .34rem .72rem !important;
      border-radius: 999px !important;
      font-size: .80rem !important;
      font-weight: 800 !important;
      border: 1px solid rgba(30,136,229,.30) !important;
      background: rgba(255,255,255,.72) !important;
      color: rgba(30,136,229,.98) !important;
      cursor: pointer;
      transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .view-activity-btn:hover{
      transform: translateY(-1px);
      box-shadow: 0 10px 25px rgba(30,136,229,.16);
      background: rgba(30,136,229,.10) !important;
    }

    /* =========================
       Stats tile density + micro-graphics
       ========================= */

    .dash-stats-grid{
      gap: .75rem !important;
    }

    .dash-stat-card{
      border-radius: 18px !important;
      padding: 1rem 1.05rem !important;
      background: rgba(255,255,255,.74) !important;
      border: 1px solid rgba(148,163,184,.38) !important;
      box-shadow: 0 8px 24px rgba(15,23,42,.08) !important;
    }

    .stat-title{
      font-size: .78rem !important;
      letter-spacing: .12em !important;
      text-transform: uppercase;
      color: rgba(15,23,42,.58) !important;
      font-weight: 800 !important;
    }

    .stat-value{
      font-size: 2.1rem !important;
      line-height: 1 !important;
      margin-top: .55rem !important;
      font-weight: 850 !important;
      color: rgba(15,23,42,.92) !important;
    }

    .stat-subtitle, .stat-meta{
      font-size: .82rem !important;
      color: rgba(15,23,42,.55) !important;
      font-weight: 520 !important;
    }

    .stat-icon{
      font-size: 1.35rem !important;
      opacity: .55 !important;
    }

    .progress-bar{
      height: 6px !important;
      background: rgba(148,163,184,.22) !important;
    }
    .progress-fill{
      border-radius: 999px !important;
      filter: saturate(1.05);
    }

  

/* Mini circular graphs (OmniPostr blue → accent) */
.op-mini-stat{ position: relative; }
.op-mini-ring{
  position:absolute;
  /* moved below the icon; align with top of the main metric */
  top:56px;
  right:14px;
  width:36px;
  height:36px;
  pointer-events:none;
  opacity:.88;
}
.op-mini-ring svg{ width:100%; height:100%; display:block; }
.op-mini-ring .ring-bg{ stroke: rgba(148,163,184,.45); stroke-width:4; }
.op-mini-ring .ring-fg{ stroke-linecap: round; stroke: rgba(30,136,229,.95); stroke-width:4; }

/* Custom ring colors to match stat dot colors */
.dash-stat-card:has(.stat-dot--social) .op-mini-ring .ring-fg {
  stroke: #2563EB !important; /* blue to match social dot */
}
.dash-stat-card:has(.stat-dot--video) .op-mini-ring .ring-fg {
  stroke: #7C3AED !important; /* violet to match video dot */
}
.dash-stat-card:has(.stat-dot--longform) .op-mini-ring .ring-fg {
  stroke: #F97316 !important; /* orange to match longform dot */
}

@media (max-width: 980px){
  .op-mini-ring{ top:0; right:12px; width:32px; height:32px; }
}


    /* ===== v14 density + softer typography ===== */
    .op-stats-card .section-header h2{
      font-size: 34px !important;
      line-height: 1.05 !important;
      font-weight: 650 !important;
      letter-spacing: -0.02em !important;
      color: rgba(18,25,38,0.92) !important;
    }
    .op-stats-card .section-header p{
      font-size: 14px !important;
      line-height: 1.35 !important;
      color: rgba(55,65,81,0.78) !important;
      margin-top: 8px !important;
    }

    /* Stats tiles: denser like admin dashboard */
    .op-stats-card .op-stats-mini-grid{
      gap: 12px !important;
    }
    .op-mini-stat{
      padding: 14px 14px !important;
      border-radius: 16px !important;
      min-height: 112px !important;
    }
    .op-mini-stat .stat-header{
      margin-bottom: 10px !important;
    }
    .op-mini-stat .stat-title{
      font-size: 12px !important;
      letter-spacing: 0.10em !important;
      opacity: 0.72 !important;
    }
    .op-mini-stat .stat-value{
      font-size: 24px !important;
      font-weight: 650 !important;
      letter-spacing: -0.01em !important;
    }
    .op-mini-stat .stat-subtext,
    .op-mini-stat .stat-desc,
    .op-mini-stat .stat-caption{
      font-size: 12.5px !important;
      opacity: 0.78 !important;
    }

    /* Recent Activity row title softer + smaller */
    #activityList .activity-label{
      font-weight: 600 !important;
      font-size: 14px !important;
      letter-spacing: -0.01em !important;
      color: rgba(17,24,39,0.90) !important;
    }
    #activityList .activity-meta{
      font-size: 12.5px !important;
      color: rgba(55,65,81,0.72) !important;
    }

    /* API key pill styled like mock */
    .status-key{
      display: inline-flex !important;
      align-items: center !important;
      gap: 8px !important;
      padding: 8px 12px !important;
      border-radius: 999px !important;
      background: rgba(255,255,255,0.80) !important;
      border: 1px solid rgba(15,23,42,0.10) !important;
      box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important;
      font-size: 13px !important;
      color: rgba(17,24,39,0.78) !important;
      max-width: 260px !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      white-space: nowrap !important;
    }

    /* Make top API status row slightly tighter */
    .op-api-row, .api-status-bar, .key-status-bar{
      padding: 14px 16px !important;
    }


/* === Mock-style topbar API key pill === */
.api-key-status.op-topbar{
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(226,232,240,0.90);
  border-radius: 22px;
  padding: 12px 14px;
  box-shadow: 0 6px 20px rgba(2,6,23,0.06);
}
.op-brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.op-logo{
  width:44px; height:44px; border-radius: 14px;
  background:
    radial-gradient(circle at 30% 30%, rgba(59,130,246,.65), transparent 60%),
    radial-gradient(circle at 70% 70%, rgba(255,122,89,.45), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,255,255,.75));
  border: 1px solid rgba(148,163,184,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
}
.op-brand-title{ font-weight: 800; letter-spacing: -0.02em; color:#0f172a; font-size: 1.05rem; line-height: 1.1; }
.op-statusline{ display:flex; align-items:center; gap:8px; min-width:0; margin-top: 4px; }
.op-dot{ width:10px; height:10px; border-radius:999px; background:#22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.12); flex:0 0 auto; }
.op-status-strong{ font-weight: 850; color:#0f172a; }
.op-mid{ opacity:.55; }
.op-apikey{
  display:inline-flex; align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(248,250,252,0.9);
  border: 1px solid rgba(226,232,240,0.95);
  color: rgba(15,23,42,0.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .92rem;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.api-key-status.is-inactive .op-dot{ background:#ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.12); }
.api-key-status.is-inactive .op-status-strong{ color: rgba(15,23,42,.70); }

/* === Stats watermark inside panel === */
.op-main-card.op-stats-card{ overflow: hidden; }


/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}





/* v16: normalize mini stat tile typography so Social/Video/Longform align identically */
.op-mini-stat .stat-title{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.op-mini-stat .stat-subtitle{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* keep header block height consistent even if text would wrap */
.op-mini-stat .stat-header > div:first-child{
  min-height: 38px;
}
/* tighten line-height for consistency */
.op-mini-stat .stat-title{ line-height: 1.05; }
.op-mini-stat .stat-subtitle{ line-height: 1.15; }


/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




/* Mock-style OmniPostr watermark (exact look: dot + transient gradient) */
.op-stats-card{ position: relative; }

.watermark{
  position:absolute;
  right: 22px;
  bottom: 18px;
  display:flex;
  align-items:center;
  gap: 8px;
  font-weight: 800;
  letter-spacing: .16em;
  font-size: 11px;
  color: rgba(15,23,42,.55);
  opacity: .55;
  user-select:none;
  pointer-events:none;
  filter: drop-shadow(0 6px 16px rgba(15,23,42,.10));
}
.watermark:before{
  content:"";
  display:inline-block;
  width: 10px; height: 10px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(30,136,229,.95), rgba(103,80,164,.75), rgba(255,125,58,.65));
  box-shadow: 0 6px 16px rgba(30,136,229,.25);
}

/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




/* ===== OmniPostr Premium Pass v18: consistency + usefulness + skeleton + micro-graphics ===== */
:root{
  --op-radius-lg: 22px;
  --op-radius-md: 16px;
  --op-radius-sm: 12px;
  --op-pad-16: 16px;
  --op-pad-12: 12px;
  --op-pad-8: 8px;
  --op-text: #0f172a;
  --op-muted: rgba(15,23,42,.62);
  --op-muted2: rgba(15,23,42,.50);
  --op-border: rgba(15,23,42,.10);
  --op-blue: #1e88e5;
  --op-track: rgba(15,23,42,.14);
}

/* Softer page title */
#dashboard-stats h1, .op-right-title{
  font-size: 30px !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em;
  font-weight: 720 !important;
}
#dashboard-stats .subtitle, .op-right-subtitle{
  color: var(--op-muted) !important;
}

/* Consistent inner padding rhythm */
.op-main-card{ padding: 18px !important; }
.op-main-card .op-inner{ padding: 16px !important; }

/* Buttons: consistent sizing */
button, .activity-filter-btn{
  border-radius: 999px !important;
}
.generate-btn{
  padding: 14px 18px !important;
  font-weight: 700 !important;
}

/* What’s next hint */
.op-next-hint{
  margin-top: 10px;
  font-size: 12.5px;
  color: rgba(15,23,42,.58);
  text-align: center;
}

/* Recent Activity: softer titles */
.activity-item-title, .activity-title, .activity-row .title{
  font-weight: 600 !important;
  color: rgba(15,23,42,.86) !important;
  font-size: 13.5px !important;
}

/* Mini stat tiles: denser admin feel */
.op-stats-mini-grid{
  gap: 10px !important;
}
.dash-stat-card.op-mini-stat{
  border-radius: var(--op-radius-md) !important;
  padding: 12px !important;
  min-height: 108px !important;
}
.dash-stat-card.op-mini-stat .stat-label{
  font-size: 11px !important;
  letter-spacing: .12em !important;
}
.dash-stat-card.op-mini-stat .stat-value{
  font-size: 24px !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em;
}
.dash-stat-card.op-mini-stat .stat-sub{
  font-size: 12px !important;
  color: rgba(15,23,42,.58) !important;
}
.dash-stat-card.op-mini-stat .op-helper{
  margin-top: 8px;
  font-size: 11.5px;
  color: rgba(15,23,42,.52);
}

/* Watermark — exact mock style (dot + transient gradient) positioned bottom-right inside stats panel */
.op-stats-card{ position: relative !important; }
.op-stats-card .watermark{
  position:absolute !important;
  right: 26px !important;
  bottom: 18px !important;
  display:flex !important;
  align-items:center !important;
  gap: 8px !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  font-size: 11px !important;
  color: rgba(15,23,42,.55) !important;
  opacity: .55 !important;
  user-select:none !important;
  pointer-events:none !important;
  filter: drop-shadow(0 6px 16px rgba(15,23,42,.10)) !important;
}
.op-stats-card .watermark:before{
  content:"" !important;
  display:inline-block !important;
  width: 10px !important; height: 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, rgba(30,136,229,.95), rgba(103,80,164,.75), rgba(255,125,58,.65)) !important;
  box-shadow: 0 6px 16px rgba(30,136,229,.25) !important;
}

/* Skeleton loading (stats + activity) */
@keyframes op-shimmer{
  0%{ background-position: -200% 0; }
  100%{ background-position: 200% 0; }
}
.is-loading .stat-value,
.is-loading .stat-sub,
.is-loading .stat-label,
.is-loading .activity-item-title,
.is-loading .activity-time,
.is-loading .activity-url{
  color: transparent !important;
  background: linear-gradient(90deg, rgba(15,23,42,.06), rgba(15,23,42,.10), rgba(15,23,42,.06));
  background-size: 200% 100%;
  animation: op-shimmer 1.1s ease-in-out infinite;
  border-radius: 8px;
}
.is-loading .stat-value{ height: 26px; width: 44%; display:inline-block; }
.is-loading .stat-sub{ height: 14px; width: 60%; display:inline-block; margin-top: 8px; }
.is-loading .stat-label{ height: 12px; width: 40%; display:inline-block; }
.is-loading .activity-item-title{ height: 16px; width: 70%; display:inline-block; }
.is-loading .activity-time{ height: 12px; width: 20%; display:inline-block; margin-top: 6px; }

/* Smooth fade-in when loading ends */
.fade-in{
  animation: opFade .28s ease-out both;
}
@keyframes opFade{
  from{ opacity: 0; transform: translateY(2px); }
  to{ opacity: 1; transform: translateY(0); }
}

/* Micro-graphics: keep rings only where they matter */
.op-ring{ box-shadow:none !important; }

/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




/* ===== v20: watermark fix + denser stats + consistent mini tiles ===== */
.op-stats-card{ position:relative; }
.op-stats-watermark{
  position:absolute;
  right:18px;
  bottom:16px;
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:600;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color: rgba(25,35,55,.42);
  user-select:none;
  pointer-events:none;
}
.op-wm-dot{
  width:10px; height:10px; border-radius:999px;
  background: radial-gradient(circle at 30% 30%, rgba(30,136,229,.95), rgba(255,122,89,.85));
  box-shadow: 0 6px 16px rgba(30,136,229,.22);
  opacity:.85;
}
.op-insights{ grid-column: 1 / -1; padding: 12px 14px !important; }
.op-insights .stat-meta{ margin-top:10px; font-size:13px; color: rgba(25,35,55,.72); line-height:1.35; }

/* denser mini tiles */
.op-stats-mini-grid{ gap:10px !important; padding-bottom: 34px; } /* room for watermark */
.op-mini-stat{ padding: 12px 12px !important; min-height: 104px; }
.op-mini-stat .stat-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.op-mini-stat .stat-subtitle{ 
  white-space: normal; /* Changed from nowrap to allow wrapping */
  overflow: visible; /* Changed from hidden to show wrapped content */
  text-overflow: clip; /* Changed from ellipsis since we're wrapping */
  line-height: 1.3; /* Add line height for better spacing */
  min-height: 32px; /* Reserve space for 2 lines to prevent CLS */
}

/* Force Social/Video/Longform identical layout */
.op-mini-stat .stat-header > div:first-child{ min-height: 48px; } /* Increased from 34px to 48px for 2-line subtitle */
.op-mini-stat .stat-icon{ width: 22px; height:22px; display:flex; align-items:center; justify-content:center; }

/* soften 'Your Dashboard' header */
.op-stats-card .section-header h2{ font-size: 30px !important; font-weight: 650 !important; letter-spacing: -0.02em; }
.op-stats-card .section-header p{ max-width: 36ch; }

/* Recent activity row title softer */
.activity-item-title, .activity-item a.activity-link{
  font-weight: 600 !important;
  font-size: 13.5px !important;
  color: rgba(20,30,45,.86) !important;
}


/* Activity quick actions + empty state */
.copy-activity-btn{
  border:1px solid rgba(30,136,229,.25);
  background: rgba(30,136,229,.06);
  color: rgba(30,136,229,.92);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 650;
  font-size: 12px;
  line-height: 1;
}
.copy-activity-btn:hover{ background: rgba(30,136,229,.10); }

.activity-empty{
  border: 1px dashed rgba(25,35,55,.18);
  background: rgba(255,255,255,.55);
  border-radius: 6px;
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}
.activity-empty__icon{ font-size: 18px; opacity:.9; }
.activity-empty__title{ font-weight: 700; }
.activity-empty__meta{ color: rgba(25,35,55,.65); font-size: 13px; }
.btn-primary-sm.activity-empty__cta{
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.op-insights .muted{ color: rgba(25,35,55,.62); font-weight: 500; }

/* === Mock UI System Step 3/4 additions === */
:root{
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
/* Typography normalization */
body{ font-family: var(--font-sans) !important; }
h1,h2,h3{ letter-spacing:-0.01em; }
.card-title, .section-title, .recent-activity-header h2{ font-weight:600; }
.stat-kicker, .dash-stat-label, .dash-stat-card .label, .stat-label{ font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-size:11px; opacity:.75; }
.dash-stat-card .value, .stat-value, .dash-stat-value{ font-weight:650; font-size:24px; line-height:1.1; }
.dash-stat-card .meta, .stat-sub, .dash-stat-subtext{ font-weight:400; font-size:12.5px; opacity:.78; }

/* Make primary CTA text white even under gradient outline effects */
.generate-btn{ color:#fff !important; }
.generate-btn *{ color:#fff !important; }

/* Activity type dot + icon style (Step 4) */
.activity-item{ position:relative; }
.activity-item .activity-label{
  font-weight:500;
  font-size:13.5px;
}
.activity-item .activity-label:before{
  content:"";
  display:inline-block;
  width:8px; height:8px;
  border-radius:999px;
  margin-right:8px;
  vertical-align:middle;
  background: var(--blue);
  box-shadow: 0 0 0 3px rgba(30,136,229,.10);
}
.activity-item--video .activity-label:before{ background: #7C4DFF; box-shadow:0 0 0 3px rgba(124,77,255,.10); }
.activity-item--longform .activity-label:before{ background: var(--accent); box-shadow:0 0 0 3px rgba(255,122,89,.12); }

/* Slightly tighter activity rows */
.activity-item{ padding:14px 16px !important; }
.activity-meta{ margin-top:4px !important; font-size:12px !important; opacity:.72; }
.activity-row-buttons .copy-activity-btn,
.activity-row-buttons .view-activity-btn{ padding:6px 10px !important; font-size:12px !important; border-radius:999px !important; }
.activity-row-badges .activity-tag{ padding:5px 10px !important; font-size:12px !important; border-radius:999px !important; }


/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




/* === Mock UI System Step 3–7 refinements (overrides) === */

/* Match stats header to API pill title */
.op-stats-card .section-header h2{
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color:#0f172a !important;
  line-height: 1.1 !important;
}

/* Ensure Generate button label is white */
.generate-btn,
.generate-btn *{
  color: #ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Stats panel: slightly darker glass (instrument cluster) */
.op-main-card.op-stats-card{
  background: rgba(255,255,255,0.78) !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
}

/* Watermark pinned bottom-right inside stats panel */
.op-stats-card{ position:relative !important; }
.op-stats-watermark{
  position:absolute !important;
  right: 22px !important;
  bottom: 18px !important;
  left: auto !important;
  opacity: .55 !important;
  pointer-events:none !important;
}

/* Remove any accidental duplicate watermark-like elements */
.op-stats-card .watermark,
.op-stats-card #brandWm,
.op-stats-card [data-watermark="legacy"]{
  display:none !important;
}

/* Replace stat emojis with colored dots for channel tiles */
.stat-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.85);
}
.stat-dot--social{ background:#2b8df2; }
.stat-dot--video{ background:#7c5cff; }
.stat-dot--longform{ background:#ff8a4a; }

/* Make channel tile headers align perfectly */
.op-mini-stat .stat-header > div:first-child{
  min-height: 34px !important;
}
.op-mini-stat .stat-title{
  white-space: nowrap !important;
  overflow:hidden !important;
  text-overflow: ellipsis !important;
}
.op-mini-stat .stat-subtitle{
  margin: 2px 0 0 0 !important;
  white-space: nowrap !important;
}

/* Recent Activity: command-log density (keep actions) */
#activityList .activity-item{
  padding: 12px 14px !important;
}

/* FIX CLS: Reserve space for activity list to prevent layout shift */
#activityList {
  min-height: 800px; /* ~80px per entry × 10 entries */
}

#activityList .activity-item + .activity-item{
  margin-top: 10px !important;
}
#activityList .activity-item:hover{
  box-shadow: 0 10px 28px rgba(15,23,42,0.08) !important;
  transform: translateY(-1px);
}
#activityList .activity-title{
  font-weight: 550 !important;
  font-size: .94rem !important;
}
#activityList .activity-meta{
  font-size: .78rem !important;
}

/* Action buttons size harmony */
#activityList .op-action-btn,
#activityList .op-view-btn,
#activityList .op-copy-btn{
  height: 30px !important;
  padding: 0 10px !important;
  font-size: .78rem !important;
}

/* Insights card: keep it suggestion-only, no duplicated stat lines */
.op-insights-card .insights-muted,
.op-insights-card .insights-secondary{
  display:none !important;
}

/* Micro-graphics restraint: only allow rings on channel cards */
.op-mini-stat .op-mini-ring{ display:none !important; }
.op-mini-stat.op-ring-allow .op-mini-ring{ display:block !important; }

/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




/* === Mock-precision pass v26: Toggle + button + monochrome icon system === */
:root{
  --op-chip-h: 34px;
  --op-chip-px: 12px;
  --op-chip-gap: 8px;
  --op-chip-radius: 999px;
  --op-chip-font: 0.84rem;
  --op-chip-weight: 600;

  --op-divider: rgba(15,23,42,.08);
  --op-card-border: rgba(148,163,184,.55);
  --op-card-shadow: 0 14px 34px rgba(15,23,42,.14);
  --op-inner-highlight: inset 0 1px 0 rgba(255,255,255,.55);

  --op-glass: rgba(255,255,255,.78);
  --op-glass-soft: rgba(255,255,255,.64);
  --op-ink: rgba(15,23,42,.86);
  --op-ink-muted: rgba(15,23,42,.62);

  --op-brand-grad: linear-gradient(135deg,#4aa3ff 0%,#8b5cf6 45%,#fb923c 100%);
}

/* Unify chip/pill sizing across Production + Activity + Stats */
.activity-filter-btn,
.mode-btn,
.op-pill,
.badge,
.pill{
  height: var(--op-chip-h);
  padding: 0 var(--op-chip-px);
  border-radius: var(--op-chip-radius) !important;
  gap: var(--op-chip-gap);
  font-size: var(--op-chip-font) !important;
  font-weight: var(--op-chip-weight) !important;
  display: inline-flex;
  align-items: center;
}

/* Make filter chips match the mock: quiet default, blue-tinted active */
.activity-filter-btn{
  border: 1px solid rgba(148,163,184,.55) !important;
  background: rgba(255,255,255,.88) !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.08);
  color: rgba(15,23,42,.86) !important;
}
.activity-filter-btn:hover{
  background: rgba(240,247,255,.92) !important;
  border-color: rgba(59,130,246,.22) !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.08);
}
.activity-filter-btn.active{
  background: rgba(221,236,255,.92) !important;
  border-color: rgba(59,130,246,.28) !important;
  color: rgba(2, 84, 192, .98) !important;
  box-shadow: 0 16px 30px rgba(37,99,235,.12), 0 10px 22px rgba(15,23,42,.10);
  position: relative;
}
.activity-filter-btn.active .activity-badge{
  background: rgba(255,255,255,.70) !important;
  border-color: rgba(59,130,246,.20) !important;
  color: rgba(2,84,192,.92) !important;
}

/* Segmented URL/Text toggle with sliding highlight */
.input-mode-toggle{
  position: relative;
  display: inline-flex !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(148,163,184,.55) !important;
  box-shadow: 0 22px 45px rgba(15,23,42,.10);
  gap: 6px !important;
  overflow: hidden;
}

.mode-highlight{
      display:none !important;
    }

.input-mode-toggle[data-active="prompt"] .mode-highlight{ transform: translateX(100%); }
.input-mode-toggle[data-active="url"] .mode-highlight{ transform: translateX(0%); }

/* Buttons sit above highlight; crisp like the mock */
.input-mode-toggle .mode-btn{
  position: relative;
  z-index: 1;
  height: var(--op-chip-h);
  padding: 10px 18px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(15,23,42,.70) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}
.input-mode-toggle .mode-btn .op-ico{ opacity:.72; }
.input-mode-toggle .mode-btn.active{
  color: rgba(15,23,42,.92) !important;
}

/* Buttons sit above highlight; keep them calm */
.input-mode-toggle .mode-btn{
  position: relative;
  z-index: 1;
  height: var(--op-chip-h);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(15,23,42,.66) !important;
}
.input-mode-toggle .mode-btn.active{
  color: rgba(15,23,42,.90) !important;
}

/* Card border/shadow tuning (safe overrides) */
.card, .panel, .glass, .stats-panel, .op-card{
  border: 1px solid var(--op-card-border) !important;
  box-shadow: var(--op-card-shadow) !important;
}
.card::before, .panel::before, .op-card::before{
  box-shadow: var(--op-inner-highlight);
}

/* Recent Activity row dividers: crisp but subtle */
.activity-item{
  border-top: 1px solid var(--op-divider) !important;
}
.activity-item:hover{
  background: rgba(255,255,255,.06) !important;
}


/* Monochrome icon system (replaces emoji icons) */
.op-ico{
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: -3px;
  margin-right: 8px;
  background-color: currentColor;
  opacity: .78;
  -webkit-mask: var(--op-ico) no-repeat center / contain;
  mask: var(--op-ico) no-repeat center / contain;
}
.op-ico[data-ico="rocket"]{--op-ico:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4.5%2016.5c-1.5%201.5-2%204.5-2%204.5s3-.5%204.5-2c.9-.9%201-2.2.2-3-.8-.8-2.1-.7-2.7.5z%22/%3E%3Cpath%20d%3D%22M10%2014l-2-2c1.5-4.5%205-8%209.5-9.5L20%205c-1.5%204.5-5%208-9.5%209.5z%22/%3E%3Cpath%20d%3D%22M10%2014l4%204%22/%3E%3Cpath%20d%3D%22M14%2018c4.5-1.5%208-5%209.5-9.5L19%204c-4.5%201.5-8%205-9.5%209.5%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%229%22%20r%3D%221%22/%3E%3C/svg%3E');}
.op-ico[data-ico="bar"]{--op-ico:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%203v18h18%22/%3E%3Cpath%20d%3D%22M7%2014v4%22/%3E%3Cpath%20d%3D%22M11%2010v8%22/%3E%3Cpath%20d%3D%22M15%206v12%22/%3E%3Cpath%20d%3D%22M19%209v9%22/%3E%3C/svg%3E');}
.op-ico[data-ico="flame"]{--op-ico:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8.5%2014.5c.5%202.5%202.5%204.5%205.5%204.5%203.3%200%206-2.7%206-6%200-5-6-9-6-9s-1%203-3%205-4%203-4%206c0%201.1.3%202.2.9%203%22/%3E%3C/svg%3E');}
.op-ico[data-ico="phone"]{--op-ico:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%227%22%20y%3D%222%22%20width%3D%2210%22%20height%3D%2220%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M11%2018h2%22/%3E%3C/svg%3E');}
.op-ico[data-ico="video"]{--op-ico:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%227%22%20width%3D%2215%22%20height%3D%2210%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M18%209l3-2v10l-3-2z%22/%3E%3C/svg%3E');}
.op-ico[data-ico="file"]{--op-ico:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2V8z%22/%3E%3Cpath%20d%3D%22M14%202v6h6%22/%3E%3Cpath%20d%3D%22M8%2013h8%22/%3E%3Cpath%20d%3D%22M8%2017h8%22/%3E%3C/svg%3E');}
.op-ico[data-ico="calendar"]{--op-ico:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Crect%20x%3D%223%22%20y%3D%224%22%20width%3D%2218%22%20height%3D%2218%22%20rx%3D%222%22/%3E%3Cpath%20d%3D%22M16%202v4%22/%3E%3Cpath%20d%3D%22M8%202v4%22/%3E%3Cpath%20d%3D%22M3%2010h18%22/%3E%3C/svg%3E');}
.op-ico[data-ico="paperclip"]{--op-ico:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M21.44%2011.05l-8.49%208.49a5%205%200%200%201-7.07-7.07l8.49-8.49a3.5%203.5%200%200%201%204.95%204.95l-8.49%208.49a2%202%200%200%201-2.83-2.83l8.49-8.49%22/%3E%3C/svg%3E');}
.op-ico[data-ico="trophy"]{--op-ico:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%204h8v3a4%204%200%200%201-8%200z%22/%3E%3Cpath%20d%3D%22M6%207H4a2%202%200%200%200%202%202%22/%3E%3Cpath%20d%3D%22M18%207h2a2%202%200%200%201-2%202%22/%3E%3Cpath%20d%3D%22M12%2014v4%22/%3E%3Cpath%20d%3D%22M8%2022h8%22/%3E%3Cpath%20d%3D%22M10%2018h4%22/%3E%3C/svg%3E');}
.op-ico[data-ico="gem"]{--op-ico:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M6%203h12l3%206-9%2012L3%209z%22/%3E%3Cpath%20d%3D%22M3%209h18%22/%3E%3Cpath%20d%3D%22M12%2021%206%209l6-6%206%206z%22/%3E%3C/svg%3E');}
.op-ico[data-ico="save"]{--op-ico:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021H5a2%202%200%200%201-2-2V5a2%202%200%200%201%202-2h11l5%205v11a2%202%200%200%201-2%202z%22/%3E%3Cpath%20d%3D%22M17%2021v-8H7v8%22/%3E%3Cpath%20d%3D%22M7%203v5h8%22/%3E%3C/svg%3E');}

/* Segmented URL/Text Prompt toggle — closer to mock */
.input-mode-toggle{
  background: rgba(255,255,255,.60) !important;
  border: 1px solid rgba(148,163,184,.55) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.70) !important;
}
.input-mode-toggle .mode-highlight{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  box-shadow: 0 16px 28px rgba(15,23,42,.12);
}
/* Subtle “active-side” tint without going colorful */
.input-mode-toggle .mode-highlight::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(14,165,233,.08));
  opacity: .55;
  pointer-events:none;
}
.input-mode-toggle .mode-btn{
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

/* Primary Generate button — premium, less “rainbow”, more Stripe/Linear */
.generate-btn{
  position: relative;
  width: 100% !important;
  padding: 18px 22px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  background: linear-gradient(180deg, rgba(30,107,255,.98) 0%, rgba(13,82,214,.98) 100%) !important;
  color: rgba(255,255,255,.98) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  box-shadow: 0 18px 42px rgba(30,107,255,.28), 0 10px 24px rgba(15,23,42,.10);
  transform: translateY(0);
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
  overflow: hidden;
}
.generate-btn::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: radial-gradient(80% 140% at 50% 0%, rgba(255,255,255,.28), rgba(255,255,255,0) 58%);
  pointer-events:none;
}
.generate-btn::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,0));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity:.55;
  pointer-events:none;
}
.generate-btn:hover:not(:disabled){
  transform: translateY(-1px);
  filter: brightness(1.02);
  box-shadow: 0 26px 58px rgba(30,107,255,.30), 0 14px 30px rgba(15,23,42,.14);
}
.generate-btn:active:not(:disabled){
  transform: translateY(0) scale(.995);
  box-shadow: 0 18px 46px rgba(30,107,255,.38), 0 0 0 6px rgba(30,107,255,.14);
}



/* === v29: Stronger active icon-pill tints (solid translucent) === */
.content-type-btn.active[data-type="social"] .icon{
  background: linear-gradient(180deg, rgba(30,136,229,.92) 0%, rgba(30,136,229,.74) 100%) !important;
  border-color: rgba(30,136,229,.62) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
              0 12px 26px rgba(30,136,229,.28) !important;
}
.content-type-btn.active[data-type="video"] .icon{
  background: linear-gradient(180deg, rgba(139,92,246,.90) 0%, rgba(139,92,246,.72) 100%) !important;
  border-color: rgba(139,92,246,.60) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
              0 12px 26px rgba(139,92,246,.26) !important;
}
.content-type-btn.active[data-type="longform"] .icon{
  background: linear-gradient(180deg, rgba(251,146,60,.92) 0%, rgba(251,146,60,.74) 100%) !important;
  border-color: rgba(251,146,60,.64) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22),
              0 12px 26px rgba(251,146,60,.22) !important;
}

/* Keep the icon glyph itself crisp/white on the tinted pill */
.content-type-btn.active .icon .op-ico{
  color: rgba(255,255,255,.96) !important;
  opacity: .92 !important;
}


/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




  :root{
    --omni-blue:#2F80FF;
    --omni-blue-700:#1E6BF6;
    --omni-blue-900:#0B3DAA;
    --omni-blue-rgb:47,128,255;

    /* override existing tokens used throughout */
    --blue: var(--omni-blue);
    --blue-700: var(--omni-blue-700);
    --blue-900: var(--omni-blue-900);
  }

  /* ACTIVE content type card (big surface) -> OmniPostr blue, consistent with mock */
  .content-type-btn.active{
    background: var(--omni-blue) !important;
    border-color: rgba(var(--omni-blue-rgb), .40) !important;
    box-shadow: 0 10px 28px rgba(var(--omni-blue-rgb), .34) !important;
  }

  /* Trigger capsule (URL / Text Prompt) -> mock-like light Omni blue system */
  .input-mode-toggle{
    background: rgba(var(--omni-blue-rgb), .10) !important;
    border-color: rgba(var(--omni-blue-rgb), .22) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.10) !important;
  }
  .mode-btn.active{
    background: rgba(var(--omni-blue-rgb), .18) !important;
    color: var(--omni-blue-900) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.75),
      0 12px 28px rgba(15,23,42,.10) !important;
    transform: translateY(-1px);
  }
  .mode-btn:hover:not(.active){
    color: var(--omni-blue-700) !important;
  }

  /* Generate button -> same Omni blue family as active card */
  .generate-btn{
    background: linear-gradient(180deg, var(--omni-blue) 0%, var(--omni-blue-700) 100%) !important;
    box-shadow: 0 14px 32px rgba(var(--omni-blue-rgb), .34) !important;
  }
  .generate-btn:hover{
    filter: brightness(1.02);
    box-shadow: 0 18px 40px rgba(var(--omni-blue-rgb), .36) !important;
    transform: translateY(-1px);
  }
  .generate-btn:active{
    transform: translateY(0px) scale(.99);
    box-shadow:
      0 10px 26px rgba(var(--omni-blue-rgb), .30),
      0 0 0 6px rgba(var(--omni-blue-rgb), .18) !important;
  }

/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




/* 1) Remove "icon pill" containers on all stat cards / insights cards */
.stat-icon,
.dash-stat-card .stat-icon,
.op-mini-stat .stat-icon,
.op-insights .stat-icon{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Make icons visible (monochrome) */
.stat-icon .op-ico{
  display:inline-block !important;
  width: 18px !important;
  height: 18px !important;
  opacity: .72 !important;
  background-color: rgba(15,23,42,.72) !important;
  -webkit-mask: var(--op-ico) no-repeat center / contain !important;
          mask: var(--op-ico) no-repeat center / contain !important;
}

/* Fix corrupted data-URL icons by overriding sparkles + bolt with clean SVG masks */
.op-ico[data-ico="sparkles"]{
  --op-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.937 15.5A2 2 0 0 0 8.5 14.063l-6.135-1.582a.5.5 0 0 1 0-.962L8.5 9.936A2 2 0 0 0 9.937 8.5l1.582-6.135a.5.5 0 0 1 .962 0L14.063 8.5A2 2 0 0 0 15.5 9.937l6.135 1.582a.5.5 0 0 1 0 .962L15.5 14.063a2 2 0 0 0-1.437 1.437l-1.582 6.135a.5.5 0 0 1-.962 0L9.937 15.5z'/%3E%3Cpath d='M19 3v4M21 5h-4'/%3E%3C/svg%3E");
}

.op-ico[data-ico="refresh"]{
  --op-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M17.65 6.35A7.95 7.95 0 0012 4V1L7 6l5 5V7a5 5 0 11-5 5H5a7 7 0 107-7c2.21 0 4.21.9 5.65 2.35L21 4v6h-6l2.65-2.65z'/%3E%3C/svg%3E");
}
.op-ico[data-ico="repeat"]{
  --op-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7 7h11v3l4-4-4-4v3H6a4 4 0 00-4 4v4h2V9a2 2 0 012-2zm10 10H6v-3l-4 4 4 4v-3h12a4 4 0 004-4v-4h-2v4a2 2 0 01-2 2z'/%3E%3C/svg%3E");
}

.op-ico[data-ico="spark"]{
  --op-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l1.6 6.2L20 10l-6.4 1.8L12 18l-1.6-6.2L4 10l6.4-1.8L12 2z'/%3E%3Cpath fill='black' d='M19 13l.8 3.2L23 17l-3.2.8L19 21l-.8-3.2L15 17l3.2-.8L19 13z'/%3E%3C/svg%3E");
}
.op-ico[data-ico="bolt"]{
  --op-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 2 3 14h7l-1 8 12-14h-7l-1-6z'/%3E%3C/svg%3E");
}

/* Remove any leftover grey placeholder blocks (if any) */
.stat-icon .icon-placeholder,
.stat-icon .placeholder,
.op-insights .placeholder{
  display:none !important;
}

/* 2) Trigger pill: make it FLAT like mock (no heavy 3D/35 effect) */
.input-mode-toggle{
  box-shadow: none !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
}
.input-mode-toggle .mode-highlight{
  box-shadow: none !important;
  border: 1px solid rgba(30,136,229,.26) !important;
  background: rgba(30,136,229,.16) !important;
}
.input-mode-toggle .mode-btn{
  box-shadow:none !important;
}

/* Keep active segment crisp (blue text) */
.input-mode-toggle .mode-btn.active{
  color: rgba(10,40,120,.95) !important;
}

/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}


/* Added: shield-check icon for Content Quality */
.op-ico[data-ico="shieldcheck"]{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l7 4v6c0 5-3.1 9.4-7 10-3.9-.6-7-5-7-10V6l7-4z'/%3E%3Cpath d='M10.2 12.6l-1.4-1.4-1.4 1.4 2.8 2.8 6.2-6.2-1.4-1.4-4.8 4.8z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l7 4v6c0 5-3.1 9.4-7 10-3.9-.6-7-5-7-10V6l7-4z'/%3E%3Cpath d='M10.2 12.6l-1.4-1.4-1.4 1.4 2.8 2.8 6.2-6.2-1.4-1.4-4.8 4.8z'/%3E%3C/svg%3E");
}

/* Regen delta icons (monochrome, clear semantics) */
.op-ico[data-ico="trend-down"]{
  --op-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5a1 1 0 0 1 1 1v10.59l3.3-3.3a1 1 0 1 1 1.4 1.42l-5 5a1 1 0 0 1-1.4 0l-5-5a1 1 0 1 1 1.4-1.42l3.3 3.3V6a1 1 0 0 1 1-1z'/%3E%3C/svg%3E");
}
.op-ico[data-ico="arrow-right"]{
  --op-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M13 5a1 1 0 0 1 1.7-.7l6 6a1 1 0 0 1 0 1.4l-6 6A1 1 0 0 1 13 17v-4H4a1 1 0 1 1 0-2h9V6a1 1 0 0 1 0-.01z'/%3E%3C/svg%3E");
}




/* =======================
   v36 targeted fixes
   1) Recent Activity active filter badge stays blue
   2) URL/Text Prompt segmented control: simple mock-style
   3) Fix Text Prompt icon (monochrome pen) + ensure paperclip too
   ======================= */

/* 1) Active filter badge blue (was reverting to white) */
#activityFilters .activity-filter-btn.active .activity-badge{
  background: rgba(74,163,255,.26) !important;
  border-color: rgba(74,163,255,.40) !important;
  color: rgba(10,40,120,.95) !important;
}

/* keep non-active badge subtle */
#activityFilters .activity-filter-btn:not(.active) .activity-badge{
  background: rgba(20,30,50,.05) !important;
  border-color: rgba(20,30,50,.10) !important;
}

/* 2) URL/Text Prompt trigger pill — simple, flat, mock-style */
.input-mode-toggle{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(20,40,90,.16) !important;
  box-shadow: none !important;
  padding: 6px !important;
  border-radius: 999px !important;
}
/* remove the extra sliding highlight layer (user wants simple) */
.input-mode-toggle .mode-highlight{
  display: none !important;
}
.input-mode-toggle .mode-btn{
  border: 0 !important;
  background: transparent !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  color: rgba(20,30,50,.70) !important;
  box-shadow: none !important;
}
.input-mode-toggle .mode-btn.active{
  background: rgba(74,163,255,.22) !important;
  border: 1px solid rgba(74,163,255,.35) !important;
  color: rgba(10,40,120,.95) !important;
}

/* 3) Fix mode icons (no broken placeholder) using CSS masks */
.mode-ico{
  width: 16px;
  height: 16px;
  display: inline-block;
  margin-right: 10px;
  background-color: rgba(20,30,50,.72);
  vertical-align: -2px;
}

/* paperclip */
.mode-ico[data-ico="paperclip"]{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.5 6.5l-7.9 7.9a3 3 0 104.2 4.2l7.1-7.1a5 5 0 10-7.1-7.1l-7.3 7.3a7 7 0 109.9 9.9l7.1-7.1' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.5 6.5l-7.9 7.9a3 3 0 104.2 4.2l7.1-7.1a5 5 0 10-7.1-7.1l-7.3 7.3a7 7 0 109.9 9.9l7.1-7.1' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* pen */
.mode-ico[data-ico="pen"]{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20h9'/%3E%3Cpath fill='black' d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20h9'/%3E%3Cpath fill='black' d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* active mode icon slightly deeper */
.input-mode-toggle .mode-btn.active .mode-ico{
  background-color: rgba(10,40,120,.92) !important;
}



/* === v37: Trigger pill simplified to match mock + fix Text Prompt icon placeholder === */
/* Keep changes scoped to URL/Text Prompt toggle only */
.input-mode-toggle{background: rgba(74,163,255,.14) !important; border:1px solid rgba(74,163,255,.28) !important; box-shadow:none !important; padding:6px !important; gap:6px !important;}
.input-mode-toggle .mode-highlight{display:none !important;}
.input-mode-toggle .mode-btn{height:40px !important; padding:0 18px !important; border-radius:999px !important; background:transparent !important; border:1px solid transparent !important; color: rgba(15,23,42,.70) !important; font-weight:600 !important; box-shadow:none !important;}
.input-mode-toggle .mode-btn.active{background: rgba(255,255,255,.95) !important; border-color: rgba(74,163,255,.35) !important; color: rgba(10,40,120,.95) !important; box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;}
.input-mode-toggle .mode-btn:active{transform: translateY(0) !important;}
.input-mode-toggle .mode-btn .op-ico{opacity:.85; background-color: rgba(15,23,42,.55) !important;}
.input-mode-toggle .mode-btn.active .op-ico{background-color: rgba(10,40,120,.92) !important;}

/* Ensure toggle icons render (previously showed as grey placeholders) */
.op-ico{display:inline-block; width:16px; height:16px; flex:0 0 auto; vertical-align:-2px; margin-right:10px; border-radius:0;}
.op-ico[data-ico="paperclip"]{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.5 6.5l-7.9 7.9a3 3 0 104.2 4.2l7.1-7.1a5 5 0 10-7.1-7.1l-7.3 7.3a7 7 0 109.9 9.9l7.1-7.1' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M16.5 6.5l-7.9 7.9a3 3 0 104.2 4.2l7.1-7.1a5 5 0 10-7.1-7.1l-7.3 7.3a7 7 0 109.9 9.9l7.1-7.1' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.op-ico[data-ico="pen"]{
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20h9'/%3E%3Cpath fill='black' d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 20h9'/%3E%3Cpath fill='black' d='M16.5 3.5a2.1 2.1 0 013 3L7 19l-4 1 1-4 12.5-12.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}


/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




/* =======================
   v40 PATCH — per user confirm
   A) Revert status cards height/alignment to v37 (height only) + keep Long Form one-line subtitle
   B) Trigger URL/Text Prompt: base like v36 but styled to mock (white capsule + light-blue active pill) and keep icons
   ======================= */

/* A) Content type cards: remove any flex-centering / forced min-height, match v37 feel */
.content-type-btn{
  display:block !important;
  min-height: auto !important;
  padding: 1.5rem 1rem !important; /* v37 */
  text-align:left !important;
}
.content-type-btn .icon{
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Ensure any previous flex rules are neutralized */
.content-type-btn > *{
  align-self: auto !important;
}

/* B) URL/Text Prompt toggle — mock-simple */
.input-mode-toggle{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(20,40,90,.16) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
  border-radius: 999px !important;
  padding: 6px !important;
}

.input-mode-toggle .mode-btn{
  background: transparent !important;
  border: 0 !important;
  color: rgba(20,30,50,.70) !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
}

/* The sliding pill (keep span.mode-highlight in markup) */
.input-mode-toggle .mode-highlight{
  background: rgba(74,163,255,.22) !important;
  border: 1px solid rgba(74,163,255,.30) !important;
  box-shadow: none !important; /* flat like mock */
  border-radius: 999px !important;
}

/* Active text */
.input-mode-toggle .mode-btn.active{
  color: rgba(10,40,120,.95) !important;
}

/* Make icons monochrome (avoid placeholder artifacts) */
.input-mode-toggle .op-ico{
  background-color: rgba(20,30,50,.70) !important;
  opacity: .95 !important;
}
.input-mode-toggle .mode-btn.active .op-ico{
  background-color: rgba(10,40,120,.95) !important;
}

/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




/* === Mock-exact URL / Text Prompt toggle (ONLY) === */
.input-mode-toggle{
  display:flex !important;
  gap: 8px !important;
  border-radius: 999px !important;
  padding: 6px !important;
  width: fit-content !important;
  border: 1px solid rgba(226,232,240,.9) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px);
}
.input-mode-toggle .mode-highlight{ display:none !important; }

.input-mode-toggle .mode-btn{
  border:0 !important;
  background: transparent !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  font-weight: 900 !important;
  font-size: 12px !important;
  color: #475569 !important;
  cursor:pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

.input-mode-toggle .mode-btn .op-ico{
  margin-right: 0 !important; /* use gap instead */
  opacity: .78 !important;
}

.input-mode-toggle .mode-btn.active{
  background: rgba(30,136,229,.14) !important;
  color: #12307a !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.10) !important;
}

/* ===== v42 patch: URL/Text Prompt toggle flat mock style + URL icon restored ===== */
.input-mode-toggle{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 6px 18px rgba(0,0,0,.08) !important;
  padding:6px !important;
  border-radius:999px !important;
  gap:6px !important;
}

.input-mode-toggle .mode-highlight{ display:none !important; }

/* Buttons */
.input-mode-toggle .mode-btn{
  background:transparent !important;
  border:0 !important;
  border-radius:999px !important;
  padding:8px 12px !important;
  font-weight:600 !important;
  font-size:12px !important;
  color:rgba(20,30,50,.70) !important;
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

/* Active segment: single flat light blue (no gradient) */
.input-mode-toggle .mode-btn.active{
  background:#4aa3ff !important;
  color:#ffffff !important;
  box-shadow:none !important;
}

/* Ensure icons render as monochrome (mask already defined elsewhere) */
.input-mode-toggle .mode-btn .op-ico{
  width:14px !important;
  height:14px !important;
  display:inline-block !important;
  background: currentColor !important;
  opacity:1 !important;
}



/* === Toggle styles reverted to v37 (requested) === */
/* Input Mode Toggle */
    .input-mode-toggle {
      display:inline-flex;
      padding:0.25rem;
      border-radius:999px;
      background:#E5EDF9;
      border:1px solid rgba(148,163,184,0.7);
      box-shadow:0 8px 24px rgba(15,23,42,0.10);
      gap:0.25rem;
      margin-bottom:1.5rem;
    }

    .mode-btn {
      padding:0.4rem 1.2rem;
      border-radius:999px;
      font-size:0.82rem;
      font-weight:600;
      border:none;
      background:transparent;
      color:var(--slate);
      cursor:pointer;
      transition:background 0.18s ease,color 0.18s ease,box-shadow 0.18s ease,transform 0.12s ease;
      font-family:inherit;
      white-space:nowrap;
    }

    .mode-btn.active {
      background:#ffffff;
      color:var(--blue-900);
      box-shadow:0 10px 26px rgba(15,23,42,0.18);
      transform:translateY(-1px);
    }

    .mode-btn:hover:not(.active) {
      color:var(--blue-700);
    }


/* === Toggle styles from v37 (replaced) === */
/* Input Mode Toggle */
    .input-mode-toggle {
      display:inline-flex;
      padding:0.25rem;
      border-radius:999px;
      background:#E5EDF9;
      border:1px solid rgba(148,163,184,0.7);
      box-shadow:0 8px 24px rgba(15,23,42,0.10);
      gap:0.25rem;
      margin-bottom:1.5rem;}
.mode-btn {
      padding:0.4rem 1.2rem;
      border-radius:999px;
      font-size:0.82rem;
      font-weight:600;
      border:none;
      background:transparent;
      color:var(--slate);
      cursor:pointer;
      transition:background 0.18s ease,color 0.18s ease,box-shadow 0.18s ease,transform 0.12s ease;
      font-family:inherit;
      white-space:nowrap;}
.mode-btn.active {
      background:#ffffff;
      color:var(--blue-900);
      box-shadow:0 10px 26px rgba(15,23,42,0.18);
      transform:translateY(-1px);}
.mode-btn:hover:not(.active) {
      color:var(--blue-700);}
/* ===== Mock UI System Step 1–2 ===== */

/* Segmented control (URL / Text Prompt) - mock style */
.input-mode-toggle{
  position: relative !important;
  display: inline-flex !important;
  gap: 0 !important;
  padding: 4px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.78) !important;
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 10px 26px rgba(15,23,42,.06) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);}
.input-mode-toggle::before{
  content:"";
  position:absolute;
  top:4px; bottom:4px;
  left:4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(30,136,229,.18), rgba(124,58,237,.14), rgba(255,122,89,.16));
  box-shadow: 0 8px 18px rgba(30,136,229,.14);
  transform: translateX(0);
  transition: transform .22s ease;
  pointer-events:none;}
.input-mode-toggle[data-active="prompt"]::before{
  transform: translateX(100%);}
.input-mode-toggle .mode-btn{
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 128px;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: transparent !important;
  color: rgba(15,23,42,.72) !important;
  font-weight: 600 !important;
  font-size: .82rem !important;
  line-height: 1 !important;
  box-shadow: none !important;
  transition: color .18s ease, transform .18s ease;}
.input-mode-toggle .mode-btn.active{
  color: rgba(15,23,42,.92) !important;}
.input-mode-toggle .mode-btn:active{
  transform: translateY(1px);}
/* === Mock-precision overrides (v32) === */
    /* Trigger (URL / Text Prompt) capsule — match mock: white glass + subtle blue active segment */
    .input-mode-toggle{
      position: relative;
      padding: 8px;
      gap: 8px;
      background: rgba(255,255,255,.92);
      border: 1px solid rgba(203,213,225,.95);
      box-shadow: 0 22px 50px rgba(15,23,42,.12);
      backdrop-filter: blur(10px);}
.mode-btn{
      padding: 10px 18px;
      border-radius: 999px;
      font-weight: 600;
      color: rgba(51,65,85,.85);}
.mode-btn:hover:not(.active){
      color: rgba(30,41,59,.95);
      background: rgba(148,163,184,.18);}
.mode-btn.active{
      color: var(--blue-900);}
.mode-highlight{
      top: 8px;
      bottom: 8px;
      left: 8px;
      width: calc(50% - 8px);
      background: linear-gradient(180deg,
        rgba(214,236,255,.96) 0%,
        rgba(245,250,255,.98) 55%,
        rgba(255,255,255,.96) 100%);
      border: 1px solid rgba(30,136,229,.38);
      box-shadow:
        0 18px 34px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,.80);}
/* URL / Text Prompt toggle – more mock-like */
    .input-mode-toggle{
      background: rgba(255,255,255,.66) !important;
      border: 1px solid var(--op-border-soft) !important;
      box-shadow: 0 14px 40px rgba(15,23,42,.12) !important;
      padding: .22rem !important;
      gap: .25rem !important;}
.mode-btn{
      padding: .42rem 1.05rem !important;
      font-size: .82rem !important;
      font-weight: 700 !important;
      color: rgba(15,23,42,.70) !important;}
.mode-btn.active{
      background: rgba(30,136,229,.12) !important;
      color: rgba(15,23,42,.90) !important;
      box-shadow: none !important;}
/* Unify chip/pill sizing across Production + Activity + Stats */
.activity-filter-btn,
.mode-btn,
.op-pill,
.badge,
.pill{
  height: var(--op-chip-h);
  padding: 0 var(--op-chip-px);
  border-radius: var(--op-chip-radius) !important;
  gap: var(--op-chip-gap);
  font-size: var(--op-chip-font) !important;
  font-weight: var(--op-chip-weight) !important;
  display: inline-flex;
  align-items: center;}
/* Segmented URL/Text toggle with sliding highlight */
.input-mode-toggle{
  position: relative;
  display: inline-flex !important;
  padding: 6px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(148,163,184,.55) !important;
  box-shadow: 0 22px 45px rgba(15,23,42,.10);
  gap: 6px !important;
  overflow: hidden;}
.input-mode-toggle .mode-highlight{
  position:absolute;
  top:6px;
  bottom:6px;
  left:6px;
  width: calc(50% - 6px);
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(240,247,255,.98) 0%, rgba(255,255,255,.96) 100%);
  border: 1px solid rgba(59,130,246,.22);
  box-shadow: 0 16px 26px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.75);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;}
.input-mode-toggle[data-active="prompt"] .mode-highlight{ transform: translateX(100%);}
.input-mode-toggle[data-active="url"] .mode-highlight{ transform: translateX(0%);}
/* Buttons sit above highlight; crisp like the mock */
.input-mode-toggle .mode-btn{
  position: relative;
  z-index: 1;
  height: var(--op-chip-h);
  padding: 10px 18px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(15,23,42,.70) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;}
.input-mode-toggle .mode-btn .op-ico{ opacity:.72;}
.input-mode-toggle .mode-btn.active{
  color: rgba(15,23,42,.92) !important;}
/* Buttons sit above highlight; keep them calm */
.input-mode-toggle .mode-btn{
  position: relative;
  z-index: 1;
  height: var(--op-chip-h);
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: rgba(15,23,42,.66) !important;}
.input-mode-toggle .mode-btn.active{
  color: rgba(15,23,42,.90) !important;}
/* Segmented URL/Text Prompt toggle — closer to mock */
.input-mode-toggle{
  background: rgba(255,255,255,.60) !important;
  border: 1px solid rgba(148,163,184,.55) !important;
  box-shadow: 0 14px 34px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.70) !important;}
.input-mode-toggle .mode-highlight{
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.82));
  box-shadow: 0 16px 28px rgba(15,23,42,.12);}
/* Subtle “active-side” tint without going colorful */
.input-mode-toggle .mode-highlight::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(99,102,241,.12), rgba(14,165,233,.08));
  opacity: .55;
  pointer-events:none;}
.input-mode-toggle .mode-btn{
  font-weight: 600 !important;
  letter-spacing: -0.01em;}
/* Trigger capsule (URL / Text Prompt) -> mock-like light Omni blue system */
  .input-mode-toggle{
    background: rgba(var(--omni-blue-rgb), .10) !important;
    border-color: rgba(var(--omni-blue-rgb), .22) !important;
    box-shadow: 0 14px 34px rgba(15,23,42,.10) !important;}
.mode-btn.active{
    background: rgba(var(--omni-blue-rgb), .18) !important;
    color: var(--omni-blue-900) !important;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.75),
      0 12px 28px rgba(15,23,42,.10) !important;
    transform: translateY(-1px);}
.mode-btn:hover:not(.active){
    color: var(--omni-blue-700) !important;}
/* 2) Trigger pill: make it FLAT like mock (no heavy 3D/35 effect) */
.input-mode-toggle{
  box-shadow: none !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(15,23,42,.10) !important;}
.input-mode-toggle .mode-highlight{
  box-shadow: none !important;
  border: 1px solid rgba(30,136,229,.26) !important;
  background: rgba(30,136,229,.16) !important;}
.input-mode-toggle .mode-btn{
  box-shadow:none !important;}
/* Keep active segment crisp (blue text) */
.input-mode-toggle .mode-btn.active{
  color: rgba(10,40,120,.95) !important;}
/* 2) URL/Text Prompt trigger pill — simple, flat, mock-style */
.input-mode-toggle{
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(20,40,90,.16) !important;
  box-shadow: none !important;
  padding: 6px !important;
  border-radius: 999px !important;}
/* remove the extra sliding highlight layer (user wants simple) */
.input-mode-toggle .mode-highlight{
  display: none !important;}
.input-mode-toggle .mode-btn{
  border: 0 !important;
  background: transparent !important;
  border-radius: 999px !important;
  padding: 10px 16px !important;
  font-weight: 600 !important;
  color: rgba(20,30,50,.70) !important;
  box-shadow: none !important;}
.input-mode-toggle .mode-btn.active{
  background: rgba(74,163,255,.22) !important;
  border: 1px solid rgba(74,163,255,.35) !important;
  color: rgba(10,40,120,.95) !important;}
/* active mode icon slightly deeper */
.input-mode-toggle .mode-btn.active .mode-ico{
  background-color: rgba(10,40,120,.92) !important;}
/* === v37: Trigger pill simplified to match mock + fix Text Prompt icon placeholder === */
/* Keep changes scoped to URL/Text Prompt toggle only */
.input-mode-toggle{background: rgba(74,163,255,.14) !important; border:1px solid rgba(74,163,255,.28) !important; box-shadow:none !important; padding:6px !important; gap:6px !important;}
.input-mode-toggle .mode-highlight{display:none !important;}
.input-mode-toggle .mode-btn{height:40px !important; padding:0 18px !important; border-radius:999px !important; background:transparent !important; border:1px solid transparent !important; color: rgba(15,23,42,.70) !important; font-weight:600 !important; box-shadow:none !important;}
.input-mode-toggle .mode-btn.active{background: rgba(255,255,255,.95) !important; border-color: rgba(74,163,255,.35) !important; color: rgba(10,40,120,.95) !important; box-shadow: 0 10px 22px rgba(15,23,42,.08) !important;}
.input-mode-toggle .mode-btn:active{transform: translateY(0) !important;}
.input-mode-toggle .mode-btn .op-ico{opacity:.85; background-color: rgba(15,23,42,.55) !important;}
.input-mode-toggle .mode-btn.active .op-ico{background-color: rgba(10,40,120,.92) !important;}

/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}




/* Mock dashboard toggle (white capsule + light-blue active pill) */
.input-mode-toggle.mock-toggle{background:#ffffff;}

.input-mode-toggle.mock-toggle .mode-btn{
  appearance:none;
  -webkit-appearance:none;
  border: 0;
  background: transparent;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  color: rgba(20,30,60,0.70);
  cursor: pointer;
  display:flex;
  align-items:center;
  gap: 8px;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.input-mode-toggle.mock-toggle .mode-btn.active{
  background: rgba(80,150,255,0.15);
  color: #2b5fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.90), 0 6px 14px rgba(80,150,255,0.20);
}

.input-mode-toggle.mock-toggle .toggle-ico{
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ======================================================
   FINAL OVERRIDE — force capsule WHITE, active pill LIGHT BLUE
   (prevents older rules from re-tinting the capsule)
   ====================================================== */
.input-mode-toggle,
.mock-toggle,
.mode-toggle,
.segmented {
  background: #ffffff !important;
}

.input-mode-toggle .mode-btn.active,
.mock-toggle-btn.active,
.segmented button.active {
  background: rgba(80,150,255,0.18) !important;
}

/* keep icons monochrome */
.input-mode-toggle .mode-btn svg,
.mock-toggle-btn svg,
.segmented button svg,
.input-mode-toggle .op-ico,
.mock-toggle-btn .op-ico {
  color: currentColor !important;
  fill: currentColor !important;
}



/* ======================================================
   TOGGLE FIX (TARGETED): keep all global styles intact
   - Capsule stays WHITE
   - Active pill is FLAT light blue (no gradients)
   ====================================================== */
.input-mode-toggle,
.mock-toggle,
.mode-toggle,
.segmented {
  background: #ffffff !important;
  background-image: none !important;
}

.input-mode-toggle .mode-btn.active,
.mock-toggle-btn.active,
.segmented button.active {
  background: rgba(80,150,255,0.18) !important;
  background-image: none !important;
}



/* ======================================================
   FINAL TOGGLE OVERRIDE (OPAQUE)
   - Keeps capsule white
   - Active pill uses SOLID light-blue (no translucent tint)
   ====================================================== */
.input-mode-toggle{
  background:#ffffff !important;
  background-image:none !important;
}

.input-mode-toggle .mode-btn.active{
  background:#dcebff !important; /* solid light-blue */
  background-image:none !important;
}



/* ======================================================
   TOGGLE: remove any halo/gradient outline behind active pill
   ====================================================== */
.input-mode-toggle .mode-btn.active{
  box-shadow: none !important;
  filter: none !important;
  outline: none !important;
  border-color: transparent !important;
  background-image: none !important;
}

.input-mode-toggle .mode-btn.active::before,
.input-mode-toggle .mode-btn.active::after{
  content: none !important;
  display: none !important;
}



/* ======================================================
   TOGGLE FINAL: remove colored rim (comes from capsule glow/border effects)
   Keep capsule clean + neutral, active pill flat.
   ====================================================== */
.input-mode-toggle{
  background:#ffffff !important;
  background-image:none !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08) !important; /* neutral */
  border: 1px solid rgba(0,0,0,0.06) !important;
  filter:none !important;
}

.input-mode-toggle::before,
.input-mode-toggle::after{
  content:none !important;
  display:none !important;
}

/* ensure active pill sits above any capsule effects */
.input-mode-toggle .mode-btn.active{
  position: relative !important;
  z-index: 2 !important;
  background:#dcebff !important;          /* solid */
  background-image:none !important;
  box-shadow:none !important;
  border: 1px solid rgba(0,0,0,0.03) !important; /* tiny neutral edge */
  filter:none !important;
  outline:none !important;
}

.input-mode-toggle .mode-btn.active::before,
.input-mode-toggle .mode-btn.active::after{
  content:none !important;
  display:none !important;
}


/* Toggle shadow reassignment */
.input-mode-toggle{
  box-shadow:none !important;
}
.input-mode-toggle .mode-btn.active{
  box-shadow:0 8px 20px rgba(32,100,255,0.25) !important;
}



/* Active pill shadow outside capsule (layered/3D) */
.input-mode-toggle{
  overflow: visible !important; /* allow shadow to spill out */
  box-shadow: none !important;
}
.input-mode-toggle .mode-btn{
  position: relative !important;
  z-index: 1;
}
.input-mode-toggle .mode-btn.active{
  z-index: 3 !important;
  box-shadow:
    0 18px 40px rgba(32,100,255,0.25),
    0 6px 14px rgba(32,100,255,0.18) !important;
}


/* Neutral grey shadow for active pill */
.input-mode-toggle .mode-btn.active{
  box-shadow:
    0 18px 40px rgba(0,0,0,0.18),
    0 6px 14px rgba(0,0,0,0.12) !important;
}


/* ======================================================
   Typography: darker + heavier for stat titles + toggle labels
   (Mock-like emphasis)
   ====================================================== */
.stat-title{
  font-weight: 700 !important;
  color: #2f3a4a !important;
  letter-spacing: -0.01em !important;
}
.input-mode-toggle .mode-btn{
  font-weight: 700 !important;
  color: #2f3a4a !important;
}
.input-mode-toggle .mode-btn.active{
  color: #1f2b3a !important;
}


/* Stronger stat titles like mock */
.stat-title{
  font-weight:800 !important;
  color:#1f2937 !important;
}

/* Heavier OmniPostr watermark */
.omnipostr-watermark, .watermark, .brand-watermark{
  font-weight:700 !important;
  color:#2f3a4a !important;
}


/* OmniPostr watermark match hero mock (stronger) */
.op-stats-watermark .op-wm-text{
  font-weight: 800 !important;
  color: #1f2937 !important;
  opacity: 0.9 !important;
  letter-spacing: 0.06em !important;
}


/* ===== v15.1f targeted UI fixes (Recent Activity pills + Trends outline + Stat icon alignment) ===== */

/* Recent Activity: revert pill look to v15.1c style for Quality/Copy/View while keeping Completed green */
.activity-row-badges .activity-tag--quality{
  border-color: rgba(31,42,68,0.10) !important;
  background: rgba(255,255,255,0.72) !important;
  box-shadow: inset 0 0 0 1px rgba(31,42,68,0.06) !important;
  color: rgba(31,42,68,0.95) !important;
}
.activity-row-badges .activity-tag--quality .activity-qicon{
  font-size:16px !important;
  font-weight:900 !important;
  line-height:1 !important;
  transform: translateY(-0.5px) !important;
  margin-right:6px !important;
  text-shadow: 0 0 0 rgba(0,0,0,0.20), 0.3px 0 rgba(0,0,0,0.10) !important;
  color: var(--qcol) !important;
}

/* Unify blue shade with filter tabs */
:root{
  --op-blue: #2563EB;
  --op-blue-10: rgba(37,99,235,0.10);
  --op-blue-24: rgba(37,99,235,0.24);
}

/* Copy URL: same blue as tabs, show clear affordance */
.copy-activity-btn{
  background: var(--op-blue-10) !important;
  border: 1px solid var(--op-blue-24) !important;
  color: var(--op-blue) !important;
}

/* View: white interior */
.view-activity-btn{
  background: rgba(255,255,255,0.96) !important;
  border: 1px solid var(--op-blue-24) !important;
  color: var(--op-blue) !important;
}

/* Make these action pills consistent sizing */
.copy-activity-btn,
.view-activity-btn,
.activity-row-badges .activity-tag,
.activity-row-badges .activity-tag--quality{
  padding: 0.34rem 0.62rem !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

/* Click feedback for Copy button */
.copy-activity-btn.is-copied{
  background: rgba(34,197,94,0.12) !important;
  border-color: rgba(34,197,94,0.28) !important;
  color: rgba(22,101,52,0.95) !important;
}

/* Quality Trends: make outline obviously visible */
#qualityTrendsSvg path.trend-outline{
  stroke-width: 14 !important;
}
#qualityTrendsSvg path.trend-line{
  stroke-width: 6 !important;
}
#qualityTrendsSvg circle{
  stroke-width: 4 !important;
}

/* Stat cards: align icons/dots to match other cards */
.stat-header{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap: 10px !important;
}
.stat-icon{
  width: 24px !important;
  height: 24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin-top: 2px !important;
  flex: 0 0 24px !important;
}
.stat-icon .op-ico{
  width: 18px !important;
  height: 18px !important;
  opacity: .78 !important;
}
.stat-dot{
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  display:block !important;
  margin-top: 3px !important;
}
.stat-dot--social{ background: #2563EB !important; }
.stat-dot--video{ background: #7C3AED !important; }
.stat-dot--longform{ background: #F97316 !important; }




/* === Recent Activity pills: consistent sizing + single blue === */
:root{
  --op-pill-blue: #2563EB;
}
.activity-actions .copy-activity-btn,
.activity-actions .view-activity-btn{
  min-width: 96px !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  text-align: center !important;
}
.activity-actions .copy-activity-btn{
  background: rgba(37,99,235,0.10) !important;
  border: 1px solid rgba(37,99,235,0.35) !important;
  color: var(--op-pill-blue) !important;
}
.activity-actions .copy-activity-btn.is-copied{
  background: rgba(34,197,94,0.12) !important;
  border-color: rgba(34,197,94,0.45) !important;
  color: #15803D !important;
}
.activity-actions .view-activity-btn{
  background: #fff !important;
  border: 1px solid rgba(37,99,235,0.40) !important;
  color: var(--op-pill-blue) !important;
}
.activity-actions .copy-activity-btn:hover,
.activity-actions .view-activity-btn:hover{
  filter: brightness(0.98);
}

/* Make the Quality pill match the same blue family as filter tabs */
.activity-actions .quality-pill{
  border-color: rgba(37,99,235,0.30) !important;
}
.activity-actions .quality-pill .quality-text{
  color: var(--op-pill-blue) !important;
}

/* === Stat cards: align icons/dots to identical inset === */
.op-mini-stat{
  position: relative !important;
}
.op-mini-stat .stat-icon,
.op-mini-stat .stat-dot{
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  margin: 0 !important;
}
.op-mini-stat .stat-icon{
  width: 22px !important;
  height: 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.65 !important;
}
.op-mini-stat .stat-icon .op-ico{
  width: 18px !important;
  height: 18px !important;
}
.op-mini-stat .stat-header{
  padding-right: 34px !important; /* space for icon/dot */
}

/* Force dot colors to exact palette (override older blocks) */
.op-mini-stat .stat-dot--social{ background:#2563EB !important; }
.op-mini-stat .stat-dot--video{ background:#7C3AED !important; }
.op-mini-stat .stat-dot--longform{ background:#F97316 !important; }



/* ============================
   Step 1: Stat-card icon/dot alignment
   ============================ */
/* Make stat card headers consistent */
.op-stat-card .op-stat-head,
.stat-card .stat-head,
.dashboard-card .card-head,
.card.stat-card .card-head,
.op-card .op-card-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

/* Force icon/dot container to a consistent box so it doesn't hug edge */
.op-stat-card .op-stat-icon,
.stat-card .stat-icon,
.dashboard-card .card-icon,
.card.stat-card .card-icon,
.op-card .op-card-icon,
#planStatusIcon,
#contentQualityIcon {
  width: 28px !important;
  height: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 10px !important;
  flex: 0 0 28px !important;
}

/* Normalize SVG/icon sizing */
.op-stat-card .op-stat-icon svg,
.stat-card .stat-icon svg,
.dashboard-card .card-icon svg,
.card.stat-card .card-icon svg,
.op-card .op-card-icon svg,
#planStatusIcon svg,
#contentQualityIcon svg {
  width: 18px !important;
  height: 18px !important;
}

/* Normalize colored dots (social/video/longform) */
.op-stat-card .op-stat-icon .dot,
.stat-card .stat-icon .dot,
.dashboard-card .card-icon .dot,
.card.stat-card .card-icon .dot,
.op-card .op-card-icon .dot,
.stat-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 999px !important;
  display: inline-block !important;
  margin: 0 !important;
}

/* ============================
   Step 2: Quality Trends thickness
   ============================ */
/* If trends uses SVG paths, increase stroke widths. Targets common classes/ids used in this file. */
#qualityTrendsChart svg path.trend-outline,
#qualityTrendsChart svg path.trendOutline,
#qualityTrendsChart svg path[data-role="outline"],
#qualityTrendsChart svg .trend-outline {
  stroke-width: 14 !important;
  opacity: 1 !important;
}
#qualityTrendsChart svg path.trend-line,
#qualityTrendsChart svg path.trendLine,
#qualityTrendsChart svg path[data-role="line"],
#qualityTrendsChart svg .trend-line {
  stroke-width: 6 !important;
}

/* Fallback: any path inside the trends chart that is the white outline (stroke white) */
#qualityTrendsChart svg path[stroke="#fff"],
#qualityTrendsChart svg path[stroke="white"] {
  stroke-width: 14 !important;
}
/* Fallback: main line paths */
#qualityTrendsChart svg path:not([stroke="#fff"]):not([stroke="white"]) {
  stroke-width: 6;
}

/* ============================
   Step 3: Button/pill style consistency
   ============================ */
/* Unify primary blue across tabs and pills */
:root{
  --op-blue: #2563EB;
  --op-blue-600: #1D4ED8;
}

/* Tabs */
.quality-filter-tabs button,
.quality-tabs button,
.tabs button {
  background: rgba(37,99,235,0.10) !important;
  border-color: rgba(37,99,235,0.25) !important;
  color: var(--op-blue) !important;
}
.quality-filter-tabs button.active,
.quality-tabs button.active,
.tabs button.active {
  background: var(--op-blue) !important;
  border-color: var(--op-blue) !important;
  color: #fff !important;
}

/* Recent Activity pill buttons */
.activity-actions .copy-activity-btn,
.activity-actions .view-activity-btn,
.activity-actions .regen-btn,
.activity-actions .quality-pill {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 6px 10px !important;
  border-radius: 999px !important;
  line-height: 1 !important;
}

/* Make Copy and View same width */
.activity-actions .copy-activity-btn,
.activity-actions .view-activity-btn {
  min-width: 86px !important;
  justify-content: center !important;
}

/* Copy: solid blue */
.activity-actions .copy-activity-btn{
  background: var(--op-blue) !important;
  border: 1px solid var(--op-blue) !important;
  color: #fff !important;
}
.activity-actions .copy-activity-btn:hover{ background: var(--op-blue-600) !important; }

/* View: white inside */
.activity-actions .view-activity-btn{
  background: #fff !important;
  border: 1px solid rgba(37,99,235,0.55) !important;
  color: var(--op-blue) !important;
}
.activity-actions .view-activity-btn:hover{ border-color: var(--op-blue) !important; }

/* Regen button stays subtle but consistent */
.activity-actions .regen-btn{
  background: rgba(37,99,235,0.12) !important;
  border: 1px solid rgba(37,99,235,0.25) !important;
  color: var(--op-blue) !important;
}



/* Step 2: Improve spacing for stat-header icons (Plan Status + Content Quality) */
.stat-card .stat-header{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  column-gap:16px !important;
  min-height: 54px; /* Reserve space for wrapped subtitle to prevent CLS */
}
.stat-card .stat-header > div:first-child{
  min-width:0 !important;
}
.stat-card .stat-icon{
  flex:0 0 auto !important;
  margin-left:18px !important; /* create breathing room from text */
}



/* Step 3: Prevent headline/subline truncation in Plan Status + Content Quality cards */
/* Reserve space on the right so text never collides with the icon */
.stat-card .stat-header .stat-title,
.stat-card .stat-header .stat-subtitle{
  padding-right: 44px !important; /* icon (28) + gap */
  max-width: 100% !important;
}

/* Allow wrapping instead of ellipsis for these two lines */
.stat-card .stat-header .stat-title,
.stat-card .stat-header .stat-subtitle{
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

/* Keep titles/subtitles visually tidy (2-line clamp if supported) */
@supports (-webkit-line-clamp: 2) {
  .stat-card .stat-header .stat-title{
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .stat-card .stat-header .stat-subtitle{
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important; /* Changed from 2 to 3 to accommodate "Incl. regens" line */
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
}



/* Align Content Quality value and subtext to match Plan Status vertical rhythm */
.stat-card.content-quality .stat-value{
  margin-top: 8px !important; /* push down to align with 'Starter' */
}
.stat-card.content-quality .stat-subtext{
  margin-top: 6px !important; /* align with 'Renews monthly' */
}



/* Fine-tune: Content Quality vertical alignment to match Plan Status */
.stat-card.content-quality .stat-value{
  margin-top: 18px !important;
  line-height: 1.05 !important;
}
.stat-card.content-quality .stat-subtext{
  margin-top: 14px !important;
}



/* Regen pill (Recent Activity) */
.regen-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid;
  font-size:12px;
  font-weight:600;
  line-height:1;
}
.regen-pill__icon{ display:inline-flex; align-items:center; line-height:1; }
.regen-pill__icon .op-ico{width:14px; height:14px; margin-right:0; opacity:.9;}
.regen-pill__delta{ font-weight:700; }
.regen-pill--pos{ background: rgba(34,197,94,0.10); border-color: rgba(34,197,94,0.25); color:#15803D; }
.regen-pill--neutral{ background: rgba(245,158,11,0.10); border-color: rgba(245,158,11,0.25); color:#B45309; }
.regen-pill--zero{ background: rgba(107,114,128,0.10); border-color: rgba(107,114,128,0.25); color:#4B5563; }

/* Quality card comparison block */
.regen-compare{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(0,0,0,0.08);
  background: rgba(0,0,0,0.03);
}
.regen-compare__label{
  font-size:11px;
  font-weight:700;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color: rgba(0,0,0,0.50);
  margin-bottom:6px;
}
.regen-compare__row{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:700;
}
.regen-compare__arrow{ font-size:16px; }
.regen-compare__delta{opacity:.9; margin-left:4px; white-space:nowrap;}
.regen-compare--pos{ color:#15803D; }
.regen-compare--neg{ color:#B45309; }
.regen-compare--zero{ color:#4B5563; }



  
  /* Premium OmniPostr Logout button - SaaS style with brand colors */
  #op-logout-btn{
    all: unset;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 100000;
    display: none;

    box-sizing: border-box;
    cursor: pointer;
    user-select: none;

    /* Premium SaaS sizing */
    padding: 0.5rem 1rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    /* Typography */
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    letter-spacing: -0.01em;

    /* OmniPostr premium glass morphism with thicker blue outline */
    background: linear-gradient(135deg, 
      rgba(255, 255, 255, 0.95) 0%, 
      rgba(255, 255, 255, 0.88) 100%);
    backdrop-filter: blur(12px);
    border: 2px solid rgba(30, 136, 229, 0.4);
    color: #1E88E5;

    /* Premium layered shadow */
    box-shadow:
      0 2px 8px rgba(30, 136, 229, 0.08),
      0 8px 24px rgba(15, 23, 42, 0.06),
      0 1px 0 rgba(255, 255, 255, 0.8) inset;
    
    transition:
      all 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  #op-logout-btn .op-row{
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
  }

  #op-logout-btn svg{
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: all 220ms cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Hover: Amber theme with very light amber fill */
  #op-logout-btn:hover{
    transform: translateY(-1px);
    border-color: rgba(245, 158, 11, 0.6);
    background: rgba(245, 158, 11, 0.05);
    color: #D97706;
    box-shadow:
      0 3px 8px rgba(245, 158, 11, 0.12),
      0 8px 20px rgba(15, 23, 42, 0.06),
      0 1px 0 rgba(255, 255, 255, 0.9) inset;
  }
  
  #op-logout-btn:hover svg{
    transform: translateX(2px);
  }

  /* Active: Solid OmniPostr blue */
  #op-logout-btn:active{
    transform: translateY(0px) scale(0.98);
    background: linear-gradient(135deg, #1E88E5 0%, #1565C0 100%);
    border-color: #1565C0;
    color: #ffffff;
    box-shadow:
      0 2px 8px rgba(30, 136, 229, 0.3),
      0 6px 20px rgba(30, 136, 229, 0.2),
      0 0 0 4px rgba(30, 136, 229, 0.12);
  }

  /* Focus: OmniPostr blue ring */
  #op-logout-btn:focus-visible{
    outline: none;
    box-shadow:
      0 0 0 3px rgba(30, 136, 229, 0.15),
      0 0 0 5px rgba(30, 136, 229, 0.08),
      0 4px 12px rgba(30, 136, 229, 0.12);
  }

  /* Hide logout button when loading modal is visible */
  body.loading-modal-active #op-logout-btn {
    display: none !important;
  }

/* Fully scoped: prevents global button styles from breaking the control */


/* ======================================
   Navbar – Logout Button Shape Unification
   ====================================== */

#op-logout-btn {
  height: 44px;
  padding: 0 20px;
  border-radius: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  gap: 8px;
}


/* V3: Match Start Repurposing pill edges without affecting layout */
#op-logout-btn{
  border-radius: 999px !important;
}


/* ======================================
   Navbar – Logout Button Active Color Sync
   ====================================== */

/* Match Generate Content button active state exactly */
#op-logout-btn:active {
  transform: translateY(0px) scale(0.99) !important;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-700) 100%) !important;
  box-shadow:
    0 0 0 6px rgba(30,136,229,0.18),
    0 10px 26px rgba(30,136,229,0.30) !important;
}

#op-logout-btn:focus-visible {
  background: var(--blue) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25);
}



/* === PATCH: Disable body scroll while loading overlay is active === */
/* JS adds 'loading-modal-active' class to body when overlay shows */
body.loading-modal-active,
body.loading-modal-active html {
  overflow: hidden !important;
  height: 100%;
}

/* Prevent wheel/touch scroll from leaking behind overlay */
.loading-overlay {
  overscroll-behavior: contain;
}

/* Keep the :has() fallback for browsers that support it */
body:has(.loading-overlay.active) {
  overflow: hidden !important;
}


/* ===================================================================
   ETHEREAL SUCCESS STATE - Calm Radial Glow
   Added: 2026-02-04 - Organic energy radiating from success
   =================================================================== */

/* Overlay KEEPS the EXACT SAME elegant style as generating state */
#loadingOverlay.success {
  /* IDENTICAL to base overlay - same blue/orange gradient with dark tint */
  background:
    radial-gradient(900px 520px at 18% 6%, rgba(30,136,229,0.22), transparent 60%),
    radial-gradient(900px 520px at 82% 12%, rgba(255,122,89,0.18), transparent 62%),
    radial-gradient(900px 600px at 50% 115%, rgba(13,71,161,0.20), transparent 60%),
    rgba(15,23,42,0.55) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
  /* No transition needed - stays the same */
}


/* ===================================================================
   NEW PILL - OmniPostr Translucent Gradient
   =================================================================== */

.op-new-pill {
  position: absolute !important;
  left: 16px !important;
  right: auto !important;
  top: auto !important;
  bottom: 12px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
  padding: 4px 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
  color: white !important;
  background: linear-gradient(135deg, rgb(16, 185, 129), rgb(5, 150, 105)) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 
    0 2px 6px rgba(16, 185, 129, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  animation: pillFadeIn 0.4s ease-out, pillPulse 2s ease-in-out 3 !important;
  transition: all 0.3s ease !important;
  z-index: 10 !important;
  white-space: nowrap !important;
  pointer-events: none !important;
}

#activityList .activity-item.op-activity-new {
  position: relative !important;
}

#activityList .activity-item.op-activity-new > .op-new-pill {
  position: absolute !important;
  left: 16px !important;
  right: auto !important;
  top: auto !important;
  bottom: 12px !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: max-content !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  padding: 4px 12px !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  align-self: flex-start !important;
}

.op-new-pill.fade-out {
  animation: pillFadeOut 0.3s ease-out forwards;
}

@keyframes pillFadeIn {
  from { 
    opacity: 0; 
    transform: scale(0.8) translateY(-4px);
  }
  to { 
    opacity: 1; 
    transform: scale(1) translateY(0);
  }
}

@keyframes pillFadeOut {
  from { 
    opacity: 1; 
    transform: scale(1);
  }
  to { 
    opacity: 0; 
    transform: scale(0.8);
  }
}

@keyframes pillPulse {
  0%, 100% {
    box-shadow: 
      0 2px 8px rgba(16, 185, 129, 0.4),
      0 0 0 0 rgba(16, 185, 129, 0.7),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 
      0 2px 12px rgba(16, 185, 129, 0.6),
      0 0 0 6px rgba(16, 185, 129, 0),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
}

/* ===================================================================
   ACTIVITY ITEM HIGHLIGHT - UNMISSABLE Visual Difference
   =================================================================== */

.activity-item.op-activity-new {
  position: relative !important;
  background: linear-gradient(
    to right,
    rgba(16, 185, 129, 0.14) 0%,
    rgba(16, 185, 129, 0.08) 30%,
    rgba(16, 185, 129, 0.04) 60%,
    rgba(16, 185, 129, 0.02) 80%,
    transparent 100%
  ) !important;
  border: 1px solid rgba(16, 185, 129, 0.18) !important;
  border-left-color: rgba(226, 232, 240, 0.9) !important;
  border-left-width: 1px !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
  animation: itemHighlight 0.7s ease-out !important;
  transition: all 0.3s ease !important;
  transform: none !important;
  margin: 8px 0 !important;
  padding: 36px 18px 14px !important;
}

.activity-item.op-activity-new.op-activity-new-active {
  background: linear-gradient(
    to right,
    rgba(16, 185, 129, 0.18) 0%,
    rgba(16, 185, 129, 0.11) 30%,
    rgba(16, 185, 129, 0.06) 60%,
    rgba(16, 185, 129, 0.03) 80%,
    transparent 100%
  ) !important;
  border-color: rgba(16, 185, 129, 0.24) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 0 0 2px rgba(16, 185, 129, 0.12) !important;
  animation: itemHighlight 0.7s ease-out, itemHighlightHold 1.8s ease-in-out infinite !important;
}

@keyframes itemHighlight {
  0% { 
    transform: translateX(-12px) scale(1.02);
    opacity: 0;
  }
  50% {
    transform: translateX(-4px) scale(1.02);
    opacity: 0.7;
  }
  100% { 
    transform: translateX(0) scale(1.01);
    opacity: 1;
  }
}

@keyframes itemHighlightHold {
  0%, 100% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.5),
      0 0 0 2px rgba(16, 185, 129, 0.08);
  }
  50% {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.55),
      0 0 0 4px rgba(16, 185, 129, 0.16);
  }
}

/* Even stronger on hover */
.activity-item.op-activity-new:hover {
  background: linear-gradient(
    to right,
    rgba(16, 185, 129, 0.18) 0%,
    rgba(16, 185, 129, 0.11) 30%,
    rgba(16, 185, 129, 0.06) 60%,
    rgba(16, 185, 129, 0.03) 80%,
    transparent 100%
  ) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  border-color: rgba(16, 185, 129, 0.22) !important;
  border-left-color: rgba(226, 232, 240, 0.9) !important;
  transform: none !important;
  cursor: pointer !important;
}

/* ===================================================================

/* ===================================================================

/* ===================================================================
   SUCCESS CARD - Stay Green and Pulsing
   =================================================================== */

.loading-content.op-success {
  background: rgba(16, 185, 129, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  border: 2px solid rgba(16, 185, 129, 0.5) !important;
  animation: successPulse 2s ease-in-out infinite !important;
  opacity: 1 !important;
}

.loading-content.op-success h3,
.loading-content.op-success p {
  color: rgb(5, 150, 105) !important;
  font-weight: 600 !important;
}

/* Pulsing animation for success card */
@keyframes successPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
    transform: scale(1.02);
  }
}

/* Spinner stays green - NUCLEAR OVERRIDE */
.loading-content.op-success .loading-spinner,
.loading-content.op-success .loading-spinner::before,
.loading-content.op-success .loading-spinner::after,
.loading-content.op-success .spinner-border,
.loading-content.op-success i,
.loading-content.op-success svg {
  --spin-a: #10B981 !important;
  --spin-b: #059669 !important;
  --spin-c: #10B981 !important;
  --spin-glow-a: rgba(16, 185, 129, 0.55) !important;
  --spin-glow-b: rgba(16, 185, 129, 0.25) !important;
  border-color: rgb(16, 185, 129) transparent transparent transparent !important;
  border-top-color: rgb(16, 185, 129) !important;
  border-right-color: rgb(16, 185, 129) !important;
  border-left-color: rgb(16, 185, 129) !important;
  background: conic-gradient(from 0deg, #10B981, #059669, #10B981) !important;
  color: rgb(16, 185, 129) !important;
  fill: rgb(16, 185, 129) !important;
  animation: spin 1s linear infinite !important;
  box-shadow: 0 0 18px rgba(16, 185, 129, 0.55), 0 0 36px rgba(16, 185, 129, 0.25) !important;
}

.loading-content.op-success .loading-spinner::after {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.36), transparent 70%) !important;
}

/* Prevent ANY color transitions in success state */
.loading-content.op-success * {
  transition: none !important;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}



/* ============================================================
   Logout as Stats Card Tile (wide, half-height, inherits button scheme)
   ============================================================ */

/* When the logout button is moved into a tile, disable fixed positioning look */
#op-logout-btn.op-logout-in-tile{
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  height: 100%;
  cursor: pointer;
  user-select: none;
  color: #1E88E5;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-weight: 700;
  font-size: 1rem;
}

/* The tile becomes the “button”; it uses the logout button’s glass + outline */

/* Remove any inner outline/border that the original fixed button may have had */
#op-logout-btn.op-logout-in-tile{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

.op-logout-tile{
  grid-column: 1 / -1;
  height: 30px;
  padding: 12px 16px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;

  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.88) 100%);
  backdrop-filter: blur(12px);
  border: 2px solid rgba(30, 136, 229, 0.40);
  border-radius: 20px;
  box-shadow:
    0 10px 30px rgba(30, 136, 229, 0.06),
    0 20px 70px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
}

.op-logout-tile:hover{
  border-color: rgba(255, 152, 0, 0.50);
  box-shadow:
    0 12px 34px rgba(255, 152, 0, 0.12),
    0 22px 74px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.op-logout-tile:active{
  background: rgba(30, 136, 229, 0.08);
  border-color: rgba(30, 136, 229, 0.60);
  box-shadow:
    0 8px 22px rgba(30, 136, 229, 0.10),
    0 18px 60px rgba(0, 0, 0, 0.05);
  transform: translateY(0);
}


/* Remove any inner button styling when inside tile - make it invisible container */
#op-logout-btn.op-logout-in-tile{
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  user-select: none !important;
  color: #1E88E5 !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Override ANY hover/active states on the inner button */
#op-logout-btn.op-logout-in-tile:hover,
#op-logout-btn.op-logout-in-tile:active,
#op-logout-btn.op-logout-in-tile:focus-visible {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #1E88E5 !important;
}



/* FINAL: Logout tile with thinner border and solid blue active state */
.op-stats-mini-grid .op-logout-tile.op-mini-stat {
  grid-column: 1 / -1 !important;
  height: 65px !important;
  min-height: 65px !important;
  max-height: 65px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  text-align: center !important;

  /* Thinner blue border */
  background: rgba(255,255,255,0.75) !important;
  backdrop-filter: blur(12px) !important;
  border: 1.5px solid rgba(30, 136, 229, 0.35) !important;
  border-radius: 20px !important;
  box-shadow: 0 10px 28px rgba(2,6,23,0.08) !important;
  transition: all 0.2s ease !important;
}

/* Hover: warm orange border + text */
.op-stats-mini-grid .op-logout-tile.op-mini-stat:hover {
  border-color: rgba(255, 152, 0, 0.45) !important;
  box-shadow: 0 18px 40px rgba(255, 152, 0, 0.12) !important;
  transform: translateY(-2px) !important;
}

.op-stats-mini-grid .op-logout-tile.op-mini-stat:hover #op-logout-btn.op-logout-in-tile {
  color: rgba(255, 152, 0, 0.85) !important;
}

/* Active: SOLID BLUE background + WHITE text (like original button) */
.op-stats-mini-grid .op-logout-tile.op-mini-stat:active {
  background: linear-gradient(180deg, #1E88E5 0%, #1976D2 100%) !important;
  border-color: #1E88E5 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.25) !important;
  transform: translateY(0) !important;
}

.op-stats-mini-grid .op-logout-tile.op-mini-stat:active #op-logout-btn.op-logout-in-tile {
  color: white !important;
}

.op-stats-mini-grid .op-logout-tile.op-mini-stat:active #op-logout-btn.op-logout-in-tile svg {
  color: white !important;
  fill: white !important;
}

/* Inner button: blue text in normal state */
.op-stats-mini-grid .op-logout-tile #op-logout-btn.op-logout-in-tile {
  all: unset !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
  user-select: none !important;
  color: #1E88E5 !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1rem !important;
  transition: color 0.2s ease !important;
}

/* ========================================================================
   REGENERATION UX FIXES
   ======================================================================== */

/* ISSUE 1: Button spinner for "Regenerating..." state */
.btn-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: currentColor;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 6px;
  flex-shrink: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.regen-manual-btn.is-loading {
  opacity: 0.7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Colorful animated border ONLY while regenerating */
.activity-item.is-regenerating {
  position: relative;
  z-index: 1;
  transition: all 0.3s ease; /* Smooth transition when border appears */
}

.activity-item.is-regenerating::before {
  content: '';
  position: absolute;
  inset: -2px;  /* Back to 2px for more visible border */
  border-radius: 18px;
  padding: 2px;  /* 2px border thickness */
  background: linear-gradient(
    90deg,
    #1E88E5,    /* OmniPostr Blue */
    #9333EA,    /* Purple */
    #FF7A59,    /* OmniPostr Orange */
    #1E88E5     /* Back to Blue for smooth loop */
  );
  background-size: 300% 100%;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: borderAnimation 2s linear infinite;
  pointer-events: none;
  z-index: 0;
  opacity: 0.75;  /* Slightly more visible - 75% instead of 60% */
}

@keyframes borderAnimation {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 300% 0%;
  }
}

/* ISSUE 4: Highlight animation for regenerated entries */
@keyframes highlightPulse {
  0%, 100% { 
    background: transparent;
    box-shadow: none;
    transform: scale(1);
  }
  50% { 
    background: rgba(30, 136, 229, 0.12);  /* Between 0.08 and 0.2 - moderate visibility */
    box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.3);  /* Between subtle and strong */
    transform: scale(1.008);  /* Very slight scale */
  }
}

.activity-item.newly-generated {
  animation: highlightPulse 1.3s ease-in-out 3;  /* 3 pulses, 1.3s each = ~4 seconds total */
  border-radius: 16px;
}

/* ISSUE 2: Ensure regen pill icons render properly */
.regen-pill__icon .op-ico {
  width: 14px;
  height: 14px;
  margin-right: 0;
  opacity: 0.9;
}

/* ==========================================================================
   Generation Overlay Hotfix
   Exact card port + state reset support
   ========================================================================== */

#loadingOverlay.loading-overlay {
  transition: opacity 0.42s ease, visibility 0.42s ease;
}

#loadingOverlay .loading-shell {
  position: relative;
  z-index: 2;
  width: min(100%, 500px);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#loadingOverlay .loading-content {
  width: min(100%, 480px);
  min-height: 0 !important;
  padding: 34px 48px 34px !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start !important;
  text-align: center;
  gap: 0;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.46) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.6)) !important;
  box-shadow:
    0 48px 100px -16px rgba(15, 23, 42, 0.12),
    0 12px 24px rgba(148, 163, 184, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
  backdrop-filter: blur(28px) saturate(132%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(132%) !important;
}

#loadingOverlay .loading-content::before {
  height: 6px;
  background: linear-gradient(90deg, #4f9cf7 0%, #7f7cf5 50%, #ff8d6b 100%);
  animation: omniOverlayStripeShift 5.8s linear infinite;
}

#loadingOverlay .loading-content::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

#loadingOverlay .loading-kicker {
  gap: 10px;
  margin: 0 0 26px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.3);
  border: 1px solid rgba(203, 213, 225, 0.45);
  border-radius: 999px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

#loadingOverlay .loading-kicker__dot {
  width: 10px;
  height: 10px;
  background: #4f9cf7;
  box-shadow: 0 0 0 4px rgba(79, 156, 247, 0.14);
}

#loadingOverlay .loading-spinner {
  position: relative;
  width: 96px !important;
  height: 96px !important;
  margin: 0 0 34px;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  display: grid !important;
  place-items: center;
  animation: none !important;
}

#loadingOverlay .loading-spinner::before {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 2px solid #eef2f7;
}

#loadingOverlay .loading-spinner::after {
  content: "";
  position: absolute;
  inset: 4px !important;
  border-radius: 50%;
  background: conic-gradient(
    from 225deg,
    #ff8d6b 0deg 70deg,
    transparent 70deg 202deg,
    #4f9cf7 202deg 318deg,
    transparent 318deg 360deg
  ) !important;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 5px));
  animation: omniOverlaySpinnerSpin 3s linear infinite !important;
  opacity: 1 !important;
}

#loadingOverlay .loading-spinner__core {
  width: auto;
  height: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  box-shadow: none !important;
  color: #4f6ef7;
  font-size: 28px;
  line-height: 1;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

#loadingOverlay .loading-content h3 {
  margin: 0 0 18px;
  color: #0f172a;
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(2.2rem, 4.2vw, 4rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.065em;
}

#loadingOverlay .loading-subtitle {
  margin: 0 0 40px !important;
  max-width: 340px;
  min-height: 0 !important;
  color: #64748b !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
}

#loadingOverlay .loading-stage-wrap {
  width: 100%;
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 26px;
}

#loadingOverlay .loading-stage {
  margin: 0 !important;
  min-height: 0 !important;
  max-width: 320px;
  color: #475569 !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
}

#loadingOverlay .loading-actions {
  width: 100%;
  display: flex;
  justify-content: center;
}

#loadingOverlay .loading-cancel {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: #64748b;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: default;
  pointer-events: none;
  opacity: 0.88;
}

#loadingOverlay .loading-cancel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(203, 213, 225, 0.95);
  box-shadow: 0 0 0 4px rgba(241, 245, 249, 0.7);
}

#loadingOverlay .loading-brandmark {
  margin: 18px 0 0;
  text-align: center;
  color: rgba(148, 163, 184, 0.9);
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.32em;
  text-transform: uppercase;
}

#loadingOverlay.success .loading-content,
#loadingOverlay .loading-content.op-success {
  border-color: rgba(110, 231, 183, 0.42) !important;
  background: linear-gradient(180deg, rgba(248, 255, 252, 0.76), rgba(240, 253, 250, 0.72)) !important;
  box-shadow:
    0 48px 100px -16px rgba(16, 185, 129, 0.14),
    0 12px 24px rgba(16, 185, 129, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.52) !important;
}

#loadingOverlay.success .loading-content::before,
#loadingOverlay .loading-content.op-success::before {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
  animation: omniOverlayStripeShift 3.2s linear infinite;
}

#loadingOverlay.success .loading-kicker__dot,
#loadingOverlay .loading-content.op-success .loading-kicker__dot {
  background: #34d399;
  box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.14);
}

#loadingOverlay.success .loading-spinner::before,
#loadingOverlay .loading-content.op-success .loading-spinner::before {
  border-color: rgba(16, 185, 129, 0.22);
}

#loadingOverlay.success .loading-spinner::after,
#loadingOverlay .loading-content.op-success .loading-spinner::after {
  background: conic-gradient(from 0deg, #10b981 0deg 360deg) !important;
  animation: omniOverlaySuccessPulse 1.8s ease-in-out infinite !important;
}

#loadingOverlay.success .loading-spinner__core,
#loadingOverlay .loading-content.op-success .loading-spinner__core {
  opacity: 0;
  transform: scale(0.72);
}

#loadingOverlay.success .loading-content h3,
#loadingOverlay .loading-content.op-success h3,
#loadingOverlay.success .loading-subtitle,
#loadingOverlay .loading-content.op-success .loading-subtitle,
#loadingOverlay.success .loading-stage,
#loadingOverlay .loading-content.op-success .loading-stage {
  color: #0f8a6e !important;
}

#loadingOverlay.success .loading-actions,
#loadingOverlay .loading-content.op-success .loading-actions {
  display: none;
}

#loadingOverlay.success .loading-brandmark,
#loadingOverlay .loading-content.op-success + .loading-brandmark {
  color: rgba(20, 184, 166, 0.72);
}

@keyframes omniOverlaySuccessPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.9;
  }
}

@media (max-width: 768px) {
  #loadingOverlay .loading-shell {
    width: min(100%, 420px);
  }

  #loadingOverlay .loading-content {
    width: 100%;
    padding: 28px 22px 26px !important;
  }

  #loadingOverlay .loading-kicker {
    margin-bottom: 22px;
    padding: 9px 14px;
    font-size: 10px;
  }

  #loadingOverlay .loading-spinner {
    width: 84px !important;
    height: 84px !important;
    margin-bottom: 28px;
  }

  #loadingOverlay .loading-spinner__core {
    font-size: 24px;
  }

  #loadingOverlay .loading-content h3 {
    font-size: clamp(2rem, 9vw, 3.2rem);
    margin-bottom: 16px;
  }

  #loadingOverlay .loading-subtitle {
    font-size: 17px;
    margin-bottom: 34px !important;
  }

  #loadingOverlay .loading-stage-wrap {
    min-height: 58px;
    margin-bottom: 22px;
  }

  #loadingOverlay .loading-stage {
    font-size: 14px;
  }

  #loadingOverlay .loading-brandmark {
    margin-top: 16px;
    font-size: 9px;
    letter-spacing: 0.28em;
  }
}

@media (prefers-reduced-motion: reduce) {
  #loadingOverlay .loading-spinner::after,
  #loadingOverlay .loading-spinner__core,
  #loadingOverlay .loading-content::before {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   OmniPostr Generation Overlay Reskin
   Final cascade winner (must sit after legacy success blocks)
   ========================================================================== */

#loadingOverlay.loading-overlay {
  opacity: 0;
  visibility: hidden;
  background:
    radial-gradient(1100px 700px at 14% 8%, rgba(28, 77, 215, 0.16), transparent 58%),
    radial-gradient(980px 620px at 84% 10%, rgba(255, 122, 89, 0.13), transparent 60%),
    radial-gradient(1100px 720px at 50% 110%, rgba(129, 155, 255, 0.14), transparent 62%),
    rgba(241, 245, 249, 0.36) !important;
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  animation: omniOverlayBackdropDrift 18s ease-in-out infinite;
  transition: opacity 0.42s ease, visibility 0.42s ease;
}

#loadingOverlay.loading-overlay.active {
  display: flex !important;
  opacity: 1;
  visibility: visible;
}

#loadingOverlay.loading-overlay.fade-out {
  opacity: 0;
  visibility: hidden;
}

#loadingOverlay.loading-overlay::before {
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, 0.28), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  opacity: 0.92;
}

#loadingOverlay.loading-overlay::after {
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.02), rgba(15, 23, 42, 0.08));
}

#loadingOverlay .loading-content {
  width: min(100%, 430px);
  min-height: 0 !important;
  padding: 30px 28px 24px !important;
  justify-content: flex-start !important;
  border-radius: 6px !important;
  border: 1px solid rgba(226, 232, 240, 0.82) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.72)) !important;
  box-shadow:
    0 24px 80px rgba(15, 23, 42, 0.14),
    0 12px 36px rgba(28, 77, 215, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}

#loadingOverlay .loading-content::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, #1c4dd7 0%, #819bff 42%, #ff7a59 72%, #1c4dd7 100%);
  background-size: 200% 100%;
  animation: omniOverlayStripeShift 6s linear infinite;
}

#loadingOverlay .loading-content::after {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34);
}

#loadingOverlay .loading-kicker {
  margin: 2px 0 20px;
  padding: 8px 14px;
  background: rgba(248, 250, 252, 0.88);
  border: 1px solid rgba(226, 232, 240, 0.72);
  color: #64748b;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.18em;
}

#loadingOverlay .loading-kicker__dot {
  background: linear-gradient(135deg, #1c4dd7 0%, #819bff 100%);
  box-shadow: 0 0 0 4px rgba(129, 155, 255, 0.12);
}

#loadingOverlay .loading-spinner {
  width: 88px !important;
  height: 88px !important;
  margin: 0 0 18px;
  background: conic-gradient(from 0deg, #1c4dd7 0%, #819bff 26%, #ff7a59 58%, #1c4dd7 100%) !important;
  box-shadow:
    0 16px 36px rgba(28, 77, 215, 0.16),
    0 0 0 12px rgba(129, 155, 255, 0.08) !important;
  animation:
    omniOverlaySpinnerSpin 1.35s linear infinite,
    omniOverlaySpinnerPulse 3.1s ease-in-out infinite !important;
}

#loadingOverlay .loading-spinner::after {
  inset: -10px !important;
  background: radial-gradient(circle, rgba(129, 155, 255, 0.2), transparent 68%) !important;
  opacity: 0.9 !important;
}

#loadingOverlay .loading-spinner__core {
  width: 56px;
  height: 56px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.92));
  color: #1c4dd7;
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 24px;
  box-shadow:
    inset 0 0 0 1px rgba(226, 232, 240, 0.82),
    0 10px 22px rgba(148, 163, 184, 0.16);
}

#loadingOverlay .loading-content h3 {
  margin: 0 0 10px;
  color: #1f2937;
  font-family: "Plus Jakarta Sans", "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: clamp(1.85rem, 2vw, 2.15rem);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.04em;
}

#loadingOverlay .loading-content p {
  min-height: 2.8em !important;
  max-width: 30ch;
  color: #475569 !important;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.98rem;
  font-weight: 500;
  line-height: 1.55;
}

#loadingOverlay .loading-footer {
  margin-top: 18px;
  color: #64748b;
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

#loadingOverlay .loading-footer__line {
  background: linear-gradient(90deg, rgba(129, 155, 255, 0), rgba(129, 155, 255, 0.9), rgba(129, 155, 255, 0));
}

#loadingOverlay.success .loading-content,
#loadingOverlay .loading-content.op-success {
  border-color: rgba(16, 185, 129, 0.26) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(236, 253, 245, 0.76)) !important;
  box-shadow:
    0 24px 80px rgba(5, 150, 105, 0.12),
    0 12px 36px rgba(16, 185, 129, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

#loadingOverlay.success .loading-content::before,
#loadingOverlay .loading-content.op-success::before {
  background: linear-gradient(90deg, #10b981 0%, #34d399 44%, #6ee7b7 72%, #10b981 100%);
}

#loadingOverlay.success .loading-spinner,
#loadingOverlay .loading-content.op-success .loading-spinner {
  background: conic-gradient(from 0deg, #10b981 0%, #34d399 45%, #0f766e 100%) !important;
  box-shadow:
    0 16px 36px rgba(16, 185, 129, 0.16),
    0 0 0 12px rgba(16, 185, 129, 0.08) !important;
}

#loadingOverlay.success .loading-spinner::after,
#loadingOverlay .loading-content.op-success .loading-spinner::after {
  background: radial-gradient(circle, rgba(16, 185, 129, 0.22), transparent 68%) !important;
}

#loadingOverlay.success .loading-spinner__core,
#loadingOverlay .loading-content.op-success .loading-spinner__core {
  color: #059669;
}

#loadingOverlay.success .loading-kicker__dot,
#loadingOverlay .loading-content.op-success .loading-kicker__dot {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.12);
}

#loadingOverlay.success .loading-content h3,
#loadingOverlay .loading-content.op-success h3 {
  color: #047857 !important;
}

#loadingOverlay.success .loading-content p,
#loadingOverlay .loading-content.op-success p,
#loadingOverlay.success .loading-footer,
#loadingOverlay .loading-content.op-success .loading-footer {
  color: #0f766e !important;
}

@media (max-width: 768px) {
  #loadingOverlay .loading-content {
    width: min(100%, 390px);
    padding: 26px 20px 20px !important;
  }

  #loadingOverlay .loading-spinner {
    width: 76px !important;
    height: 76px !important;
  }

  #loadingOverlay .loading-spinner__core {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }

  #loadingOverlay .loading-content h3 {
    font-size: 1.62rem;
  }

  #loadingOverlay .loading-content p {
    max-width: 26ch;
    font-size: 0.94rem;
  }
}

/* ==========================================================================
   Generation Overlay Hotfix 2
   Final cascade winner for card polish + cancel hover
   ========================================================================== */

#loadingOverlay .loading-content {
  padding-top: 42px !important;
}

#loadingOverlay .loading-spinner {
  margin-top: 4px;
}

#loadingOverlay .loading-content h3 {
  color: #0f172a !important;
}

#loadingOverlay .loading-subtitle {
  color: #64748b !important;
}

#loadingOverlay .loading-stage {
  color: #475569 !important;
}

#loadingOverlay .loading-actions {
  display: flex;
}

#loadingOverlay .loading-cancel {
  pointer-events: auto;
  cursor: pointer;
  opacity: 1;
  transition: color 0.2s ease, opacity 0.2s ease;
}

#loadingOverlay .loading-cancel:hover,
#loadingOverlay .loading-cancel:focus-visible {
  color: #334155;
  outline: none;
}

#loadingOverlay .loading-cancel:hover .loading-cancel__dot,
#loadingOverlay .loading-cancel:focus-visible .loading-cancel__dot {
  background: #ef4444;
  box-shadow:
    0 0 0 4px rgba(254, 226, 226, 0.78),
    0 0 16px rgba(239, 68, 68, 0.32);
  animation: omniOverlayCancelPulse 0.8s ease-in-out infinite;
}

#loadingOverlay.success .loading-content::before,
#loadingOverlay .loading-content.op-success::before {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%) !important;
}

#loadingOverlay.success .loading-spinner::before,
#loadingOverlay .loading-content.op-success .loading-spinner::before {
  border-color: rgba(16, 185, 129, 0.26) !important;
}

#loadingOverlay.success .loading-spinner::after,
#loadingOverlay .loading-content.op-success .loading-spinner::after {
  background: conic-gradient(from 0deg, #10b981 0deg 360deg) !important;
}

#loadingOverlay.success .loading-content h3,
#loadingOverlay .loading-content.op-success h3 {
  color: #0f8a6e !important;
}

#loadingOverlay.success .loading-subtitle,
#loadingOverlay .loading-content.op-success .loading-subtitle,
#loadingOverlay.success .loading-stage,
#loadingOverlay .loading-content.op-success .loading-stage {
  color: #15806d !important;
}

@keyframes omniOverlayCancelPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}