/* music.aiyongya.com — component classes only (utilities from Tailwind v4 browser build) */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif; }
a { text-decoration: none; color: inherit; }
button { cursor: pointer; }
video { max-width: 100%; }
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

/* create mode buttons */
.mode-btn { padding: .625rem; border-radius: .75rem; border: 1px solid #e5e7eb; background: #fff; font-weight: 700; font-size: .875rem; color: #4b5563; transition: all .2s; }
.mode-btn.active { background: linear-gradient(135deg,#ec4899,#f97316); color: #fff; border-color: transparent; box-shadow: 0 4px 12px -2px rgba(236,72,153,.4); }
.mode-panel { animation: fadeIn .25s ease; }

/* form */
.blk-label { display: block; font-size: .8125rem; font-weight: 700; color: #374151; margin-bottom: .5rem; }
.blk-input { width: 100%; padding: .75rem; border: 1px solid #e5e7eb; border-radius: .75rem; font-size: .9375rem; background: #fff; transition: border .2s; font-family: inherit; }
.blk-input:focus { outline: none; border-color: #ec4899; box-shadow: 0 0 0 3px rgba(236,72,153,.1); }

/* style chips */
.chip { padding: .375rem .75rem; border-radius: 9999px; border: 1px solid #e5e7eb; background: #fff; font-size: .75rem; color: #4b5563; transition: all .15s; }
.chip:hover { border-color: #f9a8d4; color: #db2777; }
.chip-on { background: linear-gradient(135deg,#ec4899,#f97316) !important; color: #fff !important; border-color: transparent !important; }
.tagchip { padding: .25rem .625rem; border-radius: 9999px; background: linear-gradient(135deg,#ec4899,#f97316); color: #fff; font-size: .75rem; font-weight: 700; cursor: pointer; }
.tray-tab { padding: .375rem .875rem; border-radius: 9999px; border: 1px solid #e5e7eb; background: #fff; font-size: .75rem; font-weight: 700; color: #6b7280; }
.tray-tab.active { background: #111827; color: #fff; border-color: #111827; }

/* model select */
.model-opt { padding: .75rem .5rem; border-radius: .75rem; border: 1px solid #e5e7eb; background: #fff; text-align: center; transition: all .2s; }

/* misc rows */
.feat-row { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: .625rem; font-size: .875rem; color: #4b5563; transition: all .15s; }
.feat-row:hover { background: #fdf2f8; color: #db2777; }
.lab-item { display: block; padding: .5rem 1rem; font-size: .875rem; color: #374151; transition: all .15s; white-space: nowrap; }
.lab-item:hover { background: #fdf2f8; color: #db2777; }

/* pricing */
.pk-card { background: #fff; border-radius: 1.25rem; border: 1px solid #f3f4f6; padding: 1.75rem 1.5rem; text-align: center; transition: all .25s; position: relative; }
.pk-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px -12px rgba(236,72,153,.2); }
.pk-card.hot { border: 2px solid #ec4899; }
.pk-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg,#ec4899,#f97316); color: #fff; font-size: .75rem; font-weight: 800; padding: .25rem .875rem; border-radius: 9999px; }
.pk-price { font-size: 2rem; font-weight: 900; }
.pk-unit { font-size: .875rem; color: #9ca3af; }
.pk-cta { display: block; width: 100%; padding: .75rem; border-radius: .75rem; color: #fff; font-weight: 800; background: linear-gradient(135deg,#ec4899,#f97316); margin-top: 1.25rem; transition: opacity .2s; border: none; }
.pk-cta:hover { opacity: .9; }

/* cards */
.hall-card { background: #fff; border-radius: 1rem; border: 1px solid #f3f4f6; overflow: hidden; transition: all .25s; }
.hall-card:hover { transform: translateY(-3px); box-shadow: 0 12px 24px -8px rgba(236,72,153,.18); }
.market-card { background: #fff; border-radius: 1rem; border: 1px solid #f3f4f6; overflow: hidden; transition: all .25s; }

/* studio chat */
.chat-msg { max-width: 78%; padding: .7rem 1rem; border-radius: 1rem; font-size: .875rem; line-height: 1.55; }
.chat-msg.bot { background: #f3f4f6; color: #374151; border-top-left-radius: .25rem; }
.chat-msg.me { background: linear-gradient(135deg,#ec4899,#f97316); color: #fff; margin-left: auto; border-top-right-radius: .25rem; }

/* spin loader */
.animate-spin { display: inline-block; border: 2px solid #fce7f3; border-top-color: #ec4899; border-radius: 50%; width: 1.25rem; height: 1.25rem; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none; } }

/* range slider */
input[type=range] { height: 4px; background: #e5e7eb; border-radius: 2px; appearance: none; }
input[type=range]::-webkit-slider-thumb { appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #ec4899; }

/* hall/market filter chips */
.cat-chip { padding: .5rem 1.1rem; border-radius: 9999px; border: 1px solid #fbcfe8; background: #fff; font-size: .8125rem; font-weight: 700; color: #be185d; transition: all .15s; white-space: nowrap; }
.cat-chip:hover { background: #fdf2f8; }
.cat-on { background: linear-gradient(135deg,#ec4899,#f97316) !important; color: #fff !important; border-color: transparent !important; }
.sort-chip { padding: .375rem .9rem; border-radius: 9999px; background: #f3f4f6; font-size: .8125rem; font-weight: 700; color: #4b5563; transition: all .15s; }
.sort-chip:hover { background: #e5e7eb; }
.sort-on { background: #111827 !important; color: #fff !important; }
.mini-btn { padding: .25rem .7rem; border-radius: 9999px; border: 1px solid #e5e7eb; background: #fff; font-size: .6875rem; font-weight: 700; color: #6b7280; transition: all .15s; }
.mini-btn:hover { border-color: #f9a8d4; color: #db2777; }
.mini-on { background: linear-gradient(135deg,#ec4899,#f97316) !important; color: #fff !important; border-color: transparent !important; }

/* ============ typography system (原站式框架结构感) ============ */
.eyebrow { font-size: 11px; font-weight: 900; letter-spacing: .22em; text-transform: uppercase; color: #d4d4d8; margin-bottom: 6px; }
.eyebrow-pink { color: #f9a8d4; }
.display-title { font-size: 2rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.15; color: #111827; }
@media (min-width: 640px) { .display-title { font-size: 2.5rem; } }
.display-sub { font-size: .9375rem; color: #6b7280; margin-top: 8px; letter-spacing: .01em; }
.section-label { font-size: 1.125rem; font-weight: 900; color: #111827; display: flex; align-items: center; gap: 8px; }
.section-label::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: linear-gradient(135deg,#ec4899,#f97316); display: inline-block; }
.num-figure { font-variant-numeric: tabular-nums; font-weight: 900; }
.card-title { font-weight: 800; letter-spacing: -0.01em; }