/* portal 组件库 —— BEM + pt- 前缀 */

/* Icon */
.pt-icon { width: 1em; height: 1em; display: inline-block; vertical-align: -0.125em; flex-shrink: 0; }

/* Button */
.pt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 var(--sp-4);
  border-radius: 40px; font-weight: 600; font-size: var(--fs-base);
  border: 1px solid transparent; transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-micro) var(--ease);
  white-space: nowrap; text-decoration: none; line-height: 1;
}
.pt-btn:hover { text-decoration: none; }
.pt-btn--primary {
  background: var(--c-primary); color: #fff;
  box-shadow: var(--sh-primary-glow);
}
.pt-btn--primary:hover { background: var(--c-primary-hover); color: #fff; transform: translateY(-1px); }
.pt-btn--secondary { background: var(--c-bg); color: var(--c-primary); border-color: #c9d8ff; }
.pt-btn--secondary:hover { border-color: var(--c-primary); color: var(--c-primary); background: var(--c-primary-soft); }
.pt-btn--ghost { background: transparent; color: var(--c-primary); }
.pt-btn--ghost:hover { background: var(--c-primary-soft); }
.pt-btn--danger { background: var(--c-danger); color: #fff; }
.pt-btn--danger:hover { filter: brightness(.95); color: #fff; }
.pt-btn--accent { background: var(--c-accent); color: #fff; }
.pt-btn--accent:hover { filter: brightness(.95); color: #fff; }
.pt-btn--sm { height: 34px; padding: 0 16px; font-size: var(--fs-sm); border-radius: 40px; }
.pt-btn--lg { height: 48px; padding: 0 28px; font-size: var(--fs-md); border-radius: 12px; }
.pt-btn--block { width: 100%; }
.pt-btn:disabled, .pt-btn.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Avatar */
.pt-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #fff; color: var(--c-primary);
  font-weight: 600; overflow: hidden; flex-shrink: 0;
}
.pt-avatar--sm { width: 28px; height: 28px; font-size: var(--fs-xs); }
.pt-avatar--md { width: 36px; height: 36px; font-size: var(--fs-sm); }
.pt-avatar--lg { width: 48px; height: 48px; font-size: var(--fs-md); }
.pt-avatar img { width: 100%; height: 100%; object-fit: cover; background: #fff; }

/* Tag / Badge */
.pt-tag {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 8px;
  border-radius: var(--r-full); font-size: var(--fs-xs); font-weight: 500;
  background: var(--c-bg-page); color: var(--c-text-sub); border: 1px solid var(--c-border-light);
}
.pt-tag--primary { background: var(--c-primary-soft); color: var(--c-primary); border-color: transparent; }
.pt-tag--easy { background: #dcfce7; color: #15803d; border-color: transparent; }
.pt-tag--medium { background: #fef3c7; color: #b45309; border-color: transparent; }
.pt-tag--hard { background: #fee2e2; color: #b91c1c; border-color: transparent; }
.pt-badge {
  position: absolute; top: 8px; right: 8px;
  padding: 0 6px; height: 18px; line-height: 18px;
  border-radius: var(--r-sm); font-size: 10px; font-weight: 600; color: #fff; background: var(--c-accent);
}
.pt-badge--hot { background: var(--c-danger); }
.pt-badge--new { background: var(--c-primary); }
.pt-badge--free { background: var(--c-success); }

/* Card */
.pt-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--c-bg); border: 1px solid var(--c-border-light);
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--sh-1);
  transition: box-shadow var(--t-base) var(--ease-out-soft), border-color var(--t-fast), transform var(--t-base) var(--ease-out-soft);
}
a.pt-card:hover {
  border-color: #c7d7f5;
  box-shadow: var(--sh-3);
  transform: translateY(-3px);
  color: inherit; text-decoration: none;
}
.pt-card__cover {
  aspect-ratio: 16 / 9; background: var(--c-bg-page);
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pt-card__cover img { width: 100%; height: 100%; object-fit: cover; }
.pt-card__lang {
  font-size: 22px; font-weight: 800; letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
}
.pt-card__body { padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.pt-card__title {
  font-size: var(--fs-md); font-weight: 600; color: var(--c-text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pt-card__desc {
  font-size: var(--fs-sm); color: var(--c-text-sub);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pt-card__meta {
  margin-top: auto; padding-top: var(--sp-2);
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-xs); color: var(--c-text-weak);
}
.pt-card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 1199px) { .pt-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 991px)  { .pt-card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px)  { .pt-card-grid { grid-template-columns: 1fr; } }

/* Form */
.pt-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-4); }
.pt-label { font-size: var(--fs-sm); font-weight: 500; color: var(--c-text); }
.pt-input, .pt-select, .pt-textarea {
  width: 100%; height: 40px; padding: 0 var(--sp-3);
  border: 1px solid var(--c-border); border-radius: var(--r-md);
  background: var(--c-bg); transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.pt-textarea { height: auto; min-height: 96px; padding: var(--sp-3); resize: vertical; }
.pt-input:focus, .pt-select:focus, .pt-textarea:focus {
  outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-soft);
}
.pt-hint { font-size: var(--fs-xs); color: var(--c-text-weak); }
.pt-error { font-size: var(--fs-xs); color: var(--c-danger); }

/* Alert */
.pt-alert {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md); border: 1px solid transparent;
  border-left-width: 4px; font-size: var(--fs-base);
  margin-bottom: var(--sp-4);
}
.pt-alert--info    { background: #eff6ff; border-color: #bfdbfe; border-left-color: var(--c-primary); color: #1e40af; }
.pt-alert--success { background: #f0fdf4; border-color: #bbf7d0; border-left-color: var(--c-success); color: #166534; }
.pt-alert--warning { background: #fffbeb; border-color: #fde68a; border-left-color: var(--c-warning); color: #92400e; }
.pt-alert--danger  { background: #fef2f2; border-color: #fecaca; border-left-color: var(--c-danger); color: #991b1b; }

.pt-toast {
  position: fixed;
  top: 84px;
  left: 50%;
  z-index: 1200;
  transform: translateX(-50%);
  min-width: 160px;
  max-width: min(90vw, 420px);
  padding: 12px 22px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
  box-shadow: 0 10px 28px rgba(16, 24, 40, .14);
  animation: pt-toast-in .28s ease-out;
}
.pt-toast--success { background: var(--c-primary); color: #fff; }
.pt-toast--error { background: #dc2626; color: #fff; }
.pt-toast.is-out { animation: pt-toast-out .28s ease-in forwards; }
@keyframes pt-toast-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}
@keyframes pt-toast-out {
  from { opacity: 1; transform: translateX(-50%) translateY(0); }
  to { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}

/* Breadcrumb */
.pt-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 6px;
  margin-bottom: var(--sp-4);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--c-text-weak);
}
.pt-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 220px;
  padding: 3px 7px;
  border-radius: 6px;
  color: var(--c-text-sub);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.pt-breadcrumb a:hover {
  color: var(--c-primary);
  background: rgba(0, 83, 201, .06);
  text-decoration: none;
}
.pt-breadcrumb__home {
  max-width: none;
  font-weight: 500;
}
.pt-breadcrumb__home .pt-icon {
  width: 14px;
  height: 14px;
  color: #7b879c;
}
.pt-breadcrumb__home:hover .pt-icon { color: var(--c-primary); }
.pt-breadcrumb__sep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  color: #c2cad6;
  font-size: 11px;
  user-select: none;
}
.pt-breadcrumb__sep .pt-icon {
  width: 11px;
  height: 11px;
  opacity: .75;
}
.pt-breadcrumb__current {
  display: inline-flex;
  align-items: center;
  max-width: min(360px, 42vw);
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(0, 83, 201, .06);
  color: var(--c-primary-deep);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .pt-breadcrumb a { max-width: 120px; }
  .pt-breadcrumb__current { max-width: 46vw; }
  .pt-breadcrumb__home span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }
}

/* Pagination */
.pt-pagination {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--sp-2);
  margin-top: var(--sp-8);
}
.pt-pagination a, .pt-pagination span {
  min-width: 36px; height: 36px; padding: 0 10px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-md); border: 1px solid var(--c-border);
  background: var(--c-bg); color: var(--c-text); font-size: var(--fs-sm);
}
.pt-pagination a:hover { border-color: var(--c-primary); color: var(--c-primary); }
.pt-pagination .is-active {
  background: var(--c-primary); border-color: var(--c-primary); color: #fff;
}
.pt-pagination .is-disabled { opacity: .4; pointer-events: none; }

/* Progress */
.pt-progress {
  height: 6px; background: var(--c-border-light); border-radius: var(--r-full); overflow: hidden;
}
.pt-progress__bar {
  height: 100%; background: var(--c-primary); border-radius: var(--r-full);
  transition: width var(--t-base);
}

/* Empty */
.pt-empty {
  text-align: center; padding: var(--sp-12) var(--sp-4);
  color: var(--c-text-sub);
}
.pt-empty__icon {
  width: 48px; height: 48px; margin: 0 auto var(--sp-4);
  color: var(--c-text-weak);
}
.pt-empty__title { font-size: var(--fs-md); font-weight: 600; color: var(--c-text); margin-bottom: var(--sp-2); }
.pt-empty__desc { font-size: var(--fs-sm); margin-bottom: var(--sp-5); }

/* Skeleton */
.pt-skeleton {
  background: linear-gradient(90deg, var(--c-border-light) 25%, #eef0f3 50%, var(--c-border-light) 75%);
  background-size: 200% 100%;
  animation: pt-shimmer 1.2s ease-in-out infinite;
  border-radius: var(--r-md);
}
@keyframes pt-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Tabs */
.pt-tabs {
  display: flex; gap: var(--sp-5);
  border-bottom: 1px solid var(--c-border);
  margin-bottom: var(--sp-5);
}
.pt-tabs__item {
  position: relative; padding: var(--sp-3) 0;
  color: var(--c-text-sub); font-weight: 500; font-size: var(--fs-base);
}
.pt-tabs__item:hover { color: var(--c-primary); }
.pt-tabs__item.is-active { color: var(--c-primary); }
.pt-tabs__item.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--c-primary);
}

/* Section heading */
.pt-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.pt-section-title { font-size: var(--fs-xl); font-weight: 700; }
.pt-section-more { font-size: var(--fs-sm); font-weight: 500; }