/* LoShu Grid Generator v1.9.6 styles */
#loshu-generator { max-width: 720px; margin: 24px auto; font-family: inherit; text-align: center; padding: 0 12px; }
.loshu-field { max-width: 420px; margin: 0 auto; }
.loshu-label { font-size: 15px; margin: 12px 0; font-weight: 600; text-align: center; display:block; }
.loshu-input { width: 100%; padding: 10px 12px; border: 1px solid #999; border-radius: 6px; background: transparent; box-sizing: border-box; font-size: 15px; }
.loshu-buttons { margin-top: 12px; display:flex; justify-content:center; gap:12px; }
.loshu-btn { padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer; font-weight:600; font-size:14px; transition: background .12s ease, transform .08s ease; }
.loshu-btn.primary { background: #0b1220 !important; color: #fff !important; }
.loshu-btn.ghost { background: #0b1220 !important; color: #fff !important; opacity: 0.12; }
.loshu-btn:hover { transform: translateY(-1px); }
.loshu-btn.primary:hover { background: #07101a !important; }
.loshu-btn.ghost:hover { opacity: 0.18; }
#loshu-results { margin-top: 18px; text-align: left; }
.loshu-section-title { display:none; margin-top:18px; font-size:20px; font-weight:700; text-align:center; }
#loshu-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:0; width:100%; max-width:420px; margin:10px auto 18px; border:2px solid #000; background:#fff; }
.loshu-cell { border:1px solid #000; padding:18px 6px; min-height:60px; display:flex; align-items:center; justify-content:center; font-size:16px; }
.loshu-cell span { display:inline-block; }
.namank { color:#b91c1c; font-weight:700; margin-left:6px; }
.loshu-text, .loshu-pattern { text-align:justify; font-size:15px; line-height:1.6; margin-top:8px; }
.loshu-pattern { border-top:1px dashed #e5e7eb; padding-top:12px; margin-top:14px; }

/* responsive grid */
@media (max-width:600px) {
  .loshu-field { max-width: 320px; }
  .loshu-label { font-size: 14px; margin: 12px 0; }
  .loshu-btn { font-size:13px; padding:8px 12px; }
  .loshu-section-title { font-size:16px; }
  #loshu-grid { max-width:320px; }
  .loshu-cell { padding:12px 6px; min-height:48px; font-size:14px; }
}

/* fade-in and stagger */
.fade-in { animation: loshuFade .42s ease forwards; opacity:0; }
@keyframes loshuFade { from { opacity: 0; transform: translateY(8px);} to { opacity:1; transform: translateY(0);} }



/* === Updated Card UI for Shortcode Frontend (v1.9.5) === */
.loshu-card-container {
  max-width: 640px;
  margin: 20px auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 24px;
  box-sizing: border-box;
}

.loshu-card-container input[type="text"],
.loshu-card-container input[type="number"],
.loshu-card-container select {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}

.loshu-card-container button,
.loshu-card-container input[type="submit"] {
  background-color: #1d2d06;
  color: #fff;
  padding: 10px 24px;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease-in-out, transform 0.2s ease;
}

.loshu-card-container button:hover,
.loshu-card-container input[type="submit"]:hover {
  background-color: #263d08;
  transform: translateY(-1px);
}

.loshu-card-container label {
  font-weight: 500;
  margin-bottom: 8px;
  display: block;
  font-family: inherit;
}

@media (max-width: 640px) {
  .loshu-card-container {
    padding: 16px;
    margin: 10px;
  }
  .loshu-card-container button {
    width: 100%;
  }
}