/* ===== 上传弹窗 ===== */
.upload-modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 900;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.22s ease;
  will-change: opacity;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.upload-modal.active { opacity: 1; pointer-events: auto; }
.upload-panel {
  background: var(--glass-strong); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px);
  border: 1px solid var(--glass-border); border-radius: 24px;
  padding: 28px 24px; width: 100%; max-width: 340px;
  box-shadow: 0 12px 40px var(--glass-shadow);
  display: flex; flex-direction: column; gap: 16px;
  transform: scale(0.92) translateY(8px);
  transition: transform 0.25s cubic-bezier(.25,.46,.45,.94);
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.upload-modal.active .upload-panel {
  transform: scale(1) translateY(0);
}
.upload-modal.keyboard-safe-modal {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.upload-modal.keyboard-safe-modal .upload-panel {
  max-height: calc(var(--app-visual-viewport-height, 100vh) - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.upload-panel h3 {
  font-size: 16px; font-weight: 600; color: var(--text); text-align: center;
}
.upload-btn-row { display: flex; gap: 10px; }
.upload-btn-row button {
  flex: 1; padding: 12px; border-radius: 14px; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: transform 0.15s, opacity 0.15s;
}
.upload-btn-row button:active { transform: scale(0.95); }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-secondary { background: var(--glass); color: var(--text); border: 1px solid var(--glass-border) !important; }
.upload-url-input {
  width: 100%; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--glass-border); background: var(--glass);
  font-size: 13px; font-family: inherit; color: var(--text);
  outline: none; transition: border-color 0.2s;
}
.upload-url-input:focus { border-color: var(--text); }
.upload-url-input::placeholder { color: var(--text3); }

/* ===== 日期时间组件 ===== */
.datetime-widget {
  background: var(--glass-strong); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border: none; border-radius: 28px;
  padding: 10px 14px; display: flex; flex-direction: column; gap: 10px;
  margin: 6px 0 16px; position: relative; overflow: hidden; flex-shrink: 0;
  box-shadow: 0 8px 24px var(--glass-shadow);
}
.main-area > .datetime-widget {
  margin: 6px 0 6px;
  min-width: 0;
}
.datetime-widget::before, .datetime-widget::after {
  display: none;
  content: none;
}

.datetime-main {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

.avatar-wrap {
  width: 50px; height: 50px; border-radius: 15px; flex-shrink: 0;
  overflow: hidden; border: none;
  cursor: pointer; position: relative;
  background: linear-gradient(135deg, #667, #aab);
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
}
.avatar-wrap:active { transform: scale(0.92); }
.avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-placeholder { font-size: 22px; color: #fff; opacity: 0.8; }
.avatar-hint {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.2s; font-size: 16px; color: #fff;
}
.avatar-wrap:hover .avatar-hint { opacity: 1; }

.datetime-info { flex: 1; min-width: 0; padding-top: 0; }
.greeting-input {
  font-size: 11.5px; color: var(--text2); font-weight: 600;
  letter-spacing: 0.5px; border: none; background: transparent;
  outline: none; font-family: inherit; width: 100%;
  padding: 2px 0; border-bottom: 1px dashed transparent;
  transition: border-color 0.2s;
}
.greeting-input:focus { border-bottom-color: var(--text3); }
.date-text { font-size: 10.5px; color: var(--text3); margin-top: 4px; }

.datetime-right { text-align: right; flex-shrink: 0; align-self: center; padding-top: 0; }
.time-display {
  font-size: 38px; font-weight: 700; color: var(--text);
  line-height: 1; letter-spacing: -1px;
}
.location-text {
  font-size: 10px; color: var(--text3); margin-top: 5px;
  display: flex; align-items: center; gap: 4px; justify-content: flex-end;
}
.location-input {
  font-size: 10px; color: var(--text3); border: none; background: transparent;
  outline: none; font-family: inherit; width: 58px; text-align: right;
  padding: 0; border-bottom: 1px dashed transparent; transition: border-color 0.2s;
}
.location-input:focus { border-bottom-color: var(--text3); }

.datetime-photo-row {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.datetime-photo-slot {
  width: 100%;
  height: 58px;
  min-height: 58px;
  border: 0;
  padding: 0;
  margin: 0;
  background: rgba(255,255,255,0.16);
  border-radius: 18px;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  font: inherit;
  color: inherit;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18);
  transition: transform 0.15s;
}
.datetime-photo-slot:active { transform: scale(0.98); }
.datetime-photo-slot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.datetime-photo-placeholder {
  font-size: 10px;
  letter-spacing: 0.2px;
  color: var(--text3);
}
.dark-mode .datetime-photo-slot {
  background: rgba(255,255,255,0.06);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

.widget-label {
  display: none;
}

/* ===== 拍立得小组件 ===== */
.polaroid {
  background: #f8f8f8; border-radius: 6px; padding: 8px 8px 28px;
  box-shadow: 0 3px 16px rgba(0,0,0,0.12), 0 1px 4px rgba(0,0,0,0.08);
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; transition: transform 0.2s, box-shadow 0.2s;
  position: relative;
}
.dark-mode .polaroid { background: #2a2a2a; box-shadow: 0 3px 16px rgba(0,0,0,0.3); }
.polaroid:active { transform: scale(0.97); }
.polaroid-photo {
  width: 100%; aspect-ratio: 1; border-radius: 3px; overflow: hidden;
  background: linear-gradient(135deg, #ddd, #bbb);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.dark-mode .polaroid-photo { background: linear-gradient(135deg, #444, #333); }
.polaroid-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.polaroid-placeholder {
  text-align: center; color: var(--text3); font-size: 11px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.polaroid-placeholder span { font-size: 28px; }
.polaroid-caption {
  position: absolute; bottom: 4px; left: 4px; right: 4px;
  text-align: center;
}
.polaroid-caption-input {
  width: 100%; text-align: center; border: none; background: transparent;
  outline: none; font-family: 'Nunito', 'Quicksand', sans-serif;
  font-size: 11px; font-weight: 800; color: var(--text2);
  letter-spacing: 0.5px;
  border-bottom: 1px dashed transparent; transition: border-color 0.2s;
}
.polaroid-caption-input:focus { border-bottom-color: var(--text3); }
.polaroid-caption-input::placeholder { color: var(--text3); }
.polaroid-tape {
  position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(-2deg);
  width: 40px; height: 14px; background: rgba(200,180,140,0.6);
  border-radius: 1px;
}

/* ===== 毛玻璃文字气泡 ===== */
.text-bubble {
  background: var(--glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1.5px solid var(--glass-border); border-radius: 24px;
  padding: 14px 16px;
  box-shadow:
    0 6px 24px var(--glass-shadow),
    inset 0 1px 0 rgba(255,255,255,0.35),
    inset 0 -2px 6px rgba(0,0,0,0.03);
  transition: box-shadow 0.2s;
  display: flex; align-items: center; justify-content: center;
  min-height: 72px;
}
.text-bubble:focus-within {
  box-shadow: 0 8px 32px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.4);
}
.bubble-textarea {
  width: 100%; border: none; background: transparent;
  font-size: 12px; color: var(--text); font-family: inherit;
  outline: none; resize: none; line-height: 1.5;
  text-align: center;
}
.bubble-textarea::placeholder { color: var(--text3); }

/* ===== 银色唱片小组件 ===== */
.silver-record-widget {
  width: 100%;
  min-height: 168px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  padding: 2px 0 0;
  overflow: visible;
}
.record-upload-hit {
  width: 136px;
  height: 132px;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  position: relative;
  overflow: visible;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  font: inherit;
  color: inherit;
}
.record-upload-hit:active .record-disc {
  transform: scale(0.97);
}
.record-disc {
  width: 124px;
  height: 124px;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 4px;
  overflow: hidden;
  background:
    repeating-radial-gradient(circle at center, rgba(255,255,255,0.24) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 36% 28%, rgba(255,255,255,0.95) 0 5%, rgba(232,236,241,0.88) 16%, rgba(150,156,164,0.92) 38%, rgba(226,230,235,0.96) 62%, rgba(113,119,128,0.95) 84%, rgba(238,241,244,0.95) 100%);
  box-shadow:
    0 14px 24px rgba(0,0,0,0.18),
    inset 0 0 0 1px rgba(255,255,255,0.55),
    inset 0 0 20px rgba(255,255,255,0.24),
    inset 0 0 42px rgba(52,58,68,0.18);
  animation: silverRecordSpin 7s linear infinite;
  transform-origin: center;
}
.record-disc::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background:
    conic-gradient(from 12deg, rgba(255,255,255,0.38), rgba(126,132,142,0.16), rgba(255,255,255,0.42), rgba(106,112,122,0.14), rgba(255,255,255,0.38));
  mix-blend-mode: screen;
  opacity: 0.62;
}
.record-disc::after {
  content: "";
  position: absolute;
  inset: 16px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.42);
  box-shadow:
    0 0 0 12px rgba(255,255,255,0.06),
    0 0 0 24px rgba(60,66,76,0.08),
    0 0 0 34px rgba(255,255,255,0.05);
}
.record-label {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 35% 28%, #ffffff 0 8%, #f5f0f4 42%, #d8dde3 100%);
  border: 2px solid rgba(255,255,255,0.82);
  box-shadow:
    0 0 0 1px rgba(122,128,138,0.18),
    inset 0 1px 7px rgba(255,255,255,0.65);
}
.record-label-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
.record-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: rgba(92,98,108,0.78);
  font-size: 9px;
  line-height: 1;
  pointer-events: none;
}
.record-placeholder svg { opacity: 0.66; }
.record-hole {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #f8f9fa 0 32%, #9ba1aa 34% 62%, #f3f4f6 64% 100%);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.28);
  pointer-events: none;
}
.record-tonearm {
  position: absolute;
  top: 2px;
  right: -6px;
  width: 58px;
  height: 118px;
  z-index: 4;
  pointer-events: none;
}
.record-pivot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  position: absolute;
  top: 0;
  right: 1px;
  background:
    radial-gradient(circle at center, #f5f7f9 0 26%, #9fa5ae 29% 44%, #2d3035 47% 100%);
  box-shadow:
    0 4px 12px rgba(0,0,0,0.22),
    inset 0 0 0 1px rgba(255,255,255,0.55);
}
.record-arm-line {
  width: 7px;
  height: 86px;
  border-radius: 999px;
  position: absolute;
  top: 25px;
  right: 23px;
  background: linear-gradient(90deg, #f8fafc 0%, #b9bec6 45%, #ffffff 100%);
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
  transform: rotate(10deg);
  transform-origin: top center;
}
.record-needle {
  width: 20px;
  height: 11px;
  border-radius: 5px;
  position: absolute;
  right: 31px;
  bottom: 12px;
  background: linear-gradient(135deg, #d9dde2, #8f96a1);
  box-shadow: 0 3px 7px rgba(0,0,0,0.18);
  transform: rotate(-18deg);
}
.record-title-input {
  width: 100%;
  max-width: 152px;
  min-width: 0;
  height: 24px;
  border: 0;
  border-bottom: 1px dashed transparent;
  outline: none;
  background: transparent;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
  text-shadow: 0 1px 4px rgba(255,255,255,0.55);
  padding: 0 4px;
}
.record-title-input:focus {
  border-bottom-color: var(--text3);
}
.record-title-input::placeholder {
  color: var(--text3);
}
.dark-mode .record-disc {
  background:
    repeating-radial-gradient(circle at center, rgba(255,255,255,0.16) 0 1px, transparent 1px 6px),
    radial-gradient(circle at 36% 28%, rgba(255,255,255,0.74) 0 5%, rgba(196,202,211,0.8) 18%, rgba(96,103,113,0.95) 42%, rgba(190,196,205,0.86) 66%, rgba(62,68,78,0.98) 100%);
  box-shadow:
    0 14px 24px rgba(0,0,0,0.36),
    inset 0 0 0 1px rgba(255,255,255,0.3),
    inset 0 0 34px rgba(255,255,255,0.12);
}
.dark-mode .record-title-input {
  text-shadow: 0 1px 5px rgba(0,0,0,0.4);
}
@keyframes silverRecordSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ===== 三图相框小组件 ===== */
.photo-frame-widget {
  display: flex;
  justify-content: center;
  padding: 6px 0;
}
.photo-frame-inner {
  background: rgba(255,255,255,0.78);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
  border: 2.5px solid rgba(255,255,255,0.85);
  width: 130px;
}
.dark-mode .photo-frame-inner {
  background: rgba(40,40,40,0.75);
  border-color: rgba(70,70,70,0.6);
  box-shadow: 0 4px 24px rgba(0,0,0,0.25);
}
.photo-frame-slot {
  width: 100%; aspect-ratio: 1;
  border-radius: 12px; overflow: hidden;
  background: rgba(240,240,240,0.5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: transform 0.15s;
  position: relative;
}
.dark-mode .photo-frame-slot {
  background: rgba(55,55,55,0.5);
}
.photo-frame-slot:active { transform: scale(0.96); }
.photo-frame-img {
  width: 100%; height: 100%; object-fit: cover;
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block;
}
.photo-frame-placeholder {
  text-align: center; color: var(--text3);
  font-size: 10px; display: flex; flex-direction: column;
  align-items: center; gap: 2px;
}
.photo-frame-placeholder span {
  font-size: 22px; opacity: 0.4; font-weight: 300;
}

/* ===== 小组件库列表 ===== */
.widget-library-list {
  display: flex; flex-direction: column; gap: 8px;
}
.widget-library-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-radius: 14px;
  background: var(--glass); border: 1px solid var(--glass-border);
  cursor: pointer; transition: transform 0.15s;
}
.widget-library-item:active { transform: scale(0.97); }
.widget-library-item-info {
  display: flex; align-items: center; gap: 10px;
}
.widget-library-item-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--glass-strong); display: flex;
  align-items: center; justify-content: center;
  font-size: 18px; color: var(--text);
}
.widget-library-item-name {
  font-size: 13px; font-weight: 600; color: var(--text);
}
.widget-library-item-status {
  font-size: 11px; color: var(--text3);
}
.widget-library-add-btn {
  padding: 6px 14px; border-radius: 10px; border: none;
  background: var(--text); color: var(--bg);
  font-size: 12px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: transform 0.15s;
}
.widget-library-add-btn:active { transform: scale(0.92); }
.widget-library-add-btn.added {
  background: var(--glass-strong); color: var(--text3);
  border: 1px solid var(--glass-border);
}

/* ===== 自定义小组件缩略预览 ===== */
.widget-library-item-custom {
  flex-wrap: wrap;
}
.widget-library-thumb-wrap {
  width: 48px; height: 48px; border-radius: 12px;
  overflow: hidden; flex-shrink: 0;
  border: 1px solid var(--glass-border);
  background: #f5f5f5;
}
.widget-library-thumb-iframe {
  width: 200px; height: 200px;
  border: none; pointer-events: none;
  transform: scale(0.24);
  transform-origin: top left;
  display: block;
}

/* Mobile: kill backdrop-filter on widget elements */
@media (pointer: coarse), (max-width: 900px) {
  .upload-modal,
  .upload-panel,
  .datetime-widget,
  .text-bubble,
  .silver-record-widget,
  .photo-frame-inner {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .upload-modal.keyboard-safe-modal {
    align-items: flex-start;
    padding-top: calc(16px + env(safe-area-inset-top, 0px));
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  .upload-modal.keyboard-safe-modal .upload-panel {
    max-height: calc(var(--app-visual-viewport-height, 100vh) - 32px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    margin-top: var(--app-visual-viewport-offset-top, 0px);
  }
}

/* ===== Runtime error dialog ===== */
.fg-runtime-error-modal {
  z-index: 1300;
}
.fg-runtime-error-panel {
  max-width: 390px;
  gap: 12px;
}
.fg-runtime-error-summary {
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255, 76, 76, 0.12);
  border: 1px solid rgba(255, 76, 76, 0.28);
  color: var(--text);
  font-size: 12px;
  line-height: 1.5;
  word-break: break-word;
}
.fg-runtime-error-text {
  margin: 0;
  width: 100%;
  max-height: min(46vh, 360px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  white-space: pre-wrap;
  word-break: break-word;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--glass-border);
  background: rgba(0, 0, 0, 0.08);
  color: var(--text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.55;
}
.fg-runtime-error-actions button {
  min-width: 0;
}
body.dark-mode .fg-runtime-error-text {
  background: rgba(255, 255, 255, 0.08);
}