/* ================================================================
*  小组件系统样式
* ================================================================ */

/* ── 编辑工具栏优化 ── */
.edit-tb-widget {
  background: var(--sp-accent-fill) !important;
  border-color: var(--sp-accent-fill) !important;
  color: var(--sp-on-accent) !important;
}
.edit-tb-widget:active { background: var(--sp-accent-fill-2) !important; }

/* ── 小组件选择器面板 ── */
.widget-selector-overlay {
  position: absolute;
  inset: 0;
  z-index: 1500;
  /* 页面背景跟随主题色（原暖琥珀渐变 + 角落微光） */
  background:
    radial-gradient(ellipse at 25% 15%, rgba(var(--sp-accent-rgb),0.10) 0%, transparent 55%),
    var(--sp-page-bg);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), visibility 0s 0.35s;
  visibility: hidden;
}
.widget-selector-overlay.visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.35s cubic-bezier(.4,0,.2,1), visibility 0s;
}

.wgt-sel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 8px;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(var(--sp-text-rgb),0.08);
}
.wgt-sel-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-text);
}
.wgt-sel-body {
  flex: 1;
  display: flex;
  overflow: hidden;
}
.wgt-sel-sidebar {
  width: 72px;
  flex-shrink: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-right: 1px solid rgba(var(--sp-text-rgb),0.08);
  padding: 8px 0;
  background: rgba(255,255,255,0.3);
}
.wgt-sel-main {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  -webkit-overflow-scrolling: touch;
}

/* ── 分类侧边栏项 ── */
.wgt-cat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  cursor: pointer;
  transition: background 0.15s;
  border-radius: 0;
  position: relative;
}
.wgt-cat-item.active {
  background: rgba(var(--sp-accent-rgb),0.12);
}
.wgt-cat-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; bottom: 15%;
  width: 3px;
  background: var(--sp-accent-2);
  border-radius: 0 3px 3px 0;
}
.wgt-cat-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wgt-cat-name {
  font-size: 10px;
  color: var(--sp-text);
  text-align: center;
  line-height: 1.2;
}

/* ── 已添加小组件区域 ── */
.wgt-exist-section {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(var(--sp-text-rgb),0.1);
}
.wgt-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--sp-text);
  margin-bottom: 10px;
}
.wgt-exist-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wgt-exist-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255,255,255,0.7);
  border-radius: 12px;
  border: 1px solid rgba(var(--sp-text-rgb),0.06);
}
.wgt-exist-info {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}
.wgt-exist-icon {
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.wgt-exist-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--sp-text);
}
.wgt-exist-size {
  font-size: 11px;
  color: var(--sp-text-soft);
}
.wgt-exist-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: 8px;
  flex-shrink: 0;
}
.wgt-exist-setting,
.wgt-exist-del {
  background: rgba(229,57,53,0.1);
  color: #E53935;
  border: none;
  font-size: 12px;
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 8px;
  cursor: pointer;
}
.wgt-exist-setting {
  color: var(--sp-accent-2);
  background: rgba(var(--sp-accent-rgb),0.1);
}
.wgt-exist-setting:active { background: rgba(var(--sp-accent-rgb),0.18); }
.wgt-exist-del:active { background: rgba(229,57,53,0.18); }

/* ── 添加区域 ── */
.wgt-add-section { margin-top: 4px; }
.wgt-size-group { margin-bottom: 16px; }
.wgt-size-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--sp-text-soft);
  margin-bottom: 8px;
  padding: 3px 8px;
  background: rgba(var(--sp-text-rgb),0.06);
  border-radius: 6px;
  display: inline-block;
}
.wgt-style-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.wgt-preview-card {
  min-width: 0;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 6px;
  background: rgba(255,255,255,0.6);
  border-radius: 14px;
  border: 1px solid rgba(var(--sp-text-rgb),0.06);
}
.wgt-preview-wrap {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  position: relative;
  background: linear-gradient(135deg, rgba(245,240,235,1), rgba(235,228,218,1));
}
.wgt-preview-2x2 { aspect-ratio: 1; }
.wgt-preview-4x2 { aspect-ratio: 2/1; }
.wgt-preview-4x4 { aspect-ratio: 1; }
.wgt-preview-inner {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transform-origin: left top;
  border-radius: 10px;
  overflow: hidden;
}
/* 预览使用放大后的逻辑画布再整体缩放，避免小卡片中 clamp 最小值造成排版拥挤 */
.wgt-preview-2x2 .wgt-preview-inner {
  width: 120%;
  height: 120%;
  transform: scale(0.833333);
  border-radius: 12px;
}
.wgt-preview-4x2 .wgt-preview-inner {
  width: 160%;
  height: 160%;
  transform: scale(0.625);
  border-radius: 16px;
}
.wgt-preview-4x4 .wgt-preview-inner {
  width: 130%;
  height: 130%;
  transform: scale(0.769231);
  border-radius: 13px;
}
.wgt-preview-label {
  font-size: 11px;
  color: rgba(var(--sp-text-rgb),0.6);
  font-weight: 500;
}
.wgt-add-btn {
  background: linear-gradient(135deg, var(--sp-accent-fill), var(--sp-accent-fill-2));
  color: var(--sp-on-accent);
  border: none;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 20px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.1s;
}
.wgt-add-btn:active { transform: scale(0.95); }

/* ================================================================
*  小组件通用容器样式
* ================================================================ */
.widget-item {
  border-radius: 16px;
  overflow: hidden;
  z-index: 1;
}
.widget-item.wgt-bg-custom {
  isolation: isolate;
  background: transparent;
}
.widget-item.wgt-bg-custom::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background-color: var(--wgt-user-bg, rgba(255,255,255,0.72));
  background-repeat: repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
}
.widget-item.wgt-bg-custom.wgt-bg-glass::before {
  -webkit-backdrop-filter: blur(var(--wgt-bg-blur, 12px)) saturate(1.12);
  backdrop-filter: blur(var(--wgt-bg-blur, 12px)) saturate(1.12);
}
.widget-item.wgt-bg-texture-dots::before {
  background-image: radial-gradient(rgba(255,255,255,0.32) 0.8px, transparent 0.9px);
  background-size: 7px 7px;
}
.widget-item.wgt-bg-texture-grid::before {
  background-image:
    linear-gradient(rgba(255,255,255,0.2) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.2) 1px, transparent 1px);
  background-size: 13px 13px;
}
.widget-item.wgt-bg-texture-paper::before {
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  background-blend-mode: soft-light;
}
.widget-item.wgt-bg-custom > :first-child {
  position: relative;
  z-index: 1;
  background-color: transparent !important;
  background-image: none !important;
}
.widget-item.wgt-bg-custom .wgt-clock-s2-left,
.widget-item.wgt-bg-custom .wgt-clock-s2-right,
.widget-item.wgt-bg-custom .wgt-photo-editorial-panel {
  background-color: transparent !important;
  background-image: none !important;
}

.wgt-del-btn {
  display: none;
  position: absolute;
  top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(229,57,53,0.92);
  border: 2px solid rgba(255,255,255,0.95);
  cursor: pointer;
  z-index: 20;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 6px rgba(0,0,0,0.3);
  transition: transform 0.15s;
}
.wgt-del-btn:active { transform: scale(0.85); }
#screen.edit-mode .wgt-del-btn {
  display: flex;
}

/* ================================================================
*  时钟小组件
* ================================================================ */

/* 4×2 样式1: 默认时钟（保持原始样式） */
.wgt-clock-42-s1 {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.wgt-clock-42-s1 .wgt-clock-time {
  font-size: 52px;
  font-weight: 200;
  color: var(--sp-text);
  letter-spacing: 2px;
  line-height: 1.1;
  text-shadow: 0 2px 16px rgba(var(--sp-accent-rgb),0.12);
}
.wgt-clock-42-s1 .wgt-clock-date {
  font-size: 14px;
  color: var(--sp-text-soft);
  margin-top: 4px;
}

/* 4×2 样式2: 双色分区（跟随主题色） */
.wgt-clock-42-s2 {
  width: 100%; height: 100%;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
}
.wgt-clock-s2-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--sp-accent-fill), var(--sp-accent-fill-2));
}
.wgt-clock-s2-left .wgt-clock-time {
  font-size: 42px;
  font-weight: 300;
  color: var(--sp-on-accent);
  letter-spacing: 1px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.wgt-clock-s2-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--sp-input-bg);
}
.wgt-clock-s2-weekday {
  font-size: 16px;
  font-weight: 700;
  color: var(--sp-accent-2);
  margin-bottom: 2px;
}
.wgt-clock-s2-right .wgt-clock-date {
  font-size: 12px;
  color: var(--sp-text-soft);
}

/* 4×4 样式1: 模拟钟 */
.wgt-clock-44-s1 {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
}
.wgt-analog-clock {
  width: 70%;
  max-width: 180px;
}
.wgt-analog-clock .wgt-hand-hour { stroke: var(--sp-text); }
.wgt-analog-clock .wgt-hand-min { stroke: var(--sp-text-soft); }
.wgt-analog-clock .wgt-hand-sec { stroke: var(--sp-accent-2); }
.wgt-analog-clock .wgt-clock-center { fill: var(--sp-text); }

/* 4×4 样式2: 大字数字 */
.wgt-clock-44-s2 {
  width: 100%; height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  gap: 2px;
}
.wgt-clock-44-s2-time {
  font-size: 64px;
  font-weight: 200;
  color: var(--sp-text);
  letter-spacing: 3px;
  line-height: 1;
  text-shadow: 0 2px 12px rgba(var(--sp-accent-rgb),0.15);
}
.wgt-clock-44-s2-sec {
  font-size: 22px;
  font-weight: 300;
  color: var(--sp-text-soft);
}
.wgt-clock-44-s2-date {
  font-size: 14px;
  color: var(--sp-text-soft);
  margin-top: 4px;
}
.wgt-clock-44-s2-motto {
  font-size: 12px;
  color: var(--sp-text-soft);
  margin-top: 8px;
  font-style: italic;
}

/* ================================================================
*  天气小组件 — 四种独立视觉
* ================================================================ */
.wgt-weather-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* ── 2×2 样式1: 晴空玻璃球 ── */
.wgt-weather-22-s1 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(9px, 7cqw, 14px);
  border-radius: 16px;
  color: #184b6a;
  background:
    radial-gradient(circle at 80% 14%, rgba(255,255,255,0.86), transparent 24%),
    linear-gradient(155deg, #dff5ff 0%, #a9dcf2 56%, #80c5e2 100%);
  border: 1px solid rgba(39,126,164,0.16);
  box-shadow: 0 8px 22px rgba(36,112,145,0.17), inset 0 1px 0 rgba(255,255,255,0.72);
}
.wgt-weather-22-s1::before,
.wgt-weather-22-s1::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.28);
  filter: blur(1px);
}
.wgt-weather-22-s1::before {
  width: 58%;
  height: 24%;
  left: -16%;
  bottom: 11%;
  box-shadow: 19px -5px 0 rgba(255,255,255,0.18);
}
.wgt-weather-22-s1::after {
  width: 38%;
  aspect-ratio: 1;
  right: -20%;
  top: 34%;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
}
.wgt-weather-sky-head,
.wgt-weather-sky-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: Arial, sans-serif;
}
.wgt-weather-sky-head span {
  font-size: clamp(7px, 5.3cqw, 11px);
  font-weight: 700;
}
.wgt-weather-sky-head b {
  padding: 2px 5px;
  border: 1px solid rgba(24,75,106,0.18);
  border-radius: 7px;
  font-size: clamp(5px, 3.4cqw, 8px);
  letter-spacing: 0.12em;
}
.wgt-weather-sky-scene {
  height: 65%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wgt-weather-sky-scene > strong {
  display: flex;
  align-items: flex-start;
  font: 300 clamp(28px, 27cqw, 49px)/0.9 "Segoe UI", sans-serif;
  letter-spacing: -0.08em;
  color: #123f59;
  text-shadow: 0 2px 12px rgba(255,255,255,0.35);
}
.wgt-weather-sky-scene sup {
  margin: 2px 0 0 2px;
  font-size: 0.35em;
  font-weight: 600;
}
.wgt-weather-sky-orbit {
  width: clamp(36px, 35cqw, 62px);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.54);
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  box-shadow: inset 0 0 18px rgba(255,255,255,0.24), 0 5px 14px rgba(35,104,134,0.12);
}
.wgt-weather-sky-orbit > div {
  width: 57%;
  height: 57%;
  filter: drop-shadow(0 4px 5px rgba(43,91,112,0.14));
}
.wgt-weather-sky-orbit > i {
  position: absolute;
  inset: -8%;
  border: 1px dashed rgba(255,255,255,0.46);
  border-radius: 50%;
}
.wgt-weather-sky-foot {
  font-size: clamp(6px, 4.2cqw, 9px);
  color: rgba(18,63,89,0.68);
}
.wgt-weather-sky-foot span:first-child { font-weight: 700; }

/* ── 2×2 样式2: 复古气象站 ── */
.wgt-weather-22-s2 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  padding: clamp(9px, 7cqw, 14px);
  border-radius: 16px;
  color: #3e352a;
  background:
    linear-gradient(rgba(87,67,42,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(87,67,42,0.045) 1px, transparent 1px),
    #f0e7d3;
  background-size: 12px 12px;
  border: 1px solid rgba(73,55,35,0.18);
  box-shadow: 0 7px 19px rgba(79,57,31,0.15), inset 0 0 0 3px rgba(255,255,255,0.26);
}
.wgt-weather-22-s2::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(62,53,42,0.12);
  border-radius: 11px;
  pointer-events: none;
}
.wgt-weather-station-head,
.wgt-weather-station-foot {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 700 clamp(5px, 3.5cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.13em;
}
.wgt-weather-station-head b {
  color: #d05c3f;
  font-weight: 700;
}
.wgt-weather-station-main {
  height: 62%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(6px, 5cqw, 10px);
}
.wgt-weather-station-seal {
  width: clamp(34px, 33cqw, 58px);
  aspect-ratio: 1;
  padding: clamp(7px, 6cqw, 11px);
  border: 1px solid rgba(62,53,42,0.24);
  border-radius: 50%;
  background: rgba(255,250,234,0.48);
  box-shadow: 0 0 0 3px rgba(62,53,42,0.06);
}
.wgt-weather-station-seal .wgt-weather-svg {
  filter: sepia(0.35) saturate(0.85);
}
.wgt-weather-station-main > div:last-child {
  display: flex;
  flex-direction: column;
}
.wgt-weather-station-main strong {
  font: 400 clamp(27px, 25cqw, 46px)/0.9 Georgia, serif;
  letter-spacing: -0.06em;
}
.wgt-weather-station-main span {
  margin-top: 4px;
  font-size: clamp(6px, 4.5cqw, 10px);
  letter-spacing: 0.18em;
  color: rgba(62,53,42,0.58);
}
.wgt-weather-station-rule {
  position: relative;
  z-index: 1;
  height: 1px;
  margin-bottom: clamp(5px, 3cqw, 7px);
  background: #3e352a;
}
.wgt-weather-station-rule::after {
  content: '';
  display: block;
  width: 21%;
  height: 3px;
  background: #d05c3f;
}
.wgt-weather-station-foot {
  letter-spacing: 0.04em;
  color: rgba(62,53,42,0.62);
}

/* ── 4×2 样式1: 极光预报卡 ── */
.wgt-weather-42-s1 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  padding: clamp(11px, 4.2cqw, 16px);
  border-radius: 16px;
  color: #f6fbff;
  background: linear-gradient(135deg, #183d64 0%, #245a73 52%, #2d6b72 100%);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 9px 24px rgba(22,58,78,0.26), inset 0 1px 0 rgba(255,255,255,0.13);
}
.wgt-weather-aurora-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(18px);
  opacity: 0.72;
}
.wgt-weather-aurora-glow.g1 {
  width: 43%;
  height: 70%;
  left: 18%;
  top: -35%;
  background: #68e5c1;
  transform: rotate(-16deg);
}
.wgt-weather-aurora-glow.g2 {
  width: 32%;
  height: 80%;
  right: 10%;
  bottom: -54%;
  background: #8f8de9;
}
.wgt-weather-aurora-now {
  width: 31%;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wgt-weather-aurora-city {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: clamp(7px, 2.7cqw, 11px);
  color: rgba(255,255,255,0.72);
}
.wgt-weather-aurora-city i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #80f4d4;
  box-shadow: 0 0 7px #80f4d4;
}
.wgt-weather-aurora-temp {
  display: flex;
  align-items: flex-start;
  margin: 5px 0 2px;
}
.wgt-weather-aurora-temp strong {
  font: 250 clamp(31px, 13cqw, 52px)/0.86 "Segoe UI", sans-serif;
  letter-spacing: -0.07em;
}
.wgt-weather-aurora-temp sup {
  margin-top: 2px;
  font-size: clamp(8px, 3cqw, 12px);
}
.wgt-weather-aurora-cond {
  font-size: clamp(6px, 2.2cqw, 9px);
  white-space: nowrap;
  color: rgba(255,255,255,0.58);
}
.wgt-weather-aurora-icon {
  width: 17%;
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 3.4%;
  filter: drop-shadow(0 5px 8px rgba(5,25,39,0.28));
}
.wgt-weather-aurora-forecast {
  width: 52%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: stretch;
  gap: clamp(4px, 1.7cqw, 7px);
  padding-left: clamp(7px, 2.8cqw, 11px);
}
.wgt-weather-aurora-day {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  padding: clamp(4px, 1.8cqw, 7px) 2px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 10px;
  background: rgba(255,255,255,0.08);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
}
.wgt-weather-aurora-day span {
  font-size: clamp(5px, 2cqw, 8px);
  color: rgba(255,255,255,0.58);
}
.wgt-weather-aurora-day div {
  width: clamp(15px, 6.5cqw, 25px);
  height: clamp(15px, 6.5cqw, 25px);
}
.wgt-weather-aurora-day b {
  font-size: clamp(7px, 2.8cqw, 11px);
}

