/* ==========================================================================
   巨力化学 "心声·聚力" 草坪音乐会 —— 公共主题 (橙色)
   ========================================================================== */

:root {
  --brand:        #F5820A;   /* 主橙 */
  --brand-deep:   #E85D04;   /* 深橙 */
  --brand-2:      #FF9E2C;   /* 亮橙 */
  --peach:        #FFC98A;   /* 浅橙 */
  --cream:        #FFF3E4;   /* 奶橙 */
  --ink:          #6B2A0E;   /* 深棕文字 */
  --ink-soft:     #9A5230;
  --gold:         #FFD34E;
  --white:        #ffffff;
  --shadow:       0 10px 30px rgba(180, 70, 0, .18);
  --radius:       18px;
  --font: "PingFang SC","Microsoft YaHei","Hiragino Sans GB",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* 橙色渐变大背景 */
.bg-warm {
  background:
    radial-gradient(1200px 700px at 12% 8%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(900px 900px at 92% 96%, rgba(232,93,4,.45), transparent 55%),
    linear-gradient(135deg, #FFB35C 0%, #FF8A2B 42%, #F5720A 100%);
}

/* 唱片 / 声波 装饰 (纯 CSS) */
.deco-rings {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.deco-rings::before,
.deco-rings::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.25);
}
.deco-rings::before { width: 60vmax; height: 60vmax; right: -18vmax; top: -10vmax;
  box-shadow: 0 0 0 4vmax rgba(255,255,255,.06), inset 0 0 0 6vmax rgba(255,255,255,.05); }
.deco-rings::after  { width: 34vmax; height: 34vmax; right: -4vmax;  top: 8vmax;
  border-color: rgba(255,255,255,.35); }

/* 按钮 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4em;
  border: none; cursor: pointer; font-family: inherit; font-weight: 700;
  padding: .85em 1.6em; border-radius: 999px; font-size: 1rem;
  background: var(--white); color: var(--brand-deep);
  box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease;
  text-decoration: none;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: linear-gradient(135deg, #FF8A2B, #E85D04); color: #fff; }
.btn-ghost   { background: rgba(255,255,255,.18); color: #fff; box-shadow: none; border: 1.5px solid rgba(255,255,255,.6); }
.btn-block   { display: flex; width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* logo 徽标 (原创装饰, 非任何真实企业标志) */
.emblem {
  width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em;
}

/* 通用卡片 */
.card {
  background: rgba(255,255,255,.96);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* 声波条动画 */
.wave { display: inline-flex; align-items: flex-end; gap: 3px; height: 1em; }
.wave i {
  width: 3px; background: currentColor; border-radius: 2px;
  animation: wave 1s ease-in-out infinite;
}
.wave i:nth-child(1){height:40%; animation-delay:-.9s}
.wave i:nth-child(2){height:80%; animation-delay:-.7s}
.wave i:nth-child(3){height:55%; animation-delay:-.5s}
.wave i:nth-child(4){height:100%;animation-delay:-.3s}
.wave i:nth-child(5){height:65%; animation-delay:-.1s}
@keyframes wave { 0%,100%{transform:scaleY(.4)} 50%{transform:scaleY(1)} }