/* Polished Component Definitions - Ultra Minimalist */

.c-glass,
.card,
.panel,
.topbar,
.tab-bar,
.modal-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--pn-border-subtle);
  background: var(--pn-glass-bg);
  box-shadow: var(--pn-elev-2);
  backdrop-filter: var(--pn-glass-blur);
  -webkit-backdrop-filter: var(--pn-glass-blur);
  border-radius: var(--pn-radius-xl);
  transition: transform var(--pn-motion-base) var(--pn-ease-spring), box-shadow var(--pn-motion-base) var(--pn-ease-spring);
}

/* 玻璃面板 1px 内高光 */
.c-glass::before,
.card::before,
.panel::before,
.topbar::before,
.tab-bar::before,
.modal-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

@media (prefers-color-scheme: dark) {
  .c-glass::before,
  .card::before,
  .panel::before,
  .topbar::before,
  .tab-bar::before,
  .modal-card::before {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  }
}

/* topbar sticky 时升一层 */
.topbar.is-sticky,
.topbar[data-sticky="true"] {
  box-shadow: var(--pn-elev-3);
  background: var(--pn-glass-strong);
  backdrop-filter: var(--pn-glass-strong-blur);
  -webkit-backdrop-filter: var(--pn-glass-strong-blur);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .c-glass,
  .card,
  .panel,
  .topbar,
  .tab-bar,
  .modal-card {
    background: var(--pn-surface-main);
  }
}

/* Button Foundation */
.btn,
.lb-btn,
.small-btn,
.tab-btn,
.year-action-btn,
.year-lock-btn,
.topbar-quick-btn,
.album-view-btn,
.icon-btn,
.picker-pill,
.dropdown-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--pn-radius-md);
  min-height: 36px;
  padding: 0 14px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--pn-text-primary);
  transition: all var(--pn-motion-fast) var(--pn-motion-spring-bouncy);
  -webkit-tap-highlight-color: transparent;
}

/* Default / Secondary Button (Ghost/Surface) */
.btn, .lb-btn, .small-btn, .year-lock-btn, .topbar-quick-btn, .picker-pill {
  background: var(--pn-surface-main);
  border: 1px solid var(--pn-line);
  box-shadow: var(--pn-shadow-sm);
}

.btn:hover, .lb-btn:hover, .year-lock-btn:hover, .topbar-quick-btn:hover, .picker-pill:not(.is-muted):hover {
  background: var(--pn-surface-main);
  box-shadow: var(--pn-elev-2);
  transform: translateY(-0.5px);
  transition-duration: var(--pn-motion-xfast);
}

.btn:active, .lb-btn:active, .year-lock-btn:active, .topbar-quick-btn:active, .picker-pill:not(.is-muted):active {
  transform: scale(0.97);
  opacity: 0.85;
  transition-duration: var(--pn-motion-xfast);
}

.btn:disabled, .year-action-btn:disabled, .topbar-quick-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* Primary Button */
.btn.primary,
.topbar-quick-btn.scan,
.album-view-btn.is-active,
.tab-btn.active,
.picker-pill.is-active {
  background: var(--pn-brand-500);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px var(--pn-brand-soft);
}

.btn.primary:hover,
.topbar-quick-btn.scan:hover,
.album-view-btn.is-active:hover,
.tab-btn.active:hover,
.picker-pill.is-active:hover {
  background: var(--pn-brand-hover);
  transform: translateY(-0.5px);
  box-shadow: 0 6px 16px var(--pn-brand-soft), var(--pn-elev-2);
  transition-duration: var(--pn-motion-xfast);
}

.btn.primary:active,
.topbar-quick-btn.scan:active,
.album-view-btn.is-active:active,
.tab-btn.active:active,
.picker-pill.is-active:active {
  background: var(--pn-brand-active);
  transform: scale(0.96);
  transition-duration: var(--pn-motion-xfast);
}

/* Icon Buttons & Dropdowns */
.icon-btn {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--pn-radius-sm);
  background: transparent;
  border: none;
  box-shadow: none;
  color: var(--pn-text-secondary);
}

.icon-btn:hover {
  background: var(--pn-line);
  color: var(--pn-text-primary);
  transform: none;
}

.icon-btn:active {
  transform: scale(0.92);
}

