/* ============================================================
   复古晶体管皮肤 skin-retro
   用法：在 index.html 里 styles.css 之后引入本文件
   <link rel="stylesheet" href="retro-skin.css?v=20260905-retro-v1" />
   作用域：body.retro-theme / .skin-retro（与现有 skin-city 同机制）
   ============================================================ */

.retro-theme {
  background: radial-gradient(120% 90% at 50% 0%, #232025 0%, #17161a 55%, #0f0e11 100%) !important;
}

.retro-theme .phone-shell {
  background: linear-gradient(180deg, #4a2d1c, #33200f 58%, #26170c);
  background-image:
    repeating-linear-gradient(93deg, rgba(0, 0, 0, .24) 0 2px, rgba(255, 226, 170, .05) 2px 4px, rgba(0, 0, 0, .11) 4px 9px),
    linear-gradient(180deg, #4a2d1c, #2a190d);
  color: #f2e3c3;
  box-shadow: 0 40px 70px rgba(0, 0, 0, .6);
  padding: 0 0 178px;
}

/* 全屏做旧颗粒 */
.retro-theme .phone-shell::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='0.55'/></svg>");
}

.skin-retro {
  --wood: #33200f;
  --wood-hi: #5a3a22;
  --gold: #c9992e;
  --gold-hi: #f2dfa6;
  --cream: #f2e4c2;
  --cream-dim: #b39d74;
  --lamp: #ffb347;
  font-family: "Noto Serif SC", "Songti SC", "PingFang SC", serif;
}

.skin-retro,
.skin-retro .page-title h1,
.skin-retro .section-head h2,
.skin-retro .station-name,
.skin-retro .info-row strong,
.skin-retro .profile-head h1,
.skin-retro .brand-title,
.skin-retro .hero-title,
.skin-retro .skin-settings h2 {
  color: var(--cream);
}

.skin-retro .station-sub,
.skin-retro .link-button,
.skin-retro .brand-subtitle,
.skin-retro .hero-meta,
.skin-retro .info-row span:first-child,
.skin-retro .mini-sub,
.skin-retro .empty-state {
  color: var(--cream-dim);
}

/* ---------- 顶部/底部 仿拉丝金属条 ---------- */
.skin-retro .top-bar {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: linear-gradient(180deg, #8e8578, #5d564c 45%, #3a352e);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .10) 0 1px, rgba(0, 0, 0, .10) 1px 3px);
  border-bottom: 1px solid rgba(0, 0, 0, .6);
  box-shadow: inset 0 1px 0 rgba(255, 246, 215, .3), 0 6px 14px rgba(0, 0, 0, .45);
}

.skin-retro .brand-mark {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f4e1ad, #a9812c 60%, #5c4213);
  box-shadow: inset 0 -1px 2px rgba(0, 0, 0, .6);
  opacity: 1;
}

.skin-retro .brand-title {
  font-family: "Barlow Condensed", "Helvetica Neue", sans-serif;
  font-size: 26px;
  letter-spacing: .16em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .6);
}

.skin-retro .brand-title span { color: var(--lamp); }

.skin-retro .brand-subtitle {
  font-size: 11px;
  letter-spacing: .28em;
  color: #d8c69c;
}

.skin-retro .icon-button {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  color: #4a3617;
  background: linear-gradient(180deg, #e7d3a3, #bc9d5f);
  box-shadow: 0 3px 0 #6f5827, 0 6px 10px rgba(0, 0, 0, .45);
}

.skin-retro .bottom-nav {
  background: linear-gradient(180deg, #6f675c, #3a352e 55%, #232019);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .09) 0 1px, rgba(0, 0, 0, .12) 1px 3px);
  border-top: 1px solid rgba(0, 0, 0, .6);
  box-shadow: inset 0 1px 0 rgba(255, 246, 215, .28);
}

.skin-retro .nav-item {
  color: #cbb994;
  font-size: 11px;
  letter-spacing: .14em;
}

.skin-retro .nav-item.active,
.skin-retro .nav-item.active .nav-icon { color: #ffca6e; }

/* ---------- 内容区左右留白（原 phone-shell padding 已移除） ---------- */
.skin-retro .page-title,
.skin-retro .search-box,
.skin-retro .chip-row,
.skin-retro .section-head,
.skin-retro .station-grid,
.skin-retro .station-row,
.skin-retro .card,
.skin-retro .form-card,
.skin-retro .hero-card,
.skin-retro .player-art,
.skin-retro .waveform,
.skin-retro .player-controls,
.skin-retro .volume-panel,
.skin-retro .source-category-section,
.skin-retro .result-limit-note,
.skin-retro .timer-ring,
.skin-retro .empty-state {
  margin-left: 16px;
  margin-right: 16px;
}

/* ---------- 老式刻度条：搜索槽 ---------- */
.skin-retro .search-box {
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(180deg, #221609, #332413);
  border: 1px solid rgba(232, 201, 124, .26);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .75);
}

.skin-retro .search-box input { color: var(--cream); }
.skin-retro .search-box input::placeholder { color: #8b7a58; }
.skin-retro .search-box .search-icon { color: #c0a978; }
.skin-retro .wave-icon { color: var(--lamp); }

/* ---------- 调谐窗（hero / player-art） ---------- */
.skin-retro .hero-card,
.skin-retro .player-art {
  background: linear-gradient(180deg, #2b2b25, #191914) !important;
  border: 1px solid rgba(232, 201, 124, .3);
  border-radius: 12px;
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, .85), 0 2px 0 rgba(255, 235, 190, .12);
  color: var(--cream);
  position: relative;
  overflow: hidden;
}

/* 刻度尺 + 橙红指针 */
.skin-retro .hero-card::before,
.skin-retro .player-art::before {
  content: "";
  position: absolute;
  left: 24px;
  right: 24px;
  top: 46px;
  height: 22px;
  background-image: repeating-linear-gradient(90deg, #efe0b6 0 1px, transparent 1px 9px);
  opacity: .55;
}

.skin-retro .hero-card::after,
.skin-retro .player-art::after {
  content: "";
  position: absolute;
  left: 47%;
  top: 38px;
  height: 42px;
  width: 2px;
  background: linear-gradient(180deg, #ff6a3d, #c22a12);
  box-shadow: 0 0 10px rgba(255, 90, 45, .85);
}

.skin-retro .hero-title {
  margin-top: 54px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: .03em;
}

.skin-retro .live-pill {
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(232, 201, 124, .35);
  color: var(--lamp);
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .2em;
  font-weight: 600;
}

/* ---------- 圆角复古按键 ---------- */
.skin-retro .primary-button,
.skin-retro .secondary-button,
.skin-retro .skin-choice button.active,
.skin-retro .chip.active,
.skin-retro .city-location-button {
  background: linear-gradient(180deg, #f0dcac, #c6a763);
  color: #3c2712;
  border: 0;
  box-shadow: 0 3px 0 #74582a, 0 7px 12px rgba(0, 0, 0, .5);
}

.skin-retro .chip,
.skin-retro .skin-choice button {
  min-height: 40px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(232, 201, 124, .22);
  color: #e6d4aa;
  box-shadow: none;
}

.skin-retro .chip.active { border-color: rgba(232, 201, 124, .5); }

.skin-retro .link-button {
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .18em;
}

.skin-retro .back-button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: #3c2712;
  background: linear-gradient(180deg, #e7d3a3, #bc9d5f);
  box-shadow: 0 3px 0 #6f5827;
}

.skin-retro .page-title h1 { letter-spacing: .06em; }

/* ---------- 分类铭牌 ---------- */
.skin-retro .source-category-card {
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255, 232, 186, .07), rgba(0, 0, 0, .28));
  border: 1px solid rgba(232, 201, 124, .18);
  box-shadow: none;
  color: var(--cream);
}

.skin-retro .source-category-card.active {
  background: linear-gradient(180deg, #5a3a22, #3a2412);
  border-color: rgba(232, 201, 124, .34);
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .18), 0 6px 14px rgba(0, 0, 0, .45);
}

.skin-retro .source-category-card span { color: var(--cream-dim); }

.skin-retro .source-category-card b {
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .14em;
  color: var(--lamp);
}

/* ---------- 电台行 / 卡片 ---------- */
.skin-retro .station-row,
.skin-retro .card,
.skin-retro .form-card,
.skin-retro .station-tile,
.skin-retro .result-limit-note {
  background: linear-gradient(180deg, rgba(255, 232, 186, .09), rgba(0, 0, 0, .28));
  border: 1px solid rgba(232, 201, 124, .22);
  border-radius: 11px;
  box-shadow: inset 0 1px 0 rgba(255, 240, 205, .14);
}

.skin-retro .station-logo,
.skin-retro .cover,
.skin-retro .mini-cover,
.skin-retro .avatar {
  background: linear-gradient(160deg, #e6cd96, #b28f4d) !important;
  color: #3c2712;
  border-radius: 8px;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, .35);
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .06em;
}

.skin-retro .avatar,
.skin-retro .mini-cover { border-radius: 50%; }

.skin-retro .tag {
  background: rgba(0, 0, 0, .32);
  border: 1px solid rgba(232, 201, 124, .22);
  color: #d8c69c;
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .12em;
}

.skin-retro .tag.ok {
  color: var(--lamp);
  border-color: rgba(255, 179, 71, .45);
}

.skin-retro .round-play,
.skin-retro .tile-play,
.skin-retro .play-float,
.skin-retro .mini-player .mini-toggle {
  color: #3c2712;
  background: linear-gradient(180deg, #f0dcac, #c09b52);
  box-shadow: 0 3px 0 #6f5426, 0 6px 10px rgba(0, 0, 0, .45);
}

/* ---------- VU 电平表 ---------- */
.skin-retro .waveform {
  padding: 12px 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, #241d17, #100c08);
  border: 1px solid rgba(0, 0, 0, .6);
  box-shadow: inset 0 0 18px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 235, 190, .12);
}

.skin-retro .bar {
  background: rgba(255, 196, 107, .28);
  border-radius: 1px;
}

.skin-retro .bar.on { background: linear-gradient(180deg, #ffc46b, #c07a20); }

/* ---------- 传输按键 ---------- */
.skin-retro .control-button {
  color: #3c2712;
  background: linear-gradient(180deg, #e9d5a5, #b7954f);
  box-shadow: 0 4px 0 #6f5827, 0 9px 14px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 250, 225, .6);
}

.skin-retro .control-button.main {
  width: 92px;
  height: 92px;
  background: radial-gradient(circle at 34% 26%, #fff0c8, #e0c17a 40%, #a67f2c 85%);
  box-shadow: 0 6px 0 #6a5024, 0 14px 24px rgba(0, 0, 0, .6), inset 0 2px 4px rgba(255, 255, 235, .6);
}

/* ---------- 音量：仿旋钮刻度滑轨 ---------- */
.skin-retro .volume-panel {
  padding: 14px;
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 232, 186, .07), rgba(0, 0, 0, .3));
  border: 1px solid rgba(232, 201, 124, .2);
  color: var(--cream-dim);
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .2em;
}

.skin-retro .volume-panel input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 26px;
  background: transparent;
}

.skin-retro .volume-panel input[type="range"]::-webkit-slider-runnable-track {
  height: 26px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, #efe0b6 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #221609, #3a2614);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .8);
}

.skin-retro .volume-panel input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 30px;
  margin-top: -2px;
  border-radius: 3px;
  background: linear-gradient(180deg, #f2dfa6, #a97c22);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 250, 225, .7);
}

.skin-retro .volume-panel input[type="range"]::-moz-range-track {
  height: 26px;
  border-radius: 4px;
  background:
    repeating-linear-gradient(90deg, #efe0b6 0 1px, transparent 1px 9px),
    linear-gradient(180deg, #221609, #3a2614);
}

.skin-retro .volume-panel input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 30px;
  border: 0;
  border-radius: 3px;
  background: linear-gradient(180deg, #f2dfa6, #a97c22);
}

/* ---------- 拨动开关 ---------- */
.skin-retro .switch {
  width: 44px;
  height: 22px;
  border-radius: 11px;
  background: #1c1208;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .8);
}

.skin-retro .switch::after {
  width: 16px;
  height: 16px;
  background: #8b7a58;
}

.skin-retro .switch.on {
  background: linear-gradient(180deg, #c9a55e, #7d6027);
}

.skin-retro .switch.on::after {
  background: radial-gradient(circle at 35% 30%, #fff6dd, #d8bd85);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

/* ---------- 列表 / 信息行 / 设置 ---------- */
.skin-retro .info-list,
.skin-retro .settings-list,
.skin-retro .profile-card,
.skin-retro .action-card,
.skin-retro .toggle-row,
.skin-retro .skin-settings {
  background: linear-gradient(180deg, rgba(255, 232, 186, .08), rgba(0, 0, 0, .28));
  border: 1px solid rgba(232, 201, 124, .2);
  border-radius: 11px;
}

.skin-retro .info-row,
.skin-retro .settings-row,
.skin-retro .stats {
  border-color: rgba(232, 201, 124, .16);
}

.skin-retro .settings-row,
.skin-retro .action-card button,
.skin-retro .stat strong {
  color: var(--cream);
  background: transparent;
}

.skin-retro .profile-head h1 { letter-spacing: .04em; }

/* ---------- 睡眠定时刻度 ---------- */
.skin-retro .timer-ring {
  border-radius: 12px;
  background: linear-gradient(180deg, #2b2b25, #181812);
  border: 1px solid rgba(232, 201, 124, .3);
  box-shadow: inset 0 3px 12px rgba(0, 0, 0, .8);
}

.skin-retro .timer-value {
  font-family: "Barlow Condensed", sans-serif;
  color: var(--lamp);
  text-shadow: 0 0 18px rgba(255, 155, 55, .45);
}

.skin-retro .timer-value span { color: var(--cream-dim); }

/* ---------- 输入框 ---------- */
.skin-retro .text-input,
.skin-retro .textarea {
  background: linear-gradient(180deg, #221609, #332413);
  border: 1px solid rgba(232, 201, 124, .26);
  border-radius: 10px;
  color: var(--cream);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .75);
}

.skin-retro .text-input::placeholder,
.skin-retro .textarea::placeholder { color: #8b7a58; }

/* ---------- 迷你播放条 ---------- */
.skin-retro .mini-player {
  background: linear-gradient(180deg, #43301e, #251708);
  border: 1px solid rgba(232, 201, 124, .3);
  border-radius: 11px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 240, 205, .16);
}

.skin-retro .mini-title { color: var(--cream); }

.skin-retro .mini-sub {
  font-family: "Barlow Condensed", sans-serif;
  letter-spacing: .16em;
}

.skin-retro .mini-player button {
  color: #f0dcac;
  background: linear-gradient(180deg, #3a291b, #221507);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7);
}

/* ---------- 状态提示 ---------- */
.skin-retro .status-message {
  background: linear-gradient(180deg, #5a3a22, #33200f);
  border: 1px solid rgba(232, 201, 124, .32);
  color: var(--cream);
}

.skin-retro .app-version {
  margin: 18px 16px 92px;
  color: var(--cream-dim);
  font: 600 11px/1.4 "Barlow Condensed", sans-serif;
  letter-spacing: .16em;
  text-align: center;
  opacity: .86;
}

/* ---------- 高保真细节：铭牌层级、触控反馈与窄屏布局 ---------- */
.skin-retro .hero-card,
.skin-retro .player-art {
  min-height: 176px;
}

.skin-retro .hero-card > *,
.skin-retro .player-art > * {
  position: relative;
  z-index: 1;
}

.skin-retro .source-category-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.skin-retro .source-category-card {
  min-height: 92px;
  display: grid;
  align-content: center;
  gap: 4px;
  padding: 14px;
}

.skin-retro .station-row,
.skin-retro .station-tile {
  min-height: 82px;
}

.skin-retro button,
.skin-retro .chip,
.skin-retro .source-category-card {
  -webkit-tap-highlight-color: transparent;
}

.skin-retro button:active,
.skin-retro .chip:active,
.skin-retro .source-category-card:active {
  transform: translateY(1px);
  filter: brightness(.94);
}

@media (max-width: 420px) {
  .skin-retro .source-category-grid {
    grid-template-columns: 1fr;
  }
}