/* ── 4×2 样式2: 每日气象报 ── */
.wgt-weather-42-s2 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  padding: clamp(9px, 3.5cqw, 14px) clamp(12px, 4.5cqw, 18px);
  border-radius: 16px;
  color: #292824;
  background:
    radial-gradient(circle at 90% 14%, rgba(210,78,48,0.08), transparent 22%),
    #f2efe6;
  border: 1px solid rgba(43,42,37,0.18);
  box-shadow: 0 8px 20px rgba(62,54,39,0.13), inset 0 0 0 3px rgba(255,255,255,0.36);
}
.wgt-weather-42-s2::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(50,44,35,0.055) 3px 4px);
}
.wgt-weather-paper-head {
  height: 23%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 2px solid #292824;
}
.wgt-weather-paper-head strong {
  font: 800 clamp(8px, 3.3cqw, 13px)/1 Arial, sans-serif;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.wgt-weather-paper-head span {
  font: 700 clamp(5px, 2cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.1em;
  color: #c54f35;
  white-space: nowrap;
}
.wgt-weather-paper-body {
  height: 77%;
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
}
.wgt-weather-paper-temp {
  width: 34%;
  display: flex;
  align-items: flex-start;
}
.wgt-weather-paper-temp strong {
  font: 800 clamp(37px, 16cqw, 62px)/0.82 Georgia, serif;
  letter-spacing: -0.09em;
}
.wgt-weather-paper-temp sup {
  font: 700 clamp(9px, 3.3cqw, 13px)/1 Arial, sans-serif;
}
.wgt-weather-paper-copy {
  width: 39%;
  height: 65%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: clamp(9px, 3.2cqw, 13px);
  border-left: 1px solid rgba(41,40,36,0.25);
}
.wgt-weather-paper-copy b {
  margin-bottom: 5px;
  font: 700 clamp(9px, 3.5cqw, 14px)/1 "Microsoft YaHei", sans-serif;
}
.wgt-weather-paper-copy span {
  margin-top: 2px;
  font-size: clamp(5px, 2.1cqw, 8px);
  color: rgba(41,40,36,0.6);
}
.wgt-weather-paper-mark {
  width: 27%;
  height: 76%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(5px, 2.2cqw, 9px);
  border: 1px solid rgba(41,40,36,0.18);
  border-radius: 50%;
}
.wgt-weather-paper-mark > svg {
  width: 38%;
  height: 38%;
  filter: grayscale(0.8) sepia(0.3);
}
.wgt-weather-paper-mark small {
  font: 700 clamp(4px, 1.7cqw, 7px)/1.35 Arial, sans-serif;
  letter-spacing: 0.08em;
  color: rgba(41,40,36,0.5);
}

/* ================================================================
*  图片相框小组件
* ================================================================ */
.wgt-photo-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.wgt-photo-art-empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(2px, 1.8cqw, 7px);
  text-align: center;
}
.wgt-photo-art-empty svg {
  width: clamp(18px, 18cqw, 54px);
  height: clamp(18px, 18cqw, 54px);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wgt-photo-art-empty span {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(5px, 2.5cqw, 9px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.13em;
}
.wgt-photo-empty, .wgt-photo-empty-wide {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(255,248,225,0.6), rgba(255,243,224,0.8));
}

/* ── 2×2 样式1: 复古浮雕肖像框 ── */
.wgt-photo-22-s1 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.94) 0 22%, transparent 58%),
    linear-gradient(145deg, #f7f0df, #e7d8bd);
  border: 1px solid rgba(111,78,38,0.14);
  box-shadow:
    0 7px 18px rgba(83,58,30,0.12),
    inset 0 1px 0 rgba(255,255,255,0.9);
}
.wgt-photo-22-s1::before {
  content: '';
  position: absolute;
  inset: 5%;
  z-index: 0;
  border: 1px solid rgba(147,108,54,0.14);
  border-radius: 14px;
  pointer-events: none;
}