/* Inputs */
input,
textarea,
select {
  border-radius: var(--pn-radius-sm);
  border: 1px solid var(--pn-border-default);
  background: var(--pn-surface-main);
  padding: 10px 14px;
  font-size: var(--pn-text-md);
  color: var(--pn-text-primary);
  transition: all var(--pn-motion-fast) var(--pn-ease-standard);
  appearance: none;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid transparent;
  border-color: var(--pn-border-focus);
  box-shadow: var(--pn-focus-ring);
}

/* Focus Rings Globally */
:where(
  button,
  button[type="submit"],
  button[type="reset"],
  [type="button"],
  [type="submit"],
  [type="reset"],
  [role="button"],
  .btn,
  .tab-btn,
  .small-btn,
  .lb-btn,
  .icon-btn,
  .dropdown-item
):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--pn-focus-ring);
}

/* ———— 按钮尺寸 / 变体修饰符 ———— */
.btn.sm {
  min-height: 28px;
  padding: 0 10px;
  font-size: var(--pn-text-xs);
}
.btn.lg {
  min-height: 44px;
  padding: 0 18px;
  font-size: var(--pn-text-md);
}

.btn.ghost {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
}
.btn.ghost:hover {
  background: var(--pn-tint-1);
  box-shadow: none;
  transform: none;
}
.btn.ghost:active {
  background: var(--pn-tint-2);
  transform: scale(0.96);
}

.btn.subtle {
  background: var(--pn-tint-1);
  border: 1px solid transparent;
  box-shadow: none;
  color: var(--pn-text-primary);
}
.btn.subtle:hover {
  background: var(--pn-tint-2);
  box-shadow: none;
  transform: translateY(-0.5px);
}
.btn.subtle:active {
  background: var(--pn-tint-3);
  transform: scale(0.96);
}

.btn.danger {
  background: var(--pn-danger);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(255, 59, 48, 0.22);
}
.btn.danger:hover {
  background: var(--pn-danger);
  filter: brightness(0.95);
  transform: translateY(-0.5px);
  box-shadow: 0 6px 16px rgba(255, 59, 48, 0.28);
}
.btn.danger:active {
  transform: scale(0.96);
  filter: brightness(0.9);
}

/* ———— 表单字段容器 ———— */
.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--pn-space-1);
}
.form-label {
  font-size: var(--pn-text-xs);
  font-weight: var(--pn-weight-medium);
  color: var(--pn-text-secondary);
  letter-spacing: 0.01em;
}

/* ———— Dropdown Menu（全站共用） ———— */
.dropdown-menu {
  border-radius: var(--pn-radius-lg);
  background: var(--pn-glass-strong);
  backdrop-filter: var(--pn-glass-strong-blur);
  -webkit-backdrop-filter: var(--pn-glass-strong-blur);
  border: 1px solid var(--pn-border-subtle);
  box-shadow: var(--pn-elev-3);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 160px;
}
.dropdown-menu .dropdown-item {
  justify-content: flex-start;
  min-height: 32px;
  padding: 0 10px;
  border-radius: var(--pn-radius-sm);
  font-size: var(--pn-text-sm);
  color: var(--pn-text-primary);
  background: transparent;
  box-shadow: none;
  border: none;
  width: 100%;
}
.dropdown-menu .dropdown-item:hover {
  background: var(--pn-tint-1);
  transform: none;
  box-shadow: none;
}
.dropdown-menu .dropdown-item:active {
  background: var(--pn-tint-2);
}

/* ———— Modal Mask 进入动画 ———— */
.modal-mask {
  transition: opacity var(--pn-motion-base) var(--pn-ease-decel);
}
.modal-mask.is-visible {
  animation: pn-modal-mask-in var(--pn-motion-base) var(--pn-ease-decel);
}
.modal-mask.is-visible .modal-card {
  animation: pn-modal-card-in var(--pn-motion-base) var(--pn-ease-decel);
}
@keyframes pn-modal-mask-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pn-modal-card-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .modal-mask.is-visible,
  .modal-mask.is-visible .modal-card {
    animation: none;
  }
}

