/* Blog Idea Generator (v2) */
.big-wrap{
  font-family: var(--big-font);
  text-align: var(--big-align);
}
.big-card{
  background: var(--big-bg);
  border-radius: calc(var(--big-radius) * 1px);
  padding: calc(var(--big-card-pad) * 1px);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 80px rgba(0,0,0,.45);
  position: relative;
	padding:30px!important;
  overflow: hidden;
}
.big-card:before{
  content:'';
  position:absolute; inset:-2px;
  background: radial-gradient(900px 500px at 20% 10%, rgba(0,212,255,.16), transparent 55%),
              radial-gradient(800px 450px at 80% 15%, rgba(86,120,255,.18), transparent 55%);
  pointer-events:none;
}
.big-card>*{ position:relative; z-index:1; }

.big-title{
  margin: 0 0 8px 0;
  font-size: clamp(34px, 4vw, 68px);
  line-height: 1.05;
  color: rgba(255,255,255,.96);
  letter-spacing: -0.02em;
}
.big-sub{
  margin: 0 0 18px 0;
  color: var(--big-muted);
  font-size: 16px;
}

.big-controls{
  display: grid;
  gap: calc(var(--big-row-gap) * 1px);
  align-items: end;
}
@media (min-width: 900px){
  .big-controls{
    grid-template-columns: 1fr 320px 210px;
    gap: 14px;
  }
}

.big-field{ min-width: 0; }
.big-label{
  display:block;
  margin: 10px 0 8px 0;
  font-size: 14px;
  color: var(--big-label);
}
.big-label-ghost{ opacity: 0; }

.big-input, .big-select{
  width: 100%;
  height: 54px;

  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: var(--big-value);
  padding: 0 14px;
  outline: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
}
.big-select{ padding-right: 38px; }

.big-input:focus, .big-select:focus{
  border-color: rgba(0,212,255,.55);
  box-shadow: 0 0 0 4px rgba(0,212,255,.12);
}

.big-btn{
  width: 100%;
  height: 54px;

  border: 0;
background: linear-gradient(
  90deg,
  #1e7cff 0%,
  #3fc6ff 45%,
  #9cf06a 100%
);
  color: rgba(0,0,0,.90);
  font-weight: 700;
  font-size: 18px;
  cursor: pointer;
  white-space: nowrap;
}
.big-btn:disabled{ opacity: .55; cursor: not-allowed; }
.big-btn-ghost{
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  border: 1px solid rgba(255,255,255,.14);
}

.big-muted-note{
  margin-top: 12px;
  color: var(--big-muted);
  font-size: 14px;
}

.big-msg{
  margin-top: 2px;
  color: rgba(255,255,255,.90);
  min-height: 22px; /* reserves space to avoid CLS */
}
.big-msg.ok{ color: rgba(92, 255, 167, .95); }
.big-msg.err{ color: rgba(255, 120, 120, .95); }

.big-verify{
  margin-top: 14px;
  padding: 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
}
.big-verify-grid{
  display:grid;
  gap: 12px;
}
@media (min-width: 900px){
  .big-verify-grid{
    grid-template-columns: 1fr 210px 1fr 210px;
    align-items: end;
  }
}
.big-verify-msg{ margin-top: 10px; color: var(--big-muted); }

.big-results{
  margin-top: 5px;
  min-height: 260px; /* reserve to reduce CLS */
}
.big-results-empty{ min-height: 10px; }
.big-results-grid{
  display:grid;
  gap: calc(var(--big-result-gap) * 1px);
}
@media (min-width: 900px){
  .big-results-grid{ grid-template-columns: 1fr 1fr; }
}

.big-idea{
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  padding: 18px;
	margin:5px;
}
.big-idea h4{
  margin: 0 0 10px 0;
  font-size: 18px;
  color: rgba(255,255,255,.92);
  letter-spacing: .02em;
}
.big-idea h3{
  margin: 0 0 10px 0;
  font-size: 34px;
  line-height: 1.15;
  color: rgba(255,255,255,.96);
}
.big-idea p{
  margin: 0 0 12px 0;
  color: var(--big-muted);
  font-size: 14px;
}
.big-meta{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 10px 0 14px 0;
}
.big-pill{
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  color: rgba(255,255,255,.86);
  font-size: 13px;
}

.big-prompt-title{
  margin: 12px 0 8px 0;
  font-size: 18px;
  color: rgba(255,255,255,.92);
}
.big-prompt{
  white-space: pre-wrap;
  word-break: break-word;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  padding: 12px;
  color: rgba(255,255,255,.86);
  font-size: 13px;
}

/* Skeleton */
.big-skel{
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  padding: 18px;
}
.big-skel-line{
  height: 16px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  margin: 10px 0;
}