/* Base fonts and glass look inspired by 参考.html */
* { font-family: 'Noto Sans SC', system-ui, -apple-system, 'Segoe UI', Roboto, 'PingFang SC', 'Noto Sans CJK SC', 'Microsoft Yahei', sans-serif; }
.hero-title { font-family: 'Noto Serif SC', serif; }

/* Molecular background image + dark overlay for readability */
.molecular-bg {
  background-image: url('https://vip.123pan.cn/1816125706/yk6baz03t0l000d7w33ft94f042h8iraDIYPAqevAIUOApxPDwYvAF==.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
}
.molecular-bg::after{
  content:"";
  position: fixed;
  inset:0;
  background: rgba(0,0,0,.55);
  pointer-events:none;
  z-index: 0;
}
.molecular-bg > * { position: relative; z-index: 1; }

/* Glass utilities */
.glass-card {
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.glass-input {
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
}
.glass-input::placeholder{ color: rgba(255,255,255,.7); }
.glass-input:focus{
  background: rgba(255,255,255,0.24);
  border-color: rgba(59,130,246,0.55);
  box-shadow: 0 0 0 3px rgba(59,130,246,0.18);
  outline: none;
}

.glass-chip {
  @apply px-3 py-1.5 rounded-lg text-sm;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.28);
}
.glass-cta {
  background: rgba(59,130,246,0.18);
  border: 1px solid rgba(59,130,246,0.45);
}
.glass-cta:hover{
  background: rgba(59,130,246,0.28);
}

/* Loading spinner */
.loading-spinner{
  border: 2px solid rgba(255,255,255,0.35);
  border-top: 2px solid #3b82f6;
  border-radius: 9999px;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  display: inline-block;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Minimal particle dots */
.particle-container{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.particle{
  position:absolute; width:4px; height:4px; border-radius:50%;
  background: rgba(59,130,246,0.4);
  animation: float 6s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%     { transform: translateY(-20px) rotate(180deg); }
}

/* === DENSITY & UNIFIED GLASS === */

:root{
  --radius: 14px;
  --glass-bg: rgba(255,255,255,0.12);
  --glass-border: rgba(255,255,255,0.25);
  --glass-input-bg: rgba(255,255,255,0.18);
  --glass-input-border: rgba(255,255,255,0.35);
}

/* Unified rounded corner class */
.rounded-uniform { border-radius: var(--radius); }

/* Liquid glass style normalization */
.glass-card, .glass-input, .glass-chip, .glass-cta {
  border-radius: var(--radius) !important;
}

.glass-card {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
}

.glass-input {
  background: var(--glass-input-bg);
  border: 1px solid var(--glass-input-border);
}

/* Denser table rows */
#props-table th, #props-table td {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Denser chips/buttons */
.glass-chip { padding: 6px 10px !important; }
.glass-cta { padding: 10px 14px !important; }

/* Compact hero paragraph line-height */
header p { line-height: 1.55; }

/* Make settings drawer slightly narrower on small screens */
@media (max-width: 1024px){
  #settingsSidebar { width: 18rem; }
}