/* ———— 骨架屏 ———— */
.pn-skeleton,
.pn-skeleton-row,
.pn-skeleton-card {
  position: relative;
  overflow: hidden;
  background: var(--pn-skeleton-base);
  border-radius: var(--pn-radius-sm);
  isolation: isolate;
}
.pn-skeleton::after,
.pn-skeleton-row::after,
.pn-skeleton-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--pn-skeleton-highlight) 50%,
    transparent 100%
  );
  animation: pn-skeleton-shimmer 1.4s infinite;
  transform: translateX(-100%);
}
/* 行骨架：文本行占位 */
.pn-skeleton-row {
  display: block;
  height: 14px;
  width: 100%;
  border-radius: 7px;
}
/* 卡片骨架：图片/块占位 */
.pn-skeleton-card {
  display: block;
  width: 100%;
  border-radius: 14px;
  min-height: 120px;
}
@keyframes pn-skeleton-shimmer {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}
@media (prefers-reduced-motion: reduce) {
  .pn-skeleton::after,
  .pn-skeleton-row::after,
  .pn-skeleton-card::after { animation: none; }
}

/* ———— Badge & Divider ———— */
.pn-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: var(--pn-text-2xs);
  font-weight: var(--pn-weight-semibold);
  line-height: 1;
  background: var(--pn-tint-2);
  color: var(--pn-text-secondary);
  letter-spacing: 0.02em;
}
.pn-badge.is-brand { background: var(--pn-brand-soft); color: var(--pn-brand-500); }
.pn-badge.is-ok { background: color-mix(in srgb, var(--pn-ok) 16%, transparent); color: var(--pn-ok); }
.pn-badge.is-warn { background: color-mix(in srgb, var(--pn-warn) 16%, transparent); color: var(--pn-warn); }
.pn-badge.is-danger { background: color-mix(in srgb, var(--pn-danger) 14%, transparent); color: var(--pn-danger); }

.pn-divider {
  display: block;
  height: 1px;
  width: 100%;
  background: var(--pn-border-subtle);
  border: 0;
  margin: var(--pn-space-2) 0;
}

/* Reduced Motion Ripple */
.pn-ripple-host {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.pn-ripple-node {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: currentColor;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0.1;
  pointer-events: none;
  animation: pn-ripple 0.4s ease-out forwards;
}

@keyframes pn-ripple {
  0% { transform: translate(-50%, -50%) scale(0); opacity: 0.15; }
  100% { transform: translate(-50%, -50%) scale(var(--pn-ripple-scale, 20)); opacity: 0; }
}

/* Motion Classes */
.pn-fade-enter, .pn-fade-leave { will-change: opacity, transform; }
.pn-fade-enter { opacity: 0; transform: translateY(8px); }
.pn-fade-enter.pn-fade-enter-active { opacity: 1; transform: translateY(0); transition: opacity var(--pn-motion-base) var(--pn-ease-standard), transform var(--pn-motion-base) var(--pn-ease-spring); }
.pn-fade-leave { opacity: 1; transform: translateY(0); }
.pn-fade-leave.pn-fade-leave-active { opacity: 0; transform: translateY(-8px); transition: opacity var(--pn-motion-fast) var(--pn-ease-standard), transform var(--pn-motion-fast) var(--pn-ease-spring); }

.pn-stagger-item { opacity: 0; transform: translateY(8px); }
.pn-stagger-item.is-in {
  opacity: 1; transform: translateY(0);
  transition: opacity var(--pn-motion-base) var(--pn-ease-standard), transform var(--pn-motion-base) var(--pn-ease-spring);
  transition-delay: calc(var(--pn-stagger-index, 0) * 30ms);
}

.pn-presence { pointer-events: auto; }
.pn-presence.pn-presence-closing { pointer-events: none; }

.u-hidden { display: none !important; }

/* Dark mode input overrides */
@media (prefers-color-scheme: dark) {
  input, textarea, select {
    background: rgba(255, 255, 255, 0.05);
    border-color: var(--pn-line);
  }
  input:focus, textarea:focus, select:focus {
    background: rgba(255, 255, 255, 0.1);
  }
}

/* ———— 空态容器 .pn-empty ————
   结构：
     <div class="pn-empty">
       <div class="pn-empty__icon">…svg…</div>
       <div class="pn-empty__title">没有内容</div>
       <div class="pn-empty__desc">描述文本</div>
       <button class="pn-empty__action btn">操作</button>
     </div>
*/
.pn-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--pn-space-2);
  min-height: 180px;
  padding: 32px 20px;
  text-align: center;
  color: var(--pn-text-secondary);
}
.pn-empty__icon {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: var(--pn-empty-icon-opacity);
  color: var(--pn-text-tertiary);
  margin-bottom: var(--pn-space-1);
}
.pn-empty__icon > svg,
.pn-empty__icon > img {
  width: 100%;
  height: 100%;
  display: block;
}
.pn-empty__title {
  font-size: var(--pn-text-lg);
  font-weight: var(--pn-weight-semibold);
  color: var(--pn-text-primary);
  line-height: var(--pn-lh-snug);
}
.pn-empty__desc {
  font-size: var(--pn-text-sm);
  color: var(--pn-text-secondary);
  line-height: var(--pn-lh-normal);
  max-width: 32ch;
}
.pn-empty__action {
  margin-top: var(--pn-space-3);
}