/* 相框图片设置弹窗预览 */
.wgt-photo-preview {
  width: 100%;
  aspect-ratio: 1;
  max-height: 170px;
  border-radius: 12px;
  border: 1px solid rgba(var(--sp-text-rgb),0.12);
  background: var(--sp-input-bg) center / cover no-repeat;
  margin-bottom: 14px;
}
.wgt-photo-cameo-flourish {
  position: absolute;
  inset: 7% 4% 3%;
  z-index: 0;
  width: 92%;
  height: 90%;
  fill: rgba(157,116,53,0.08);
  stroke: rgba(129,91,40,0.42);
  stroke-width: 1.1;
  stroke-linecap: round;
}
.wgt-photo-cameo-halo {
  position: absolute;
  z-index: 0;
  top: 8%;
  left: 50%;
  width: 70%;
  height: 75%;
  transform: translateX(-50%);
  border-radius: 50%;
  border: 1px dotted rgba(136,96,42,0.34);
}
.wgt-photo-cameo-frame {
  position: absolute;
  z-index: 2;
  top: 12%;
  left: 50%;
  width: 59%;
  height: 67%;
  transform: translateX(-50%);
  padding: clamp(3px, 3.2cqw, 6px);
  border-radius: 50% 50% 46% 46% / 44% 44% 56% 56%;
  background:
    linear-gradient(135deg, #fff7d5 0%, #c99f56 26%, #fff4c5 48%, #ad7935 72%, #f4d58a 100%);
  box-shadow:
    0 7px 14px rgba(78,53,25,0.2),
    0 0 0 clamp(2px, 1.6cqw, 4px) rgba(255,249,225,0.72),
    0 0 0 clamp(3px, 2.7cqw, 7px) rgba(145,103,48,0.3),
    inset 0 0 0 1px rgba(103,69,28,0.3);
}
.wgt-photo-cameo-frame::before {
  content: '';
  position: absolute;
  inset: clamp(2px, 2cqw, 5px);
  z-index: 2;
  border: 1px solid rgba(255,250,223,0.68);
  border-radius: inherit;
  pointer-events: none;
}
.wgt-photo-cameo-photo {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: inherit;
  background: #cdbda4;
  box-shadow: inset 0 0 10px rgba(58,35,18,0.18);
}
.wgt-photo-cameo-img {
  filter: saturate(0.88) contrast(0.96) sepia(0.08);
}
.wgt-photo-cameo-empty {
  color: rgba(94,66,33,0.53);
  background:
    radial-gradient(circle at 72% 20%, rgba(255,255,255,0.65), transparent 30%),
    linear-gradient(145deg, #dfd0b9, #baa17d);
}
.wgt-photo-cameo-empty svg {
  width: clamp(17px, 16cqw, 42px);
  height: clamp(17px, 16cqw, 42px);
}
.wgt-photo-cameo-gem {
  position: absolute;
  z-index: 3;
  top: 7%;
  left: 50%;
  width: clamp(6px, 6cqw, 13px);
  aspect-ratio: 1;
  transform: translateX(-50%) rotate(45deg);
  border-radius: 3px 50% 50%;
  background: radial-gradient(circle at 35% 28%, #f4a9a0, #9c3e3b 55%, #5f211f);
  border: 1px solid rgba(92,47,31,0.35);
  box-shadow:
    0 1px 4px rgba(72,35,24,0.28),
    0 0 0 2px rgba(223,189,116,0.58);
}
.wgt-photo-cameo-label {
  position: absolute;
  z-index: 2;
  bottom: 7%;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5px, 3.2cqw, 9px);
  letter-spacing: 0.15em;
  color: rgba(83,57,30,0.62);
}

/* ── 2×2 样式2: 手帐拍立得 ── */
.wgt-photo-22-s2 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
  border-radius: 16px;
  background-color: #f1cec7;
  background-image:
    radial-gradient(rgba(134,73,66,0.1) 0.7px, transparent 0.7px),
    linear-gradient(145deg, rgba(255,255,255,0.32), transparent 62%);
  background-size: 7px 7px, 100% 100%;
  border: 1px solid rgba(137,75,67,0.1);
  box-shadow: 0 7px 18px rgba(91,50,45,0.13);
}
.wgt-photo-22-s2::before {
  content: '';
  position: absolute;
  width: 42%;
  aspect-ratio: 1;
  left: -17%;
  bottom: -17%;
  border: 1px solid rgba(255,255,255,0.34);
  border-radius: 50%;
}
.wgt-photo-snapshot-doodle {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  fill: rgba(255,255,255,0.42);
  stroke: rgba(117,64,57,0.28);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.wgt-photo-snapshot-card {
  position: absolute;
  z-index: 2;
  top: 8%;
  left: 14%;
  width: 70%;
  height: 79%;
  padding: clamp(4px, 3.3cqw, 7px) clamp(4px, 3.3cqw, 7px) 0;
  transform: rotate(-4deg);
  background: #fffdf8;
  border: 1px solid rgba(83,56,46,0.08);
  box-shadow:
    0 9px 18px rgba(91,49,43,0.22),
    0 1px 2px rgba(73,42,38,0.12);
}
.wgt-photo-snapshot-card::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image: repeating-linear-gradient(0deg, transparent 0 3px, rgba(76,54,43,0.025) 3px 4px);
}
.wgt-photo-snapshot-tape {
  position: absolute;
  z-index: 4;
  top: clamp(-5px, -2.5cqw, -2px);
  left: 50%;
  width: 43%;
  height: clamp(7px, 7cqw, 15px);
  transform: translateX(-50%) rotate(2deg);
  background: rgba(244,224,173,0.78);
  box-shadow: 0 1px 2px rgba(85,62,40,0.08);
  clip-path: polygon(3% 10%, 100% 0, 96% 90%, 0 100%);
}
.wgt-photo-snapshot-media {
  width: 100%;
  height: 73%;
  overflow: hidden;
  background: #d8c2ba;
  border: 1px solid rgba(74,50,43,0.07);
}
.wgt-photo-snapshot-img {
  filter: saturate(0.92) contrast(0.98);
}
.wgt-photo-snapshot-empty {
  color: rgba(112,70,64,0.48);
  background: linear-gradient(145deg, #eadbd4, #c9ada5);
}
.wgt-photo-snapshot-empty svg {
  width: clamp(15px, 15cqw, 38px);
  height: clamp(15px, 15cqw, 38px);
}
.wgt-photo-snapshot-meta {
  height: 27%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1px, 1cqw, 3px);
  color: #72524a;
}
.wgt-photo-snapshot-meta strong {
  font-family: "Comic Sans MS", "Segoe Print", cursive;
  font-size: clamp(7px, 5cqw, 13px);
  font-weight: 400;
  line-height: 1;
}
.wgt-photo-snapshot-meta span {
  font-size: clamp(6px, 3.8cqw, 10px);
  color: #bd746d;
}
.wgt-photo-snapshot-date {
  position: absolute;
  z-index: 1;
  right: -2%;
  bottom: 13%;
  padding: clamp(2px, 2cqw, 4px) clamp(4px, 3cqw, 7px);
  transform: rotate(7deg);
  border: 1px solid rgba(109,61,55,0.34);
  border-radius: 50%;
  font: 700 clamp(5px, 2.7cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.08em;
  color: rgba(105,57,52,0.64);
}

/* ── 4×2 样式1: 35mm 电影画幅 ── */
.wgt-photo-42-s1 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  border-radius: 16px;
  overflow: hidden;
  padding: clamp(10px, 3.8cqw, 14px) clamp(7px, 2.5cqw, 10px);
  background: #11100f;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 8px 21px rgba(23,18,14,0.28);
}
.wgt-photo-42-s1::before,
.wgt-photo-42-s1::after {
  content: '';
  position: absolute;
  z-index: 4;
  left: 3%;
  right: 3%;
  height: clamp(5px, 2cqw, 7px);
  background: repeating-linear-gradient(
    90deg,
    transparent 0 2%,
    rgba(244,235,215,0.38) 2% 4.8%,
    transparent 4.8% 7.2%
  );
  pointer-events: none;
}
.wgt-photo-42-s1::before { top: 2%; }
.wgt-photo-42-s1::after { bottom: 2%; }
.wgt-photo-cinema-media {
  position: absolute;
  z-index: 0;
  inset: clamp(10px, 3.8cqw, 14px) clamp(7px, 2.5cqw, 10px);
  overflow: hidden;
  border: 1px solid rgba(241,224,196,0.22);
  border-radius: 5px;
  background: #292723;
}
.wgt-photo-cinema-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='.14'/%3E%3C/svg%3E");
  mix-blend-mode: screen;
}
.wgt-photo-cinema-img {
  filter: saturate(0.83) contrast(1.07);
  transition: transform 0.45s ease;
}
.wgt-photo-42-s1:hover .wgt-photo-cinema-img {
  transform: scale(1.035);
}
.wgt-photo-cinema-empty {
  color: rgba(237,220,193,0.5);
  background:
    radial-gradient(circle at 50% 30%, #5a554e, #2c2925 70%);
}
.wgt-photo-cinema-empty svg {
  width: clamp(20px, 11cqw, 44px);
  height: clamp(20px, 11cqw, 44px);
}
.wgt-photo-cinema-vignette {
  position: absolute;
  z-index: 1;
  inset: clamp(10px, 3.8cqw, 14px) clamp(7px, 2.5cqw, 10px);
  border-radius: 5px;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(9,8,7,0.52), transparent 40%),
    linear-gradient(0deg, rgba(9,8,7,0.72), transparent 56%),
    radial-gradient(ellipse at center, transparent 35%, rgba(9,8,7,0.25));
}
.wgt-photo-cinema-top {
  position: absolute;
  z-index: 2;
  top: clamp(14px, 5.4cqw, 20px);
  left: clamp(13px, 5cqw, 19px);
  right: clamp(13px, 5cqw, 19px);
  display: flex;
  justify-content: space-between;
  font: 700 clamp(5px, 2.25cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.15em;
  color: rgba(255,246,227,0.72);
  text-shadow: 0 1px 3px #000;
}
.wgt-photo-cinema-top i {
  display: inline-block;
  width: clamp(3px, 1.5cqw, 5px);
  aspect-ratio: 1;
  margin-right: 3px;
  border-radius: 50%;
  background: #e35c4e;
  box-shadow: 0 0 5px rgba(227,92,78,0.7);
}
.wgt-photo-cinema-caption {
  position: absolute;
  z-index: 2;
  left: clamp(13px, 5cqw, 19px);
  right: clamp(13px, 5cqw, 19px);
  bottom: clamp(14px, 5.4cqw, 20px);
  display: flex;
  align-items: flex-end;
  gap: clamp(5px, 2.5cqw, 10px);
  color: #fff5e2;
  text-shadow: 0 1px 4px rgba(0,0,0,0.75);
}
.wgt-photo-cinema-line {
  width: clamp(13px, 7cqw, 26px);
  height: 1px;
  margin-bottom: clamp(5px, 1.8cqw, 7px);
  flex: 0 0 auto;
  background: rgba(255,241,216,0.72);
}
.wgt-photo-cinema-caption div {
  display: flex;
  min-width: 0;
  flex-direction: column;
}
.wgt-photo-cinema-caption strong {
  font: 700 clamp(6px, 2.9cqw, 11px)/1.1 Arial, sans-serif;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.wgt-photo-cinema-caption small {
  margin-top: 2px;
  font: italic clamp(5px, 2.1cqw, 8px)/1 Georgia, serif;
  color: rgba(255,241,216,0.64);
}
.wgt-photo-cinema-caption em {
  margin-left: auto;
  flex: 0 0 auto;
  font: 400 clamp(5px, 2.1cqw, 8px)/1 "Courier New", monospace;
  color: rgba(255,241,216,0.64);
}

/* ── 4×2 样式2: 现代杂志分栏 ── */
.wgt-photo-42-s2 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  background: #cb604e;
  border: 1px solid rgba(84,38,31,0.12);
  box-shadow: 0 8px 21px rgba(88,43,35,0.16);
}
.wgt-photo-editorial-visual {
  width: 64%;
  height: 100%;
  position: absolute;
  inset: 0 auto 0 0;
  overflow: hidden;
  background: #b7c5ad;
}
.wgt-photo-editorial-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 75%, rgba(72,27,22,0.14)),
    linear-gradient(0deg, rgba(23,18,15,0.2), transparent 40%);
}
.wgt-photo-editorial-img {
  filter: saturate(0.88) contrast(0.98);
  transition: transform 0.45s ease;
}
.wgt-photo-42-s2:hover .wgt-photo-editorial-img {
  transform: scale(1.035);
}
.wgt-photo-editorial-empty {
  color: rgba(43,75,66,0.5);
  background:
    radial-gradient(circle at 72% 20%, rgba(255,255,255,0.55), transparent 25%),
    linear-gradient(145deg, #c8d3bf, #92a895);
}
.wgt-photo-editorial-empty svg {
  width: clamp(18px, 10cqw, 40px);
  height: clamp(18px, 10cqw, 40px);
}
.wgt-photo-editorial-figure {
  position: absolute;
  z-index: 2;
  left: clamp(5px, 2.8cqw, 10px);
  bottom: clamp(5px, 2.8cqw, 10px);
  padding: 3px 5px;
  background: rgba(247,241,224,0.84);
  font: 700 clamp(5px, 2cqw, 7px)/1 Arial, sans-serif;
  letter-spacing: 0.12em;
  color: #3a493f;
}
.wgt-photo-editorial-panel {
  position: absolute;
  inset: 0 0 0 64%;
  overflow: hidden;
  color: #fff4dc;
  background:
    radial-gradient(circle at 90% 10%, rgba(255,255,255,0.14), transparent 28%),
    #c95f4d;
}
.wgt-photo-editorial-panel::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(7px, 3cqw, 11px);
  width: 1px;
  background: rgba(255,242,217,0.25);
}
.wgt-photo-editorial-issue {
  position: absolute;
  top: clamp(6px, 3cqw, 11px);
  left: clamp(12px, 5cqw, 19px);
  display: flex;
  align-items: flex-start;
  gap: clamp(2px, 1.5cqw, 6px);
}
.wgt-photo-editorial-issue span {
  margin-top: 2px;
  font: 700 clamp(5px, 1.9cqw, 7px)/1 Arial, sans-serif;
  letter-spacing: 0.13em;
}
.wgt-photo-editorial-issue b {
  font: 400 clamp(12px, 6.3cqw, 24px)/0.8 Georgia, serif;
}
.wgt-photo-editorial-title {
  position: absolute;
  top: 11%;
  right: clamp(4px, 2cqw, 8px);
  writing-mode: vertical-rl;
  font: 700 clamp(9px, 4.2cqw, 16px)/1 Arial, sans-serif;
  letter-spacing: 0.12em;
  color: rgba(255,244,220,0.94);
}
.wgt-photo-editorial-note {
  position: absolute;
  left: clamp(12px, 5cqw, 19px);
  bottom: clamp(8px, 3.5cqw, 13px);
  font: 500 clamp(6px, 2.7cqw, 10px)/1.4 "Microsoft YaHei", sans-serif;
  letter-spacing: 0.08em;
  color: rgba(255,244,220,0.78);
}
.wgt-photo-editorial-arrow {
  position: absolute;
  right: clamp(7px, 3cqw, 11px);
  bottom: clamp(7px, 3cqw, 11px);
  width: clamp(12px, 6cqw, 23px);
  height: clamp(12px, 6cqw, 23px);
  fill: none;
  stroke: rgba(255,244,220,0.78);
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ── 4×4 样式1: 编辑感记忆相框 ── */
.wgt-photo-44-s1 {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  container-type: inline-size;
  border-radius: 16px;
  padding: clamp(6px, 2.8cqw, 11px);
  background:
    radial-gradient(circle at 12% 8%, rgba(255,255,255,0.92) 0 4%, transparent 25%),
    linear-gradient(145deg, #f6f0e8 0%, #e9ded0 100%);
  border: 1px solid rgba(72,54,43,0.12);
  box-shadow:
    0 10px 26px rgba(58,42,32,0.14),
    inset 0 1px 0 rgba(255,255,255,0.72);
}
.wgt-photo-44-s1::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0.2;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}
.wgt-photo-memory-media {
  position: absolute;
  inset: clamp(6px, 2.8cqw, 11px);
  z-index: 0;
  overflow: hidden;
  border-radius: 12px;
  background: #c7b7a8;
  box-shadow: 0 2px 8px rgba(43,31,23,0.12);
}
.wgt-photo-memory-img {
  transform: scale(1.015);
  transition: transform 0.45s cubic-bezier(.2,.65,.3,1);
}
.wgt-photo-44-s1:hover .wgt-photo-memory-img {
  transform: scale(1.045);
}
.wgt-photo-memory-empty {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 2cqw, 8px);
  color: rgba(91,67,54,0.54);
  background:
    radial-gradient(circle at 78% 20%, rgba(255,255,255,0.52) 0 8%, transparent 34%),
    linear-gradient(145deg, #d9c7b7, #bda99b 55%, #a88e80);
}
.wgt-photo-memory-empty::before,
.wgt-photo-memory-empty::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.2);
}
.wgt-photo-memory-empty::before {
  width: 72%;
  aspect-ratio: 1;
  top: -32%;
  left: -24%;
}
.wgt-photo-memory-empty::after {
  width: 52%;
  aspect-ratio: 1;
  right: -20%;
  bottom: -22%;
}
.wgt-photo-memory-empty-art {
  width: clamp(27px, 17cqw, 64px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.32);
  border-radius: 50%;
  background: rgba(255,255,255,0.13);
  backdrop-filter: blur(6px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22);
}
.wgt-photo-memory-empty-art svg {
  width: 53%;
  height: 53%;
  fill: none;
  stroke: rgba(255,255,255,0.76);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.wgt-photo-memory-empty > span {
  font-size: clamp(7px, 3.2cqw, 12px);
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.68);
}
.wgt-photo-memory-shade {
  position: absolute;
  inset: clamp(6px, 2.8cqw, 11px);
  z-index: 1;
  pointer-events: none;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(26,19,15,0.2) 0%, transparent 24%),
    linear-gradient(0deg, rgba(23,15,11,0.74) 0%, rgba(23,15,11,0.12) 44%, transparent 68%);
}
.wgt-photo-memory-border {
  position: absolute;
  inset: clamp(12px, 5.3cqw, 21px);
  z-index: 2;
  pointer-events: none;
  border: 1px solid rgba(255,255,255,0.58);
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(40,27,20,0.06);
}
.wgt-photo-memory-head {
  position: absolute;
  z-index: 3;
  top: clamp(14px, 6.2cqw, 24px);
  left: clamp(17px, 7.4cqw, 29px);
  right: clamp(17px, 7.4cqw, 29px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(255,255,255,0.86);
  text-shadow: 0 1px 4px rgba(0,0,0,0.26);
}
.wgt-photo-memory-archive,
.wgt-photo-memory-no {
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(5px, 2.35cqw, 9px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.16em;
}
.wgt-photo-memory-no {
  opacity: 0.72;
  letter-spacing: 0.11em;
}
.wgt-photo-memory-caption {
  position: absolute;
  z-index: 3;
  left: clamp(16px, 7cqw, 27px);
  right: clamp(16px, 7cqw, 27px);
  bottom: clamp(15px, 6.6cqw, 25px);
  min-height: 25%;
  display: flex;
  align-items: flex-start;
  gap: clamp(6px, 3.2cqw, 12px);
  padding: clamp(8px, 3.7cqw, 14px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 9px;
  color: #fff;
  background: linear-gradient(110deg, rgba(35,25,20,0.48), rgba(35,25,20,0.16));
  box-shadow:
    0 8px 22px rgba(20,13,9,0.16),
    inset 0 1px 0 rgba(255,255,255,0.18);
  backdrop-filter: blur(8px) saturate(1.15);
}
.wgt-photo-memory-rule {
  width: clamp(10px, 5cqw, 20px);
  height: 1px;
  flex: 0 0 auto;
  margin-top: clamp(4px, 1.7cqw, 7px);
  background: rgba(255,255,255,0.7);
}
.wgt-photo-memory-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.wgt-photo-memory-copy span {
  margin-bottom: clamp(2px, 1.4cqw, 5px);
  font-family: Arial, Helvetica, sans-serif;
  font-size: clamp(5px, 2.25cqw, 9px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.67);
}
.wgt-photo-memory-copy strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(10px, 5.6cqw, 22px);
  font-weight: 400;
  font-style: italic;
  line-height: 0.94;
  letter-spacing: -0.025em;
  text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.wgt-photo-memory-spark {
  width: clamp(9px, 4cqw, 16px);
  height: clamp(9px, 4cqw, 16px);
  margin-left: auto;
  flex: 0 0 auto;
  fill: rgba(255,255,255,0.82);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
}

@media (prefers-reduced-motion: reduce) {
  .wgt-photo-memory-img {
    transition: none;
  }
}

/* ── 4×4 样式2: 博物馆藏画框 ── */
.wgt-photo-44-s2 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  border-radius: 16px;
  overflow: hidden;
  padding: clamp(8px, 4.6cqw, 18px);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 20% 78%, rgba(0,0,0,0.16)),
    repeating-linear-gradient(92deg, #5c3825 0 4px, #69412a 4px 8px, #53311f 8px 13px);
  border: 1px solid rgba(48,27,17,0.4);
  box-shadow:
    0 11px 27px rgba(48,28,18,0.25),
    inset 0 0 0 2px rgba(225,181,105,0.2),
    inset 0 0 16px rgba(25,13,8,0.42);
}
.wgt-photo-44-s2::before {
  content: '';
  position: absolute;
  inset: clamp(5px, 2.4cqw, 9px);
  z-index: 3;
  border: 1px solid rgba(226,185,111,0.42);
  border-radius: 10px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(32,17,10,0.42);
}
.wgt-photo-museum-frame {
  width: 100%;
  height: 100%;
  position: relative;
  padding: clamp(4px, 2.3cqw, 9px);
  border: 1px solid rgba(211,167,91,0.56);
  background: linear-gradient(135deg, #a3763d, #e0bd78 25%, #8b5e2d 54%, #d0a55d 76%, #704721);
  box-shadow:
    0 3px 10px rgba(24,12,7,0.38),
    inset 0 0 0 1px rgba(255,230,171,0.34);
}
.wgt-photo-museum-mat {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(9px, 5.3cqw, 20px);
  color: #3e352c;
  background:
    radial-gradient(circle at 18% 12%, rgba(255,255,255,0.82), transparent 28%),
    #eee7da;
  border: 1px solid rgba(67,49,34,0.22);
  box-shadow:
    inset 0 0 14px rgba(92,68,45,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.66);
}
.wgt-photo-museum-mat::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.2;
  background-image: repeating-linear-gradient(0deg, transparent 0 4px, rgba(70,54,39,0.03) 4px 5px);
}
.wgt-photo-museum-head {
  height: 10%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font: 700 clamp(5px, 2.25cqw, 9px)/1 Arial, sans-serif;
  letter-spacing: 0.15em;
  color: rgba(61,49,38,0.62);
}
.wgt-photo-museum-art {
  height: 67%;
  position: relative;
  z-index: 1;
  padding: clamp(3px, 1.6cqw, 6px);
  overflow: hidden;
  background: #4a3526;
  border: 1px solid rgba(50,32,20,0.46);
  box-shadow:
    0 4px 10px rgba(54,36,24,0.18),
    inset 0 0 0 1px rgba(238,213,170,0.3);
}
.wgt-photo-museum-art::after {
  content: '';
  position: absolute;
  inset: clamp(3px, 1.6cqw, 6px);
  z-index: 2;
  border: 1px solid rgba(255,255,255,0.22);
  pointer-events: none;
}
.wgt-photo-museum-img {
  filter: saturate(0.86) contrast(0.98);
  transition: transform 0.45s ease;
}
.wgt-photo-44-s2:hover .wgt-photo-museum-img {
  transform: scale(1.025);
}
.wgt-photo-museum-empty {
  color: rgba(80,59,40,0.52);
  background:
    radial-gradient(circle at 72% 20%, rgba(255,255,255,0.62), transparent 25%),
    linear-gradient(145deg, #d8ccba, #ad9c83);
}
.wgt-photo-museum-empty svg {
  width: clamp(24px, 16cqw, 58px);
  height: clamp(24px, 16cqw, 58px);
}
.wgt-photo-museum-foot {
  height: 23%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: clamp(5px, 2.8cqw, 11px);
}
.wgt-photo-museum-foot > div {
  display: flex;
  flex-direction: column;
}
.wgt-photo-museum-foot strong {
  font: italic 400 clamp(10px, 5.4cqw, 21px)/1 Georgia, serif;
  letter-spacing: -0.02em;
  color: #45372b;
}
.wgt-photo-museum-foot span {
  margin-top: clamp(2px, 1.2cqw, 5px);
  font: 600 clamp(5px, 2.3cqw, 9px)/1 "Microsoft YaHei", sans-serif;
  letter-spacing: 0.12em;
  color: rgba(69,55,43,0.48);
}
.wgt-photo-museum-foot svg {
  width: clamp(20px, 11cqw, 42px);
  height: clamp(20px, 11cqw, 42px);
  fill: none;
  stroke: rgba(128,86,42,0.54);
  stroke-width: 1;
}
.wgt-photo-museum-foot svg path {
  fill: rgba(155,104,49,0.18);
}
.wgt-photo-museum-corner {
  position: absolute;
  z-index: 4;
  width: clamp(8px, 4.8cqw, 18px);
  height: clamp(8px, 4.8cqw, 18px);
  pointer-events: none;
}
.wgt-photo-museum-corner::before,
.wgt-photo-museum-corner::after {
  content: '';
  position: absolute;
  background: rgba(248,215,147,0.58);
}
.wgt-photo-museum-corner::before { width: 100%; height: 1px; }
.wgt-photo-museum-corner::after { width: 1px; height: 100%; }
.wgt-photo-museum-corner.c1 { top: 2px; left: 2px; }
.wgt-photo-museum-corner.c2 { top: 2px; right: 2px; transform: rotate(90deg); }
.wgt-photo-museum-corner.c3 { right: 2px; bottom: 2px; transform: rotate(180deg); }
.wgt-photo-museum-corner.c4 { bottom: 2px; left: 2px; transform: rotate(270deg); }

@media (prefers-reduced-motion: reduce) {
  .wgt-photo-cinema-img,
  .wgt-photo-editorial-img,
  .wgt-photo-museum-img {
    transition: none;
  }
}

/* ================================================================
*  便签小组件 — 四种独立视觉
* ================================================================ */
.wgt-note-text {
  position: relative;
  z-index: 2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  word-break: break-word;
  white-space: pre-wrap;
}

/* ── 2×2 样式1: 撕页速记 ── */
.wgt-note-22-s1 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(15px, 11cqw, 22px) clamp(11px, 8cqw, 16px) clamp(10px, 7cqw, 14px);
  border-radius: 16px;
  color: #543b34;
  background:
    repeating-linear-gradient(0deg, transparent 0 20px, rgba(121,77,65,0.08) 20px 21px),
    linear-gradient(145deg, #ffd8c8, #f4b7a4);
  border: 1px solid rgba(137,76,61,0.14);
  box-shadow: 0 8px 20px rgba(127,70,55,0.16), inset 0 1px 0 rgba(255,255,255,0.45);
}
.wgt-note-22-s1::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 8px;
  background: linear-gradient(135deg, transparent 5px, #e9a690 0) 0 0/10px 10px repeat-x;
  opacity: 0.55;
}
.wgt-note-torn-tape {
  position: absolute;
  z-index: 4;
  top: -1px;
  left: 50%;
  width: 38%;
  height: clamp(9px, 8cqw, 16px);
  transform: translateX(-50%) rotate(-1deg);
  background: rgba(255,238,186,0.76);
  clip-path: polygon(2% 8%, 98% 0, 95% 100%, 0 88%);
  box-shadow: 0 1px 3px rgba(92,60,42,0.09);
}
.wgt-note-torn-head {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wgt-note-torn-head strong {
  font: 800 clamp(6px, 4.3cqw, 10px)/1 Arial, sans-serif;
  letter-spacing: 0.12em;
}
.wgt-note-torn-head span {
  font: 700 clamp(7px, 4.7cqw, 11px)/1 Georgia, serif;
  color: rgba(84,59,52,0.48);
}
.wgt-note-torn-rule {
  position: relative;
  z-index: 2;
  height: 2px;
  margin: clamp(5px, 4cqw, 8px) 0 clamp(6px, 4.3cqw, 9px);
  background: #543b34;
}
.wgt-note-torn-rule::after {
  content: '';
  display: block;
  width: 27%;
  height: 2px;
  background: #fdf4d9;
}
.wgt-note-22-s1 .wgt-note-text {
  height: 52%;
  font: 500 clamp(8px, 6.2cqw, 13px)/1.55 "Microsoft YaHei", sans-serif;
  line-clamp: 4;
  -webkit-line-clamp: 4;
  color: #5a4038;
}
.wgt-note-torn-foot {
  position: absolute;
  z-index: 2;
  left: clamp(11px, 8cqw, 16px);
  right: clamp(11px, 8cqw, 16px);
  bottom: clamp(10px, 7cqw, 14px);
  display: flex;
  align-items: center;
  gap: 4px;
}
.wgt-note-torn-foot span {
  margin-right: auto;
  font: 700 clamp(4px, 3cqw, 7px)/1 Arial, sans-serif;
  letter-spacing: 0.15em;
  color: rgba(84,59,52,0.4);
}
.wgt-note-torn-foot i {
  width: 4px;
  height: 4px;
  border: 1px solid rgba(84,59,52,0.38);
  border-radius: 50%;
}
.wgt-note-torn-foot i:first-of-type { background: #543b34; }

/* ── 2×2 样式2: 极简清单 ── */
.wgt-note-22-s2 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 7.5cqw, 15px);
  border-radius: 16px;
  color: #252521;
  background: #f4f1e8;
  border: 1px solid rgba(37,37,33,0.16);
  box-shadow: 0 8px 20px rgba(54,50,39,0.13), inset 0 0 0 3px rgba(255,255,255,0.35);
}
.wgt-note-check-head {
  height: 29%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid rgba(37,37,33,0.2);
}
.wgt-note-check-head > div {
  display: flex;
  flex-direction: column;
}
.wgt-note-check-head span {
  font: 800 clamp(5px, 3.6cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.16em;
  color: #e35d3d;
}
.wgt-note-check-head strong {
  margin-top: 3px;
  font: 700 clamp(8px, 5.5cqw, 12px)/1 "Microsoft YaHei", sans-serif;
}
.wgt-note-check-head > b {
  width: clamp(18px, 15cqw, 28px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #252521;
  color: #f4f1e8;
  font-size: clamp(8px, 6cqw, 13px);
}
.wgt-note-check-body {
  height: 56%;
  display: flex;
  min-height: 0;
  padding-top: clamp(6px, 4.5cqw, 9px);
}
.wgt-note-check-rail {
  width: clamp(16px, 13cqw, 24px);
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  border-right: 1px solid rgba(37,37,33,0.13);
}
.wgt-note-check-rail i {
  width: clamp(7px, 6cqw, 11px);
  aspect-ratio: 1;
  border: 1px solid rgba(37,37,33,0.35);
  border-radius: 2px;
}
.wgt-note-check-rail i:first-child {
  position: relative;
  background: #e35d3d;
  border-color: #e35d3d;
}
.wgt-note-check-rail i:first-child::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 6px;
}
.wgt-note-22-s2 .wgt-note-text {
  flex: 1;
  padding: 0 0 0 clamp(7px, 5cqw, 10px);
  font: 500 clamp(7px, 5.3cqw, 11px)/1.65 "Microsoft YaHei", sans-serif;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  background: repeating-linear-gradient(transparent 0 20px, rgba(37,37,33,0.08) 20px 21px);
}
.wgt-note-check-foot {
  height: 15%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.wgt-note-check-foot > span {
  font: 700 clamp(5px, 3.5cqw, 8px)/1 Arial, sans-serif;
  color: rgba(37,37,33,0.42);
}
.wgt-note-check-foot > div {
  display: flex;
  gap: 3px;
}
.wgt-note-check-foot i {
  width: clamp(7px, 5cqw, 10px);
  height: 2px;
  background: rgba(37,37,33,0.18);
}
.wgt-note-check-foot i:first-child { background: #e35d3d; }

/* ── 4×4 样式1: 装帧信纸 ── */
.wgt-note-44-s1 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(17px, 7cqw, 27px) clamp(18px, 7.7cqw, 30px) clamp(15px, 6cqw, 24px) clamp(31px, 13cqw, 50px);
  border-radius: 16px;
  color: #3d372f;
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(78,65,49,0.075) 25px 26px),
    #f2eadb;
  border: 1px solid rgba(73,59,44,0.16);
  box-shadow: 0 10px 25px rgba(72,55,37,0.16), inset 0 0 0 4px rgba(255,255,255,0.28);
}
.wgt-note-44-s1::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: clamp(24px, 10cqw, 39px);
  width: 1px;
  background: rgba(196,75,59,0.35);
  box-shadow: 4px 0 0 rgba(196,75,59,0.08);
}
.wgt-note-letter-spine {
  position: absolute;
  z-index: 3;
  top: 8%;
  bottom: 8%;
  left: clamp(8px, 3.5cqw, 14px);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.wgt-note-letter-spine i {
  width: clamp(13px, 5.8cqw, 22px);
  height: clamp(5px, 2cqw, 8px);
  border-radius: 5px;
  background: linear-gradient(180deg, #877768, #c5b6a4 48%, #6b5c50 52%, #a79888);
  box-shadow: 1px 1px 3px rgba(50,39,30,0.25);
}
.wgt-note-letter-head {
  height: 18%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.wgt-note-letter-head > div {
  display: flex;
  flex-direction: column;
}
.wgt-note-letter-head span {
  font: 800 clamp(6px, 2.6cqw, 10px)/1 Arial, sans-serif;
  letter-spacing: 0.16em;
  color: #b04f3d;
}
.wgt-note-letter-head strong {
  margin-top: clamp(4px, 1.5cqw, 6px);
  font: 700 clamp(13px, 5.4cqw, 21px)/1 "Microsoft YaHei", sans-serif;
  white-space: nowrap;
}
.wgt-note-letter-head > b {
  font: italic 400 clamp(8px, 3.3cqw, 13px)/1 Georgia, serif;
  color: rgba(61,55,47,0.5);
}
.wgt-note-letter-line {
  position: relative;
  z-index: 2;
  height: 2px;
  background: #3d372f;
}
.wgt-note-letter-line::after {
  content: '';
  display: block;
  width: 23%;
  height: 4px;
  background: #b04f3d;
}
.wgt-note-letter-body {
  height: 66%;
  position: relative;
  z-index: 2;
  padding-top: clamp(10px, 4cqw, 16px);
  overflow: hidden;
}
.wgt-note-44-s1 .wgt-note-text {
  height: 100%;
  font: 500 clamp(10px, 4.2cqw, 16px)/1.65 "Microsoft YaHei", sans-serif;
  line-clamp: 9;
  -webkit-line-clamp: 9;
  color: #494137;
}
.wgt-note-letter-foot {
  height: 16%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font: 700 clamp(5px, 2.2cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.14em;
  color: rgba(61,55,47,0.42);
}

/* ── 4×4 样式2: 玻璃灵感板 ── */
.wgt-note-44-s2 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(16px, 7cqw, 27px);
  border-radius: 16px;
  color: #f7f3ff;
  background: linear-gradient(145deg, #27213d 0%, #4c3867 48%, #76536e 100%);
  border: 1px solid rgba(255,255,255,0.13);
  box-shadow: 0 10px 28px rgba(43,28,59,0.28), inset 0 1px 0 rgba(255,255,255,0.12);
}
.wgt-note-idea-orb {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  filter: blur(4px);
}
.wgt-note-idea-orb.o1 {
  width: 56%;
  aspect-ratio: 1;
  right: -18%;
  top: -19%;
  background: radial-gradient(circle at 35% 35%, #e796b9, #895994 56%, transparent 72%);
  opacity: 0.72;
}
.wgt-note-idea-orb.o2 {
  width: 43%;
  aspect-ratio: 1;
  left: -17%;
  bottom: -18%;
  background: radial-gradient(circle at 50% 50%, #79bdd0, #446f8e 55%, transparent 72%);
  opacity: 0.58;
}
.wgt-note-idea-head {
  height: 12%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font: 700 clamp(6px, 2.6cqw, 10px)/1 Arial, sans-serif;
  letter-spacing: 0.16em;
  color: rgba(255,255,255,0.72);
}
.wgt-note-idea-head svg {
  width: clamp(11px, 4.7cqw, 18px);
  height: clamp(11px, 4.7cqw, 18px);
  fill: rgba(255,255,255,0.78);
}
.wgt-note-idea-card {
  height: 72%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: clamp(13px, 5.7cqw, 22px);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(255,255,255,0.18), rgba(255,255,255,0.07));
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: 0 10px 25px rgba(26,16,39,0.18), inset 0 1px 0 rgba(255,255,255,0.16);
}
.wgt-note-idea-kicker {
  font: 700 clamp(5px, 2.2cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.15em;
  color: rgba(255,255,255,0.5);
}
.wgt-note-44-s2 .wgt-note-text {
  flex: 1;
  margin-top: clamp(9px, 4cqw, 15px);
  font: 500 clamp(10px, 4.4cqw, 17px)/1.6 "Microsoft YaHei", sans-serif;
  line-clamp: 7;
  -webkit-line-clamp: 7;
  color: #fff;
}
.wgt-note-idea-sign {
  font: italic 400 clamp(7px, 2.8cqw, 11px)/1 Georgia, serif;
  color: rgba(255,255,255,0.48);
  text-align: right;
}
.wgt-note-idea-foot {
  height: 16%;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}
.wgt-note-idea-foot span {
  font: 700 clamp(5px, 2.2cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.44);
}
.wgt-note-idea-foot b {
  width: clamp(19px, 8cqw, 31px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 50%;
  font-size: clamp(10px, 4cqw, 16px);
  font-weight: 300;
}

/* ── 2×2 样式3: 花瓣灵感签 ── */
.wgt-note-22-s3 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  display: grid;
  place-items: center;
  background: transparent;
}
.wgt-note-petal-card {
  width: 84%;
  height: 84%;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: clamp(12px, 8.5cqw, 17px);
  transform: rotate(-2.5deg);
  border: 1px solid rgba(74,90,65,0.14);
  border-radius: 38% 62% 43% 57% / 48% 37% 63% 52%;
  color: #42513b;
  background:
    radial-gradient(circle at 72% 18%, rgba(255,255,255,0.7), transparent 22%),
    linear-gradient(145deg, #dcebbd, #b8d99f);
  box-shadow: 0 8px 18px rgba(75,101,61,0.19), inset 0 1px 0 rgba(255,255,255,0.5);
}
.wgt-note-petal-card::after {
  content: '';
  position: absolute;
  right: 13%;
  bottom: 12%;
  width: 22%;
  aspect-ratio: 1;
  border: 1px solid rgba(66,81,59,0.16);
  border-radius: 50%;
}
.wgt-note-petal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 800 clamp(5px, 3.5cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.13em;
}
.wgt-note-petal-head b {
  font-size: clamp(13px, 9cqw, 18px);
  color: #fff9dc;
  text-shadow: 0 2px 5px rgba(82,105,65,0.18);
}
.wgt-note-22-s3 .wgt-note-text {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 4% 5%;
  font: 700 clamp(10px, 7.4cqw, 15px)/1.48 "Microsoft YaHei", sans-serif;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  color: #42513b;
}
.wgt-note-petal-foot {
  display: flex;
  align-items: center;
  gap: 5px;
  font: 700 clamp(4px, 3cqw, 7px)/1 Arial, sans-serif;
  letter-spacing: 0.08em;
  color: rgba(66,81,59,0.5);
}
.wgt-note-petal-foot i {
  width: 18%;
  height: 1px;
  background: rgba(66,81,59,0.4);
}
.wgt-note-petal-dot {
  position: absolute;
  z-index: 1;
  border-radius: 50%;
  background: #f7c6a8;
  box-shadow: 0 4px 9px rgba(118,76,58,0.15);
}
.wgt-note-petal-dot.d1 {
  width: 15%;
  aspect-ratio: 1;
  top: 5%;
  right: 6%;
}
.wgt-note-petal-dot.d2 {
  width: 8%;
  aspect-ratio: 1;
  left: 5%;
  bottom: 11%;
  background: #f4e8a8;
}

/* ── 2×2 样式4: 撕口票据 ── */
.wgt-note-22-s4 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  display: grid;
  place-items: center;
  background: transparent;
}
.wgt-note-ticket-card {
  width: 90%;
  height: 70%;
  position: relative;
  display: flex;
  overflow: hidden;
  transform: rotate(2deg);
  border: 1px solid rgba(38,55,76,0.19);
  border-radius: 9px;
  color: #27374c;
  background: #efe8d8;
  box-shadow: 0 8px 18px rgba(47,56,70,0.2);
}
.wgt-note-ticket-card::before,
.wgt-note-ticket-card::after {
  content: '';
  position: absolute;
  z-index: 4;
  right: -5px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 30px #efe8d8;
}
.wgt-note-ticket-card::before { top: -6px; }
.wgt-note-ticket-card::after { bottom: -6px; }
.wgt-note-ticket-side {
  width: 25%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(7px, 5cqw, 10px) 0;
  border-right: 1px dashed rgba(255,255,255,0.5);
  color: #f7f0e2;
  background: #506c78;
}
.wgt-note-ticket-side span {
  font: 800 clamp(5px, 3.5cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.18em;
  writing-mode: vertical-rl;
}
.wgt-note-ticket-side b {
  font: 400 clamp(12px, 8.5cqw, 18px)/1 Georgia, serif;
}
.wgt-note-ticket-body {
  flex: 1;
  min-width: 0;
  padding: clamp(8px, 6cqw, 12px);
  display: flex;
  flex-direction: column;
}
.wgt-note-ticket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(39,55,76,0.2);
  font: 800 clamp(5px, 3.3cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.1em;
}
.wgt-note-ticket-head i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #df6d50;
}
.wgt-note-22-s4 .wgt-note-text {
  flex: 1;
  padding-top: 7px;
  font: 600 clamp(8px, 5.8cqw, 12px)/1.48 "Microsoft YaHei", sans-serif;
  line-clamp: 3;
  -webkit-line-clamp: 3;
  color: #27374c;
}
.wgt-note-ticket-code {
  height: 9%;
  display: flex;
  align-items: stretch;
  gap: 2px;
}
.wgt-note-ticket-code i { flex: 1; background: rgba(39,55,76,0.32); }
.wgt-note-ticket-code i:nth-child(2),
.wgt-note-ticket-code i:nth-child(4) { flex: 0.35; }

/* ── 4×4 样式3: 半开信封 ── */
.wgt-note-44-s3 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  display: grid;
  place-items: center;
  background: transparent;
}
.wgt-note-envelope {
  width: 88%;
  height: 72%;
  position: relative;
  margin-top: 10%;
  filter: drop-shadow(0 11px 13px rgba(77,61,50,0.2));
}
.wgt-note-envelope-back {
  position: absolute;
  inset: 18% 0 0;
  border: 1px solid rgba(100,76,58,0.16);
  border-radius: 13px;
  background: #d8b99a;
}
.wgt-note-envelope-back::before {
  content: '';
  position: absolute;
  inset: 0 0 37%;
  clip-path: polygon(0 0, 50% 72%, 100% 0);
  background: #cda987;
}
.wgt-note-envelope-letter {
  position: absolute;
  z-index: 2;
  left: 7%;
  right: 7%;
  top: -13%;
  height: 91%;
  display: flex;
  flex-direction: column;
  padding: clamp(17px, 7cqw, 27px);
  border: 1px solid rgba(81,66,54,0.14);
  border-radius: 10px 10px 5px 5px;
  color: #4a4037;
  background:
    repeating-linear-gradient(0deg, transparent 0 24px, rgba(87,67,53,0.07) 24px 25px),
    #f4eadb;
  box-shadow: 0 5px 13px rgba(84,63,48,0.13);
}
.wgt-note-envelope-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  border-bottom: 2px solid #765a49;
}
.wgt-note-envelope-head span {
  font: 800 clamp(6px, 2.5cqw, 10px)/1 Arial, sans-serif;
  letter-spacing: 0.14em;
}
.wgt-note-envelope-head b {
  font: italic 400 clamp(7px, 2.8cqw, 11px)/1 Georgia, serif;
  color: rgba(74,64,55,0.5);
}
.wgt-note-44-s3 .wgt-note-text {
  flex: 1;
  padding-top: clamp(10px, 4cqw, 15px);
  font: 500 clamp(9px, 3.9cqw, 15px)/1.62 "Microsoft YaHei", sans-serif;
  line-clamp: 7;
  -webkit-line-clamp: 7;
  color: #51463c;
}
.wgt-note-envelope-sign {
  padding-bottom: 9%;
  font: italic 400 clamp(8px, 3.2cqw, 12px)/1 Georgia, serif;
  text-align: right;
  color: #a1605c;
}
.wgt-note-envelope-front {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: 0;
  height: 47%;
  overflow: hidden;
  border: 1px solid rgba(100,76,58,0.13);
  border-radius: 0 0 13px 13px;
  background:
    linear-gradient(31deg, #d8b99a 49.5%, transparent 50%) left/50.5% 100% no-repeat,
    linear-gradient(-31deg, #cfad8c 49.5%, transparent 50%) right/50.5% 100% no-repeat,
    #dfc3a6;
}
.wgt-note-envelope-seal {
  position: absolute;
  z-index: 4;
  left: 50%;
  bottom: 25%;
  width: clamp(28px, 12cqw, 45px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: translate(-50%, 50%) rotate(-8deg);
  border-radius: 50%;
  color: #f1d8c1;
  background: radial-gradient(circle at 35% 30%, #b76a66, #874642);
  box-shadow: 0 3px 7px rgba(79,42,39,0.26);
  font: italic 700 clamp(11px, 4.5cqw, 17px)/1 Georgia, serif;
}

/* ── 4×4 样式4: 堆叠索引卡 ── */
.wgt-note-44-s4 {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  display: grid;
  place-items: center;
  background: transparent;
}
.wgt-note-index-layer,
.wgt-note-index-card {
  position: absolute;
  width: 84%;
  height: 78%;
  border: 1px solid rgba(46,65,72,0.13);
  border-radius: 12px;
}
.wgt-note-index-layer.l1 {
  transform: translate(-4%, 4%) rotate(-5deg);
  background: #e4bd8e;
  box-shadow: 0 9px 18px rgba(50,63,63,0.15);
}
.wgt-note-index-layer.l2 {
  transform: translate(4%, 1%) rotate(3deg);
  background: #9fbfc0;
}
.wgt-note-index-card {
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: clamp(17px, 7cqw, 27px);
  color: #30484c;
  background:
    linear-gradient(rgba(53,79,83,0.055) 1px, transparent 1px),
    #eef0e8;
  background-size: 100% 25px;
  box-shadow: 0 11px 22px rgba(48,64,66,0.18);
}
.wgt-note-index-tab {
  position: absolute;
  right: 8%;
  top: -9%;
  width: 32%;
  height: 10%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px 8px 0 0;
  background: #e68666;
  color: #fff5e9;
  font: 800 clamp(5px, 2.2cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.14em;
}
.wgt-note-index-head {
  height: 20%;
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #30484c;
}
.wgt-note-index-head > div {
  display: flex;
  flex-direction: column;
}
.wgt-note-index-head span {
  font: 800 clamp(5px, 2.2cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.13em;
  color: #d2674d;
}
.wgt-note-index-head strong {
  margin-top: 4px;
  font: 700 clamp(12px, 5cqw, 19px)/1 "Microsoft YaHei", sans-serif;
}
.wgt-note-index-head b {
  font: 700 clamp(6px, 2.5cqw, 10px)/1 "Courier New", monospace;
  color: rgba(48,72,76,0.48);
}
.wgt-note-index-body {
  flex: 1;
  min-height: 0;
  display: flex;
  padding-top: clamp(11px, 4.5cqw, 17px);
}
.wgt-note-index-date {
  width: 18%;
  flex: 0 0 auto;
  font: 700 clamp(8px, 3.2cqw, 12px)/1.2 Georgia, serif;
  color: #d2674d;
}
.wgt-note-44-s4 .wgt-note-text {
  flex: 1;
  padding-left: 6%;
  border-left: 1px solid rgba(48,72,76,0.18);
  font: 500 clamp(9px, 3.8cqw, 15px)/1.65 "Microsoft YaHei", sans-serif;
  line-clamp: 7;
  -webkit-line-clamp: 7;
  color: #3d5558;
}
.wgt-note-index-foot {
  height: 10%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  font: 700 clamp(5px, 2.1cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.14em;
  color: rgba(48,72,76,0.42);
}
.wgt-note-index-foot i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #d2674d;
}

/* ================================================================
*  音乐播放器小组件 — 十二种独立视觉
* ================================================================ */
.wgt-m {
  width: 100%;
  height: 100%;
  position: relative;
  container-type: inline-size;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-sizing: border-box;
  border-radius: 16px;
}
.wgt-m-title {
  overflow: hidden;
  color: inherit;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wgt-m-sub {
  overflow: hidden;
  margin-top: 2px;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.wgt-m-skip,
.wgt-m-shuffle,
.wgt-m-heart {
  width: clamp(13px, 5cqw, 20px);
  height: clamp(13px, 5cqw, 20px);
  flex: 0 0 auto;
}
.wgt-m-playbtn {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  transition: transform 0.15s ease;
}
.wgt-m-playbtn:active { transform: scale(0.9); }
.wgt-m-play-icon {
  width: 45%;
  height: 45%;
}
.wgt-m-prog {
  width: 100%;
  height: 3px;
  position: relative;
  border-radius: 3px;
}
.wgt-m-prog-fill {
  height: 100%;
  position: relative;
  border-radius: inherit;
  transition: width 0.3s;
}
.wgt-m-prog-knob {
  position: absolute;
  top: 50%;
  right: -3px;
  width: 7px;
  height: 7px;
  transform: translateY(-50%);
  border-radius: 50%;
}
.wgt-m-bars {
  display: flex;
  align-items: flex-end;
  gap: clamp(2px, 0.9cqw, 4px);
}
.wgt-m-bars i {
  height: var(--bar-h);
  flex: 1;
  border-radius: 3px;
  transform-origin: bottom;
}
.wgt-m-bars.playing i {
  animation: wgt-m-bar-pulse 0.72s ease-in-out infinite alternate;
  animation-delay: calc(var(--bar-i) * -0.08s);
}
@keyframes wgt-m-bar-pulse {
  0% { transform: scaleY(0.28); opacity: 0.55; }
  100% { transform: scaleY(1); opacity: 1; }
}
@keyframes wgt-m-spin { to { transform: rotate(360deg); } }
.wgt-m .spinning { animation: wgt-m-spin 4s linear infinite; }

/* ── 2×2 样式1: 袖珍播放器 ── */
.wgt-m-22s1 {
  justify-content: space-between;
  padding: clamp(10px, 7.2cqw, 15px);
  color: #f6f1dc;
  background:
    radial-gradient(circle at 80% 15%, rgba(255,255,255,0.13), transparent 24%),
    #3155a5;
  border: 1px solid rgba(20,42,97,0.35);
  box-shadow: 0 8px 20px rgba(31,61,129,0.25), inset 0 0 0 3px rgba(255,255,255,0.06);
}
.wgt-m-22s1::before {
  content: '';
  position: absolute;
  inset: 6px;
  z-index: 0;
  border: 1px solid rgba(246,241,220,0.18);
  border-radius: 11px;
}
.wgt-m-pocket-head,
.wgt-m-pocket-meta,
.wgt-m-pocket-controls,
.wgt-m-pocket-progress {
  position: relative;
  z-index: 1;
}
.wgt-m-pocket-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 800 clamp(5px, 3.3cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.14em;
}
.wgt-m-pocket-head i {
  width: clamp(5px, 3.4cqw, 8px);
  aspect-ratio: 1;
  border: 1px solid rgba(246,241,220,0.65);
  border-radius: 50%;
}
.wgt-m-pocket-head i.on {
  background: #ffdf63;
  border-color: #ffdf63;
  box-shadow: 0 0 7px #ffdf63;
}
.wgt-m-pocket-meta .wgt-m-title {
  font-size: clamp(10px, 7.7cqw, 16px);
}
.wgt-m-pocket-meta .wgt-m-sub {
  font-size: clamp(6px, 4.4cqw, 10px);
  color: rgba(246,241,220,0.58);
}
.wgt-m-pocket-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(13px, 10cqw, 21px);
}
.wgt-m-pocket-controls .wgt-m-skip { color: rgba(246,241,220,0.72); }
.wgt-m-pocket-play {
  width: clamp(35px, 28cqw, 55px);
  aspect-ratio: 1;
  color: #3155a5;
  background: #f3dc6a;
  box-shadow: 0 4px 0 #d3b943, 0 6px 12px rgba(19,41,91,0.25);
}
.prog-pocket { background: rgba(246,241,220,0.18); }
.prog-pocket .wgt-m-prog-fill { background: #f3dc6a; }
.prog-pocket .wgt-m-prog-knob { background: #f6f1dc; }
.wgt-m-pocket-progress > div {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font: 600 clamp(5px, 3.3cqw, 8px)/1 "Courier New", monospace;
  color: rgba(246,241,220,0.5);
}

/* ── 2×2 样式2: Y2K 镭射唱机 ── */
.wgt-m-22s2 {
  padding: clamp(9px, 6.5cqw, 13px);
  color: #252333;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.72), transparent 34%),
    linear-gradient(145deg, #d5d9e2 0%, #f3f0e8 38%, #b8bed0 70%, #e9cce7 100%);
  border: 1px solid rgba(56,54,74,0.2);
  box-shadow: 0 8px 21px rgba(64,60,80,0.2), inset 0 0 0 2px rgba(255,255,255,0.38);
}
.wgt-m-22s2::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background: linear-gradient(105deg, transparent 30%, rgba(104,255,237,0.34) 44%, rgba(230,120,255,0.28) 54%, transparent 68%);
}
.wgt-m-y2k-head,
.wgt-m-y2k-stage,
.wgt-m-y2k-meta {
  position: relative;
  z-index: 1;
}
.wgt-m-y2k-head {
  display: flex;
  justify-content: space-between;
  font: 800 clamp(5px, 3.2cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.13em;
}
.wgt-m-y2k-head b { color: #735ad0; }
.wgt-m-y2k-stage {
  height: 53%;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.wgt-m-y2k-disc {
  width: clamp(45px, 40cqw, 70px);
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #f7f3e9 0 9%, #4a4760 10% 12%, transparent 13%),
    conic-gradient(from 15deg, #d3fff7, #c5b8ff, #ffd1f1, #fff0a8, #bff6ee, #d3fff7);
  border: 1px solid rgba(51,48,67,0.25);
  box-shadow: 0 5px 12px rgba(55,50,75,0.18);
}
.wgt-m-y2k-disc::after {
  content: '';
  position: absolute;
  inset: 14%;
  border: 1px solid rgba(255,255,255,0.65);
  border-radius: 50%;
}
.wgt-m-y2k-disc span {
  position: relative;
  z-index: 2;
  font: 900 clamp(5px, 3.3cqw, 8px)/1 Arial, sans-serif;
  color: #4f4769;
}
.wgt-m-y2k-bars {
  width: 24%;
  height: 55%;
}
.wgt-m-y2k-bars i {
  background: linear-gradient(to top, #6a5bd0, #de72c9);
}
.wgt-m-y2k-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.wgt-m-y2k-meta > div:first-child { min-width: 0; }
.wgt-m-y2k-meta .wgt-m-title { font-size: clamp(8px, 5.4cqw, 12px); }
.wgt-m-y2k-meta .wgt-m-sub { font-size: clamp(5px, 3.7cqw, 9px); color: rgba(37,35,51,0.5); }
.wgt-m-y2k-play {
  width: clamp(27px, 21cqw, 39px);
  aspect-ratio: 1;
  color: #fff;
  background: #6254c7;
  box-shadow: 0 3px 9px rgba(89,72,190,0.32);
}

/* ── 4×2 样式1: 复古磁带机 ── */
.wgt-m-42s1 {
  flex-direction: row;
  align-items: stretch;
  gap: clamp(11px, 4cqw, 16px);
  padding: clamp(11px, 4cqw, 16px);
  color: #352b24;
  background:
    repeating-linear-gradient(90deg, rgba(71,52,37,0.04) 0 1px, transparent 1px 5px),
    linear-gradient(145deg, #d5b98f, #b99162);
  border: 1px solid rgba(75,51,32,0.25);
  box-shadow: 0 9px 22px rgba(79,53,31,0.22), inset 0 0 0 3px rgba(255,238,202,0.18);
}
.wgt-m-cassette {
  width: 42%;
  position: relative;
  flex: 0 0 auto;
  padding: clamp(7px, 2.5cqw, 10px);
  border: 2px solid #3f342b;
  border-radius: 9px;
  background: #ece4d1;
  box-shadow: 4px 5px 0 rgba(62,47,35,0.2);
}
.wgt-m-cassette-label {
  display: flex;
  justify-content: space-between;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(63,52,43,0.35);
  font: 800 clamp(5px, 1.8cqw, 7px)/1 Arial, sans-serif;
  letter-spacing: 0.1em;
}
.wgt-m-cassette-label b { color: #c3523e; }
.wgt-m-cassette-window {
  height: 47%;
  margin-top: 8%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border: 1px solid rgba(63,52,43,0.35);
  border-radius: 20px;
  background: rgba(67,55,47,0.12);
}
.wgt-m-cassette-window i {
  width: 28%;
  aspect-ratio: 1;
  border: 4px dotted #594b40;
  border-radius: 50%;
  background: #e9dfc9;
}
.wgt-m-cassette-window i.turning { animation: wgt-m-spin 2s linear infinite; }
.wgt-m-cassette-window span {
  width: 11%;
  height: 35%;
  border-left: 2px solid rgba(63,52,43,0.5);
  border-right: 2px solid rgba(63,52,43,0.5);
}
.wgt-m-cassette-screws {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 6px;
  display: flex;
  justify-content: space-between;
}
.wgt-m-cassette-screws i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #4e4339;
}
.wgt-m-cassette-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wgt-m-cassette-top {
  display: flex;
  justify-content: space-between;
  font: 800 clamp(5px, 1.9cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.1em;
  color: rgba(53,43,36,0.5);
}
.wgt-m-cassette-top b { color: #a64031; }
.wgt-m-42s1 .wgt-m-title { font-size: clamp(11px, 4.2cqw, 16px); }
.wgt-m-42s1 .wgt-m-sub { font-size: clamp(7px, 2.8cqw, 11px); color: rgba(53,43,36,0.55); }
.wgt-m-cassette-progress {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 700 clamp(5px, 1.9cqw, 8px)/1 "Courier New", monospace;
  color: rgba(53,43,36,0.5);
}
.prog-cassette { background: rgba(53,43,36,0.16); }
.prog-cassette .wgt-m-prog-fill { background: #a64031; }
.prog-cassette .wgt-m-prog-knob { background: #f4e8d0; border: 2px solid #a64031; }
.wgt-m-cassette-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: rgba(53,43,36,0.62);
}
.wgt-m-cassette-play {
  width: clamp(29px, 10cqw, 40px);
  aspect-ratio: 1;
  color: #f5ead6;
  background: #3e342c;
  box-shadow: 0 3px 7px rgba(48,35,27,0.25);
}

/* ── 4×2 样式2: 流媒体玻璃卡 ── */
.wgt-m-42s2 {
  flex-direction: row;
  align-items: stretch;
  gap: clamp(11px, 4cqw, 16px);
  padding: clamp(11px, 4cqw, 16px);
  color: #fff;
  background:
    radial-gradient(circle at 76% 18%, rgba(118,226,211,0.25), transparent 28%),
    linear-gradient(135deg, rgba(21,27,44,0.96), rgba(39,34,66,0.94));
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: 0 9px 24px rgba(20,23,43,0.32), inset 0 1px 0 rgba(255,255,255,0.08);
}
.wgt-m-stream-art {
  width: 34%;
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 13px;
  background: linear-gradient(145deg, #67d6bf, #5c6fd0 52%, #b160b4);
  box-shadow: 0 8px 18px rgba(15,20,42,0.28);
}
.wgt-m-stream-art::before {
  content: '';
  position: absolute;
  width: 88%;
  aspect-ratio: 1;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  transform: translate(30%, -27%);
}
.wgt-m-stream-art > span {
  position: relative;
  z-index: 2;
  font: 300 clamp(24px, 10cqw, 40px)/1 Georgia, serif;
}
.wgt-m-stream-art > i {
  position: absolute;
  width: 33%;
  height: 1px;
  left: 10%;
  bottom: 15%;
  background: rgba(255,255,255,0.7);
}
.wgt-m-stream-art > b {
  position: absolute;
  right: 8%;
  bottom: 9%;
  font: 800 clamp(5px, 1.9cqw, 8px)/1.1 Arial, sans-serif;
  letter-spacing: 0.09em;
}
.wgt-m-stream-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.wgt-m-stream-head {
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,0.5);
}
.wgt-m-stream-head > span {
  font: 800 clamp(5px, 1.9cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.16em;
  color: #75e0c8;
}
.wgt-m-stream-head .wgt-m-heart { width: clamp(12px, 4cqw, 16px); height: clamp(12px, 4cqw, 16px); }
.wgt-m-42s2 .wgt-m-title { font-size: clamp(11px, 4.3cqw, 17px); }
.wgt-m-42s2 .wgt-m-sub { font-size: clamp(7px, 2.7cqw, 10px); color: rgba(255,255,255,0.45); }
.wgt-m-stream-bars {
  width: 100%;
  height: 17%;
}
.wgt-m-stream-bars i { background: linear-gradient(to top, #67d6bf, #9e79dc); }
.wgt-m-stream-bottom {
  display: flex;
  align-items: center;
  gap: clamp(10px, 3.6cqw, 14px);
}
.prog-stream { background: rgba(255,255,255,0.12); }
.prog-stream .wgt-m-prog-fill { background: linear-gradient(90deg, #67d6bf, #9e79dc); }
.prog-stream .wgt-m-prog-knob { background: #fff; }
.wgt-m-stream-controls {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.8cqw, 11px);
  color: rgba(255,255,255,0.62);
}
.wgt-m-stream-play {
  width: clamp(28px, 9.5cqw, 38px);
  aspect-ratio: 1;
  color: #22253d;
  background: #fff;
}

/* ── 4×4 样式1: 胡桃木黑胶台 ── */
.wgt-m-44s1 {
  padding: clamp(15px, 6cqw, 23px);
  color: #f2e5c9;
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 8px),
    linear-gradient(145deg, #5f3c29, #3d281d 62%, #2f2119);
  border: 1px solid rgba(44,26,17,0.5);
  box-shadow: 0 11px 28px rgba(48,28,18,0.3), inset 0 0 0 3px rgba(225,181,115,0.09);
}
.wgt-m-vinyl-head {
  height: 9%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font: 800 clamp(6px, 2.5cqw, 10px)/1 Arial, sans-serif;
  letter-spacing: 0.14em;
  color: rgba(242,229,201,0.66);
}
.wgt-m-vinyl-head > div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.wgt-m-vinyl-head i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  border: 1px solid rgba(242,229,201,0.6);
}
.wgt-m-vinyl-head i.on {
  background: #e9ab54;
  border-color: #e9ab54;
  box-shadow: 0 0 6px #e9ab54;
}
.wgt-m-vinyl-head b { font-weight: 600; }
.wgt-m-vinyl-deck {
  height: 51%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2% 0;
  border: 1px solid rgba(241,218,177,0.14);
  border-radius: 13px;
  background: rgba(22,14,10,0.2);
  box-shadow: inset 0 4px 14px rgba(15,9,6,0.2);
}
.wgt-m-vinyl-record {
  height: 88%;
  aspect-ratio: 1;
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 2px, rgba(255,255,255,0.045) 2px 3px),
    #111;
  box-shadow: 0 7px 16px rgba(0,0,0,0.4);
}
.wgt-m-vinyl-record::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255,255,255,0.12), transparent 35% 65%, rgba(255,255,255,0.06));
}
.wgt-m-vinyl-record > div {
  width: 30%;
  aspect-ratio: 1;
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #2f2119 0 9%, #d3914e 10% 100%);
}
.wgt-m-vinyl-record span { color: #3d281d; font-size: clamp(10px, 4cqw, 16px); }
.wgt-m-vinyl-arm {
  position: absolute;
  top: 8%;
  right: 17%;
  width: 4px;
  height: 64%;
  transform: rotate(-24deg);
  transform-origin: top center;
  border-radius: 3px;
  background: linear-gradient(90deg, #9b8b77, #e1d1b7, #837461);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  transition: transform 0.5s ease;
}
.wgt-m-vinyl-arm.on { transform: rotate(-10deg); }
.wgt-m-vinyl-arm i {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 13px;
  height: 13px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #b6a58d;
}
.wgt-m-vinyl-arm span {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 10px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 2px;
  background: #d2b07a;
}
.wgt-m-vinyl-meta {
  height: 13%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wgt-m-vinyl-meta > div { min-width: 0; }
.wgt-m-44s1 .wgt-m-title { font: 600 clamp(12px, 5cqw, 19px)/1 Georgia, serif; }
.wgt-m-44s1 .wgt-m-sub { font-size: clamp(7px, 2.8cqw, 11px); color: rgba(242,229,201,0.5); }
.wgt-m-vinyl-meta > span {
  font: 700 clamp(5px, 2.2cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.12em;
  color: rgba(242,229,201,0.4);
}
.wgt-m-vinyl-progress {
  height: 11%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wgt-m-vinyl-progress > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
  font: 600 clamp(5px, 2.2cqw, 8px)/1 "Courier New", monospace;
  color: rgba(242,229,201,0.4);
}
.prog-vinyl { background: rgba(242,229,201,0.12); }
.prog-vinyl .wgt-m-prog-fill { background: #d3914e; }
.prog-vinyl .wgt-m-prog-knob { background: #f2e5c9; }
.wgt-m-vinyl-controls {
  height: 14%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(13px, 5.5cqw, 21px);
}
.wgt-m-vinyl-controls > div:not(.wgt-m-playbtn) {
  width: clamp(25px, 10cqw, 39px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(242,229,201,0.14);
  border-radius: 50%;
  color: rgba(242,229,201,0.65);
}
.wgt-m-vinyl-play {
  width: clamp(37px, 15cqw, 57px);
  aspect-ratio: 1;
  color: #38261c;
  background: #d6b271;
  box-shadow: 0 5px 13px rgba(18,10,6,0.32);
}

/* ── 4×4 样式2: 演出海报 ── */
.wgt-m-44s2 {
  padding: clamp(15px, 6cqw, 23px);
  color: #f7f0e3;
  background:
    linear-gradient(160deg, transparent 52%, rgba(253,99,74,0.24) 52% 67%, transparent 67%),
    #15151b;
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 11px 28px rgba(16,15,22,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
}
.wgt-m-44s2::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}
.wgt-m-poster-orb {
  position: absolute;
  z-index: 0;
  width: 62%;
  aspect-ratio: 1;
  right: -18%;
  top: 8%;
  border: clamp(16px, 7cqw, 27px) solid #d95545;
  border-radius: 50%;
  opacity: 0.68;
}
.wgt-m-poster-head,
.wgt-m-poster-title,
.wgt-m-poster-disc,
.wgt-m-poster-bars,
.wgt-m-poster-foot {
  position: relative;
  z-index: 2;
}
.wgt-m-poster-head {
  height: 8%;
  display: flex;
  justify-content: space-between;
  font: 800 clamp(6px, 2.5cqw, 10px)/1 Arial, sans-serif;
  letter-spacing: 0.16em;
}
.wgt-m-poster-head b { color: #ef6a55; }
.wgt-m-poster-title {
  height: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 78%;
}
.wgt-m-poster-title > span {
  font: 700 clamp(5px, 2.2cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.17em;
  color: rgba(247,240,227,0.48);
}
.wgt-m-poster-title strong {
  max-height: 2.05em;
  overflow: hidden;
  margin: clamp(4px, 1.5cqw, 6px) 0;
  font: 900 clamp(22px, 9.4cqw, 36px)/0.92 Arial, sans-serif;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}
.wgt-m-poster-title em {
  font: italic 400 clamp(8px, 3.3cqw, 13px)/1 Georgia, serif;
  color: #ef8a76;
}
.wgt-m-poster-disc {
  position: absolute;
  top: 27%;
  right: 9%;
  width: 34%;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  background:
    radial-gradient(circle, #15151b 0 8%, #ef6a55 9% 20%, transparent 21%),
    repeating-radial-gradient(circle, #262630 0 4px, #18181e 5px 7px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.38);
}
.wgt-m-poster-disc i {
  position: absolute;
  inset: 12%;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
}
.wgt-m-poster-disc span {
  position: relative;
  z-index: 2;
  font: 800 clamp(5px, 2.1cqw, 8px)/1 Arial, sans-serif;
  color: #15151b;
}
.wgt-m-poster-bars {
  width: 54%;
  height: 18%;
  margin-top: 2%;
}
.wgt-m-poster-bars i { background: linear-gradient(to top, #d95545, #f1b05d); }
.wgt-m-poster-foot {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.wgt-m-poster-foot > div:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 clamp(5px, 2.2cqw, 8px)/1 "Courier New", monospace;
  color: rgba(247,240,227,0.45);
}
.prog-poster { background: rgba(247,240,227,0.12); }
.prog-poster .wgt-m-prog-fill { background: #ef6a55; }
.prog-poster .wgt-m-prog-knob { background: #f7f0e3; }
.wgt-m-poster-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 6.5cqw, 25px);
  margin-top: clamp(9px, 3.8cqw, 15px);
  color: rgba(247,240,227,0.62);
}
.wgt-m-poster-play {
  width: clamp(38px, 15.5cqw, 59px);
  aspect-ratio: 1;
  color: #15151b;
  background: #ef6a55;
  box-shadow: 0 5px 16px rgba(213,85,69,0.35);
}

/* ── 2×2 样式3: 歌词唱片诗 ── */
.wgt-m-22s3 {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
}
.wgt-m-lyric-card {
  width: 88%;
  height: 82%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(10px, 7cqw, 14px);
  transform: rotate(-1.5deg);
  border: 1px solid rgba(69,58,47,0.16);
  border-radius: 13px 21px 13px 18px;
  color: #3d352e;
  background:
    linear-gradient(rgba(91,70,52,0.035) 1px, transparent 1px),
    #eee4d3;
  background-size: 100% 16px;
  box-shadow: 0 9px 18px rgba(68,53,42,0.18);
}
.wgt-m-lyric-card::before {
  content: '';
  position: absolute;
  top: -5%;
  left: 18%;
  width: 34%;
  height: 9%;
  transform: rotate(2deg);
  background: rgba(231,191,132,0.56);
  clip-path: polygon(2% 9%, 98% 0, 94% 100%, 0 87%);
}
.wgt-m-lyric-head {
  display: flex;
  justify-content: space-between;
  font: 800 clamp(5px, 3.3cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.13em;
}
.wgt-m-lyric-head b { color: #b65443; }
.wgt-m-lyric-main {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 8%;
}
.wgt-m-lyric-disc {
  width: 43%;
  aspect-ratio: 1;
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle, #efe4d2 0 7%, #b45343 8% 22%, transparent 23%),
    repeating-radial-gradient(circle, #292828 0 3px, #171717 4px 6px);
  box-shadow: 0 5px 10px rgba(34,31,29,0.27);
}
.wgt-m-lyric-disc::after {
  content: '';
  position: absolute;
  inset: 8%;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 50%;
}
.wgt-m-lyric-disc i {
  width: 4px;
  height: 4px;
  position: relative;
  z-index: 2;
  border-radius: 50%;
  background: #2d2927;
}
.wgt-m-lyric-copy {
  min-width: 0;
  flex: 1;
}
.wgt-m-22s3 .wgt-m-title {
  font: 700 clamp(9px, 6.3cqw, 13px)/1.1 Georgia, serif;
}
.wgt-m-22s3 .wgt-m-sub {
  font-size: clamp(5px, 3.5cqw, 8px);
  color: rgba(61,53,46,0.46);
}
.wgt-m-lyric-copy em {
  display: block;
  margin-top: clamp(8px, 5.4cqw, 11px);
  font: italic 400 clamp(6px, 4.4cqw, 9px)/1.45 Georgia, "Microsoft YaHei", serif;
  color: #8c5549;
}
.wgt-m-lyric-bottom {
  display: flex;
  align-items: center;
  gap: 9%;
}
.prog-lyric { height: 2px; background: rgba(61,53,46,0.13); }
.prog-lyric .wgt-m-prog-fill { background: #b65443; }
.prog-lyric .wgt-m-prog-knob { width: 5px; height: 5px; background: #3d352e; }
.wgt-m-lyric-play {
  width: clamp(25px, 19cqw, 37px);
  aspect-ratio: 1;
  color: #eee4d3;
  background: #3d352e;
  box-shadow: 0 3px 8px rgba(53,42,34,0.25);
}

/* ── 2×2 样式4: 星座夜信 ── */
.wgt-m-22s4 {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
}
.wgt-m-starlight-card {
  width: 84%;
  height: 87%;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(10px, 7cqw, 14px);
  border: 1px solid rgba(202,212,255,0.16);
  border-radius: 37% 37% 16px 16px / 20% 20% 16px 16px;
  color: #eef1ff;
  background:
    radial-gradient(circle at 78% 19%, rgba(224,199,255,0.24), transparent 21%),
    linear-gradient(160deg, #202842, #3a335a 65%, #59415f);
  box-shadow: 0 9px 21px rgba(38,38,68,0.27), inset 0 1px 0 rgba(255,255,255,0.09);
}
.wgt-m-starlight-card::before,
.wgt-m-starlight-card::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: #f8e7b7;
  box-shadow: 0 0 6px rgba(248,231,183,0.65);
}
.wgt-m-starlight-card::before {
  width: 3px;
  height: 3px;
  top: 30%;
  left: 14%;
  box-shadow: 31px -11px 0 -1px #fff, 68px 3px 0 -1px #fff, 91px -17px 0 #f8e7b7;
}
.wgt-m-starlight-card::after {
  width: 2px;
  height: 2px;
  top: 55%;
  right: 12%;
  box-shadow: -44px 8px 0 #fff, -74px -3px 0 -0.5px #fff;
}
.wgt-m-starlight-head {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  font: 800 clamp(5px, 3.3cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.13em;
  color: rgba(238,241,255,0.66);
}
.wgt-m-starlight-head b {
  color: #f6db9a;
  font-size: clamp(8px, 5.5cqw, 11px);
}
.wgt-m-constellation {
  width: 92%;
  height: 38%;
  margin: 4% auto 0;
  overflow: visible;
  fill: #f5dfa6;
  stroke: rgba(219,224,255,0.46);
  stroke-width: 1.2;
}
.wgt-m-constellation path { fill: none; }
.wgt-m-constellation circle {
  stroke: none;
  filter: drop-shadow(0 0 3px rgba(245,223,166,0.65));
}
.wgt-m-starlight-quote {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  align-items: center;
  font: 500 clamp(7px, 4.9cqw, 10px)/1.45 "Microsoft YaHei", sans-serif;
  letter-spacing: 0.04em;
  color: rgba(243,239,255,0.78);
}
.wgt-m-starlight-foot {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}
.wgt-m-starlight-foot > div:first-child { min-width: 0; }
.wgt-m-22s4 .wgt-m-title { font-size: clamp(8px, 5.4cqw, 11px); }
.wgt-m-22s4 .wgt-m-sub { font-size: clamp(5px, 3.4cqw, 7px); color: rgba(238,241,255,0.42); }
.wgt-m-starlight-play {
  width: clamp(25px, 19cqw, 37px);
  aspect-ratio: 1;
  color: #292a48;
  background: #f3dda5;
  box-shadow: 0 0 14px rgba(242,218,157,0.22);
}

/* ── 4×2 样式3: 双人声场 ── */
.wgt-m-42s3 {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
}
.wgt-m-duet-card {
  width: 94%;
  height: 84%;
  position: relative;
  display: flex;
  overflow: hidden;
  border: 1px solid rgba(44,45,54,0.12);
  border-radius: 27px 14px 27px 14px;
  color: #2e2f38;
  background:
    radial-gradient(circle at 13% 18%, rgba(139,170,218,0.17), transparent 24%),
    #f5f3ee;
  box-shadow: 0 9px 21px rgba(53,52,60,0.17);
}
.wgt-m-duet-card::after {
  content: 'DUET / 03';
  position: absolute;
  left: 3%;
  bottom: 7%;
  transform: rotate(-90deg);
  transform-origin: left bottom;
  font: 800 clamp(4px, 1.4cqw, 6px)/1 Arial, sans-serif;
  letter-spacing: 0.12em;
  color: rgba(46,47,56,0.3);
}
.wgt-m-duet-visual {
  width: 48%;
  position: relative;
  overflow: hidden;
}
.wgt-m-duet-line {
  position: absolute;
  inset: 12% 2% 3%;
  width: 96%;
  height: 83%;
  overflow: visible;
  fill: #30313a;
  stroke: rgba(47,48,57,0.64);
  stroke-width: 1.5;
  stroke-linecap: round;
}
.wgt-m-duet-line path { fill: none; }
.wgt-m-duet-person {
  position: absolute;
  z-index: 2;
}
.wgt-m-duet-person.p1 { left: 18%; bottom: 10%; }
.wgt-m-duet-person.p2 { right: 3%; top: 11%; }
.wgt-m-duet-person > span {
  position: absolute;
  left: 50%;
  bottom: 106%;
  min-width: max-content;
  padding: clamp(3px, 1.1cqw, 5px) clamp(5px, 1.8cqw, 8px);
  transform: translateX(-50%);
  border-radius: 9px 9px 9px 2px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(41,43,51,0.1);
  font: 700 clamp(5px, 1.8cqw, 7px)/1 "Microsoft YaHei", sans-serif;
}
.wgt-m-duet-person.p2 > span {
  border-radius: 9px 9px 2px 9px;
}
.wgt-m-duet-avatar {
  width: clamp(38px, 13.5cqw, 54px);
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  border: clamp(2px, 0.8cqw, 3px) solid #2f3038;
  border-radius: 50%;
  background: linear-gradient(145deg, #97bbd8, #6c78aa);
  box-shadow: 0 5px 10px rgba(35,39,58,0.2);
}
.wgt-m-duet-person.p2 .wgt-m-duet-avatar {
  background: linear-gradient(145deg, #d8a984, #816a73);
}
.wgt-m-duet-avatar i {
  position: absolute;
  width: 34%;
  aspect-ratio: 0.86;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  border-radius: 48% 48% 44% 44%;
  background: #d9b19b;
  box-shadow: 0 -6px 0 -2px #2e344b;
}
.wgt-m-duet-person.p2 .wgt-m-duet-avatar i {
  background: #bd8c71;
  box-shadow: 0 -6px 0 -1px #3b3032;
}
.wgt-m-duet-avatar b {
  position: absolute;
  width: 68%;
  height: 42%;
  left: 50%;
  bottom: -11%;
  transform: translateX(-50%);
  border-radius: 50% 50% 0 0;
  background: #313853;
}
.wgt-m-duet-person.p2 .wgt-m-duet-avatar b { background: #403437; }
.wgt-m-duet-player {
  width: 52%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(10px, 3.5cqw, 14px) clamp(12px, 4.3cqw, 17px);
  border-left: 1px solid rgba(46,47,56,0.08);
}
.wgt-m-duet-kicker {
  font: 800 clamp(4px, 1.5cqw, 6px)/1 Arial, sans-serif;
  letter-spacing: 0.14em;
  color: #bd5b52;
}
.wgt-m-duet-quote {
  flex: 1;
  display: flex;
  align-items: center;
  font: 500 clamp(6px, 2.2cqw, 9px)/1.5 "Microsoft YaHei", sans-serif;
  color: rgba(46,47,56,0.64);
}
.wgt-m-duet-track {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}
.wgt-m-duet-track > div:first-child { min-width: 0; }
.wgt-m-42s3 .wgt-m-title { font: 700 clamp(9px, 3.2cqw, 13px)/1.1 Georgia, "Microsoft YaHei", serif; }
.wgt-m-42s3 .wgt-m-sub { font-size: clamp(5px, 1.8cqw, 7px); color: rgba(46,47,56,0.42); }
.wgt-m-duet-play {
  width: clamp(27px, 9.2cqw, 37px);
  aspect-ratio: 1;
  color: #fff8ee;
  background: #31323a;
}
.wgt-m-duet-progress {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
  font: 600 clamp(4px, 1.4cqw, 6px)/1 "Courier New", monospace;
  color: rgba(46,47,56,0.38);
}
.prog-duet { height: 2px; background: rgba(46,47,56,0.12); }
.prog-duet .wgt-m-prog-fill { background: #bd5b52; }
.prog-duet .wgt-m-prog-knob { width: 5px; height: 5px; background: #31323a; }

/* ── 4×2 样式4: 城市声轨 ── */
.wgt-m-42s4 {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
}
.wgt-m-transit-card {
  width: 94%;
  height: 78%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(9px, 3.2cqw, 13px) clamp(12px, 4.3cqw, 17px);
  border: 1px solid rgba(48,55,50,0.17);
  border-radius: 11px;
  color: #26332e;
  background:
    linear-gradient(90deg, transparent 83%, rgba(38,51,46,0.05) 83% 84%, transparent 84%),
    #e9e4cc;
  box-shadow: 0 9px 20px rgba(51,54,47,0.17);
}
.wgt-m-transit-card::before,
.wgt-m-transit-card::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 30px #e9e4cc;
}
.wgt-m-transit-card::before { left: -7px; }
.wgt-m-transit-card::after { right: -7px; }
.wgt-m-transit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.wgt-m-transit-head > div {
  display: flex;
  align-items: center;
  gap: 6px;
}
.wgt-m-transit-head span {
  font: 800 clamp(5px, 1.8cqw, 7px)/1 Arial, sans-serif;
  letter-spacing: 0.13em;
}
.wgt-m-transit-head b {
  padding: 2px 5px;
  border-radius: 8px;
  color: #f2eacf;
  background: #d86645;
  font: 800 clamp(5px, 1.7cqw, 7px)/1 Arial, sans-serif;
}
.wgt-m-transit-head em {
  font: normal 600 clamp(5px, 1.8cqw, 7px)/1 "Microsoft YaHei", sans-serif;
  color: rgba(38,51,46,0.5);
}
.wgt-m-transit-route {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 3%;
}
.wgt-m-transit-base,
.wgt-m-transit-fill {
  position: absolute;
  top: 43%;
  left: 0;
  height: 3px;
  border-radius: 2px;
}
.wgt-m-transit-base { width: 100%; background: rgba(38,51,46,0.15); }
.wgt-m-transit-fill { max-width: 100%; background: #d86645; }
.wgt-m-transit-stop {
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.wgt-m-transit-stop i {
  width: clamp(8px, 2.6cqw, 11px);
  aspect-ratio: 1;
  border: 2px solid #627169;
  border-radius: 50%;
  background: #e9e4cc;
}
.wgt-m-transit-stop.active i {
  border-color: #d86645;
  background: #d86645;
  box-shadow: 0 0 0 3px rgba(216,102,69,0.14);
}
.wgt-m-transit-stop span {
  font: 600 clamp(4px, 1.5cqw, 6px)/1 "Microsoft YaHei", sans-serif;
  color: rgba(38,51,46,0.52);
}
.wgt-m-transit-bottom {
  display: flex;
  align-items: center;
  gap: clamp(8px, 2.8cqw, 11px);
}
.wgt-m-transit-no {
  font: 900 clamp(18px, 6.5cqw, 26px)/0.9 Arial, sans-serif;
  color: #d86645;
}
.wgt-m-transit-meta { flex: 1; min-width: 0; }
.wgt-m-42s4 .wgt-m-title { font-size: clamp(8px, 2.8cqw, 11px); }
.wgt-m-42s4 .wgt-m-sub { font-size: clamp(5px, 1.7cqw, 7px); color: rgba(38,51,46,0.45); }
.wgt-m-transit-controls {
  display: flex;
  align-items: center;
  gap: clamp(7px, 2.4cqw, 10px);
  color: rgba(38,51,46,0.5);
}
.wgt-m-transit-controls .wgt-m-skip { width: clamp(10px, 3.4cqw, 14px); height: clamp(10px, 3.4cqw, 14px); }
.wgt-m-transit-play {
  width: clamp(28px, 9.5cqw, 38px);
  aspect-ratio: 1;
  color: #f1eacf;
  background: #26332e;
}

/* ── 4×4 样式3: 声音手帐 ── */
.wgt-m-44s3 {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
}
.wgt-m-journal {
  width: 87%;
  height: 88%;
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(16px, 6.7cqw, 26px);
  transform: rotate(-1deg);
  border: 1px solid rgba(82,63,48,0.15);
  border-radius: 8px 18px 10px 15px;
  color: #493b31;
  background:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(106,76,53,0.055) 25px 26px),
    #eee2cf;
  box-shadow: 0 12px 24px rgba(78,57,41,0.2);
}
.wgt-m-journal-tape {
  position: absolute;
  z-index: 5;
  width: 27%;
  height: 6%;
  background: rgba(226,181,119,0.65);
  clip-path: polygon(2% 8%, 98% 0, 94% 100%, 0 88%);
}
.wgt-m-journal-tape.t1 { top: -2%; left: 10%; transform: rotate(-7deg); }
.wgt-m-journal-tape.t2 { top: 31%; right: -4%; transform: rotate(87deg); }
.wgt-m-journal-head {
  height: 8%;
  display: flex;
  justify-content: space-between;
  font: 800 clamp(6px, 2.5cqw, 10px)/1 Arial, sans-serif;
  letter-spacing: 0.14em;
}
.wgt-m-journal-head b { color: #b75845; }
.wgt-m-journal-collage {
  height: 53%;
  position: relative;
}
.wgt-m-journal-photo {
  width: 57%;
  height: 88%;
  position: absolute;
  left: 2%;
  top: 5%;
  overflow: hidden;
  padding: 5%;
  transform: rotate(-4deg);
  border: clamp(5px, 2cqw, 8px) solid #faf4e8;
  border-bottom-width: clamp(15px, 6cqw, 23px);
  background: linear-gradient(#e69b79, #efc78e 58%, #9bb08b 59%);
  box-shadow: 0 6px 13px rgba(68,48,36,0.18);
}
.wgt-m-journal-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(255,255,255,0.23), transparent 35%);
}
.wgt-m-journal-photo > span {
  position: absolute;
  z-index: 3;
  left: 8%;
  bottom: calc(clamp(15px, 6cqw, 23px) * -0.75);
  color: #66564a;
  font: italic 400 clamp(6px, 2.5cqw, 10px)/1 Georgia, serif;
}
.wgt-m-journal-sun {
  position: absolute;
  top: 16%;
  right: 15%;
  width: 18%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #ffe3a7;
  box-shadow: 0 0 16px rgba(255,220,157,0.5);
}
.wgt-m-journal-hill {
  position: absolute;
  bottom: 0;
  border-radius: 50% 50% 0 0;
}
.wgt-m-journal-hill.h1 {
  left: -12%;
  width: 80%;
  height: 45%;
  transform: rotate(8deg);
  background: #6f806a;
}
.wgt-m-journal-hill.h2 {
  right: -20%;
  width: 85%;
  height: 37%;
  transform: rotate(-8deg);
  background: #526b61;
}
.wgt-m-journal-note {
  width: 51%;
  height: 70%;
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 5%;
  display: flex;
  flex-direction: column;
  padding: clamp(11px, 4.5cqw, 17px);
  transform: rotate(3deg);
  background: #f6dba8;
  box-shadow: 0 5px 12px rgba(74,53,38,0.16);
}
.wgt-m-journal-note strong {
  font: 800 clamp(6px, 2.5cqw, 10px)/1 "Microsoft YaHei", sans-serif;
  color: #a04d3d;
}
.wgt-m-journal-note em {
  flex: 1;
  display: flex;
  align-items: center;
  font: italic 400 clamp(7px, 3cqw, 12px)/1.55 Georgia, "Microsoft YaHei", serif;
}
.wgt-m-journal-note i {
  align-self: flex-end;
  font: normal 700 clamp(11px, 4.5cqw, 17px)/1 Georgia, serif;
}
.wgt-m-journal-track {
  height: 13%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.wgt-m-44s3 .wgt-m-title { font: 700 clamp(11px, 4.5cqw, 17px)/1 Georgia, "Microsoft YaHei", serif; }
.wgt-m-44s3 .wgt-m-sub { font-size: clamp(6px, 2.5cqw, 10px); color: rgba(73,59,49,0.48); }
.wgt-m-journal-track > span {
  font: 800 clamp(5px, 2.1cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.12em;
  color: #b75845;
}
.wgt-m-journal-progress {
  height: 7%;
  display: flex;
  align-items: center;
}
.prog-journal { height: 2px; background: rgba(73,59,49,0.13); }
.prog-journal .wgt-m-prog-fill { background: #b75845; }
.prog-journal .wgt-m-prog-knob { background: #493b31; }
.wgt-m-journal-controls {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  color: rgba(73,59,49,0.55);
}
.wgt-m-journal-controls .wgt-m-heart,
.wgt-m-journal-controls .wgt-m-shuffle,
.wgt-m-journal-controls .wgt-m-skip {
  width: clamp(14px, 5.5cqw, 21px);
  height: clamp(14px, 5.5cqw, 21px);
}
.wgt-m-journal-play {
  width: clamp(38px, 15cqw, 57px);
  aspect-ratio: 1;
  color: #f6ead6;
  background: #b75845;
  box-shadow: 0 5px 13px rgba(137,66,52,0.27);
}

/* ── 4×4 样式4: 深夜房间 ── */
.wgt-m-44s4 {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
}
.wgt-m-room {
  width: 88%;
  height: 89%;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(189,202,230,0.13);
  border-radius: 44% 44% 17px 17px / 24% 24% 17px 17px;
  color: #edf0fa;
  background:
    radial-gradient(circle at 76% 23%, rgba(138,120,195,0.19), transparent 25%),
    linear-gradient(165deg, #1e2941, #25243e 66%, #3c2d43);
  box-shadow: 0 12px 27px rgba(31,31,56,0.3), inset 0 1px 0 rgba(255,255,255,0.06);
}
.wgt-m-room-head {
  height: 11%;
  position: absolute;
  z-index: 5;
  top: 7%;
  left: 10%;
  right: 10%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font: 700 clamp(5px, 2.2cqw, 8px)/1 Arial, sans-serif;
  letter-spacing: 0.13em;
  color: rgba(237,240,250,0.55);
}
.wgt-m-room-head b {
  color: #f3d79b;
  font-size: clamp(12px, 5cqw, 19px);
}
.wgt-m-room-window {
  position: absolute;
  top: 18%;
  left: 11%;
  right: 11%;
  height: 42%;
  overflow: hidden;
  border: clamp(3px, 1.2cqw, 5px) solid #53617a;
  border-radius: 42% 42% 5px 5px / 31% 31% 5px 5px;
  background: linear-gradient(#1b2848, #4a4965 73%, #776170);
  box-shadow: inset 0 0 18px rgba(7,12,28,0.36);
}
.wgt-m-room-moon {
  position: absolute;
  top: 15%;
  right: 17%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f1dca7;
  box-shadow: 0 0 18px rgba(241,220,167,0.38);
}
.wgt-m-room-window .rain {
  position: absolute;
  width: 1px;
  height: 19%;
  transform: rotate(18deg);
  background: rgba(190,215,242,0.34);
}
.wgt-m-room-window .rain.r1 { left: 18%; top: 18%; }
.wgt-m-room-window .rain.r2 { left: 49%; top: 10%; }
.wgt-m-room-window .rain.r3 { right: 23%; top: 48%; }
.wgt-m-room-city {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 38%;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}
.wgt-m-room-city i {
  flex: 1;
  height: 55%;
  background:
    linear-gradient(90deg, transparent 30%, rgba(246,205,140,0.35) 31% 41%, transparent 42%),
    #182139;
}
.wgt-m-room-city i:nth-child(2) { height: 88%; }
.wgt-m-room-city i:nth-child(3) { height: 68%; }
.wgt-m-room-city i:nth-child(4) { height: 97%; }
.wgt-m-room-city i:nth-child(5) { height: 60%; }
.wgt-m-room-frame {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent 49%, #53617a 49% 51%, transparent 51%),
    linear-gradient(0deg, transparent 49%, #53617a 49% 52%, transparent 52%);
  pointer-events: none;
}
.wgt-m-room-lyric {
  position: absolute;
  z-index: 3;
  left: 7%;
  bottom: 8%;
  font: 500 clamp(7px, 2.9cqw, 11px)/1.5 "Microsoft YaHei", sans-serif;
  color: rgba(241,236,248,0.77);
  text-shadow: 0 2px 5px rgba(13,19,38,0.45);
}
.wgt-m-room-desk {
  position: absolute;
  z-index: 4;
  top: 56%;
  left: 5%;
  right: 5%;
  height: 8%;
  border-radius: 3px;
  background: #725146;
  box-shadow: 0 4px 0 #442f31;
}
.wgt-m-room-lamp {
  position: absolute;
  left: 8%;
  bottom: 100%;
  width: 24%;
  height: 120%;
}
.wgt-m-room-lamp i {
  position: absolute;
  left: 16%;
  bottom: 0;
  width: 4px;
  height: 90%;
  transform: rotate(13deg);
  transform-origin: bottom;
  background: #d5b57d;
}
.wgt-m-room-lamp span {
  position: absolute;
  top: -18%;
  left: 17%;
  width: 58%;
  height: 45%;
  transform: skewX(-14deg);
  border-radius: 4px 4px 12px 12px;
  background: #d8ab68;
  box-shadow: 0 0 18px rgba(232,188,109,0.28);
}
.wgt-m-room-cup {
  position: absolute;
  right: 11%;
  bottom: 100%;
  width: 11%;
  height: 58%;
  border-radius: 2px 2px 6px 6px;
  background: #c7b3b4;
}
.wgt-m-room-player {
  position: absolute;
  z-index: 5;
  left: 8%;
  right: 8%;
  bottom: 6%;
  height: 27%;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: 1fr auto;
  gap: 7px 10px;
  padding: clamp(10px, 4cqw, 15px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 15px;
  background: rgba(238,237,247,0.1);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 7px 18px rgba(10,12,27,0.2), inset 0 1px 0 rgba(255,255,255,0.08);
}
.wgt-m-room-meta { min-width: 0; }
.wgt-m-44s4 .wgt-m-title { font-size: clamp(10px, 4cqw, 15px); }
.wgt-m-44s4 .wgt-m-sub { font-size: clamp(6px, 2.4cqw, 9px); color: rgba(237,240,250,0.43); }
.wgt-m-room-progress {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 6px;
}
.prog-room { min-width: clamp(50px, 21cqw, 80px); height: 2px; background: rgba(237,240,250,0.13); }
.prog-room .wgt-m-prog-fill { background: #e5b771; }
.prog-room .wgt-m-prog-knob { width: 5px; height: 5px; background: #f2e5c8; }
.wgt-m-room-progress > span {
  font: 600 clamp(5px, 2cqw, 8px)/1 "Courier New", monospace;
  color: rgba(237,240,250,0.4);
}
.wgt-m-room-controls {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(15px, 6cqw, 23px);
  color: rgba(237,240,250,0.56);
}
.wgt-m-room-controls .wgt-m-skip {
  width: clamp(14px, 5.5cqw, 21px);
  height: clamp(14px, 5.5cqw, 21px);
}
.wgt-m-room-play {
  width: clamp(34px, 13.5cqw, 51px);
  aspect-ratio: 1;
  color: #293047;
  background: #e3ba76;
  box-shadow: 0 4px 13px rgba(227,186,118,0.24);
}

@media (prefers-reduced-motion: reduce) {
  .wgt-m-bars.playing i,
  .wgt-m-y2k-disc.spinning,
  .wgt-m-cassette-window i.turning,
  .wgt-m-vinyl-record.spinning,
  .wgt-m-poster-disc.spinning,
  .wgt-m-lyric-disc.spinning {
    animation: none;
  }
}

/* ── 占位符 ── */
.wgt-placeholder {
  width: 100%; height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.5);
  border-radius: 16px;
  color: var(--sp-text-soft);
  font-size: 13px;
}

/* ================================================================
*  小组件背景设置
* ================================================================ */
.wgt-bg-modal-card {
  width: 88%;
  max-width: 340px;
  max-height: 90%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.wgt-bg-preview-shell {
  margin-bottom: 14px;
}
.wgt-bg-preview-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
  font-size: 11px;
  color: var(--sp-text-soft);
}
.wgt-bg-preview-label span:first-child {
  color: var(--sp-text);
  font-weight: 700;
}
.wgt-bg-preview-stage {
  min-height: 138px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid rgba(var(--sp-text-rgb),0.09);
  border-radius: 14px;
  background:
    linear-gradient(45deg, rgba(var(--sp-text-rgb),0.035) 25%, transparent 25% 75%, rgba(var(--sp-text-rgb),0.035) 75%),
    linear-gradient(45deg, rgba(var(--sp-text-rgb),0.035) 25%, transparent 25% 75%, rgba(var(--sp-text-rgb),0.035) 75%),
    rgba(247,243,237,0.74);
  background-position: 0 0, 7px 7px;
  background-size: 14px 14px;
}
.wgt-bg-preview-widget {
  position: relative;
  flex: 0 0 auto;
  pointer-events: none;
  box-shadow: 0 7px 20px rgba(var(--sp-text-rgb),0.14);
}
.wgt-bg-preview-2x2,
.wgt-bg-preview-4x4 {
  width: 132px;
  height: 132px;
}
.wgt-bg-preview-4x2 {
  width: 240px;
  height: 120px;
}
.wgt-bg-fields {
  border: 1px solid rgba(var(--sp-text-rgb),0.08);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 15px;
  background: rgba(255,255,255,0.34);
}
.wgt-bg-field {
  padding: 11px 12px;
  border-bottom: 1px solid rgba(var(--sp-text-rgb),0.07);
}
.wgt-bg-field:last-child {
  border-bottom: none;
}
.wgt-bg-field-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.wgt-bg-field label {
  color: var(--sp-text);
  font-size: 12px;
  font-weight: 700;
}
.wgt-bg-field-head span {
  min-width: 36px;
  padding: 2px 6px;
  border-radius: 6px;
  background: rgba(var(--sp-accent-rgb),0.08);
  color: var(--sp-accent-2);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.wgt-bg-color-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wgt-bg-color-picker {
  width: 42px;
  height: 36px;
  padding: 3px;
  flex: 0 0 auto;
  border: 1px solid rgba(var(--sp-text-rgb),0.12);
  border-radius: 9px;
  background: var(--sp-input-bg);
  cursor: pointer;
}
.wgt-bg-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.wgt-bg-color-picker::-webkit-color-swatch {
  border: none;
  border-radius: 6px;
}
.wgt-bg-hex,
.wgt-bg-select {
  height: 36px;
  margin: 0;
  padding: 7px 10px;
  font-size: 12px;
}
.wgt-bg-hex.invalid {
  border-color: #E53935;
  box-shadow: 0 0 0 2px rgba(229,57,53,0.08);
}
.wgt-bg-range {
  width: 100%;
  height: 4px;
  margin: 5px 0;
  border-radius: 2px;
  accent-color: var(--sp-accent-2);
  cursor: pointer;
}
.wgt-bg-glass-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.wgt-bg-glass-field > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.wgt-bg-glass-field small {
  font-size: 10px;
  line-height: 1.35;
  color: var(--sp-text-soft);
}
.wgt-bg-switch {
  position: relative;
  width: 42px;
  height: 24px;
  flex: 0 0 auto;
}
.wgt-bg-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.wgt-bg-switch span {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: rgba(var(--sp-text-rgb),0.16);
  transition: background 0.2s;
  cursor: pointer;
}
.wgt-bg-switch span::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(var(--sp-text-rgb),0.22);
  transition: transform 0.2s;
}
.wgt-bg-switch input:checked + span {
  background: var(--sp-accent-2);
}
.wgt-bg-switch input:checked + span::after {
  transform: translateX(18px);
}
.wgt-bg-blur-field {
  transition: opacity 0.2s;
}
.wgt-bg-blur-field.disabled {
  opacity: 0.38;
}
.wgt-bg-actions {
  align-items: center;
  gap: 7px;
}
.wgt-bg-actions .modal-btn {
  padding: 8px 12px;
}
.wgt-bg-reset {
  color: #C7554F;
  background: rgba(199,85,79,0.08);
}
.wgt-bg-action-spacer {
  flex: 1;
}

/* ── 深色模式覆盖（随小组件样式独立维护） ── */
#screen.sp-dark .wgt-exist-card,
#screen.sp-dark .wgt-preview-card,
#screen.sp-dark .wgt-placeholder {
  background: var(--sp-surface);
  border-color: var(--sp-border);
}
#screen.sp-dark .wgt-sel-title,
#screen.sp-dark .wgt-section-title,
#screen.sp-dark .wgt-exist-name,
#screen.sp-dark .wgt-cat-name {
  color: var(--sp-text);
}
#screen.sp-dark .wgt-exist-size {
  color: var(--sp-text-soft);
}
#screen.sp-dark .wgt-bg-fields,
#screen.sp-dark .wgt-bg-preview-stage {
  background-color: var(--sp-surface);
  border-color: var(--sp-border);
}