/* 少量补充样式（主样式由 Tailwind 提供） */

/* 调色板滚动区 */
.palette-scroll::-webkit-scrollbar { width: 8px; }
.palette-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.palette-scroll::-webkit-scrollbar-track { background: transparent; }

/* 画布容器像素网格底纹 */
.checker-bg {
  background-image:
    linear-gradient(45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(-45deg, #f1f5f9 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #f1f5f9 75%),
    linear-gradient(-45deg, transparent 75%, #f1f5f9 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* 弹窗动画 */
.modal-overlay { animation: fadeIn .16s ease-out; }
.modal-card { animation: popIn .18s ease-out; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }

/* 轻提示动画 */
.toast-item { animation: slideIn .2s ease-out; }
@keyframes slideIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* 首页 hero 圆点串珠背景 */
.bead-dots-bg {
  background-image: radial-gradient(circle at 12% 30%, rgba(249,115,22,.16) 0 18px, transparent 19px),
    radial-gradient(circle at 30% 70%, rgba(14,165,233,.14) 0 14px, transparent 15px),
    radial-gradient(circle at 70% 25%, rgba(34,197,94,.14) 0 16px, transparent 17px),
    radial-gradient(circle at 85% 65%, rgba(225,29,72,.12) 0 20px, transparent 21px),
    radial-gradient(circle at 50% 85%, rgba(234,179,8,.14) 0 12px, transparent 13px);
}

/* 工具按钮激活态 */
.tool-btn.active { background: #ffedd5; color: #c2410c; border-color: #fb923c; }

/* 进度条 */
.progress-track { background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.progress-bar { background: linear-gradient(90deg, #fb923c, #f97316); height: 100%; transition: width .25s; }

/* 个人中心渐入动画（错峰） */
.fade-up { animation: fadeUp .5s cubic-bezier(.22,.61,.36,1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 分步向导内容切换渐入 */
.step-in { animation: stepIn .3s ease-out both; }
@keyframes stepIn { from { opacity: 0; transform: translateX(10px); } to { opacity: 1; transform: none; } }

/* 首页宣传栏内容切换 */
.bn-fade { animation: bnFade .4s ease-out both; }
@keyframes bnFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 顶栏下拉面板 */
.dropdown-panel { opacity: 0; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease; pointer-events: none; }
.dropdown-panel.open { opacity: 1; transform: none; pointer-events: auto; }

/* 编辑器画布全屏 */
/* 全屏编辑：内容精确填充视口（弹窗居中依赖此约束），画布区自动伸缩 */
#ed-stage:fullscreen {
  background: #fff; padding: 12px; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px;
}
#ed-stage:fullscreen #ed-left-toggle,
#ed-stage:fullscreen #ed-right-toggle { display: none; }
#ed-stage:fullscreen #ed-hover-row,
#ed-stage:fullscreen #ed-legend { display: none; }
#ed-stage:fullscreen #ed-wrap { flex: 1 1 0; min-height: 0; }
#ed-stage:fullscreen #ed-scroll { max-height: none !important; height: 100%; }
.modal-overlay-fs { position: absolute !important; inset: 0 !important; }

/* 编辑器小屏堆叠：画布收窄，面板更早进入视口 */
@media (max-width: 1023.98px) {
  .ed-stack #ed-scroll { max-height: 46vh !important; }
  .ed-stack #ed-hover-row { display: none; }
}

/* 充值中心：v1.16 起改成「分区 + 响应式栅格」，不再用手机端隐藏式二选一面板
   （档位多了以后要能一眼扫完，隐藏一半内容反而更难用）。
   原 .rc-panel / .rc-seg 规则已随改版一并移除，避免留下无人引用的死样式。 */

/* 页脚：刘海屏底部安全区不留白边 */
footer > div { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }

/* 隐藏滚动条但保留滚动功能（滚轮 / 拖拽 / 触摸滚动不受影响） */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* ---- 移动端：汉堡菜单抽屉 ---- */
.mobile-drawer { transform: translateX(-105%); transition: transform .22s ease-out; }
.mobile-drawer.open { transform: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ---- 移动端：旋转屏幕提示（悬浮胶囊，snackbar 风格；手机竖屏显示，横屏自动隐藏） ---- */
#rotate-hint { display: none; }
#rotate-hint.rotate-show {
  display: flex; align-items: center; gap: 10px;
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: max-content; max-width: 92vw;
  padding: 9px 9px 9px 16px;
  background: rgba(255, 251, 235, .97);
  border: 1px solid #fde68a; border-radius: 999px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
  color: #92400e; font-size: 12px; line-height: 1.5; z-index: 45;
  animation: hintUp .28s ease-out;
}
#rotate-hint span { flex: 1; }
#rotate-hint .rotate-hint-x {
  flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border-radius: 999px; color: #b45309; font-size: 15px; line-height: 1;
}
#rotate-hint .rotate-hint-x:hover { background: rgba(146, 64, 14, .1); }
@keyframes hintUp { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (orientation: portrait) and (max-width: 767px) {
  #rotate-hint.rotate-show { display: flex; }
}

/* ---- 移动端整体排版：收紧纵向留白与标题层级 ---- */
@media (max-width: 767px) {
  #app h1 { font-size: 1.375rem; line-height: 1.4; }
  #app > div > .py-8 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
}

/* ---- 编辑器竖屏堆叠模式（画布置顶吸顶，面板在下方滚动） ---- */
.ed-stack { flex-direction: column; }
.ed-stack > #ed-stage { order: -1; position: sticky; top: 3rem; z-index: 10; }


/* ================= v1.3 移动端 / 平板适配增强 ================= */

/* ---- 统一状态徽章：任何视口都不换行、不变形 ---- */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap; max-width: 100%; vertical-align: middle;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1.45;
  border: 1px solid transparent;
}
.badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 999px;
  background: currentColor; opacity: .7; flex-shrink: 0;
}
.badge-amber   { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.badge-emerald { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.badge-slate   { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }
.badge-rose    { background: #fff1f2; color: #be123c; border-color: #fecdd3; }
.badge-sky     { background: #f0f9ff; color: #0369a1; border-color: #bae6fd; }
.badge-violet  { background: #f5f3ff; color: #6d28d9; border-color: #ddd6fe; }

/* ---- 响应式数据表格：<768px 自动变为卡片式列表，状态列/日期永不挤压 ---- */
@media (max-width: 767.98px) {
  .rwd-table thead { display: none; }
  .rwd-table, .rwd-table tbody, .rwd-table tr, .rwd-table td { display: block; width: 100%; }
  .rwd-table tr {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 4px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
  }
  .rwd-table tr:last-child { margin-bottom: 0; }
  .rwd-table tr:hover { background: #fff; }
  .rwd-table td {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 7.5px 0; text-align: right;
  }
  .rwd-table td::before {
    content: attr(data-label);
    font-size: 11px; font-weight: 500; color: #94a3b8;
    flex-shrink: 0; text-align: left;
  }
  .rwd-table td[colspan] { justify-content: center; text-align: center; padding: 14px 0; }
  .rwd-table td[colspan]::before { content: none; }
  .rwd-table .col-seq { display: none; }
  .rwd-table td .truncate { white-space: normal; overflow: visible; text-overflow: unset; }
  .rwd-table td [class*="max-w-"] { max-width: 100% !important; }
}

/* ---- 页面切换动效：路由变化时内容淡入上浮（尊重减弱动效偏好） ---- */
@media (prefers-reduced-motion: no-preference) {
  .view-anim > * { animation: viewIn .38s cubic-bezier(.22, .61, .36, 1) both; }
  .view-anim > *:not(.fade-up):nth-child(2) { animation-delay: .05s; }
  .view-anim > *:not(.fade-up):nth-child(3) { animation-delay: .09s; }
  .view-anim > *:not(.fade-up):nth-child(n+4) { animation-delay: .13s; }
}
@keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- 移动端抽屉菜单：项目逐条滑入 ---- */
@media (prefers-reduced-motion: no-preference) {
  .mobile-drawer.open nav > * { animation: drawerIn .32s cubic-bezier(.22, .61, .36, 1) both; }
  .mobile-drawer.open nav > *:nth-child(1) { animation-delay: .04s; }
  .mobile-drawer.open nav > *:nth-child(2) { animation-delay: .07s; }
  .mobile-drawer.open nav > *:nth-child(3) { animation-delay: .1s; }
  .mobile-drawer.open nav > *:nth-child(4) { animation-delay: .13s; }
  .mobile-drawer.open nav > *:nth-child(5) { animation-delay: .16s; }
  .mobile-drawer.open nav > *:nth-child(6) { animation-delay: .19s; }
  .mobile-drawer.open nav > *:nth-child(n+7) { animation-delay: .22s; }
}
@keyframes drawerIn { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }

/* ---- 手机端输入字号（避免 iOS 聚焦自动放大） ---- */
@media (max-width: 767.98px) {
  input, textarea { font-size: 16px !important; }
}

/* ================= v1.4 小屏 / 低分辨率 / 横屏适配增强 ================= */

/* ---- 竖屏小屏（≤480px，覆盖 320/360/375 档）：收紧留白，把横向空间让给内容 ---- */
@media (max-width: 480px) {
  #app h1 { font-size: 1.25rem; line-height: 1.35; }
  #app h2 { font-size: 1.1rem; }
  #app .py-8 { padding-top: 1rem; padding-bottom: 1rem; }
  /* 卡片内边距收紧一档 */
  #app .p-5 { padding: 1rem; }
  #app .p-6 { padding: 1.15rem; }
  #app .px-5 { padding-left: 1rem; padding-right: 1rem; }
  /* 弹窗在小屏贴边，最大化可用面积（并允许纵向滚动） */
  .modal-overlay { padding: .75rem; align-items: flex-start; }
  .modal-card { max-height: calc(100dvh - 1.5rem); }
  /* 页脚更紧凑 */
  footer > div { padding-top: 1.25rem; padding-bottom: 1rem; }
}

/* ---- 横屏手机（可视高度很浅）：压缩顶部占位、取消吸顶、浮层改为顶对齐 ---- */
@media (orientation: landscape) and (max-height: 520px) {
  /* 编辑器：横屏下不再吸顶，否则本就很矮的视口会被画布区吃掉 */
  .ed-stack > #ed-stage { position: static; top: auto; }
  .ed-stack #ed-scroll { max-height: 64vh !important; }
  /* 横屏浮层：顶对齐 + 可滚动，避免竖排溢出屏幕 */
  .modal-overlay { align-items: flex-start; padding: .5rem; }
  .modal-card { max-height: calc(100dvh - 1rem); }
  /* 横屏时旋转提示无意义 */
  #rotate-hint.rotate-show { display: none; }
}

/* ---- 动态视口单位（dvh）渐进增强：规避移动端地址栏伸缩导致的底部遮挡 ---- */
@supports (height: 100dvh) {
  .modal-card { max-height: min(88dvh, calc(100dvh - 1.5rem)); }
  .ed-stack #ed-scroll { max-height: min(46vh, 46dvh) !important; }
}

/* ---- 触控设备：小屏下可点元素保证足够高度，减少误触 ---- */
@media (max-width: 767.98px) and (pointer: coarse) {
  /* 仅针对正文里的主要操作按钮/链接型按钮，避免影响小徽章 */
  #app .btn, #app .btn-lg { min-height: 44px; }
}

/* ---- 长内容防溢出：邮箱、订单号、兑换码、URL 等长串不撑破小屏 ---- */
@media (max-width: 767.98px) {
  #app code, #app .font-mono { overflow-wrap: anywhere; }
}


/* ---- 全屏加载遮罩（跨页面跳转过渡：登录成功 / 退出登录） ---- */
#page-loading {
  opacity: 0;
  transition: opacity .18s ease-out;
}
#page-loading.pd-loading-in {
  opacity: 1;
}
.pd-spinner {
  width: 42px;
  height: 42px;
  border-radius: 9999px;
  border: 3px solid #fed7aa;
  border-top-color: #f97316;
  animation: pd-spin .7s linear infinite;
}
@keyframes pd-spin {
  to { transform: rotate(360deg); }
}