/* ———— 字段内联错误 .pn-input-error ————
   双层动画：max-height + opacity；父层控制展开高度，子层做淡入。
   用法：
     <div class="pn-input-error" aria-live="polite" data-visible="true">
       <span class="pn-input-error__icon">!</span>
       <span class="pn-input-error__text">邮箱格式不正确</span>
     </div>
   默认折叠；通过 data-visible="true" 或 .is-visible 展开。
*/
.pn-input-error {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transform: translateY(-2px);
  transition:
    max-height var(--pn-motion-base) var(--pn-ease-decel),
    opacity var(--pn-motion-fast) var(--pn-ease-standard),
    transform var(--pn-motion-fast) var(--pn-ease-standard);
  color: var(--pn-danger);
  font-size: var(--pn-text-xs);
  line-height: var(--pn-lh-snug);
  display: flex;
  align-items: flex-start;
  gap: var(--pn-space-1);
}
.pn-input-error.is-visible,
.pn-input-error[data-visible="true"] {
  max-height: 64px;
  opacity: 1;
  transform: translateY(0);
  margin-top: var(--pn-space-1);
}
.pn-input-error__icon {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--pn-weight-bold);
}
.pn-input-error__text { flex: 1 1 auto; }

/* ———— 不确定型进度条 .pn-progress.is-indeterminate ————
   用于 Admin 更新日志等「正在加载但无进度百分比」场景。
   结构：
     <div class="pn-progress is-indeterminate"><span></span></div>
*/
.pn-progress {
  position: relative;
  width: 100%;
  height: 3px;
  border-radius: 999px;
  background: var(--pn-tint-2);
  overflow: hidden;
}
.pn-progress > span,
.pn-progress__bar {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--pn-brand-500);
  transform-origin: left center;
}
.pn-progress.is-indeterminate > span,
.pn-progress.is-indeterminate .pn-progress__bar,
.pn-progress.is-indeterminate::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--pn-brand-500) 50%,
    transparent 100%
  );
  animation: pn-progress-indeterminate 1.2s linear infinite;
}
@keyframes pn-progress-indeterminate {
  from { transform: translateX(-100%); }
  to   { transform: translateX(320%); }
}
@media (prefers-reduced-motion: reduce) {
  .pn-progress.is-indeterminate > span,
  .pn-progress.is-indeterminate .pn-progress__bar,
  .pn-progress.is-indeterminate::before { animation: none; }
}

/* ———— 页面级加载遮罩 .pn-loading-mask ————
   结构：<div class="pn-loading-mask"><div class="pn-loading-mask__spinner"></div></div>
*/
.pn-loading-mask {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--pn-glass-bg-2);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  animation: pn-mask-fade-in var(--pn-motion-base) var(--pn-ease-decel);
}
.pn-loading-mask[hidden] { display: none; }
.pn-loading-mask__spinner {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--pn-tint-3);
  border-top-color: var(--pn-brand-500);
  animation: pn-spin 0.9s linear infinite;
}
@keyframes pn-mask-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes pn-spin {
  to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
  .pn-loading-mask { animation: none; }
  .pn-loading-mask__spinner { animation-duration: 1.8s; }
}

/* ———— 通用禁用态透明度 ———— */
:where(.btn, .small-btn, .lb-btn, .icon-btn, .tab-btn, .picker-pill, .dropdown-item)[disabled],
:where(.btn, .small-btn, .lb-btn, .icon-btn, .tab-btn, .picker-pill, .dropdown-item)[aria-disabled="true"] {
  opacity: var(--pn-disabled-opacity);
  cursor: not-allowed;
  pointer-events: none;
}

/* ———— 全局滚动条（薄、低对比） ———— */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--pn-tint-3) transparent;
}
*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--pn-tint-3);
  border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--pn-tint-4); }