:root{
  --snm-border: rgba(17,24,39,0.10);
  --snm-text: #0b1220;
  --snm-muted: rgba(17,24,39,0.62);
  --snm-shadow: 0 12px 30px rgba(2,6,23,0.10);
  --snm-radius: 16px;
  --snm-focus: rgba(59,130,246,0.22);
}
body{ background:#f5f7fb; }
.snmai-hero{
  background: radial-gradient(1200px 380px at 20% 0%, rgba(59,130,246,0.22), transparent 60%),
              radial-gradient(900px 360px at 80% 0%, rgba(168,85,247,0.16), transparent 55%),
              linear-gradient(180deg, #0b1020 0%, #121a33 100%);
  color:#fff; padding: 28px 0 26px; margin-bottom: 18px;
}
.snmai-hero__inner{ max-width:1180px; margin:0 auto; padding:0 16px; }
.snmai-hero__brand{ font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:12px; opacity:.85; }
.snmai-hero__title{ font-size:32px; line-height:1.1; margin:8px 0 0; letter-spacing:-0.02em; }
.snmai-hero__sub{ margin-top:8px; font-size:14px; opacity:.86; max-width:820px; }

.snmai-shell{ max-width:1180px; margin:0 auto; padding:0 16px 26px; }
.snmai-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.snmai-tool{
  display:block; padding:16px; border-radius:var(--snm-radius);
  background:rgba(255,255,255,0.9); border:1px solid var(--snm-border);
  text-decoration:none; color:var(--snm-text);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.snmai-tool:hover{ transform:translateY(-2px); box-shadow:var(--snm-shadow); border-color:rgba(59,130,246,0.22); }
.snmai-tool__icon{ width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(17,24,39,0.06);font-weight:900; }
.snmai-tool__name{ margin-top:10px; font-weight:900; letter-spacing:-0.01em; }
.snmai-tool__desc{ margin-top:6px; font-size:13px; color:var(--snm-muted); line-height:1.35; }

.snmai-two{ display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start; }
.snmai-pane{ background:rgba(255,255,255,0.92); border:1px solid var(--snm-border); border-radius:var(--snm-radius); box-shadow:0 1px 0 rgba(2,6,23,0.04); overflow:hidden; }
.snmai-pane__title{ padding:14px 14px 10px; font-weight:900; border-bottom:1px solid rgba(17,24,39,0.07); background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.86)); }
.snmai-controls{ padding:12px 14px; }
.snmai-controls__row{ display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.snmai-field{ display:flex; flex-direction:column; gap:6px; font-size:12px; color:var(--snm-muted); }
.snmai-select,.snmai-input{
  height:40px;border-radius:12px;border:1px solid rgba(17,24,39,0.14);
  padding:0 12px;background:#fff;color:var(--snm-text);outline:none;
}
.snmai-select:focus,.snmai-input:focus{ box-shadow:0 0 0 4px var(--snm-focus); border-color:rgba(59,130,246,0.35); }
.snmai-btn{ height:40px;border-radius:12px;padding:0 14px;border:1px solid rgba(17,24,39,0.12);background:#fff;color:var(--snm-text);font-weight:900;cursor:pointer; }
.snmai-btn--primary{ background:#111827;color:#fff;border-color:rgba(255,255,255,0.08); }
.snmai-textarea{
  width:100%;min-height:340px;border:0;padding:14px;resize:vertical;
  outline:none;font-size:14px;line-height:1.55;color:var(--snm-text);background:transparent;
}
.snmai-textarea:focus{ box-shadow:inset 0 0 0 4px var(--snm-focus); }
.snmai-hint{ padding:0 14px 14px; font-size:12px; color:var(--snm-muted); }

.snmai-out{ padding:12px 14px; border-top:1px solid rgba(17,24,39,0.07); }
.snmai-out__label{ font-size:12px; color:var(--snm-muted); font-weight:800; margin-bottom:6px; }
.snmai-out__body{ display:flex; gap:10px; align-items:stretch; }
.snmai-output{
  width:100%;border-radius:12px;border:1px solid rgba(17,24,39,0.12);
  background:#fff;padding:10px 12px;font-size:14px;line-height:1.45;outline:none;
  direction:ltr;text-align:left;
}
.snmai-output--single{ height:40px; }
textarea.snmai-output{ min-height:110px; resize:vertical; }
.snmai-copy{
  width:92px;border-radius:12px;border:1px solid rgba(17,24,39,0.12);
  background:rgba(17,24,39,0.06);font-weight:900;cursor:pointer;
}
.snmai-copy:hover{ background:rgba(17,24,39,0.10); }
.snmai-status{ padding:12px 14px; font-size:12px; color:var(--snm-muted); }
.snmai-status.is-err{ color:#b91c1c; }

.snmai-card{ max-width:760px;margin:16px auto;padding:14px;border-radius:14px;border:1px solid rgba(17,24,39,0.10);background:#fff; }
.snmai-card--warn{ border-color:rgba(185,28,28,0.22); }

@media (max-width:1020px){
  .snmai-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .snmai-two{ grid-template-columns:1fr; }
  .snmai-textarea{ min-height:260px; }
}
@media (max-width:520px){
  .snmai-grid{ grid-template-columns:1fr; }
  .snmai-hero__title{ font-size:26px; }
  .snmai-btn{ width:100%; }
}