/*
  ============================================================
  ASTRACANA · WIDGET BUILDER — STYLES
  ============================================================
*/
.astr-widgets{
  --bg:#1B1235; --bg-soft:#2A1E4D; --gold:#D4AF37; --gold-dim:#9a7f2a;
  --ink:#FAF6EF; --ink-dim:#C9BFAE;
  font-family: Georgia, 'Times New Roman', serif; color: var(--ink);
  display:flex; flex-direction:column; align-items:center;
  padding:32px 20px 52px; text-align:center;
  background: radial-gradient(120% 90% at 50% 0%, var(--bg-soft) 0%, var(--bg) 55%, #14102a 100%);
  border:1px solid rgba(212,175,55,.28); border-radius:20px;
  box-shadow:0 24px 60px rgba(20,12,40,.22); margin:8px 0 24px;
}
.astr-widgets *{ box-sizing:border-box; margin:0; padding:0; }
.astr-widgets .astr-title{ font-size:clamp(1.8rem,5vw,2.6rem); letter-spacing:.04em; font-weight:normal; }
.astr-widgets .astr-star{ color:var(--gold); }
.astr-widgets .astr-subtitle{ margin-top:10px; color:var(--ink-dim); font-style:italic; max-width:600px; line-height:1.6; }
.astr-widgets .astr-honest{
  margin-top:22px; max-width:620px; text-align:left;
  border:1px dashed rgba(212,175,55,.5); border-radius:14px;
  background:rgba(212,175,55,.06); padding:14px 20px;
}
.astr-widgets .astr-honest-tag{
  display:inline-block; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold); border:1px solid var(--gold-dim); border-radius:999px; padding:4px 14px; margin-bottom:8px;
}
.astr-widgets .astr-honest p{ color:var(--ink-dim); font-size:.88rem; line-height:1.65; }
.astr-widgets .astr-widget{
  margin-top:26px; width:min(640px,100%);
  border:1px solid rgba(212,175,55,.3); border-radius:16px;
  background:rgba(255,255,255,.03); padding:26px 22px;
  display:flex; flex-direction:column; align-items:center;
}
.astr-widgets .astr-w-title{ color:var(--gold); font-size:1.4rem; letter-spacing:.04em; font-weight:normal; }
.astr-widgets .astr-w-desc{ margin-top:8px; color:var(--ink-dim); font-size:.92rem; line-height:1.6; max-width:520px; }
.astr-widgets .astr-w-desc a{ color:var(--gold); }
.astr-widgets .astr-w-preview{ margin-top:18px; width:100%; display:flex; justify-content:center; }
.astr-widgets .astr-mini{
  width:min(360px,100%); border:1px solid rgba(212,175,55,.5); border-radius:12px;
  background:radial-gradient(120% 100% at 50% 0%, #2A1E4D 0%, #1B1235 70%);
  padding:26px 22px; line-height:1.6;
}
.astr-widgets .astr-mini .astr-m-eyebrow{
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold-dim);
}
.astr-widgets .astr-mini .astr-m-big{ margin-top:8px; font-size:1.5rem; color:var(--gold); }
.astr-widgets .astr-mini .astr-m-sub{ margin-top:8px; color:var(--ink); font-size:.95rem; }
.astr-widgets .astr-mini .astr-m-note{ margin-top:6px; color:var(--ink-dim); font-style:italic; font-size:.85rem; }
.astr-widgets .astr-w-controls{ margin-top:16px; }
.astr-widgets .astr-w-controls label{ font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-dim); }
.astr-widgets .astr-w-controls select{
  margin-left:10px; padding:10px 16px; border-radius:999px; border:1px solid var(--gold-dim);
  background:rgba(255,255,255,.04); color:var(--ink); font-family:inherit; font-size:.9rem; cursor:pointer;
}
.astr-widgets .astr-w-controls select option{ color:#1B1235; }
.astr-widgets .astr-w-code{
  margin-top:14px; width:100%; padding:14px 16px; border-radius:12px;
  border:1px solid var(--gold-dim); background:rgba(0,0,0,.3);
  color:var(--ink-dim); font-family:ui-monospace, monospace; font-size:.78rem; line-height:1.6;
  resize:vertical;
}
.astr-widgets .astr-btn-row{ margin-top:16px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.astr-widgets .astr-btn{
  font-family:inherit; font-size:.95rem; letter-spacing:.08em; padding:13px 30px;
  border-radius:999px; cursor:pointer; border:1px solid var(--gold); text-decoration:none;
  background:transparent; color:var(--gold); transition:all .25s;
}
.astr-widgets .astr-btn:hover{ background:var(--gold); color:var(--bg); }
.astr-widgets .astr-btn.astr-primary{ background:var(--gold); color:var(--bg); }
.astr-widgets .astr-btn.astr-primary:hover{ filter:brightness(1.1); }
.astr-widgets .astr-note{ margin-top:26px; color:var(--ink-dim); font-size:.85rem; font-style:italic; max-width:580px; line-height:1.7; }
@media (max-width:480px){ .astr-widgets{ padding:16px 4px 40px; } }