/* assets/oddform.css */
#oddform-root { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial; color: #e5e7eb; }
#oddform-root .of-wrap { background:#0c0c0c; border:0px solid #000000; border-radius:16px; padding:20px; max-width:820px; margin:20px auto; box-shadow:0 6px 18px rgba(0,0,0,.35); }
#oddform-root .of-title { font-size:22px; font-weight:700; margin:0 0 10px; color:#f9fafb; }
#oddform-root .of-sub { font-size:14px; color:#9ca3af; margin:0 0 16px; }
#oddform-root .of-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; margin:14px 0 6px; }
#oddform-root .of-card { background:#121821; border:1px solid #243042; border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:10px; }
#oddform-root .of-card h4 { margin:0; font-size:15px; color:#f3f4f6; }
#oddform-root .of-card p { margin:0; font-size:13px; color:#cbd5e1; }
#oddform-root .of-btn { cursor:pointer; font-size:13px; padding:10px 12px; border-radius:10px; border:1px solid #2b3950; background:#0f172a; color:#e5e7eb; transition:transform .04s ease, background .2s ease; }
#oddform-root .of-btn:hover { transform:translateY(-1px); }
#oddform-root .of-btn[disabled] { opacity:.55; cursor:not-allowed; }
#oddform-root .of-status { font-size:13px; color:#93c5fd; margin-top:4px; }
#oddform-root .of-result { margin-top:16px; background:#0f141c; border:1px solid #223045; border-radius:12px; padding:14px; }
#oddform-root .of-result h4 { margin:0 0 6px; color:#f3f4f6; font-size:15px; }
#oddform-root .of-result pre { margin:0; white-space:pre-wrap; word-wrap:break-word; font-size:13px; color:#e5e7eb; }
#oddform-root .of-row { display:flex; gap:8px; margin-top:10px; }
#oddform-root .of-input { flex:1; border-radius:10px; border:1px solid #2b3950; background:#0f172a; color:#e5e7eb; padding:10px 12px; font-size:13px; }
#oddform-root .of-meta { display:flex; gap:10px; align-items:center; margin:6px 0 8px; }
#oddform-root .of-pill { font-size:12px; border:1px solid #2b3950; border-radius:9999px; padding:6px 10px; background:#121821; color:#e5e7eb; }
#oddform-root .of-pill.online { border-color:#166534; background:#0b2814; color:#bbf7d0; }
#oddform-root .of-pill.offline { border-color:#7f1d1d; background:#2a0f13; color:#fecaca; }
#oddform-root .of-runin { font-size:12px; color:#9ca3af; }
#oddform-root .w-form {background-color: #cc3789; /* replace with your desired color */}
/* Step 1: inherit site typography + color */
#oddform-root {
  font-family: inherit !important;   /* override the system-sans stack above */
  color: currentColor !important;    /* use the page’s text color */
  line-height: 1.6;                  /* match paragraph rhythm */
}
/* Step 2: match SP/CTRL typography + color */
#oddform-root .of-title {
  font-size: 1.25rem !important;   /* ~20px, same as case copy headings */
  line-height: 1.6;
  color: #ffffff !important;       /* light pink/white text */
}

#oddform-root .of-sub,
#oddform-root .of-card p,
#oddform-root .of-result pre {
  font-size: 1rem !important;      /* match body copy size */
  line-height: 1.6;
  color: #ffc1dd  !important;       /* unify text color with site */
}
/* Step 3: SP/CTRL color accents */
#oddform-root .of-card {
  background: #3d203d !important;       /* deep purple background */
  border: 1px solid #4b1248 !important; /* dark purple border */
}

#oddform-root .of-btn {
  background-color: #2d102c !important; /* dark purple button */
  color: #ffc1dd  !important;            /* white text */
  border: none !important;
}

#oddform-root .of-btn:hover,
#oddform-root .of-btn:focus {
  background-color: #6a1b6a !important; /* lighter purple on hover/focus */
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}
/* Step 4: align Oddform container with SP/CTRL layout */
#oddform-root .of-wrap {
  border-radius: 0 !important;     /* no rounded corners */
  max-width: none !important;      /* allow full width */
  width: 100% !important;          /* stretch like other boxes */
}
/* Step 5: phone layout & tap targets */
@media (max-width: 375px) {
  #oddform-root .of-grid { grid-template-columns: 1fr; gap: 10px; }
  #oddform-root .of-btn   { padding: 12px 14px; min-height: 44px; } /* ≥44px is WCAG-friendly */
  #oddform-root .of-input { min-height: 44px; }
}