:root {
  --pd-bg: #e7eaed;
  --pd-surface: #ffffff;
  --pd-surface-soft: #f2fbfd;
  --pd-border: #c8dfeb;
  --pd-ink: #11243a;
  --pd-muted: #4f6479;
  --pd-primary: #1da6c5;
  --pd-primary-strong: #0b5f7d;
  --pd-primary-soft: #ddf5fb;
  --pd-secondary: #1cae8a;
  --pd-accent: #f08a24;
  --pd-success: #1f9d63;
  --pd-warning: #e5a11b;
  --pd-night: #0a2135;
  --pd-glow: rgba(29, 166, 197, 0.3);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Manrope", "Segoe UI", Tahoma, sans-serif;
  color: var(--pd-ink);
  background: linear-gradient(180deg, #eceff1 0%, var(--pd-bg) 100%);
}

a {
  color: inherit;
}

.hidden {
  display: none !important;
}

.pd-container {
  width: min(1220px, calc(100% - 2rem));
  margin-inline: auto;
}

.pd-header {
  position: sticky;
  top: 0;
  z-index: 60;
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.pd-header-shell {
  display: flex;
  align-items: center;
  gap: 1rem;
  justify-content: space-between;
  min-height: 74px;
}

.pd-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  border-radius: 999px;
  transition: transform 0.2s ease;
}

.pd-logo:hover {
  transform: translateY(-1px);
}

.pd-logo img {
  width: auto;
  height: 34px;
}

.pd-auth-area {
  display: none;
  align-items: center;
  justify-content: flex-end;
  min-width: 110px;
}

.pd-mobile-auth {
  margin-top: 0.2rem;
}

.pd-desktop-nav {
  display: none;
  align-items: center;
  gap: 0.25rem;
  margin-left: auto;
  margin-right: 0.5rem;
}

.pd-nav-link,
.pd-nav-toggle {
  border: 0;
  background: transparent;
  color: #1f2937;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.01em;
  font-size: 0.86rem;
  line-height: 1;
  border-radius: 999px;
  padding: 0.65rem 0.9rem;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pd-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.pd-nav-label {
  white-space: nowrap;
}

.pd-nav-link-icon {
  min-width: 44px;
  justify-content: center;
  gap: 0.3rem;
  padding: 0.62rem 0.72rem;
}

.pd-nav-link-icon i {
  font-size: 0.92rem;
}

.pd-nav-link-icon .pd-nav-count {
  margin-left: 0.08rem;
}

.pd-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.pd-nav-count {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--pd-accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 0 0.28rem;
}

.pd-inline-counter {
  margin-left: 0.42rem;
  min-width: 20px;
  height: 20px;
  border-radius: 999px;
  background: var(--pd-accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0 0.34rem;
  vertical-align: middle;
}

.pd-nav-link:hover,
.pd-nav-toggle:hover {
  background: linear-gradient(135deg, var(--pd-primary-soft), #ffffff);
  color: var(--pd-primary-strong);
  box-shadow: inset 0 0 0 1px rgba(0, 110, 168, 0.14);
}

.pd-nav-link.is-active,
.pd-nav-toggle.is-active {
  color: var(--pd-primary-strong);
  background: linear-gradient(135deg, var(--pd-primary-soft), #ffffff);
  box-shadow: inset 0 0 0 1px rgba(0, 110, 168, 0.18);
}

.pd-nav-dropdown {
  position: relative;
}

.pd-nav-toggle-icon {
  margin-left: 0.45rem;
  font-size: 0.72rem;
  transition: transform 0.2s ease;
}

.pd-nav-dropdown.is-open .pd-nav-toggle-icon {
  transform: rotate(180deg);
}

.pd-submenu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 250px;
  border: 1px solid var(--pd-border);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 24px 40px -24px rgba(8, 26, 49, 0.45);
  padding: 0.5rem;
  display: none;
}

.pd-nav-dropdown.is-open .pd-submenu {
  display: grid;
  gap: 0.25rem;
  animation: pd-rise-in 0.18s ease-out;
}

.pd-submenu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  text-decoration: none;
  border-radius: 12px;
  padding: 0.7rem 0.72rem;
  color: #1f2937;
  font-size: 0.88rem;
  font-weight: 700;
  transition: all 0.2s ease;
}

.pd-submenu-item:hover {
  color: var(--pd-primary-strong);
  background: linear-gradient(135deg, var(--pd-primary-soft), #ffffff);
}

.pd-submenu-item.is-active {
  background: linear-gradient(135deg, var(--pd-primary-soft), #ffffff);
  color: var(--pd-primary-strong);
}

.pd-mobile-toggle {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--pd-border);
  color: #0f172a;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

#mobile-menu {
  border-top: 1px solid rgba(15, 23, 42, 0.08);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(8px);
}

#mobile-menu.hidden {
  display: none;
}

.pd-mobile-panel {
  width: min(1220px, calc(100% - 2rem));
  margin-inline: auto;
  padding: 0.8rem 0 1rem;
}

.pd-mobile-link,
.pd-mobile-toggle-link {
  width: 100%;
  border: 0;
  background: transparent;
  border-radius: 14px;
  color: #1f2937;
  text-decoration: none;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.88rem 0.92rem;
}

.pd-mobile-link:hover,
.pd-mobile-toggle-link:hover {
  background: linear-gradient(135deg, var(--pd-primary-soft), #ffffff);
  color: var(--pd-primary-strong);
}

.pd-mobile-link.is-active,
.pd-mobile-toggle-link.is-active {
  background: var(--pd-primary-soft);
  color: var(--pd-primary-strong);
}

.pd-mobile-app-link {
  margin-bottom: 0.42rem;
  border: 1px solid rgba(11, 95, 125, 0.22);
  background: linear-gradient(135deg, rgba(225, 247, 255, 0.95), rgba(236, 253, 250, 0.92));
  align-items: center;
}

.pd-mobile-app-link:hover {
  border-color: rgba(11, 95, 125, 0.34);
  background: linear-gradient(135deg, rgba(213, 242, 255, 0.98), rgba(228, 251, 246, 0.95));
}

.pd-mobile-app-copy {
  display: grid;
  gap: 0.14rem;
}

.pd-mobile-app-title {
  font-size: 0.92rem;
  color: #124766;
  line-height: 1.2;
}

.pd-mobile-app-subtitle {
  font-size: 0.76rem;
  color: #43617a;
  font-weight: 700;
  line-height: 1.2;
}

.pd-mobile-app-badge {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #0ea5e9, #14b8a6);
  color: #ffffff;
  box-shadow: 0 10px 16px -14px rgba(11, 95, 125, 0.75);
}

.pd-mobile-submenu {
  display: none;
  margin-left: 0.7rem;
  padding-left: 0.7rem;
  border-left: 2px solid var(--pd-border);
}

.pd-mobile-submenu.is-open {
  display: grid;
  animation: pd-rise-in 0.18s ease-out;
}

.pd-mobile-submenu .pd-mobile-link {
  font-size: 0.9rem;
}

.pd-mobile-chevron {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
}

.pd-mobile-toggle-link[aria-expanded="true"] .pd-mobile-chevron {
  transform: rotate(180deg);
}

#app-content {
  min-height: 60vh;
}

.pd-page {
  padding: clamp(1rem, 2.5vw, 2.25rem) 0 0;
}

.pd-section {
  margin-top: clamp(1.4rem, 3vw, 2.8rem);
}

.pd-adoption-center-stats-section {
  margin-top: clamp(0.95rem, 1.8vw, 1.35rem);
}

.pd-adoption-center-stats-section .pd-kpi-grid {
  margin-top: 0.2rem;
}

.pd-adoption-center-list-section {
  margin-top: clamp(1.05rem, 2vw, 1.55rem);
}

.pd-adoption-center-list-section + .pd-adoption-center-list-section {
  margin-top: clamp(1rem, 1.9vw, 1.45rem);
}

.pd-adoption-center-list-section .pd-section-head {
  margin-bottom: 0.8rem;
}

.pd-home-feed-section {
  display: grid;
  gap: 1rem;
}

.pd-home-feed-head {
  border-radius: 22px;
  border: 1px solid rgba(0, 168, 232, 0.2);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(230, 247, 255, 0.8));
  padding: clamp(1rem, 2vw, 1.4rem);
}

.pd-home-feed-head h2 {
  margin: 0.7rem 0 0.45rem;
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  letter-spacing: -0.01em;
}

.pd-home-feed-head p {
  margin: 0;
  color: var(--pd-muted);
  line-height: 1.55;
  max-width: 820px;
  font-weight: 600;
}

.pd-home-feed-frame {
  padding: 0.38rem;
  border-radius: 30px;
  background: linear-gradient(135deg, rgba(0, 168, 232, 0.32), rgba(20, 184, 166, 0.2), rgba(249, 115, 22, 0.15));
  box-shadow: 0 26px 54px -36px var(--pd-glow);
}

.pd-home-feed-inner {
  border-radius: 26px;
  overflow: hidden;
}

.pd-home-feed-gate {
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(236, 253, 250, 0.75), rgba(230, 247, 255, 0.8));
  border: 1px solid rgba(0, 168, 232, 0.2);
  padding: 1rem;
}

.pd-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid rgba(0, 168, 232, 0.28);
  background: linear-gradient(135deg, rgba(230, 247, 255, 0.96), rgba(236, 253, 250, 0.82));
  color: var(--pd-primary-strong);
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 999px;
  padding: 0.45rem 0.82rem;
  letter-spacing: 0.03em;
}

.pd-cat-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.72rem;
  border-radius: 999px;
  border: 1.5px solid rgba(0, 168, 232, 0.28);
  background: #f8fbff;
  color: #374151;
  font-size: 0.73rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  user-select: none;
}

.pd-cat-chip:hover {
  background: rgba(224, 247, 255, 0.85);
  border-color: rgba(0, 168, 232, 0.5);
}

.pd-cat-chip.is-active {
  background: linear-gradient(135deg, #0ea5e9, #0891b2);
  border-color: #0284c7;
  color: #ffffff;
  font-weight: 700;
}

.hero-shell {
  background: linear-gradient(132deg, rgba(230, 247, 255, 0.95), rgba(236, 253, 250, 0.88) 55%, rgba(255, 247, 237, 0.82));
  border: 1px solid rgba(0, 168, 232, 0.22);
  border-radius: 28px;
  box-shadow: 0 22px 48px -30px var(--pd-glow);
  overflow: hidden;
  padding: clamp(1.2rem, 2.2vw, 2rem);
}

.hero-grid {
  display: grid;
  gap: 1.6rem;
  align-items: center;
}

.hero-copy h1 {
  margin: 0.9rem 0 0.95rem;
  font-size: clamp(1.95rem, 4.1vw, 3.5rem);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--pd-ink);
}

.hero-highlight {
  color: var(--pd-primary-strong);
}

.hero-copy p {
  margin: 0;
  color: var(--pd-muted);
  font-size: 1.02rem;
  line-height: 1.62;
  max-width: 610px;
}

.hero-actions {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

.pd-btn {
  border: 0;
  border-radius: 14px;
  padding: 0.82rem 1.08rem;
  font-size: 0.92rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
}

.pd-btn-primary {
  color: #ffffff;
  background: linear-gradient(120deg, var(--pd-primary-strong), var(--pd-primary));
  box-shadow: 0 14px 30px -18px var(--pd-glow);
}

.pd-btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 36px -18px var(--pd-glow);
}

.pd-btn-secondary {
  color: var(--pd-primary-strong);
  border: 1px solid rgba(0, 168, 232, 0.36);
  background: rgba(255, 255, 255, 0.92);
}

.pd-btn-secondary:hover {
  background: #eefaff;
  border-color: rgba(0, 168, 232, 0.52);
}

.hero-metrics {
  margin-top: 1.3rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.hero-metric {
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 168, 232, 0.2);
  padding: 0.78rem 0.82rem;
}

.hero-metric strong {
  display: block;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.hero-metric span {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.78rem;
  color: #64748b;
  font-weight: 700;
}

.hero-media {
  position: relative;
  padding-top: 0.4rem;
}

.hero-image {
  width: 100%;
  height: clamp(250px, 42vw, 430px);
  border-radius: 22px;
  object-fit: cover;
  border: 1px solid rgba(0, 168, 232, 0.28);
  box-shadow: 0 30px 42px -32px rgba(15, 23, 42, 0.75);
}

.hero-float-card {
  position: absolute;
  right: 0.85rem;
  bottom: 0.85rem;
  max-width: 220px;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0, 168, 232, 0.24);
  padding: 0.7rem 0.8rem;
  box-shadow: 0 16px 30px -24px var(--pd-glow);
}

.hero-float-card strong {
  display: block;
  font-size: 0.86rem;
}

.hero-float-card span {
  display: block;
  margin-top: 0.22rem;
  color: #64748b;
  font-size: 0.78rem;
  font-weight: 700;
}

.pd-section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.pd-section-head h2 {
  margin: 0;
  font-size: clamp(1.34rem, 2.5vw, 2rem);
  letter-spacing: -0.01em;
}

.pd-section-head p {
  margin: 0;
  color: var(--pd-muted);
  font-weight: 600;
  max-width: 540px;
}

.pd-grid-2,
.pd-grid-3,
.pd-grid-4 {
  display: grid;
  gap: 0.85rem;
}

.pd-card {
  background: var(--pd-surface);
  border: 1px solid var(--pd-border);
  border-radius: 20px;
  padding: 1.05rem 1.05rem;
  box-shadow: 0 18px 36px -34px rgba(0, 110, 168, 0.55);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pd-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 44px -30px rgba(0, 110, 168, 0.48);
}

.pd-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pd-primary-strong);
  background: linear-gradient(135deg, var(--pd-primary-soft), #dbf4ff);
  box-shadow: inset 0 0 0 1px rgba(0, 168, 232, 0.18);
  margin-bottom: 0.7rem;
}

.pd-card h3 {
  margin: 0 0 0.42rem;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.pd-card p {
  margin: 0;
  color: #526173;
  line-height: 1.55;
  font-size: 0.93rem;
}

.pd-card .pd-link-inline {
  margin-top: 0.78rem;
}

.pd-link-inline {
  text-decoration: none;
  color: var(--pd-primary-strong);
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
}

.pd-link-inline:hover {
  color: #0c4a6e;
}

.pd-route-card {
  position: relative;
  overflow: hidden;
}

.pd-route-card::before {
  content: "";
  position: absolute;
  inset: -45% 45% 60% -25%;
  border-radius: 999px;
  background: rgba(0, 168, 232, 0.1);
  pointer-events: none;
}

.pd-list {
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.pd-list li {
  color: #334155;
  font-size: 0.88rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pd-list li i {
  color: var(--pd-primary);
}

.pd-cta-block {
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  border-radius: 24px;
  border: 1px solid rgba(0, 168, 232, 0.45);
  background: linear-gradient(130deg, var(--pd-night), var(--pd-primary-strong));
  color: #f8fafc;
  padding: clamp(1.2rem, 2.6vw, 2rem);
  display: grid;
  gap: 1rem;
}

.pd-cta-block h3 {
  margin: 0;
  font-size: clamp(1.25rem, 2.8vw, 1.8rem);
}

.pd-cta-block p {
  margin: 0;
  color: #d9f2ff;
  line-height: 1.6;
}

.pd-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
}

.pd-btn-light {
  background: #ffffff;
  color: var(--pd-primary-strong);
}

.pd-btn-light:hover {
  background: #e7f8ff;
}

.pd-page-header {
  display: none !important;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(230, 247, 255, 0.78) 58%, rgba(255, 247, 237, 0.72));
  border: 1px solid rgba(0, 168, 232, 0.26);
  box-shadow: 0 20px 40px -34px rgba(0, 110, 168, 0.5);
  padding: clamp(1.1rem, 2.4vw, 1.8rem);
}

.pd-page-header h1 {
  margin: 0.7rem 0 0.55rem;
  font-size: clamp(1.55rem, 3vw, 2.45rem);
  letter-spacing: -0.01em;
}

.pd-page-header p {
  margin: 0;
  color: var(--pd-muted);
  max-width: 760px;
  line-height: 1.6;
}

.pd-kpi-grid {
  margin-top: 1rem;
  display: grid;
  gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.pd-kpi {
  border-radius: 14px;
  border: 1px solid rgba(0, 168, 232, 0.24);
  background: rgba(255, 255, 255, 0.9);
  padding: 0.72rem 0.8rem;
}

.pd-kpi strong {
  display: block;
  font-size: 1.04rem;
}

.pd-kpi span {
  display: block;
  margin-top: 0.2rem;
  color: #64748b;
  font-size: 0.77rem;
  font-weight: 700;
}

.pd-timeline {
  display: grid;
  gap: 0.7rem;
}

.pd-timeline-item {
  border: 1px solid var(--pd-border);
  border-radius: 16px;
  background: #ffffff;
  padding: 0.82rem 0.9rem;
}

.pd-timeline-item h4 {
  margin: 0 0 0.25rem;
  font-size: 0.96rem;
}

.pd-timeline-item p {
  margin: 0;
  color: #526173;
  font-size: 0.88rem;
  line-height: 1.5;
}

.pd-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: 0.7rem;
  letter-spacing: 0.03em;
  font-weight: 800;
  padding: 0.34rem 0.54rem;
  margin-bottom: 0.45rem;
}

.pd-badge-success {
  color: #166534;
  background: rgba(22, 163, 74, 0.15);
}

.pd-badge-warning {
  color: #92400e;
  background: rgba(245, 158, 11, 0.18);
}

.pd-badge-primary {
  color: #0c4a6e;
  background: rgba(14, 165, 233, 0.18);
}

.pd-footer {
  margin-top: 2.4rem;
  background: linear-gradient(145deg, #081a31, #0b2643);
  color: #e2e8f0;
  border-top: 1px solid rgba(148, 163, 184, 0.2);
}

.pd-footer-shell {
  padding: 2.2rem 0 1.2rem;
}

.pd-footer-grid {
  display: grid;
  gap: 1rem;
}

.pd-footer h3,
.pd-footer h4 {
  margin: 0 0 0.65rem;
  color: #f8fafc;
}

.pd-footer p,
.pd-footer a {
  color: #cbd5e1;
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.55;
}

.pd-footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.48rem;
}

.pd-footer a:hover {
  color: #7dd3fc;
}

.pd-footer-bottom {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(148, 163, 184, 0.18);
  color: #94a3b8;
  font-size: 0.79rem;
}

.dropdown-menu {
  border: 1px solid var(--pd-border);
  border-radius: 16px;
  box-shadow: 0 24px 42px -30px rgba(15, 23, 42, 0.45);
}

.dropdown-item {
  border-radius: 10px;
}

.dropdown-item:hover {
  background: var(--pd-primary-soft);
}

@keyframes pd-rise-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (min-width: 860px) {
  .hero-grid {
    grid-template-columns: 1.04fr 0.96fr;
    gap: 1.7rem;
  }

  .pd-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pd-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pd-footer-grid {
    grid-template-columns: 1.3fr 1fr 1fr;
  }
}

@media (min-width: 1100px) {
  .pd-desktop-nav {
    display: flex;
  }

  .pd-auth-area {
    display: flex;
  }

  .pd-mobile-toggle {
    display: none;
  }

  .pd-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pd-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 719px) {
  .pd-container {
    width: calc(100% - 1.15rem);
  }

  .hero-metrics {
    grid-template-columns: 1fr;
  }

  .hero-image {
    height: 235px;
  }

  .hero-float-card {
    position: static;
    margin-top: 0.7rem;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== Social Experience Extensions ===== */
.pd-header-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.pd-search-trigger {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(236, 250, 255, 0.95), #ffffff);
  color: var(--pd-primary-strong);
  justify-content: center;
  padding: 0;
}

.pd-search-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 24px -20px rgba(11, 95, 125, 0.48);
}

.pd-mobile-search-trigger {
  border: 1px solid rgba(11, 95, 125, 0.16);
  margin-bottom: 0.28rem;
}

.pd-mobile-search-label {
  display: inline-flex;
  align-items: center;
  gap: 0.58rem;
}

.pd-lang-toggle {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  background: linear-gradient(140deg, rgba(221, 245, 251, 0.9), #ffffff);
  color: var(--pd-primary-strong);
  font-weight: 800;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pd-lang-toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 26px -20px rgba(11, 95, 125, 0.55);
}

.fade-in {
  animation: pd-fade-in 0.24s ease;
}

@keyframes pd-fade-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pd-glass-card {
  border-radius: 20px;
  border: 1px solid rgba(11, 95, 125, 0.16);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.96), rgba(242, 251, 253, 0.88));
  box-shadow: 0 20px 40px -34px rgba(10, 33, 53, 0.42);
  padding: 1rem;
}

.pd-widget-head h3 {
  margin: 0;
  font-size: 0.98rem;
  letter-spacing: -0.01em;
}

.pd-widget-list {
  margin-top: 0.65rem;
  display: grid;
  gap: 0.46rem;
}

.pd-widget-row {
  width: 100%;
  border: 0;
  text-align: left;
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(11, 95, 125, 0.12);
  padding: 0.68rem 0.7rem;
  display: grid;
  gap: 0.24rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pd-widget-row strong {
  font-size: 0.85rem;
  font-weight: 800;
}

.pd-widget-row span {
  font-size: 0.75rem;
  color: #546779;
  font-weight: 600;
}

.pd-widget-row:hover {
  border-color: rgba(11, 95, 125, 0.26);
  transform: translateY(-1px);
}

.pd-trend-row {
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.56rem 0.58rem;
}

.pd-trend-media {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(11, 95, 125, 0.18);
  background: linear-gradient(160deg, rgba(11, 95, 125, 0.18), rgba(255, 255, 255, 0.96));
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-trend-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-trend-media-fallback {
  color: #0b5f7d;
  font-size: 1.08rem;
}

.pd-trend-content {
  min-width: 0;
  display: grid;
  gap: 0.24rem;
}

.pd-trend-badges {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}

.pd-trend-row .pd-trend-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.15rem 0.46rem;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
}

.pd-trend-row .pd-trend-pill-hot {
  background: rgba(255, 110, 59, 0.15);
  border: 1px solid rgba(255, 110, 59, 0.28);
  color: #b34a1e;
}

.pd-trend-row .pd-trend-pill-window {
  background: rgba(11, 95, 125, 0.11);
  border: 1px solid rgba(11, 95, 125, 0.2);
  color: #0b5f7d;
}

.pd-trend-row strong {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.25;
}

.pd-trend-row .pd-trend-meta {
  color: #546779;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.24;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.pd-trend-row .pd-trend-meta i {
  font-size: 0.67rem;
}

.pd-home-corner-tabs {
  margin-top: 0.68rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.42rem;
}

.pd-home-corner-tab {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #4d6478;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pd-home-corner-tab:hover {
  border-color: rgba(11, 95, 125, 0.3);
}

.pd-home-corner-tab.is-active {
  border-color: rgba(255, 107, 53, 0.42);
  background: rgba(255, 107, 53, 0.14);
  color: #b94a20;
}

.pd-home-corner-panel-hidden {
  display: none;
}

.pd-home-inst-tabs {
  margin-top: 0.68rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.pd-home-inst-tab {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #4d6478;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.3rem 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pd-home-inst-tab:hover {
  border-color: rgba(11, 95, 125, 0.3);
}

.pd-home-inst-tab.is-active {
  border-color: rgba(14, 116, 144, 0.45);
  background: rgba(14, 165, 233, 0.14);
  color: #0f5f7d;
}

.pd-adoption-item-row {
  border-radius: 14px;
  border: 1px solid rgba(11, 95, 125, 0.15);
  background: #ffffff;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-areas:
    "thumb content"
    "thumb action";
  column-gap: 0.54rem;
  row-gap: 0.36rem;
  padding: 0.52rem;
  align-items: start;
}

.pd-adoption-item-thumb {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(11, 95, 125, 0.18);
  background: rgba(245, 250, 253, 0.9);
  grid-area: thumb;
}

.pd-adoption-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-adoption-item-content {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
  grid-area: content;
}

.pd-adoption-item-content strong {
  font-size: 0.84rem;
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.pd-adoption-item-content small {
  margin: 0;
  color: #4f6579;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pd-adoption-item-content span {
  font-size: 0.72rem;
  color: #5b6f81;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.pd-adoption-item-btn {
  grid-area: action;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid rgba(14, 116, 144, 0.2);
  border-radius: 10px;
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  color: #0f5f7d;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  padding: 0.42rem 0.72rem;
  box-shadow: 0 4px 10px rgba(11, 95, 125, 0.12);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pd-adoption-item-btn:hover {
  border-color: rgba(14, 116, 144, 0.34);
  background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 100%);
  box-shadow: 0 7px 15px rgba(11, 95, 125, 0.16);
  transform: translateY(-1px);
}

.pd-adoption-item-btn i {
  font-size: 0.68rem;
}

.pd-vet-trust-row {
  text-decoration: none;
  color: inherit;
  border-radius: 14px;
  border: 1px solid rgba(11, 95, 125, 0.14);
  background: #ffffff;
  padding: 0.56rem;
  display: flex;
  align-items: center;
  gap: 0.62rem;
  transition: all 0.2s ease;
}

.pd-vet-trust-row img {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(11, 95, 125, 0.16);
}

.pd-vet-trust-content {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
}

.pd-vet-trust-content strong {
  font-size: 0.84rem;
  line-height: 1.12;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pd-vet-trust-content small {
  font-size: 0.72rem;
  color: #5a6f82;
  font-weight: 600;
  line-height: 1.2;
  display: block;
}

.pd-vet-trust-rating {
  color: #7c4a0b;
}

.pd-vet-trust-distance i {
  font-size: 0.66rem;
}

.pd-vet-trust-row:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 95, 125, 0.24);
}

.pd-widget-placeholder {
  margin: 0;
  color: #667a8d;
  font-size: 0.88rem;
}

.pd-social-home {
  padding-top: 0.18rem;
  padding-bottom: 0.8rem;
}

.pd-page.pd-social-home {
  padding-top: 0.22rem;
}

.pd-social-home .pd-container {
  width: min(1280px, calc(100% - 0.7rem));
}

.pd-social-layout {
  display: grid;
  grid-template-columns: minmax(178px, 198px) minmax(0, 1fr) minmax(264px, 320px);
  gap: 0.32rem;
  align-items: start;
}

.pd-adoption-topic-layout,
.pd-notifications-layout,
.pd-static-legal-layout {
  grid-template-columns: minmax(178px, 220px) minmax(0, 1fr) minmax(236px, 290px);
  gap: 0.5rem;
}

.pd-home-left,
.pd-home-right {
  position: sticky;
  top: 92px;
  display: grid;
  gap: 0.82rem;
  min-width: 0;
  align-self: start;
}

.pd-home-main {
  display: grid;
  gap: 0.95rem;
  min-width: 0;
  overflow-x: hidden;
}

.pd-menu-card h3 {
  margin: 0 0 0.58rem;
  font-size: 0.93rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #3d5469;
}

.pd-menu-card a {
  border-radius: 13px;
  text-decoration: none;
  color: #203244;
  font-weight: 700;
  font-size: 0.88rem;
  display: flex;
  align-items: center;
  gap: 0.56rem;
  padding: 0.62rem 0.64rem;
  transition: all 0.2s ease;
}

.pd-menu-card a i {
  color: var(--pd-primary-strong);
  width: 18px;
  text-align: center;
}

.pd-menu-card a:hover {
  background: var(--pd-primary-soft);
  color: var(--pd-primary-strong);
}

.pd-app-install-card {
  border: 1px solid rgba(11, 95, 125, 0.2);
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(226, 246, 255, 0.9) 52%, rgba(236, 253, 250, 0.88));
  display: grid;
  gap: 0.56rem;
  padding: 0.92rem;
}

.pd-app-install-eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #0f4f6f;
}

.pd-app-install-eyebrow i {
  color: #1293d8;
  font-size: 0.86rem;
}

.pd-app-install-card h4 {
  margin: 0;
  font-size: 0.97rem;
  color: #12364f;
  line-height: 1.35;
}

.pd-app-install-card p {
  margin: 0;
  color: #4d677d;
  font-size: 0.81rem;
  line-height: 1.45;
}

.pd-app-install-btn {
  text-decoration: none;
  border-radius: 12px;
  border: 1px solid rgba(11, 95, 125, 0.2);
  background: #ffffff;
  color: #173a51;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.56rem;
  padding: 0.58rem 0.64rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pd-app-install-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 95, 125, 0.34);
  box-shadow: 0 14px 20px -18px rgba(10, 33, 53, 0.72);
}

.pd-app-install-btn-copy {
  display: grid;
  gap: 0.12rem;
}

.pd-app-install-btn-copy strong {
  font-size: 0.82rem;
  line-height: 1.25;
}

.pd-app-install-btn-copy small {
  font-size: 0.7rem;
  color: #5c7286;
  line-height: 1.25;
}

.pd-app-install-btn i {
  color: #0b5f7d;
  font-size: 0.86rem;
}

.pd-login-cta h4 {
  margin: 0 0 0.4rem;
  font-size: 1.02rem;
}

.pd-login-cta p {
  margin: 0 0 0.72rem;
  color: #5a6e82;
  font-size: 0.88rem;
  line-height: 1.5;
}

.pd-login-cta.is-hidden {
  display: none;
}

.pd-home-hero {
  border-radius: 24px;
  border: 1px solid rgba(11, 95, 125, 0.2);
  background: linear-gradient(132deg, rgba(255, 255, 255, 0.97), rgba(233, 248, 252, 0.85) 56%, rgba(255, 247, 236, 0.76));
  box-shadow: 0 24px 40px -34px rgba(10, 33, 53, 0.6);
  padding: clamp(1rem, 2.4vw, 1.55rem);
  display: grid;
  gap: 1rem;
  align-items: center;
}

.pd-home-hero-copy h1 {
  margin: 0.75rem 0 0.6rem;
  font-size: clamp(1.48rem, 3.1vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.pd-home-hero-copy p {
  margin: 0;
  color: var(--pd-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 58ch;
}

.pd-home-hero-actions {
  margin-top: 0.95rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.pd-home-hero-media {
  justify-self: end;
}

.pd-home-hero-media img {
  display: block;
  width: min(100%, 420px);
  border-radius: 18px;
  border: 1px solid rgba(11, 95, 125, 0.18);
  box-shadow: 0 26px 46px -34px rgba(10, 33, 53, 0.75);
}

.pd-home-feed-shell {
  display: block;
  min-width: 0;
  overflow-x: clip;
}

.pd-home-feed-shell > * {
  min-width: 0;
}

.pd-home-feed-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1rem;
}

.pd-feed-promo-block {
  width: min(100%, 660px);
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}

.pd-feed-promo-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.78rem 0.88rem 0.62rem;
  border-bottom: 1px solid rgba(11, 95, 125, 0.1);
}

.pd-feed-promo-head h3 {
  margin: 0;
  font-size: 0.94rem;
  color: #173b53;
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
}

.pd-feed-promo-head p {
  margin: 0.3rem 0 0;
  color: #60768a;
  font-size: 0.77rem;
}

.pd-feed-promo-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.52rem;
  padding: 0.64rem 0.7rem 0.78rem;
}

.pd-feed-promo-card {
  border: 1px solid rgba(11, 95, 125, 0.14);
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pd-feed-promo-card:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 95, 125, 0.28);
  box-shadow: 0 14px 26px -22px rgba(10, 33, 53, 0.72);
}

.pd-feed-promo-thumb {
  aspect-ratio: 1 / 1;
  background: #edf4f9;
  overflow: hidden;
}

.pd-feed-promo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-feed-promo-thumb-empty {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: #5f7589;
}

.pd-feed-promo-body {
  padding: 0.44rem 0.48rem 0.52rem;
  display: grid;
  gap: 0.22rem;
}

.pd-feed-promo-body strong {
  font-size: 0.78rem;
  line-height: 1.35;
  color: #17384f;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pd-feed-promo-body small {
  color: #5d7387;
  font-size: 0.72rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pd-quiz-shell {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(250px, 360px) minmax(0, 1fr);
  align-items: start;
}

.pd-quiz-side h1 {
  margin: 0.8rem 0 0.55rem;
  font-size: clamp(1.66rem, 2.8vw, 2.1rem);
  line-height: 1.1;
}

.pd-quiz-side p {
  margin: 0;
  color: #5a6f83;
  line-height: 1.6;
}

.pd-quiz-side ul {
  list-style: none;
  margin: 0.88rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.pd-quiz-side li {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 12px;
  background: #ffffff;
  padding: 0.6rem 0.66rem;
  font-weight: 700;
  color: #1f3a50;
  font-size: 0.88rem;
}

.pd-quiz-side li i {
  color: var(--pd-primary);
  margin-right: 0.34rem;
}

.pd-quiz-main {
  padding: 0;
  overflow: hidden;
}

.pd-quiz-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.92rem;
  border-bottom: 1px solid rgba(11, 95, 125, 0.14);
  background: linear-gradient(135deg, rgba(221, 245, 251, 0.75), rgba(255, 255, 255, 0.9));
}

.pd-quiz-head strong {
  display: block;
  font-size: 1.04rem;
}

.pd-quiz-head span {
  color: #547085;
  font-size: 0.82rem;
  font-weight: 700;
}

.pd-quiz-score {
  border: 1px solid rgba(11, 95, 125, 0.24);
  border-radius: 999px;
  padding: 0.42rem 0.72rem;
  color: var(--pd-primary-strong);
  font-size: 0.84rem;
  font-weight: 800;
}

.pd-quiz-body {
  padding: 1rem;
}

.pd-quiz-start,
.pd-quiz-finish {
  text-align: center;
  display: grid;
  gap: 0.7rem;
}

.pd-quiz-start h2,
.pd-quiz-finish h2 {
  margin: 0;
  font-size: 1.95rem;
}

.pd-quiz-start p,
.pd-quiz-finish p {
  margin: 0;
  color: #5c7287;
  line-height: 1.6;
}

.pd-quiz-progress-row {
  display: grid;
  gap: 0.4rem;
}

.pd-quiz-progress-row small {
  color: #60768a;
  font-weight: 700;
}

.pd-quiz-progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  background: #e5eef4;
  overflow: hidden;
}

.pd-quiz-progress div {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--pd-primary-strong), var(--pd-primary));
  transition: width 0.2s ease;
}

.pd-quiz-question-title {
  margin: 0.75rem 0;
}

.pd-quiz-option-list {
  display: grid;
  gap: 0.52rem;
}

.pd-quiz-option-btn {
  width: 100%;
  border: 1px solid rgba(11, 95, 125, 0.18);
  border-radius: 14px;
  background: #ffffff;
  color: #1f3347;
  text-align: left;
  padding: 0.62rem 0.68rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
}

.pd-quiz-option-letter {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--pd-primary-soft);
  color: var(--pd-primary-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 800;
}

.pd-quiz-option-btn.is-correct {
  border-color: rgba(31, 157, 99, 0.4);
  background: rgba(31, 157, 99, 0.1);
}

.pd-quiz-option-btn.is-wrong {
  border-color: rgba(220, 38, 38, 0.36);
  background: rgba(220, 38, 38, 0.08);
}

.pd-quiz-result {
  margin-top: 0.78rem;
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  padding: 0.78rem;
  display: grid;
  gap: 0.56rem;
}

.pd-quiz-result-badge {
  width: fit-content;
  border-radius: 999px;
  padding: 0.24rem 0.52rem;
  font-size: 0.74rem;
  font-weight: 800;
}

.pd-quiz-result-badge.is-correct {
  background: rgba(31, 157, 99, 0.16);
  color: #137548;
}

.pd-quiz-result-badge.is-wrong {
  background: rgba(220, 38, 38, 0.14);
  color: #b91c1c;
}

.pd-quiz-fact {
  color: #516a7f;
  line-height: 1.55;
}

.pd-quiz-ring {
  width: 130px;
  height: 130px;
  margin: 0 auto;
  border-radius: 50%;
  background: conic-gradient(var(--pd-primary) var(--ring), #e4edf4 0);
  display: grid;
  place-items: center;
}

.pd-quiz-ring span {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.pd-story-strip {
  border-radius: 20px;
  border: 1px solid rgba(11, 95, 125, 0.16);
  background: rgba(255, 255, 255, 0.93);
  padding: 0.78rem;
}

.pd-story-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}

.pd-story-strip-head h2 {
  margin: 0;
  font-size: 1rem;
}

.pd-story-strip-head a {
  color: var(--pd-primary-strong);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
}

.pd-story-strip-track {
  display: flex;
  gap: 0.56rem;
  overflow-x: auto;
  padding-bottom: 0.22rem;
}

.pd-story-item {
  border: 0;
  background: transparent;
  min-width: 72px;
  display: grid;
  gap: 0.32rem;
  justify-items: center;
  cursor: pointer;
}

.pd-story-avatar {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(11, 95, 125, 0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--pd-primary-strong);
  background: var(--pd-primary-soft);
}

.pd-story-item span {
  font-size: 0.72rem;
  font-weight: 700;
  color: #42576b;
  max-width: 74px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-story-item.is-empty {
  cursor: default;
}

.pd-story-item.skeleton {
  width: 72px;
  height: 88px;
  border-radius: 16px;
  background: linear-gradient(120deg, #e5eef5 12%, #f5f9fc 50%, #e5eef5 88%);
}

.pd-explore-story-strip {
  border-radius: 24px;
  border: 1px solid rgba(14, 165, 233, 0.15);
  background:
    radial-gradient(circle at 0% 0%, rgba(56, 189, 248, 0.16), transparent 42%),
    radial-gradient(circle at 100% 100%, rgba(59, 130, 246, 0.1), transparent 38%),
    #ffffff;
  padding: 0.82rem;
  box-shadow: 0 18px 36px -34px rgba(15, 23, 42, 0.6);
}

.pd-story-rail-wrap {
  position: relative;
  display: block;
}

.pd-story-rail-track {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pd-story-rail-track::-webkit-scrollbar {
  display: none;
}

.pd-story-rail-list {
  display: flex;
  gap: 0.58rem;
  min-height: 196px;
  padding-right: 58px;
}

.pd-story-create-card {
  width: 114px;
  min-width: 114px;
  height: 196px;
  border-radius: 18px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: #f8fafc;
  padding: 0.46rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.52rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pd-story-create-card:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 165, 233, 0.4);
  box-shadow: 0 16px 26px -24px rgba(2, 132, 199, 0.62);
}

.pd-story-create-card:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.55);
  outline-offset: 2px;
}

.pd-story-create-media {
  position: relative;
  width: 100%;
  height: 136px;
  border-radius: 13px;
  overflow: hidden;
  background: linear-gradient(140deg, #cbd5e1, #e2e8f0);
}

.pd-story-create-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-story-create-plus {
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  color: #ffffff;
  border: 3px solid #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 16px -10px rgba(30, 64, 175, 0.9);
}

.pd-story-create-plus i {
  font-size: 0.8rem;
}

.pd-story-create-card > span {
  margin-top: 0.35rem;
  font-size: 0.86rem;
  line-height: 1.16;
  text-align: center;
  font-weight: 800;
  color: #1e293b;
}

.pd-story-card {
  position: relative;
  width: 114px;
  min-width: 114px;
  height: 196px;
  border: 1px solid rgba(15, 23, 42, 0.22);
  border-radius: 18px;
  padding: 0;
  overflow: hidden;
  background: #0f172a;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  text-align: left;
}

.pd-story-card:hover {
  transform: translateY(-2px);
  border-color: rgba(14, 165, 233, 0.45);
  box-shadow: 0 24px 34px -30px rgba(15, 23, 42, 0.94);
}

.pd-story-card:focus-visible {
  outline: 2px solid rgba(56, 189, 248, 0.78);
  outline-offset: 2px;
}

.pd-story-card-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-story-card-media.is-avatar-fallback {
  filter: saturate(1.08) brightness(0.92);
  transform: scale(1.05);
}

.pd-story-card-fallback {
  width: 100%;
  height: 100%;
  background: linear-gradient(170deg, #334155, #0f172a);
}

.pd-story-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.14) 8%, rgba(15, 23, 42, 0.78) 100%);
}

.pd-story-card-count {
  position: absolute;
  top: 9px;
  right: 9px;
  border-radius: 999px;
  padding: 0.15rem 0.45rem;
  font-size: 0.68rem;
  font-weight: 800;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.56);
  backdrop-filter: blur(5px);
  z-index: 3;
}

.pd-story-card-type-pill {
  position: absolute;
  top: 9px;
  left: 9px;
  border-radius: 999px;
  padding: 0.15rem 0.46rem;
  font-size: 0.66rem;
  font-weight: 800;
  color: #f8fafc;
  background: rgba(15, 23, 42, 0.62);
  backdrop-filter: blur(5px);
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  z-index: 3;
}

.pd-story-card-meta {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.52rem;
}

.pd-story-card-avatar-ring {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  padding: 2px;
  background: conic-gradient(from 180deg, #f59e0b, #ef4444, #8b5cf6, #0ea5e9, #f59e0b);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pd-story-card-avatar-ring img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  border: 2px solid #ffffff;
}

.pd-story-card-name {
  color: #ffffff;
  font-size: 0.91rem;
  line-height: 1.24;
  font-weight: 800;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.pd-story-empty-state {
  width: max(100%, 240px);
  min-height: 196px;
  border-radius: 18px;
  border: 1px dashed rgba(148, 163, 184, 0.5);
  background: rgba(248, 250, 252, 0.85);
  color: #64748b;
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.85rem;
}

.pd-story-rail-prev,
.pd-story-rail-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(255, 255, 255, 0.94);
  color: #334155;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 16px 26px -22px rgba(15, 23, 42, 0.82);
  z-index: 4;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.pd-story-rail-prev {
  left: 8px;
}

.pd-story-rail-next {
  right: 8px;
}

.pd-story-rail-prev:hover,
.pd-story-rail-next:hover {
  background: #ffffff;
  transform: translateY(-50%) scale(1.03);
}

.pd-story-rail-prev:disabled,
.pd-story-rail-next:disabled {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 767px) {
  .pd-explore-story-strip {
    border-radius: 16px;
    padding: 0.54rem 0.46rem;
  }

  .pd-story-rail-wrap {
    display: block;
  }

  .pd-story-rail-track {
    padding-top: 1px;
  }

  .pd-story-rail-list {
    min-height: 104px;
    gap: 0.5rem;
    padding-right: 0.2rem;
    align-items: flex-start;
  }

  .pd-story-create-card,
  .pd-story-card {
    width: 72px;
    min-width: 72px;
    height: auto;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    padding: 0;
    overflow: visible;
    text-align: center;
    transform: none;
  }

  .pd-story-create-card:hover,
  .pd-story-card:hover {
    transform: none;
    box-shadow: none;
    border-color: transparent;
  }

  .pd-story-create-media {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    margin: 0 auto;
    border: 2px solid #dbeafe;
    background: linear-gradient(150deg, #dbeafe, #eff6ff);
  }

  .pd-story-create-plus {
    left: auto;
    right: -2px;
    bottom: -2px;
    transform: none;
    width: 24px;
    height: 24px;
    border-width: 2px;
  }

  .pd-story-create-plus i {
    font-size: 0.62rem;
  }

  .pd-story-create-card > span {
    margin-top: 0.32rem;
    font-size: 0.68rem;
    line-height: 1.1;
    color: #334155;
    font-weight: 700;
  }

  .pd-story-card-media,
  .pd-story-card-fallback,
  .pd-story-card-overlay,
  .pd-story-card-count,
  .pd-story-card-type-pill {
    display: none;
  }

  .pd-story-card-meta {
    position: static;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.34rem;
  }

  .pd-story-card-avatar-ring {
    width: 68px;
    height: 68px;
    padding: 2px;
    flex-shrink: 0;
  }

  .pd-story-card-avatar-ring img {
    border-width: 2px;
  }

  .pd-story-card-name {
    color: #334155;
    font-size: 0.68rem;
    line-height: 1.12;
    font-weight: 700;
    text-shadow: none;
    text-align: center;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    max-width: 72px;
  }

  .pd-story-empty-state {
    min-height: 104px;
    border-radius: 12px;
    font-size: 0.76rem;
  }

  .pd-story-rail-prev,
  .pd-story-rail-next {
    display: none;
  }
}

.pd-member-row {
  text-decoration: none;
  border-radius: 14px;
  border: 1px solid rgba(11, 95, 125, 0.14);
  background: #ffffff;
  padding: 0.54rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  transition: all 0.2s ease;
}

.pd-member-row img {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  object-fit: cover;
}

.pd-member-row strong {
  display: block;
  font-size: 0.83rem;
  line-height: 1.1;
}

.pd-member-row small {
  font-size: 0.72rem;
  color: #607489;
}

.pd-member-row:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 95, 125, 0.24);
}

.pd-map-shell {
  display: grid;
  gap: 0.95rem;
}

.pd-map-header {
  margin-bottom: 0.2rem;
}

.pd-map-board {
  display: grid;
  grid-template-columns: minmax(240px, 290px) minmax(0, 1fr) minmax(250px, 320px);
  gap: 0.85rem;
}

.pd-map-filters,
.pd-map-list {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.93);
  padding: 0.88rem;
}

.pd-map-filters h3 {
  margin: 0 0 0.72rem;
  font-size: 0.97rem;
}

.pd-map-filters label {
  display: block;
  margin: 0.62rem 0 0.36rem;
  font-size: 0.77rem;
  color: #486178;
  font-weight: 700;
}

.pd-map-filters select,
.pd-map-filters input[type="range"] {
  width: 100%;
}

.pd-map-filters select {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 12px;
  min-height: 38px;
  padding: 0 0.62rem;
  background: #ffffff;
  font-size: 0.86rem;
}

.pd-map-tools {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.45rem;
}

.pd-map-tools button {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 12px;
  background: #ffffff;
  color: #1f3347;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.6rem 0.68rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
}

.pd-map-tools button:hover {
  background: var(--pd-primary-soft);
}

.pd-map-stats {
  margin-top: 0.72rem;
  border-radius: 13px;
  background: linear-gradient(135deg, rgba(221, 245, 251, 0.85), rgba(255, 255, 255, 0.92));
  border: 1px solid rgba(11, 95, 125, 0.18);
  padding: 0.68rem;
  display: grid;
  gap: 0.18rem;
}

.pd-map-stats strong {
  font-size: 1.1rem;
}

.pd-map-stats span,
.pd-map-stats small {
  color: #4c6074;
  font-size: 0.76rem;
  font-weight: 700;
}

.pd-map-canvas-wrap {
  position: relative;
  min-height: 520px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(11, 95, 125, 0.22);
  box-shadow: 0 26px 42px -34px rgba(10, 33, 53, 0.6);
  z-index: 1;
}

.pd-map-canvas {
  height: 100%;
  min-height: 520px;
  background: #dbe9f2;
  z-index: 1;
}

.pd-map-zoom-controls {
  position: absolute;
  right: 12px;
  top: 12px;
  display: grid;
  gap: 0.42rem;
  z-index: 500;
}

.pd-map-zoom-controls button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.93);
  color: #163146;
  font-size: 1.08rem;
  font-weight: 800;
  box-shadow: 0 14px 24px -22px rgba(10, 33, 53, 0.9);
}

.pd-map-list {
  max-height: 520px;
  overflow-y: auto;
  display: grid;
  gap: 0.55rem;
}

.pd-map-result-card {
  border: 1px solid rgba(11, 95, 125, 0.14);
  border-radius: 14px;
  background: #ffffff;
  text-align: left;
  width: 100%;
  padding: 0.62rem;
  display: grid;
  gap: 0.24rem;
  cursor: pointer;
}

.pd-map-result-hint {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 12px;
  background: rgba(210, 239, 249, 0.6);
  padding: 0.64rem 0.68rem;
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0.42rem;
  align-items: start;
  color: #21506a;
}

.pd-map-result-hint p {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.4;
}

.pd-map-result-card strong {
  font-size: 0.87rem;
}

.pd-map-result-card p {
  margin: 0;
  color: #5d7184;
  font-size: 0.78rem;
  line-height: 1.45;
}

.pd-map-result-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}

.pd-map-result-top small {
  font-size: 0.72rem;
  color: #64788c;
}

.pd-map-badge {
  border-radius: 999px;
  font-size: 0.67rem;
  padding: 0.2rem 0.45rem;
  font-weight: 800;
}

.pd-map-badge.is-lost {
  background: rgba(239, 68, 68, 0.16);
  color: #b91c1c;
}

.pd-map-badge.is-adoption {
  background: rgba(245, 158, 11, 0.18);
  color: #92400e;
}

.pd-map-result-empty,
.pd-map-fallback {
  min-height: 120px;
  border-radius: 14px;
  border: 1px dashed rgba(11, 95, 125, 0.24);
  display: grid;
  place-items: center;
  text-align: center;
  color: #5b6f82;
  padding: 1rem;
}

.pd-map-result-empty i,
.pd-map-fallback i {
  font-size: 1.45rem;
  margin-bottom: 0.42rem;
  color: var(--pd-primary-strong);
}

.pd-map-marker-shell {
  background: transparent;
}

.pd-map-marker {
  width: 34px;
  height: 34px;
  border-radius: 13px 13px 13px 0;
  transform: rotate(-45deg);
  background: var(--marker-color);
  border: 2px solid #ffffff;
  display: grid;
  place-items: center;
  box-shadow: 0 14px 24px -20px rgba(10, 33, 53, 0.75);
}

.pd-map-marker span {
  transform: rotate(45deg);
  font-size: 1.02rem;
}

.pd-modal {
  position: fixed;
  inset: 0;
  z-index: 2400;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.pd-modal:not(.hidden) {
  display: flex;
}

.pd-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 22, 35, 0.58);
  backdrop-filter: blur(3px);
}

.pd-modal-panel {
  position: relative;
  z-index: 1;
  width: min(720px, calc(100vw - 1.4rem));
  max-height: calc(100vh - 2rem);
  overflow-y: auto;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(11, 95, 125, 0.18);
  box-shadow: 0 34px 46px -30px rgba(10, 33, 53, 0.8);
  padding: 1rem;
}

.pd-modal-close {
  position: absolute;
  top: 0.64rem;
  right: 0.64rem;
  border: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: rgba(11, 95, 125, 0.1);
  color: #18374c;
}

.pd-global-search-panel {
  width: min(620px, calc(100vw - 1.4rem));
  padding: 1.1rem;
  display: grid;
  gap: 0.78rem;
}

.pd-global-search-header {
  padding-right: 2.4rem;
}

.pd-global-search-header h3 {
  margin: 0;
  font-size: 1.06rem;
  color: #153248;
}

.pd-global-search-header p {
  margin: 0.26rem 0 0;
  color: #5f7387;
  font-size: 0.84rem;
  line-height: 1.45;
}

.pd-global-search-input-wrap {
  border: 1px solid rgba(11, 95, 125, 0.18);
  border-radius: 14px;
  min-height: 46px;
  padding: 0 0.78rem;
  display: flex;
  align-items: center;
  gap: 0.56rem;
  background: rgba(242, 251, 253, 0.96);
}

.pd-global-search-input-wrap i {
  color: #34576f;
}

.pd-global-search-input-wrap input {
  border: 0;
  background: transparent;
  outline: none;
  width: 100%;
  min-height: 44px;
  font-size: 0.92rem;
  color: #143247;
  font-family: inherit;
}

.pd-global-search-input-wrap:focus-within {
  border-color: rgba(11, 95, 125, 0.42);
  box-shadow: 0 0 0 3px rgba(29, 166, 197, 0.16);
}

.pd-global-search-hint {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #577086;
}

.pd-global-search-results {
  display: grid;
  gap: 0.48rem;
  max-height: min(58vh, 440px);
  overflow-y: auto;
  padding-right: 0.1rem;
}

.pd-global-search-item {
  width: 100%;
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 14px;
  background: #ffffff;
  text-align: left;
  padding: 0.62rem 0.68rem;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.58rem;
  cursor: pointer;
  transition: all 0.18s ease;
}

.pd-global-search-item:hover,
.pd-global-search-item.is-focused {
  border-color: rgba(11, 95, 125, 0.28);
  transform: translateY(-1px);
  box-shadow: 0 14px 22px -24px rgba(10, 33, 53, 0.7);
}

.pd-global-search-avatar {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  overflow: hidden;
  border: 1px solid rgba(11, 95, 125, 0.16);
  background: linear-gradient(145deg, rgba(221, 245, 251, 0.9), #ffffff);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #3f6076;
}

.pd-global-search-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-global-search-copy {
  min-width: 0;
  display: grid;
  gap: 0.16rem;
}

.pd-global-search-copy strong {
  font-size: 0.86rem;
  color: #17344a;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-global-search-copy small {
  font-size: 0.75rem;
  color: #60788d;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-global-search-meta {
  border-radius: 999px;
  border: 1px solid rgba(11, 95, 125, 0.16);
  background: rgba(238, 250, 255, 0.95);
  color: #365a72;
  font-size: 0.66rem;
  font-weight: 800;
  padding: 0.3rem 0.46rem;
  white-space: nowrap;
}

.pd-global-search-empty {
  margin: 0;
  border-radius: 14px;
  border: 1px dashed rgba(11, 95, 125, 0.2);
  background: rgba(245, 251, 254, 0.9);
  color: #597286;
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  padding: 0.75rem 0.6rem;
}

@media (max-width: 760px) {
  .pd-global-search-modal {
    align-items: flex-end;
    padding: 0;
  }

  .pd-global-search-panel {
    width: 100%;
    max-height: min(82vh, 700px);
    border-radius: 20px 20px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding: 0.92rem;
  }

  .pd-global-search-results {
    max-height: min(56vh, 430px);
  }

  .pd-global-search-item {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 0.52rem;
  }

  .pd-global-search-avatar {
    width: 42px;
    height: 42px;
  }

  .pd-global-search-meta {
    grid-column: 2 / 3;
    justify-self: start;
    margin-top: 0.1rem;
  }
}

.pd-map-detail-panel {
  width: min(620px, calc(100vw - 1.4rem));
}

.pd-map-detail-media {
  margin-top: 0.65rem;
}

.pd-map-detail-media img,
.pd-map-detail-gallery img {
  width: 100%;
  border-radius: 14px;
  object-fit: cover;
  max-height: 300px;
}

.pd-map-detail-gallery {
  margin-top: 0.65rem;
  display: grid;
  gap: 0.52rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.pd-map-gallery-item {
  border: 0;
  border-radius: 12px;
  padding: 0;
  cursor: zoom-in;
  background: transparent;
  overflow: hidden;
}

.pd-map-detail-gallery img {
  min-height: 120px;
  max-height: 170px;
}

/* Tek görselli ilan detayında görselin tamamını göster */
.pd-map-detail-gallery > img:only-child,
.pd-map-detail-gallery > .pd-map-gallery-item:only-child img {
  min-height: 220px;
  max-height: min(62vh, 460px);
  object-fit: contain;
  background: #edf4f9;
}

.pd-adoption-detail-gallery {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.pd-adoption-gallery-item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background: #edf4f9;
}

.pd-adoption-gallery-item::after {
  content: "\f065";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(6, 24, 39, 0.56);
  color: #f8fbff;
  font-size: 0.76rem;
  pointer-events: none;
}

.pd-adoption-gallery-item img {
  width: 100%;
  height: 100%;
  min-height: 0;
  max-height: none;
  object-fit: contain;
  border-radius: inherit;
  background: #edf4f9;
}

.pd-adoption-detail-gallery > .pd-adoption-gallery-item:only-child {
  max-width: min(100%, 700px);
}

.pd-adoption-detail-gallery > .pd-adoption-gallery-item:only-child img {
  max-height: min(62vh, 460px);
}

.pd-map-detail-empty {
  min-height: 180px;
  border-radius: 14px;
  border: 1px dashed rgba(11, 95, 125, 0.22);
  display: grid;
  place-items: center;
  color: #6b7f92;
}

.pd-map-detail-desc {
  margin: 0.7rem 0 0;
  color: #52687c;
  line-height: 1.6;
}

.pd-map-detail-actions {
  margin-top: 0.86rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

.pd-map-media-modal {
  width: min(980px, calc(100vw - 1.4rem));
  padding: 0.8rem;
  background: rgba(8, 22, 35, 0.96);
  border-color: rgba(255, 255, 255, 0.16);
}

.pd-map-media-modal img {
  width: 100%;
  max-height: calc(100vh - 8rem);
  min-height: 260px;
  object-fit: contain;
  border-radius: 12px;
  background: #05101a;
}

.pd-map-media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #f8fbff;
  backdrop-filter: blur(4px);
}

.pd-map-media-nav.is-prev {
  left: 0.9rem;
}

.pd-map-media-nav.is-next {
  right: 0.9rem;
}

.pd-map-media-counter {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #f8fbff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.5rem;
}

.pd-community-shell {
  margin-top: 0.85rem;
  border-radius: 20px;
  border: 1px solid rgba(11, 95, 125, 0.16);
  background: rgba(255, 255, 255, 0.94);
  padding: 0.9rem;
}

.pd-community-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

.pd-community-tabs button {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 12px;
  background: #ffffff;
  color: #1f3347;
  font-size: 0.84rem;
  font-weight: 700;
  min-height: 38px;
  padding: 0.56rem 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.pd-community-tabs button.is-active {
  border-color: rgba(11, 95, 125, 0.42);
  color: var(--pd-primary-strong);
  background: var(--pd-primary-soft);
}

.pd-community-content {
  margin-top: 0.85rem;
  display: none;
}

.pd-community-content.is-visible {
  display: block;
}

.pd-community-forum-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
  margin-bottom: 0.72rem;
}

.pd-community-forum-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.72rem;
}

.pd-community-forum-toolbar .pd-community-forum-filters {
  margin-bottom: 0;
  flex: 1 1 460px;
}

.pd-community-create-trigger {
  min-height: 36px;
  padding: 0.54rem 0.92rem;
  border-radius: 999px;
  font-size: 0.79rem;
  white-space: nowrap;
}

.pd-community-forum-filter {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 999px;
  background: #ffffff;
  color: #2a455b;
  font-size: 0.78rem;
  font-weight: 800;
  min-height: 34px;
  padding: 0.42rem 0.74rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.pd-community-forum-filter:hover {
  border-color: rgba(11, 95, 125, 0.34);
  background: #f3fbff;
}

.pd-community-forum-filter.is-active {
  border-color: rgba(11, 95, 125, 0.4);
  background: var(--pd-primary-soft);
  color: var(--pd-primary-strong);
}

.pd-community-card,
.pd-thread-card,
.pd-event-card {
  display: grid;
  gap: 0.52rem;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.pd-community-card::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 16px;
  padding: 2px;
  background: linear-gradient(135deg, #0ea5b0, #0d7fa8, #0b6590);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

.pd-community-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 12px 32px rgba(11, 95, 125, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
}

.pd-community-card:hover::before {
  opacity: 1;
}

.pd-community-card:active {
  transform: translateY(-2px) scale(1.005);
  transition-duration: 0.15s;
}

.pd-community-media {
  border-radius: 14px;
  overflow: hidden;
  min-height: 150px;
  background: #eef3f8;
}

.pd-community-media.is-forum-card {
  min-height: 220px;
  height: 220px;
}

.pd-community-media img,
.pd-event-media img {
  width: 100%;
  height: 100%;
  max-height: 220px;
  object-fit: cover;
  transition: transform 0.24s ease;
}

.pd-community-media-button {
  border: 0;
  width: 100%;
  text-align: left;
  padding: 0;
  cursor: pointer;
}

.pd-community-media-button:hover img {
  transform: scale(1.02);
}

.pd-community-media-button:focus-visible {
  outline: 2px solid var(--pd-primary);
  outline-offset: 2px;
}

.pd-home-offerer-placeholder {
  min-height: 168px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.42rem;
  padding: 1rem 0.95rem;
  background:
    radial-gradient(circle at 20% 10%, rgba(14, 165, 233, 0.18), transparent 42%),
    radial-gradient(circle at 85% 92%, rgba(34, 197, 94, 0.15), transparent 36%),
    linear-gradient(140deg, #f4fbff, #eefaf3);
}

.pd-home-offerer-icon {
  width: 48px;
  height: 48px;
  border-radius: 15px;
  background: rgba(11, 95, 125, 0.12);
  color: var(--pd-primary-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
}

.pd-home-offerer-placeholder strong {
  color: #143249;
  font-size: 0.93rem;
  letter-spacing: -0.01em;
}

.pd-home-offerer-placeholder small {
  color: #4d667c;
  font-size: 0.78rem;
  text-align: center;
  font-weight: 700;
  line-height: 1.46;
}

.pd-home-offerer-chip {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  color: #2b455b;
  font-size: 0.73rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.58rem;
}

.pd-community-media-empty,
.pd-event-empty-media {
  min-height: 160px;
  display: grid;
  place-items: center;
  color: #658097;
  font-size: 1.2rem;
}

.pd-community-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  color: #61778b;
  font-size: 0.78rem;
  font-weight: 700;
}

.pd-community-meta a {
  color: var(--pd-primary-strong);
  text-decoration: none;
}

.pd-community-actions {
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.pd-adoption-topic-side-card,
.pd-notifications-side-card,
.pd-static-legal-side-card {
  display: grid;
  gap: 0.55rem;
}

.pd-adoption-topic-side-card h4,
.pd-notifications-side-card h4,
.pd-static-legal-side-card h4 {
  margin: 0;
  font-size: 0.9rem;
  color: #12354c;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.pd-adoption-topic-side-card p,
.pd-notifications-side-card p,
.pd-static-legal-side-card p {
  margin: 0;
  font-size: 0.8rem;
  color: #516a7f;
  line-height: 1.55;
}

.pd-adoption-topic-side-card .pd-community-actions,
.pd-static-legal-side-card .pd-community-actions {
  margin-top: 0.1rem;
  display: grid;
  gap: 0.42rem;
}

.pd-adoption-topic-side-card .pd-btn {
  width: 100%;
  justify-content: flex-start;
}

.pd-static-legal-side-card .pd-btn {
  width: 100%;
  justify-content: flex-start;
  font-size: 0.74rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 34px;
  padding: 0.46rem 0.56rem;
  gap: 0.34rem;
}

.pd-static-legal-side-card .pd-btn i {
  flex-shrink: 0;
  font-size: 0.74rem;
}

.pd-rules-panel {
  width: min(580px, calc(100vw - 1.4rem));
}

.pd-rules-check {
  margin-top: 0.58rem;
  margin-bottom: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.54rem;
  font-size: 0.84rem;
  color: #40576d;
}

.pd-community-detail-panel {
  width: min(920px, calc(100vw - 1.2rem));
  padding: 1.05rem;
}

.pd-community-create-panel {
  width: min(900px, calc(100vw - 1.2rem));
  padding: 1rem;
}

.pd-community-create-shell {
  display: grid;
  gap: 0.72rem;
}

.pd-community-create-head h3 {
  margin: 0.24rem 0 0;
  color: #183249;
  font-size: clamp(1.08rem, 2.1vw, 1.35rem);
}

.pd-community-create-head p {
  margin: 0.3rem 0 0;
  color: #536b7f;
  font-size: 0.85rem;
  line-height: 1.55;
}

.pd-community-create-status-chip {
  margin-top: 0.45rem;
  border: 1px solid rgba(11, 95, 125, 0.24);
  border-radius: 999px;
  color: #1f4b67;
  background: #f0f8ff;
  display: inline-flex;
  align-items: center;
  font-size: 0.73rem;
  font-weight: 800;
  padding: 0.26rem 0.58rem;
}

.pd-community-create-back {
  border: 0;
  background: transparent;
  color: #2f5570;
  font-size: 0.78rem;
  font-weight: 800;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  cursor: pointer;
}

.pd-community-create-back:hover {
  color: #113e59;
}

.pd-community-create-mode-grid {
  display: grid;
  gap: 0.52rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.pd-community-create-mode {
  border: 1px solid rgba(11, 95, 125, 0.18);
  border-radius: 14px;
  background: #ffffff;
  padding: 0.75rem 0.78rem;
  text-align: left;
  display: grid;
  gap: 0.34rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pd-community-create-mode:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 32px -30px rgba(0, 110, 168, 0.75);
}

.pd-community-create-mode strong {
  color: #16364f;
  font-size: 0.9rem;
}

.pd-community-create-mode small {
  color: #597186;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.45;
}

.pd-community-create-mode-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #11455f;
  font-size: 0.92rem;
}

.pd-community-create-mode-icon.is-home-seeker {
  background: rgba(14, 165, 233, 0.16);
}

.pd-community-create-mode-icon.is-home-offerer {
  background: rgba(34, 197, 94, 0.15);
}

.pd-community-create-mode-icon.is-lost {
  background: rgba(239, 68, 68, 0.16);
}

.pd-community-create-mode-icon.is-pet-about {
  background: rgba(99, 102, 241, 0.18);
}

.pd-community-create-form {
  display: grid;
  gap: 0.6rem;
}

.pd-community-create-grid {
  display: grid;
  gap: 0.52rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pd-community-create-field {
  display: grid;
  gap: 0.3rem;
}

.pd-community-create-field > span {
  color: #405a70;
  font-size: 0.77rem;
  font-weight: 800;
}

.pd-community-create-field input,
.pd-community-create-field select,
.pd-community-create-field textarea {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(11, 95, 125, 0.22);
  padding: 0.52rem 0.62rem;
  color: #1f3448;
  background: #ffffff;
  font-size: 0.84rem;
}

.pd-community-create-field textarea {
  min-height: 78px;
  resize: vertical;
}

.pd-community-create-check {
  border: 1px solid rgba(11, 95, 125, 0.14);
  border-radius: 12px;
  padding: 0.54rem 0.62rem;
  background: #f9fcff;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #2f4d64;
  font-size: 0.8rem;
  font-weight: 700;
}

.pd-community-special-requests {
  border: 1px solid rgba(11, 95, 125, 0.14);
  border-radius: 12px;
  padding: 0.62rem;
  background: #f8fcff;
  display: grid;
  gap: 0.5rem;
}

.pd-community-special-requests header {
  display: grid;
  gap: 0.22rem;
}

.pd-community-special-requests header strong {
  color: #1e3d56;
  font-size: 0.81rem;
}

.pd-community-special-requests header small {
  color: #597286;
  font-size: 0.73rem;
  font-weight: 700;
}

.pd-community-special-request-row {
  display: grid;
  gap: 0.45rem;
  grid-template-columns: 1fr auto;
}

.pd-community-special-request-row input {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
  border: 1px solid rgba(11, 95, 125, 0.2);
  padding: 0 0.58rem;
}

.pd-community-special-request-row button {
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  color: #b91c1c;
  background: #fef2f2;
}

.pd-community-create-media {
  border: 1px dashed rgba(11, 95, 125, 0.24);
  border-radius: 14px;
  background: #f8fbff;
  padding: 0.62rem;
  display: grid;
  gap: 0.48rem;
}

.pd-community-create-media header {
  display: grid;
  gap: 0.18rem;
}

.pd-community-create-media header strong {
  color: #163e5a;
  font-size: 0.82rem;
}

.pd-community-create-media header small {
  color: #5e7588;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.45;
}

.pd-community-upload-field {
  border: 1px dashed rgba(11, 95, 125, 0.3);
  border-radius: 12px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.45rem 0.62rem;
  cursor: pointer;
}

.pd-community-upload-field input {
  display: none;
}

.pd-community-upload-field span {
  color: #1e5678;
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
}

.pd-community-media-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.pd-community-media-chip {
  width: 74px;
  height: 74px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(11, 95, 125, 0.18);
  position: relative;
  background: #ffffff;
}

.pd-community-media-chip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-community-media-chip button {
  position: absolute;
  top: 4px;
  right: 4px;
  border: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.72);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
}

.pd-community-create-actions {
  margin-top: 0.2rem;
  display: flex;
  justify-content: flex-end;
}

.pd-community-detail-article {
  display: grid;
  gap: 0.78rem;
}

.pd-community-detail-head h2 {
  margin: 0.36rem 0 0;
  font-size: clamp(1.08rem, 2.2vw, 1.42rem);
  line-height: 1.32;
  color: #153247;
}

.pd-community-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.58rem;
  color: #5d7488;
  font-size: 0.8rem;
  font-weight: 700;
}

.pd-community-detail-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.pd-community-detail-media {
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
  background: #edf4f9;
}

.pd-community-detail-media img {
  width: 100%;
  max-height: min(50vh, 360px);
  object-fit: cover;
  display: block;
}

.pd-edu-detail-layout {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-top: 0.75rem;
}

.pd-edu-detail-img-col {
  flex: 0 0 260px;
  width: 260px;
  height: 260px;
  border-radius: 16px;
  overflow: hidden;
  background: #edf4f9;
}

.pd-edu-detail-img-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-edu-detail-text-col {
  flex: 1;
  min-width: 0;
}

@media (max-width: 640px) {
  .pd-edu-detail-layout {
    flex-direction: column;
    gap: 1rem;
  }
  .pd-edu-detail-img-col {
    flex: none;
    width: 100%;
    height: 220px;
  }
}

.pd-community-detail-thread-media {
  padding: 0.45rem;
  background: #eef4f9;
}

.pd-community-detail-media-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.pd-community-detail-media-tile {
  border: 0;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  background: #0f172a;
  min-height: 140px;
  cursor: zoom-in;
}

.pd-community-detail-media-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.24s ease;
}

.pd-community-detail-media-tile:hover img {
  transform: scale(1.04);
}

.pd-community-detail-media-single-btn {
  border: 0;
  width: 100%;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
}

.pd-community-detail-thread-media img {
  width: 100%;
  max-height: min(72vh, 560px);
  object-fit: contain;
  border-radius: 12px;
  background: #081626;
}

.pd-community-thread-media-panel {
  width: min(980px, calc(100vw - 1.4rem));
  padding: 0.8rem;
  background: rgba(8, 22, 35, 0.96);
  border-color: rgba(255, 255, 255, 0.16);
}

.pd-community-thread-media-panel img {
  width: 100%;
  max-height: calc(100vh - 8rem);
  min-height: 220px;
  object-fit: contain;
  border-radius: 12px;
  background: #05101a;
}

.pd-community-detail-lead {
  margin: 0;
  border-left: 3px solid rgba(14, 141, 191, 0.45);
  padding: 0.22rem 0 0.22rem 0.72rem;
  color: #244359;
  line-height: 1.66;
  font-weight: 600;
}

.pd-community-detail-body {
  border: 1px solid rgba(11, 95, 125, 0.13);
  border-radius: 14px;
  background: #f9fcff;
  padding: 0.86rem 0.92rem;
  color: #2e495f;
}

.pd-community-detail-body h4 {
  margin: 0.5rem 0 0.3rem;
  color: #16405a;
  font-size: 0.95rem;
}

.pd-community-detail-body p {
  margin: 0.42rem 0;
  line-height: 1.76;
  font-size: 0.92rem;
}

.pd-community-detail-body ul {
  margin: 0.32rem 0 0.62rem;
  padding-left: 1.05rem;
  display: grid;
  gap: 0.34rem;
}

.pd-community-detail-body li {
  line-height: 1.7;
  color: #355066;
  font-size: 0.89rem;
}

.pd-community-detail-actions {
  margin-top: 0.16rem;
}

.pd-community-thread-comments {
  margin-top: 0.4rem;
  border: 1px solid rgba(11, 95, 125, 0.14);
  border-radius: 14px;
  background: #f7fbff;
  padding: 0.7rem 0.74rem;
  display: grid;
  gap: 0.65rem;
}

.pd-community-thread-comments-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pd-community-thread-comments-head h4 {
  margin: 0;
  color: #1f3b52;
  font-size: 0.88rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
}

.pd-community-thread-comments-count {
  border: 1px solid rgba(11, 95, 125, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: #3e5568;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.2rem 0.52rem;
}

.pd-community-thread-answers {
  max-height: min(40vh, 360px);
  overflow-y: auto;
  display: grid;
  gap: 0.54rem;
  padding-right: 0.1rem;
}

.pd-community-thread-empty {
  min-height: 112px;
  border: 1px dashed rgba(11, 95, 125, 0.2);
  border-radius: 12px;
  color: #5b7386;
  font-size: 0.81rem;
  font-weight: 700;
  display: grid;
  place-items: center;
  gap: 0.35rem;
  text-align: center;
}

.pd-community-thread-empty i {
  color: #537084;
}

.pd-community-thread-empty.is-error {
  border-color: rgba(185, 28, 28, 0.28);
  color: #b91c1c;
}

.pd-community-thread-answer {
  display: flex;
  align-items: flex-start;
  gap: 0.56rem;
}

.pd-community-thread-answer > img {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  object-fit: cover;
  border: 1px solid rgba(11, 95, 125, 0.14);
  background: #ffffff;
}

.pd-community-thread-answer-body {
  flex: 1;
  border: 1px solid rgba(11, 95, 125, 0.12);
  border-radius: 12px;
  background: #ffffff;
  padding: 0.52rem 0.56rem;
}

.pd-community-thread-answer-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  color: #435b70;
}

.pd-community-thread-answer-head strong {
  font-size: 0.78rem;
  color: #1e374d;
}

.pd-community-thread-answer-head i {
  color: var(--pd-primary);
  font-size: 0.72rem;
}

.pd-community-thread-answer-head time {
  margin-left: auto;
  font-size: 0.66rem;
  font-weight: 800;
  color: #6b8295;
}

.pd-community-thread-answer-body p {
  margin: 0.3rem 0 0;
  font-size: 0.83rem;
  line-height: 1.52;
  color: #2f495e;
}

.pd-community-thread-answer-foot {
  margin-top: 0.38rem;
  display: flex;
  justify-content: flex-end;
}

.pd-community-thread-reply-btn {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 999px;
  background: #f7fbff;
  color: #1f4f70;
  padding: 0.18rem 0.52rem;
  font-size: 0.69rem;
  font-weight: 800;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.26rem;
  cursor: pointer;
}

.pd-community-thread-reply-btn:hover {
  border-color: rgba(11, 95, 125, 0.28);
  background: #edf7ff;
}

.pd-community-thread-reply-target {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 10px;
  background: #eef7ff;
  color: #2c4c63;
  padding: 0.34rem 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.36rem;
  font-size: 0.74rem;
  font-weight: 800;
}

.pd-community-thread-reply-target button {
  border: 0;
  background: transparent;
  color: #365a74;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.pd-community-thread-reply-target button:hover {
  background: rgba(11, 95, 125, 0.1);
}

.pd-community-thread-replies {
  margin-left: 2rem;
  padding-left: 0.56rem;
  border-left: 1px dashed rgba(11, 95, 125, 0.26);
  display: grid;
  gap: 0.42rem;
}

.pd-community-thread-answer.is-reply > img {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.pd-community-thread-answer.is-reply .pd-community-thread-answer-body {
  background: #f8fcff;
}

.pd-community-thread-comment-form {
  display: grid;
  gap: 0.46rem;
}

.pd-community-thread-comment-form textarea {
  width: 100%;
  min-height: 86px;
  border-radius: 12px;
  border: 1px solid rgba(11, 95, 125, 0.2);
  padding: 0.58rem 0.62rem;
  font-size: 0.84rem;
  resize: vertical;
  background: #ffffff;
}

.pd-community-thread-login-hint {
  border: 1px dashed rgba(11, 95, 125, 0.24);
  border-radius: 12px;
  background: #ffffff;
  padding: 0.7rem;
  display: grid;
  gap: 0.52rem;
  justify-items: start;
}

.pd-community-thread-login-hint p {
  margin: 0;
  color: #4f6479;
  font-size: 0.8rem;
  font-weight: 700;
}

.pd-market-filters,
.pd-vet-filters {
  margin-top: 0.86rem;
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.93);
  padding: 0.82rem;
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.pd-market-filters label,
.pd-vet-filters label {
  display: grid;
  gap: 0.3rem;
}

.pd-market-filters span,
.pd-vet-filters span {
  font-size: 0.76rem;
  font-weight: 700;
  color: #495f74;
}

.pd-market-filters select,
.pd-market-filters input,
.pd-vet-filters select,
.pd-vet-filters input {
  width: 100%;
  min-height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(11, 95, 125, 0.18);
  padding: 0 0.62rem;
  font-size: 0.86rem;
  background: #ffffff;
}

.pd-market-grid {
  margin-top: 0.88rem;
  display: grid;
  gap: 0.86rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.pd-market-card {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 18px;
  background: #ffffff;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.pd-market-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 40px -30px rgba(10, 33, 53, 0.58);
}

.pd-market-thumb {
  min-height: 220px;
  background: #eef3f8;
  position: relative;
  overflow: hidden;
}

.pd-market-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-market-thumb-empty {
  min-height: 220px;
  display: grid;
  place-items: center;
  color: #687d90;
  font-size: 1.18rem;
}

.pd-adoption-completed-badge {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 3;
  border-radius: 999px;
  padding: 0.38rem 0.78rem 0.38rem 0.58rem;
  background: linear-gradient(135deg, #0ea5b0 0%, #0d7fa8 60%, #0b6590 100%);
  color: #ffffff;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  box-shadow: 0 4px 16px rgba(11, 95, 125, 0.45), 0 1px 3px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.22);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255,255,255,0.18);
  text-shadow: 0 1px 2px rgba(0,0,0,0.18);
  pointer-events: none;
}

.pd-adoption-completed-badge i {
  font-size: 0.78rem;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.2));
}

.pd-market-body {
  padding: 0.72rem;
  display: grid;
  gap: 0.45rem;
}

.pd-market-body h3 {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.25;
}

.pd-market-body p {
  margin: 0;
  color: #586d80;
  font-size: 0.82rem;
  line-height: 1.48;
}

.pd-market-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  color: #4f6275;
  font-size: 0.77rem;
  font-weight: 700;
}

.pd-market-meta strong {
  color: #0b5f7d;
  font-size: 0.88rem;
}

.pd-market-modal,
.pd-event-modal,
.pd-vet-modal,
.pd-association-donation-modal {
  width: min(860px, calc(100vw - 1.4rem));
}

.pd-market-detail-gallery {
  margin-top: 0.6rem;
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.pd-market-detail-hero {
  margin-top: 0.6rem;
  display: grid;
  place-items: center;
}

.pd-market-gallery-item {
  border: 0;
  border-radius: 10px;
  padding: 0;
  background: transparent;
  cursor: zoom-in;
  overflow: hidden;
}

.pd-market-gallery-item-hero {
  width: min(100%, 460px);
  aspect-ratio: 4 / 3;
  border-radius: 14px;
  background: #edf4f9;
}

.pd-market-gallery-item-hero img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: inherit;
}

.pd-market-detail-gallery img {
  width: 100%;
  min-height: 130px;
  max-height: 190px;
  object-fit: cover;
  border-radius: 10px;
}

.pd-market-media-modal {
  width: min(980px, calc(100vw - 1.4rem));
  padding: 0.8rem;
  background: rgba(8, 22, 35, 0.96);
  border-color: rgba(255, 255, 255, 0.16);
}

.pd-market-media-modal img {
  width: 100%;
  max-height: calc(100vh - 8rem);
  min-height: 260px;
  object-fit: contain;
  border-radius: 12px;
  background: #05101a;
}

.pd-market-media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #f8fbff;
  backdrop-filter: blur(4px);
}

.pd-market-media-nav.is-prev {
  left: 0.9rem;
}

.pd-market-media-nav.is-next {
  right: 0.9rem;
}

.pd-market-media-counter {
  position: absolute;
  left: 50%;
  bottom: 0.9rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  color: #f8fbff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.25rem 0.5rem;
}

.pd-market-detail-desc {
  margin: 0.7rem 0 0;
  color: #52687c;
  line-height: 1.6;
}

.pd-adoption-description-block {
  margin-top: 0.82rem;
  border: 1px solid rgba(11, 95, 125, 0.14);
  border-radius: 14px;
  background: linear-gradient(170deg, rgba(244, 251, 255, 0.9), #ffffff);
  padding: 0.78rem 0.84rem;
}

.pd-adoption-description-block h4 {
  margin: 0;
  color: #19405a;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.01em;
}

.pd-adoption-detail-desc-text {
  margin-top: 0.38rem;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.7;
}

.pd-market-detail-actions {
  margin-top: 0.82rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

.pd-market-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  text-align: center;
  gap: 0.3rem;
}

.pd-market-empty i {
  font-size: 1.35rem;
  color: var(--pd-primary-strong);
}

.pd-date-filter-row {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

.pd-date-filter-row button {
  border: 1px solid rgba(11, 95, 125, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: #264054;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.38rem 0.72rem;
}

.pd-date-filter-row button.is-active {
  background: var(--pd-primary-soft);
  color: var(--pd-primary-strong);
  border-color: rgba(11, 95, 125, 0.42);
}

.pd-event-media {
  border-radius: 14px;
  overflow: hidden;
  background: #eef3f8;
}

.pd-vet-card {
  border: 1px solid rgba(11, 95, 125, 0.18);
  border-radius: 18px;
  background: #ffffff;
  padding: 0.78rem;
  display: grid;
  gap: 0.62rem;
}

.pd-vet-directory-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.52rem;
  margin-bottom: 0.78rem;
}

.pd-vet-directory-tab {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 999px;
  background: #ffffff;
  color: #37526a;
  font-size: 0.78rem;
  font-weight: 800;
  min-height: 40px;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: all 0.2s ease;
}

.pd-vet-directory-tab:hover {
  border-color: rgba(11, 95, 125, 0.34);
  background: #f0f9ff;
}

.pd-vet-directory-tab.is-active {
  border-color: rgba(11, 95, 125, 0.45);
  color: #0b5f7d;
  background: var(--pd-primary-soft);
}

.pd-vet-card-head {
  display: flex;
  align-items: flex-start;
  gap: 0.66rem;
}

.pd-vet-card-head img {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  object-fit: cover;
}

.pd-vet-card-head h3 {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.15;
}

.pd-vet-card-head p {
  margin: 0.2rem 0;
  color: #445d71;
  font-size: 0.79rem;
  font-weight: 700;
}

.pd-vet-card-head small {
  color: #62788c;
  font-size: 0.72rem;
}

.pd-vet-specialties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.pd-vet-specialties span {
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.25rem 0.48rem;
  color: #0b5f7d;
  background: var(--pd-primary-soft);
}

.pd-vet-rating {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #4f6579;
  font-size: 0.78rem;
}

.pd-vet-rating i {
  color: #e5a11b;
}

.pd-vet-rating strong {
  color: #23394f;
}

.pd-vet-detail-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.pd-vet-detail-head img {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  object-fit: cover;
}

.pd-vet-appointment-form {
  display: grid;
  gap: 0.72rem;
}

.pd-vet-appointment-form header h3 {
  margin: 0;
  color: #16364f;
  font-size: 1.2rem;
}

.pd-vet-appointment-form header p {
  margin: 0.32rem 0 0;
  color: #526b80;
  font-size: 0.86rem;
}

.pd-vet-appointment-form label {
  display: grid;
  gap: 0.3rem;
}

.pd-vet-appointment-form label > span {
  color: #405a70;
  font-size: 0.77rem;
  font-weight: 800;
}

.pd-vet-appointment-form input,
.pd-vet-appointment-form textarea {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(11, 95, 125, 0.22);
  background: #ffffff;
  color: #1f3448;
  padding: 0.52rem 0.62rem;
  font-size: 0.84rem;
}

.pd-vet-appointment-form textarea {
  min-height: 95px;
  resize: vertical;
}

.pd-vet-appointment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.56rem;
}

.pd-association-donation-flow {
  display: grid;
  gap: 0.84rem;
}

.pd-association-donation-head {
  padding-right: 2.2rem;
}

.pd-association-donation-head h3 {
  margin: 0;
  font-size: 1.24rem;
  color: #14334a;
}

.pd-association-donation-head p {
  margin: 0.26rem 0 0;
  color: #587086;
  font-size: 0.86rem;
  font-weight: 700;
}

.pd-association-donation-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.42rem;
}

.pd-association-donation-step {
  min-height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(11, 95, 125, 0.16);
  background: rgba(241, 248, 253, 0.86);
  color: #3a5a73;
  font-size: 0.74rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.2rem 0.44rem;
}

.pd-association-donation-step.is-active {
  background: rgba(213, 236, 250, 0.96);
  color: #0d4767;
  border-color: rgba(11, 95, 125, 0.42);
}

.pd-association-donation-card {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(250, 253, 255, 0.98), rgba(242, 249, 253, 0.95));
  padding: 0.82rem;
  display: grid;
  gap: 0.62rem;
}

.pd-association-donation-card h4 {
  margin: 0;
  color: #173850;
  font-size: 1rem;
}

.pd-association-donation-card > p {
  margin: 0;
  color: #4d6479;
  font-size: 0.82rem;
  line-height: 1.4;
}

.pd-association-donation-options {
  display: grid;
  gap: 0.48rem;
}

.pd-association-donation-option {
  min-height: 46px;
  border-radius: 12px;
  border: 1px solid rgba(11, 95, 125, 0.2);
  background: #ffffff;
  color: #204a64;
  display: inline-flex;
  align-items: center;
  gap: 0.54rem;
  text-align: left;
  font-size: 0.84rem;
  font-weight: 800;
  padding: 0.42rem 0.68rem;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.pd-association-donation-option i {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #0f6a90;
  background: rgba(208, 232, 246, 0.9);
  font-size: 0.86rem;
}

.pd-association-donation-option:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 95, 125, 0.36);
  box-shadow: 0 16px 22px -24px rgba(8, 33, 53, 0.76);
}

.pd-association-donation-option.is-active {
  border-color: rgba(14, 116, 144, 0.56);
  background: rgba(228, 243, 251, 0.95);
  color: #0f4a6b;
}

.pd-association-donation-summary {
  border: 1px dashed rgba(11, 95, 125, 0.36);
  border-radius: 12px;
  padding: 0.48rem 0.62rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  color: #274d67;
  font-size: 0.78rem;
  font-weight: 700;
}

.pd-association-donation-summary strong {
  color: #0f4362;
  font-size: 0.88rem;
  font-weight: 900;
}

.pd-association-donation-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem;
}

.pd-association-donation-method {
  min-height: 42px;
  border-radius: 11px;
  border: 1px solid rgba(11, 95, 125, 0.2);
  background: #ffffff;
  color: #214860;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.46rem;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.42rem 0.5rem;
}

.pd-association-donation-method.is-active {
  background: rgba(223, 241, 252, 0.95);
  border-color: rgba(11, 95, 125, 0.5);
  color: #0f4765;
}

.pd-association-donation-method.is-disabled {
  opacity: 0.78;
}

.pd-association-donation-transfer {
  display: grid;
  gap: 0.56rem;
}

.pd-association-donation-note {
  margin: 0;
  color: #516a80;
  font-size: 0.8rem;
  line-height: 1.45;
}

.pd-association-donation-loading {
  min-height: 92px;
  border-radius: 12px;
  border: 1px dashed rgba(11, 95, 125, 0.26);
  background: rgba(248, 252, 255, 0.95);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.46rem;
  color: #2f5a76;
  font-size: 0.82rem;
  font-weight: 700;
}

.pd-association-donation-bank-card {
  border-radius: 12px;
  border: 1px solid rgba(11, 95, 125, 0.2);
  background: rgba(251, 254, 255, 0.96);
  padding: 0.6rem 0.66rem;
  display: grid;
  gap: 0.48rem;
}

.pd-association-donation-bank-card small {
  display: block;
  color: #5f7589;
  font-size: 0.68rem;
  font-weight: 700;
}

.pd-association-donation-bank-card strong {
  display: block;
  margin-top: 0.06rem;
  color: #173b53;
  font-size: 0.82rem;
  font-weight: 800;
  line-height: 1.35;
  word-break: break-word;
}

.pd-association-donation-inline-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

.pd-association-donation-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.pd-association-donation-field {
  display: grid;
  gap: 0.22rem;
}

.pd-association-donation-field > span {
  color: #3e5d74;
  font-size: 0.74rem;
  font-weight: 800;
}

.pd-association-donation-field input {
  width: 100%;
  min-height: 40px;
  border-radius: 11px;
  border: 1px solid rgba(11, 95, 125, 0.2);
  background: #ffffff;
  color: #17384f;
  font-size: 0.84rem;
  padding: 0.5rem 0.58rem;
}

.pd-association-donation-receipt-preview {
  width: 100%;
  max-height: 240px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(11, 95, 125, 0.2);
  background: #eaf2f8;
}

.pd-association-donation-receipt-preview img {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  display: block;
}

.pd-association-donation-submit-btn {
  width: fit-content;
}

.pd-association-donation-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.52rem;
}

.pd-association-donation-success {
  min-height: 320px;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: 0.62rem;
  padding: 1.2rem;
}

.pd-association-donation-success i {
  color: #16a34a;
  font-size: 3rem;
}

.pd-association-donation-success h3 {
  margin: 0;
  color: #173b52;
  font-size: 1.2rem;
}

.pd-association-donation-success p {
  margin: 0;
  color: #4d6377;
  font-size: 0.88rem;
  line-height: 1.45;
  max-width: 460px;
}

.pd-messages-shell {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 0.84rem;
  min-height: 620px;
  height: calc(100vh - 210px);
  max-height: 820px;
}

.pd-messages-sidebar,
.pd-messages-chat {
  border: 1px solid rgba(11, 95, 125, 0.18);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  overflow: hidden;
  min-height: 0;
}

.pd-messages-sidebar header {
  padding: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border-bottom: 1px solid rgba(11, 95, 125, 0.1);
}

.pd-messages-sidebar h2 {
  margin: 0;
  font-size: 1.02rem;
}

.pd-messages-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.36rem;
}

.pd-messages-sidebar header button {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 11px;
  background: #ffffff;
  color: #244057;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.45rem 0.62rem;
}

.pd-messages-sidebar header button.is-danger {
  border-color: rgba(220, 38, 38, 0.22);
  color: #b91c1c;
}

.pd-messages-list {
  max-height: 560px;
  overflow-y: auto;
  padding: 0.62rem;
  display: grid;
  gap: 0.46rem;
}

.pd-conversation-row {
  width: 100%;
  border: 1px solid rgba(11, 95, 125, 0.14);
  border-radius: 14px;
  background: #ffffff;
  text-align: left;
  padding: 0.55rem;
  display: grid;
  grid-template-columns: auto 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.54rem;
  cursor: pointer;
}

.pd-conversation-check {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(11, 95, 125, 0.25);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: #4e6478;
}

.pd-conversation-check.is-checked {
  background: var(--pd-primary-strong);
  border-color: var(--pd-primary-strong);
  color: #ffffff;
}

.pd-conversation-check.is-empty {
  opacity: 0;
  pointer-events: none;
}

.pd-conversation-row img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: cover;
}

.pd-conversation-row span {
  min-width: 0;
}

.pd-conversation-row strong {
  display: block;
  font-size: 0.84rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-conversation-row small {
  display: block;
  font-size: 0.74rem;
  color: #62788c;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-conversation-row em {
  font-style: normal;
  font-size: 0.69rem;
  color: #62788c;
}

.pd-conversation-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  justify-self: end;
}

.pd-conversation-row b {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--pd-accent);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 800;
}

.pd-conversation-row.is-active {
  border-color: rgba(11, 95, 125, 0.35);
  background: var(--pd-primary-soft);
}

.pd-conversation-row.is-selected {
  border-color: rgba(11, 95, 125, 0.34);
  background: rgba(221, 245, 251, 0.72);
}

.pd-conversation-delete {
  border: 0;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pd-message-empty {
  min-height: 120px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #64798e;
  padding: 1rem;
}

.pd-messages-chat {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}

.pd-messages-chat-header {
  padding: 0.85rem;
  border-bottom: 1px solid rgba(11, 95, 125, 0.1);
}

.pd-messages-chat-header h3 {
  margin: 0;
  font-size: 1rem;
}

.pd-messages-chat-header p {
  margin: 0.2rem 0 0;
  color: #63778b;
  font-size: 0.8rem;
}

.pd-messages-thread {
  padding: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.38rem;
  align-items: stretch;
  overflow-y: auto;
  min-height: 0;
  background: linear-gradient(180deg, rgba(241, 249, 252, 0.8), rgba(255, 255, 255, 0.92));
}

.pd-thread-bubble {
  max-width: min(82%, 520px);
  border-radius: 14px 14px 14px 4px;
  padding: 0.54rem 0.62rem;
  background: #ffffff;
  border: 1px solid rgba(11, 95, 125, 0.16);
  align-self: flex-start;
  justify-self: start;
}

.pd-thread-bubble.is-mine {
  border-radius: 14px 14px 4px 14px;
  background: #dff5fc;
  align-self: flex-end;
  justify-self: end;
}

.pd-thread-bubble p {
  margin: 0;
  line-height: 1.45;
  font-size: 0.85rem;
}

.pd-thread-empty-text {
  color: #5f7387;
}

.pd-thread-media-grid {
  margin-top: 0.46rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.36rem;
}

.pd-thread-media-thumb {
  border: 0;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  background: rgba(11, 95, 125, 0.06);
  min-height: 94px;
}

.pd-thread-media-thumb img {
  width: 100%;
  height: 100%;
  min-height: 94px;
  object-fit: cover;
}

.pd-thread-bubble time {
  margin-top: 0.25rem;
  display: block;
  font-size: 0.67rem;
  color: #60768a;
}

.pd-messages-composer {
  border-top: 1px solid rgba(11, 95, 125, 0.1);
  padding: 0.72rem;
  display: grid;
  gap: 0.48rem;
}

.pd-messages-composer-row {
  display: flex;
  align-items: center;
  gap: 0.46rem;
}

.pd-messages-composer #messages-composer-input {
  flex: 1;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(11, 95, 125, 0.18);
  padding: 0 0.66rem;
  font-size: 0.86rem;
}

.pd-messages-attach-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(11, 95, 125, 0.18);
  background: #ffffff;
  color: #1f5169;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pd-messages-attach-btn:disabled,
.pd-messages-composer button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.pd-messages-composer-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

.pd-messages-attachment-item {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0;
}

.pd-messages-attachment-item img {
  width: 100%;
  height: 100%;
  border-radius: 11px;
  object-fit: cover;
  border: 1px solid rgba(11, 95, 125, 0.2);
}

.pd-messages-attachment-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  border: 0;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: rgba(185, 28, 28, 0.95);
  color: #ffffff;
  font-size: 0.62rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 16px -12px rgba(127, 29, 29, 0.95);
}

.pd-message-lightbox {
  z-index: 2500;
}

.pd-message-lightbox .pd-modal-backdrop {
  background: rgba(2, 6, 23, 0.88);
}

.pd-likes-modal-panel {
  width: 100%;
}

.pd-post-preview-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  padding: 0.48rem 0.82rem;
  background: rgba(2, 6, 23, 0.74);
  color: #ffffff;
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 14px 24px -18px rgba(2, 6, 23, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  backdrop-filter: blur(5px);
  transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pd-post-preview-edit-btn i {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.64rem;
}

.pd-post-preview-edit-btn:hover {
  background: rgba(3, 105, 161, 0.92);
  border-color: rgba(191, 219, 254, 0.95);
  transform: translateY(-1px);
  box-shadow: 0 16px 28px -18px rgba(3, 105, 161, 0.9);
}

.pd-post-preview-edit-btn:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.72);
  outline-offset: 2px;
}

.pd-post-preview-clear-btn {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.68);
  background: rgba(2, 6, 23, 0.82);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 22px -16px rgba(2, 6, 23, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  backdrop-filter: blur(5px);
  transition: background-color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.pd-post-preview-clear-btn:hover {
  background: rgba(220, 38, 38, 0.96);
  border-color: rgba(254, 202, 202, 0.96);
  transform: scale(1.05);
}

.pd-post-preview-clear-btn:focus-visible {
  outline: 2px solid rgba(248, 113, 113, 0.75);
  outline-offset: 2px;
}

.pd-post-media-editor-modal {
  position: fixed;
  inset: 0;
  z-index: 165;
}

.pd-post-media-editor-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.72);
  backdrop-filter: blur(4px);
}

.pd-post-media-editor-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 8vh;
  border-radius: 1.5rem 1.5rem 0 0;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 -12px 42px rgba(15, 23, 42, 0.34);
}

.pd-post-media-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}

.pd-post-media-editor-head h3 {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  color: #0f172a;
}

.pd-post-media-editor-close {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 1px solid rgba(226, 232, 240, 0.95);
  background: #f8fafc;
  color: #475569;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pd-post-media-editor-close:hover {
  background: #f1f5f9;
}

.pd-post-media-editor-body {
  flex: 1;
  min-height: 0;
  padding: 0.9rem 1rem;
}

.pd-post-media-editor-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  padding: 0.78rem 1rem calc(0.78rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(226, 232, 240, 0.9);
  background: #ffffff;
}

.pd-post-media-editor-clear {
  border: 1px solid rgba(254, 202, 202, 0.9);
  background: #fef2f2;
  color: #dc2626;
  font-weight: 700;
  border-radius: 0.8rem;
  padding: 0.52rem 0.86rem;
}

.pd-post-media-editor-clear:hover {
  background: #fee2e2;
}

.pd-post-media-editor-save {
  border: 0;
  background: linear-gradient(135deg, #0ea5e9, #1e40af);
  color: #ffffff;
  font-weight: 800;
  border-radius: 0.8rem;
  padding: 0.52rem 0.95rem;
}

.pd-post-media-editor-layout {
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.72rem;
}

.pd-post-media-editor-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  border-radius: 1rem;
  overflow: hidden;
  background: #0f172a;
  border: 1px solid rgba(226, 232, 240, 0.9);
}

.pd-post-media-editor-stage img,
.pd-post-media-editor-stage video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #0f172a;
}

.pd-post-media-editor-stage-remove {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: rgba(2, 6, 23, 0.66);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pd-post-media-editor-stage-remove:hover {
  background: rgba(220, 38, 38, 0.95);
}

.pd-post-media-editor-thumbs {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 0.15rem;
}

.pd-post-media-editor-thumb {
  position: relative;
  width: 82px;
  min-width: 82px;
  height: 82px;
  border-radius: 0.82rem;
  overflow: hidden;
  border: 2px solid transparent;
  background: #e2e8f0;
}

.pd-post-media-editor-thumb.is-active {
  border-color: #0ea5e9;
}

.pd-post-media-editor-thumb img,
.pd-post-media-editor-thumb video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-post-media-editor-thumb-index {
  position: absolute;
  left: 5px;
  bottom: 5px;
  border-radius: 0.46rem;
  padding: 0.1rem 0.35rem;
  font-size: 0.64rem;
  font-weight: 800;
  background: rgba(2, 6, 23, 0.72);
  color: #ffffff;
}

.pd-post-media-editor-thumb-remove {
  position: absolute;
  right: 5px;
  top: 5px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(2, 6, 23, 0.74);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.67rem;
}

.pd-post-media-editor-thumb-remove:hover {
  background: rgba(220, 38, 38, 0.95);
}

.pd-post-media-editor-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.55rem;
  color: #64748b;
}

.pd-post-media-editor-empty p {
  margin: 0;
  font-weight: 700;
  color: #334155;
}

.pd-post-media-editor-empty small {
  font-size: 0.82rem;
}

.pd-post-media-editor-empty-icon {
  width: 54px;
  height: 54px;
  border-radius: 1rem;
  background: #f1f5f9;
  color: #94a3b8;
  font-size: 1.4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pd-lightbox-stage {
  position: relative;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: min(90vw, 1120px);
  max-height: 88vh;
}

.pd-lightbox-image {
  display: block;
  width: auto;
  height: auto;
  max-width: min(90vw, 1120px);
  max-height: 88vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 26px 44px -26px rgba(0, 0, 0, 0.85);
}

.pd-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(8, 19, 34, 0.62);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 12;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pd-lightbox-nav.is-prev {
  left: 10px;
}

.pd-lightbox-nav.is-next {
  right: 10px;
}

.pd-lightbox-nav:hover {
  background: rgba(15, 32, 55, 0.9);
}

.pd-lightbox-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(8, 19, 34, 0.68);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 13;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pd-lightbox-close:hover {
  background: rgba(15, 32, 55, 0.92);
  transform: translateY(-1px);
}

.pd-lightbox-counter {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.2rem 0.55rem;
  z-index: 12;
}

.pd-story-viewer-modal {
  background: rgba(0, 0, 0, 0.96);
}

.pd-story-viewer-shell {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(19, 28, 39, 0.96), rgba(5, 24, 52, 0.96));
}

.pd-story-viewer-shell #story-content {
  padding: 70px 12px 56px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-story-media-stage {
  position: relative;
  width: min(100%, calc((100vh - 168px) * 9 / 16));
  max-width: 100%;
  height: auto;
  max-height: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  overflow: hidden;
  background: #0f172a;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 24px 54px -36px rgba(2, 6, 23, 0.92);
}

.pd-story-viewer-shell .pd-story-viewer-media {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  background: #0f172a;
}

.pd-story-owner-nav-wrap {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 35;
  display: flex;
  align-items: center;
  pointer-events: none;
}

.pd-story-owner-nav-wrap.is-left {
  left: 12px;
}

.pd-story-owner-nav-wrap.is-right {
  right: 12px;
}

.pd-story-owner-nav-btn {
  pointer-events: auto;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: rgba(0, 0, 0, 0.35);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: 0.2s ease;
}

.pd-story-owner-nav-btn:hover {
  background: rgba(0, 0, 0, 0.52);
}

.pd-story-owner-nav-hint {
  max-width: 100%;
  white-space: nowrap;
}

.pd-story-viewer-meta {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 68px;
  z-index: 24;
  display: grid;
  gap: 0.34rem;
  pointer-events: none;
  padding: 0.75rem 0.82rem;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0.12), rgba(2, 6, 23, 0.62));
}

.pd-story-viewer-location-row {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  width: fit-content;
  max-width: 100%;
  border-radius: 999px;
  padding: 0.22rem 0.54rem;
  background: rgba(15, 23, 42, 0.54);
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: #e2e8f0;
  font-size: 0.73rem;
  font-weight: 700;
}

.pd-story-viewer-location-row i {
  font-size: 0.72rem;
}

.pd-story-viewer-location-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-story-viewer-caption {
  margin: 0;
  color: #f8fafc;
  font-size: 0.8rem;
  line-height: 1.4;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.pd-story-viewer-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
}

.pd-story-viewer-overlay-text {
  position: absolute;
  z-index: 9;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  text-align: center;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0.01em;
  color: #ffffff;
  text-shadow:
    0 2px 8px rgba(2, 6, 23, 0.72),
    0 8px 24px rgba(2, 6, 23, 0.52);
  white-space: pre;
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: nowrap;
  pointer-events: none;
}

.pd-story-viewer-overlay-text.is-sticker {
  max-width: none;
  line-height: 1;
}

.pd-story-viewer-overlay-text.is-app-model {
  width: auto;
  max-width: 80%;
  padding: 10px 16px;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.4);
  line-height: 1.18;
  letter-spacing: 0;
  font-weight: 700;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.75),
    0 8px 18px rgba(0, 0, 0, 0.35);
}

.pd-story-viewer-overlay-text.is-app-model .pd-story-overlay-text-content {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  text-wrap: wrap;
  text-align: center;
}

.pd-story-creator-modal {
  background:
    radial-gradient(circle at 16% 14%, rgba(56, 189, 248, 0.2), transparent 50%),
    radial-gradient(circle at 88% 8%, rgba(34, 197, 94, 0.12), transparent 42%),
    radial-gradient(circle at 60% 96%, rgba(244, 114, 182, 0.14), transparent 38%),
    rgba(2, 6, 23, 0.88);
  backdrop-filter: blur(14px);
}

.pd-story-creator-shell {
  position: relative;
  width: min(540px, 100%);
  height: 100%;
  margin-inline: auto;
  padding: 1rem 0.95rem 1.2rem;
  display: flex;
  flex-direction: column;
}

.pd-story-creator-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem;
  margin-bottom: 0.72rem;
}

.pd-story-creator-head-copy {
  min-width: 0;
}

.pd-story-creator-title {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #ffffff;
}

.pd-story-creator-subtitle {
  margin: 0.22rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: rgba(226, 232, 240, 0.92);
}

.pd-story-creator-close {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  background: rgba(15, 23, 42, 0.46);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.pd-story-creator-close:hover {
  background: rgba(30, 41, 59, 0.68);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-1px);
}

.pd-story-creator-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  overflow-y: auto;
  padding: 0.12rem 0.08rem 0.56rem;
}

.pd-story-mode-switch {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.34rem;
  background: rgba(15, 23, 42, 0.48);
  border: 1px solid rgba(148, 163, 184, 0.4);
  border-radius: 999px;
  padding: 0.22rem;
}

.pd-story-mode-btn {
  min-height: 38px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(226, 232, 240, 0.86);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  transition: background 0.22s ease, color 0.22s ease, box-shadow 0.22s ease;
}

.pd-story-mode-btn i {
  font-size: 0.82rem;
  opacity: 0.95;
}

.pd-story-mode-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
}

.pd-story-mode-btn.is-active {
  background: linear-gradient(135deg, #e2e8f0, #ffffff);
  color: #0f172a;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.3);
}

.pd-story-creator-preview {
  position: relative;
  width: min(100%, 440px);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  border-radius: 30px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: linear-gradient(160deg, #0f172a 0%, #0b2342 56%, #1d4ed8 100%);
  box-shadow: 0 18px 46px rgba(2, 6, 23, 0.56);
}

.pd-story-preview-image,
.pd-story-preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0f172a;
}

.pd-story-preview-text-card {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0.9rem;
  text-align: center;
}

.pd-story-preview-text-card.flex {
  display: flex;
}

.pd-story-preview-text-body {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.6rem 1.3rem;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 14px 34px rgba(2, 6, 23, 0.4);
  background: #111827;
  color: #ffffff;
}

.pd-story-preview-text-content {
  margin: 0;
  font-size: clamp(1.18rem, 2.8vw, 2.08rem);
  line-height: 1.36;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pd-story-preview-overlay-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: auto;
}

.pd-story-preview-edit-toolbar {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  right: 0.7rem;
  z-index: 7;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none;
}

.pd-story-preview-edit-btn {
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(15, 23, 42, 0.52);
  color: #f8fafc;
  font-size: 0.82rem;
  font-weight: 800;
  padding: 0.38rem 0.76rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  pointer-events: auto;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.pd-story-preview-edit-btn:hover {
  background: rgba(15, 23, 42, 0.72);
  border-color: rgba(255, 255, 255, 0.42);
  transform: translateY(-1px);
}

.pd-story-preview-overlay-text {
  position: absolute;
  left: 50%;
  top: 72%;
  transform: translate(-50%, -50%);
  width: max-content;
  max-width: none;
  border: 0;
  padding: 0.04em 0.12em;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  text-align: center;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: 0.01em;
  text-shadow:
    0 2px 8px rgba(2, 6, 23, 0.72),
    0 8px 24px rgba(2, 6, 23, 0.52);
  white-space: pre;
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: nowrap;
  overflow: visible;
  cursor: grab;
  touch-action: none;
  pointer-events: auto;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.pd-story-overlay-text-content {
  display: inline-block;
  flex: 0 0 auto;
  line-height: inherit;
  white-space: pre;
  overflow-wrap: normal;
  word-break: keep-all;
  text-wrap: nowrap;
  pointer-events: none;
}

.pd-story-preview-overlay-text.is-active {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.66),
    0 0 0 5px rgba(56, 189, 248, 0.22);
}

.pd-story-preview-overlay-text.is-sticker {
  max-width: none;
  line-height: 1;
}

.pd-story-preview-overlay-text.is-dragging {
  cursor: grabbing;
}

.pd-story-preview-overlay-text.is-transforming {
  cursor: crosshair;
}

.pd-story-overlay-handle {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(15, 23, 42, 0.86);
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  line-height: 1;
  box-shadow: 0 8px 18px -14px rgba(2, 6, 23, 0.95);
  touch-action: none;
  pointer-events: auto;
  z-index: 2;
}

.pd-story-overlay-handle.is-scale {
  right: -16px;
  bottom: -16px;
}

.pd-story-overlay-handle.is-rotate {
  right: -16px;
  top: -16px;
}

.pd-story-preview-media-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  padding: 0.86rem 0.92rem 0.95rem;
  display: grid;
  gap: 0.34rem;
  background: linear-gradient(180deg, rgba(2, 6, 23, 0), rgba(2, 6, 23, 0.72));
}

.pd-story-preview-location-row {
  width: fit-content;
  max-width: calc(100% - 2px);
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.22rem 0.52rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(15, 23, 42, 0.48);
  color: #f8fafc;
  font-size: 0.72rem;
  font-weight: 700;
}

.pd-story-preview-location-row i {
  font-size: 0.7rem;
}

.pd-story-preview-location-row span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-story-preview-caption {
  margin: 0;
  color: #f8fafc;
  font-size: 0.8rem;
  line-height: 1.35;
  font-weight: 600;
  text-shadow: 0 2px 10px rgba(2, 6, 23, 0.45);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.pd-story-upload-area {
  width: min(100%, 440px);
  aspect-ratio: 9 / 16;
  margin-inline: auto;
  border-radius: 30px;
  border: 1.5px dashed rgba(148, 163, 184, 0.5);
  background:
    radial-gradient(circle at 50% 22%, rgba(56, 189, 248, 0.18), transparent 44%),
    linear-gradient(180deg, rgba(15, 23, 42, 0.8), rgba(15, 23, 42, 0.6));
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
  padding: 1.15rem;
  cursor: pointer;
  transition: border-color 0.22s ease, transform 0.22s ease, box-shadow 0.22s ease;
}

.pd-story-upload-area:hover {
  border-color: rgba(125, 211, 252, 0.84);
  box-shadow: 0 14px 32px rgba(14, 116, 144, 0.34);
  transform: translateY(-1px);
}

.pd-story-upload-icon {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  border: 1px solid rgba(125, 211, 252, 0.4);
  background: rgba(2, 132, 199, 0.15);
  color: #bae6fd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.55rem;
  margin-bottom: 0.5rem;
}

.pd-story-upload-title {
  margin: 0;
  color: #e2e8f0;
  font-size: 1rem;
  font-weight: 800;
}

.pd-story-upload-subtitle {
  margin: 0;
  color: rgba(186, 230, 253, 0.82);
  font-size: 0.8rem;
}

.pd-story-media-meta-editor {
  width: min(100%, 440px);
  margin-inline: auto;
  border-radius: 20px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.76), rgba(15, 23, 42, 0.6));
  box-shadow: 0 14px 32px rgba(2, 6, 23, 0.42);
  padding: 0.8rem;
  display: grid;
  gap: 0.64rem;
}

.pd-story-media-meta-editor.is-compact {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
  gap: 0.46rem;
}

.pd-story-caption-inline-wrap {
  position: relative;
  width: min(100%, 440px);
  margin-inline: auto;
}

.pd-story-caption-inline-input {
  width: 100%;
  min-height: 58px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: rgba(248, 250, 252, 0.96);
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.42;
  resize: none;
  padding: 0.72rem 0.8rem 1.3rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pd-story-caption-inline-input::placeholder {
  color: #64748b;
}

.pd-story-caption-inline-input:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.72);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
}

.pd-story-caption-inline-wrap .pd-story-char-count {
  position: absolute;
  right: 0.6rem;
  bottom: 0.46rem;
}

.pd-story-meta-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.pd-story-meta-field {
  display: grid;
  gap: 0.3rem;
}

.pd-story-meta-input,
.pd-story-meta-textarea {
  width: 100%;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.36);
  background: rgba(248, 250, 252, 0.95);
  color: #0f172a;
  font-size: 0.9rem;
  line-height: 1.45;
  padding: 0.68rem 0.78rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.pd-story-meta-input::placeholder,
.pd-story-meta-textarea::placeholder {
  color: #64748b;
}

.pd-story-meta-input:focus,
.pd-story-meta-textarea:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.72);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22);
}

.pd-story-meta-textarea {
  min-height: 82px;
  resize: none;
}

.pd-story-overlay-help {
  margin: 0.1rem 0 0;
  color: rgba(191, 219, 254, 0.9);
  font-size: 0.72rem;
  line-height: 1.35;
}

.pd-story-overlay-layer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

.pd-story-overlay-layer-btn {
  min-height: 34px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.42);
  color: #e2e8f0;
  font-size: 0.76rem;
  font-weight: 800;
  padding: 0.36rem 0.62rem;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.pd-story-overlay-layer-btn:hover {
  border-color: rgba(125, 211, 252, 0.66);
  background: rgba(14, 116, 144, 0.26);
  transform: translateY(-1px);
}

.pd-story-overlay-layer-btn.is-danger {
  border-color: rgba(248, 113, 113, 0.45);
  background: rgba(127, 29, 29, 0.32);
  color: #fecaca;
}

.pd-story-overlay-layer-list {
  margin-top: 0.46rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.44rem;
}

.pd-story-overlay-empty-state {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  color: rgba(186, 230, 253, 0.84);
  font-size: 0.72rem;
  font-weight: 700;
}

.pd-story-overlay-layer-chip {
  min-height: 31px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.42);
  color: #e2e8f0;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.24rem 0.56rem;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  max-width: 100%;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.pd-story-overlay-layer-chip span {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-story-overlay-layer-chip.is-active {
  border-color: rgba(125, 211, 252, 0.7);
  background: rgba(14, 116, 144, 0.3);
  color: #e0f2fe;
}

.pd-story-overlay-sticker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.pd-story-overlay-sticker-btn {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.42);
  color: #f8fafc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.06rem;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.pd-story-overlay-sticker-btn:hover {
  border-color: rgba(125, 211, 252, 0.66);
  background: rgba(14, 116, 144, 0.26);
  transform: translateY(-1px);
}

.pd-story-overlay-size-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.46rem;
}

.pd-story-overlay-size-btn {
  min-height: 34px;
  border-radius: 11px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  background: rgba(15, 23, 42, 0.42);
  color: #e2e8f0;
  font-size: 0.78rem;
  font-weight: 700;
  transition: 0.2s ease;
}

.pd-story-overlay-size-btn:hover {
  background: rgba(30, 41, 59, 0.6);
}

.pd-story-overlay-size-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.pd-story-overlay-size-btn.is-active {
  border-color: rgba(125, 211, 252, 0.66);
  background: rgba(14, 116, 144, 0.3);
  color: #e0f2fe;
  box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.26);
}

.pd-story-text-editor {
  width: min(100%, 440px);
  margin-inline: auto;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: linear-gradient(165deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.72));
  box-shadow: 0 16px 38px rgba(2, 6, 23, 0.48);
  padding: 0.85rem 0.85rem 0.92rem;
  display: grid;
  gap: 0.78rem;
}

.pd-story-text-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
}

.pd-story-text-editor-title {
  margin: 0;
  color: #f8fafc;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
}

.pd-story-char-count {
  padding: 0.12rem 0.46rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  color: #bfdbfe;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.pd-story-textarea {
  width: 100%;
  min-height: 120px;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.38);
  background: rgba(248, 250, 252, 0.94);
  color: #0f172a;
  padding: 0.78rem 0.86rem;
  font-size: 0.95rem;
  line-height: 1.5;
  resize: none;
  transition: border-color 0.22s ease, box-shadow 0.22s ease;
}

.pd-story-textarea::placeholder {
  color: #64748b;
}

.pd-story-textarea:focus {
  outline: none;
  border-color: rgba(56, 189, 248, 0.72);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.22);
}

.pd-story-palette-grid {
  display: grid;
  gap: 0.7rem;
}

.pd-story-palette-label {
  margin: 0 0 0.38rem;
  color: #cbd5e1;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pd-story-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.54rem;
}

.pd-story-swatch {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1.5px solid rgba(226, 232, 240, 0.62);
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.2);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pd-story-swatch:hover {
  transform: translateY(-1px);
}

.pd-story-swatch:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.pd-story-swatch.is-active {
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.95),
    0 0 0 5px rgba(56, 189, 248, 0.36),
    inset 0 0 0 1px rgba(15, 23, 42, 0.14);
}

.pd-story-submit-btn {
  width: min(100%, 440px);
  min-height: 48px;
  margin: 0.15rem auto 0;
  border: 0;
  border-radius: 16px;
  background: linear-gradient(135deg, #0ea5e9, #1d4ed8);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-shadow: 0 14px 28px rgba(14, 116, 144, 0.38);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.pd-story-submit-btn.is-ready:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(30, 64, 175, 0.42);
  filter: saturate(1.06);
}

@media (max-width: 380px) {
  .pd-story-mode-btn span {
    font-size: 0.74rem;
  }
}

.pd-new-chat-modal {
  width: min(540px, calc(100vw - 1.4rem));
}

.pd-new-chat-modal h3 {
  margin: 0;
}

.pd-new-chat-modal p {
  margin: 0.4rem 0 0.72rem;
  color: #60778b;
  font-size: 0.85rem;
}

.pd-new-chat-modal input {
  width: 100%;
  min-height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(11, 95, 125, 0.18);
  padding: 0 0.66rem;
}

.pd-new-chat-results {
  margin-top: 0.66rem;
  max-height: 360px;
  overflow-y: auto;
  display: grid;
  gap: 0.42rem;
}

.pd-new-chat-user {
  width: 100%;
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 12px;
  background: #ffffff;
  text-align: left;
  padding: 0.46rem;
  display: flex;
  align-items: center;
  gap: 0.58rem;
}

.pd-new-chat-user img {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  object-fit: cover;
}

.pd-new-chat-user strong {
  display: block;
  font-size: 0.83rem;
}

.pd-new-chat-user small {
  font-size: 0.73rem;
  color: #60768a;
}

.pd-notification-list {
  margin-top: 0.86rem;
  display: grid;
  gap: 0.56rem;
}

.pd-notification-actions {
  margin-top: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pd-notification-actions button {
  border: 1.5px solid var(--pd-primary, #0ea5b0);
  border-radius: 12px;
  background: #f0fdfa;
  color: var(--pd-primary-dark, #0b4f64);
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.pd-notification-actions button:hover {
  background: #ccfbf1;
  box-shadow: 0 2px 8px rgba(14, 165, 176, 0.15);
}

.pd-notification-actions button.is-danger {
  border-color: rgba(220, 38, 38, 0.4);
  color: #b91c1c;
  background: #fef2f2;
}

.pd-notification-actions button.is-danger:hover {
  background: #fee2e2;
}

.pd-notification-actions button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

.pd-notification-row {
  width: 100%;
  border: 1px solid rgba(11, 95, 125, 0.15);
  border-radius: 16px;
  background: #ffffff;
  text-align: left;
  padding: 0.62rem;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  gap: 0.62rem;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pd-notification-row:hover {
  border-color: rgba(11, 95, 125, 0.26);
  transform: translateY(-1px);
}

.pd-notification-row.is-selection-mode {
  grid-template-columns: auto 46px minmax(0, 1fr) auto;
}

.pd-notification-row.is-selected {
  border-color: rgba(11, 95, 125, 0.34);
  box-shadow: 0 12px 24px -24px rgba(11, 95, 125, 0.8);
}

.pd-notification-row img {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  object-fit: cover;
}

.pd-notification-content {
  min-width: 0;
}

.pd-notification-row strong {
  display: block;
  font-size: 0.86rem;
}

.pd-notification-row p {
  margin: 0.16rem 0;
  color: #566d82;
  font-size: 0.8rem;
  line-height: 1.48;
}

.pd-notification-row small {
  color: #687d91;
  font-size: 0.71rem;
}

.pd-notification-unread-dot {
  color: var(--pd-accent);
  font-size: 0.58rem;
}

.pd-notification-check {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 1px solid rgba(11, 95, 125, 0.26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.62rem;
  color: #4e6478;
}

.pd-notification-check.is-checked {
  background: var(--pd-primary-strong);
  border-color: var(--pd-primary-strong);
  color: #ffffff;
}

.pd-notification-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
}

.pd-notification-delete {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid rgba(220, 38, 38, 0.24);
  color: #b91c1c;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.pd-notification-delete:hover {
  background: rgba(254, 242, 242, 0.9);
  border-color: rgba(220, 38, 38, 0.4);
}

.pd-notification-row.is-unread {
  background: #f4fbfe;
  border-color: rgba(11, 95, 125, 0.28);
}

.pd-post-follow-btn {
  border: 1px solid rgba(11, 95, 125, 0.18);
  border-radius: 999px;
  background: #ffffff;
  color: #244057;
  min-height: 30px;
  padding: 0.32rem 0.74rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  font-size: 0.73rem;
  font-weight: 800;
  line-height: 1;
  transition: all 0.2s ease;
}

.pd-post-follow-btn:hover {
  border-color: rgba(11, 95, 125, 0.35);
  background: #eefaff;
}

.pd-post-follow-btn:disabled {
  opacity: 0.68;
  cursor: wait;
}

.pd-post-follow-btn.is-following {
  border-color: rgba(22, 163, 74, 0.34);
  color: #166534;
  background: rgba(220, 252, 231, 0.72);
}

.pd-feed-action-row {
  display: flex;
  align-items: center;
  gap: 0.26rem;
}

.pd-feed-action-btn {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.52rem 0.32rem;
  border-radius: 0.7rem;
  font-weight: 700;
  line-height: 1;
}

.pd-feed-action-btn i {
  flex: 0 0 auto;
  font-size: 1.02rem;
}

.pd-feed-action-label {
  display: block;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.86rem;
  line-height: 1.1;
}

.pd-post-detail-shell {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  gap: 0.84rem;
}

.pd-post-detail-head {
  display: flex;
  align-items: center;
  gap: 0.62rem;
}

.pd-post-detail-head img {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  object-fit: cover;
}

.pd-post-detail-head strong {
  display: block;
  font-size: 0.92rem;
}

.pd-post-detail-head small {
  color: #60768a;
  font-size: 0.75rem;
}

.pd-post-detail-caption {
  margin: 0.65rem 0 0;
  color: #394f64;
  line-height: 1.6;
}

.pd-post-media-carousel {
  margin-top: 0.7rem;
  position: relative;
}

.pd-post-media-stage {
  width: 100%;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pd-post-media-stage img,
.pd-post-media-stage video,
.pd-post-media-grid img,
.pd-post-media-grid video {
  width: 100%;
  max-height: min(72vh, 620px);
  object-fit: contain;
  background: #000;
  display: block;
}

.pd-post-media-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(17, 36, 58, 0.54);
  color: #f8fbff;
  backdrop-filter: blur(4px);
  cursor: pointer;
  z-index: 2;
}

.pd-post-media-nav.is-prev {
  left: 0.62rem;
}

.pd-post-media-nav.is-next {
  right: 0.62rem;
}

.pd-post-media-counter {
  position: absolute;
  right: 0.62rem;
  bottom: 0.62rem;
  border-radius: 999px;
  background: rgba(17, 36, 58, 0.66);
  color: #f8fbff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.24rem 0.54rem;
  z-index: 2;
}

.pd-post-media-dots {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.36rem;
}

.pd-post-media-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  padding: 0;
  background: rgba(17, 36, 58, 0.24);
  cursor: pointer;
}

.pd-post-media-dot.is-active {
  width: 18px;
  background: var(--pd-primary);
}

.pd-post-tags {
  margin: 0.62rem 0 0;
  color: #0b5f7d;
  font-size: 0.83rem;
  line-height: 1.5;
}

.pd-post-detail-actions {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(11, 95, 125, 0.09);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.pd-post-like-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.52rem 1rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  background: #f5f7f9;
  border: 1.5px solid rgba(11, 95, 125, 0.15);
  color: #4a6278;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
  user-select: none;
}

.pd-post-like-btn:hover {
  background: #fff0f0;
  border-color: #f87171;
  color: #ef4444;
  transform: translateY(-1px);
}

.pd-post-like-btn:active {
  transform: scale(0.95);
}

.pd-post-like-btn.is-liked {
  background: linear-gradient(135deg, #fff0f0 0%, #ffdede 100%);
  border-color: #ef4444;
  color: #ef4444;
}

.pd-post-like-btn .pd-like-heart-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.pd-post-like-btn i.fa-heart {
  font-size: 0.95rem;
  transition: color 0.18s, transform 0.18s;
}

.pd-post-like-btn .pd-like-count {
  font-variant-numeric: tabular-nums;
  min-width: 1ch;
}

.pd-post-like-btn .pd-like-label {
  font-size: 0.79rem;
}

.pd-post-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  padding: 0.52rem 1rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  background: #f5f7f9;
  border: 1.5px solid rgba(11, 95, 125, 0.15);
  color: #4a6278;
  transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.12s;
  user-select: none;
}

.pd-post-action-btn:hover {
  background: #eef5f8;
  border-color: #1da6c5;
  color: #0b5f7d;
  transform: translateY(-1px);
}

.pd-post-action-btn:active {
  transform: scale(0.95);
}

.pd-post-share-btn:hover {
  background: #f0f9ff;
  border-color: #38bdf8;
  color: #0369a1;
}

.pd-action-label {
  font-size: 0.79rem;
}

.pd-post-comments-card {
  max-height: 700px;
  overflow: auto;
}

.pd-post-comment-row {
  display: flex;
  align-items: flex-start;
  gap: 0.56rem;
  padding: 0.52rem 0;
  border-top: 1px solid rgba(11, 95, 125, 0.09);
}

.pd-post-comment-row:first-child {
  border-top: 0;
}

.pd-post-comment-row img {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  object-fit: cover;
}

.pd-post-comment-row strong {
  display: block;
  font-size: 0.82rem;
}

.pd-post-comment-row p {
  margin: 0.16rem 0;
  color: #4f6579;
  font-size: 0.8rem;
  line-height: 1.45;
}

.pd-post-comment-row small {
  font-size: 0.69rem;
  color: #687d91;
}

.pd-post-comment-form {
  margin-top: 0.62rem;
  display: grid;
  gap: 0.45rem;
}

.pd-post-comment-form textarea {
  width: 100%;
  border: 1px solid rgba(11, 95, 125, 0.18);
  border-radius: 12px;
  padding: 0.6rem;
  font-size: 0.84rem;
  resize: vertical;
}

.pd-user-profile-shell {
  display: grid;
  gap: 0.85rem;
}

#user-profile-header.pd-card {
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
}

#user-profile-header.pd-card:hover {
  transform: none;
  box-shadow: none;
}

.pd-user-profile-shell.is-institution-profile .pd-user-profile-tabs {
  display: none;
}

.pd-corp-profile {
  --corp-accent: #0f7491;
  --corp-accent-strong: #0b5e74;
  border-radius: 30px;
  border: 1px solid rgba(128, 173, 200, 0.54);
  background:
    radial-gradient(circle at 7% 10%, rgba(202, 229, 247, 0.48), transparent 33%),
    radial-gradient(circle at 94% 88%, rgba(170, 213, 241, 0.46), transparent 38%),
    linear-gradient(158deg, #f6fbff 0%, #edf5fc 50%, #d7e7f4 100%);
  overflow: hidden;
  box-shadow: 0 28px 44px -34px rgba(8, 27, 44, 0.72);
}

.pd-corp-profile.is-vet {
  --corp-accent: #0b63ce;
  --corp-accent-strong: #084d9d;
}

.pd-corp-profile.is-shelter {
  --corp-accent: #0f766e;
  --corp-accent-strong: #115e59;
}

.pd-corp-cover-wrap {
  position: relative;
  min-height: 272px;
  border-bottom: 1px solid rgba(125, 167, 192, 0.44);
  overflow: hidden;
}

.pd-corp-cover-wrap > img {
  width: 100%;
  height: clamp(250px, 30vw, 364px);
  object-fit: cover;
  display: block;
}

.pd-corp-cover-wrap::before,
.pd-corp-cover-wrap::after {
  content: "\f1b0";
  position: absolute;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: rgba(243, 250, 255, 0.48);
  text-shadow: 0 8px 14px rgba(7, 23, 35, 0.25);
  pointer-events: none;
}

.pd-corp-cover-wrap::before {
  left: 38px;
  top: 46px;
  font-size: 1.66rem;
  transform: rotate(-17deg);
}

.pd-corp-cover-wrap::after {
  right: 62px;
  bottom: 34px;
  font-size: 1.36rem;
  transform: rotate(11deg);
}

.pd-corp-cover-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 85% 16%, rgba(245, 253, 255, 0.3), transparent 34%),
    linear-gradient(170deg, rgba(8, 24, 38, 0.05), rgba(8, 24, 38, 0.38));
}

.pd-corp-cover-actions {
  position: absolute;
  left: 16px;
  top: 14px;
  z-index: 2;
  display: inline-flex;
  gap: 0.45rem;
}

.pd-corp-cover-btn {
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 999px;
  background: rgba(16, 45, 66, 0.56);
  color: #fff;
  min-height: 34px;
  padding: 0.35rem 0.72rem;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  font-size: 0.76rem;
  font-weight: 800;
  backdrop-filter: blur(4px);
  transition: background 0.18s ease, transform 0.18s ease;
}

.pd-corp-cover-btn:hover {
  background: rgba(16, 45, 66, 0.76);
  transform: translateY(-1px);
}

.pd-corp-cover-btn.is-danger {
  background: rgba(131, 23, 23, 0.56);
}

.pd-corp-cover-btn.is-danger:hover {
  background: rgba(131, 23, 23, 0.74);
}

.pd-corp-account-badge {
  position: absolute;
  top: 20px;
  right: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.56);
  background: linear-gradient(120deg, var(--corp-accent-strong), var(--corp-accent));
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.98rem;
  box-shadow: 0 14px 20px -18px rgba(5, 22, 34, 0.95);
  z-index: 1;
}

.pd-corp-content {
  margin-top: -70px;
  position: relative;
  z-index: 2;
  padding: 0 0.98rem 0.98rem;
  display: grid;
  gap: 0.66rem;
}

.pd-corp-head-row {
  border-radius: 24px;
  border: 1px solid rgba(126, 171, 197, 0.44);
  background: rgba(250, 253, 255, 0.94);
  box-shadow: 0 16px 24px -24px rgba(8, 27, 44, 0.74);
  padding: 0.82rem 0.94rem 0.72rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.72rem;
}

.pd-corp-identity-wrap {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.84rem;
  align-items: end;
  flex: 1;
}

.pd-corp-avatar-wrap {
  position: relative;
  flex-shrink: 0;
  margin-top: -64px;
}

.pd-corp-avatar {
  width: 156px;
  height: 156px;
  border-radius: 999px;
  object-fit: cover;
  border: 6px solid #fff;
  background: #eff5fa;
  box-shadow: 0 18px 24px -22px rgba(6, 23, 38, 0.84);
  display: block;
  margin-top: 0;
}

.pd-corp-name-stack {
  min-width: 0;
  display: grid;
  gap: 0.32rem;
}

.pd-corp-name-row {
  min-width: 0;
  display: block;
}

.pd-corp-name-row h1 {
  margin: 0;
  font-size: clamp(1.56rem, 2.76vw, 2.38rem);
  line-height: 1.06;
  color: #17354d;
  letter-spacing: -0.02em;
  font-weight: 900;
  text-wrap: balance;
}

.pd-corp-profile.is-association .pd-corp-name-row h1 {
  color: #0f3a59;
  letter-spacing: -0.028em;
}

.pd-corp-username {
  margin: 0;
  color: #5a758c;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.1;
}

.pd-corp-username.is-authority {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 183, 204, 0.5);
  background: rgba(236, 246, 252, 0.92);
  padding: 0.22rem 0.58rem;
  color: #204863;
}

.pd-corp-authority-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #587a92;
}

.pd-corp-authority-name {
  font-size: 0.76rem;
  font-weight: 700;
  color: #1a415c;
}

.pd-corp-role-row {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  color: #234c68;
  font-size: 0.92rem;
  font-weight: 800;
}

.pd-corp-brand-chip {
  width: fit-content;
  border-radius: 999px;
  border: 1px solid rgba(146, 182, 206, 0.52);
  background: rgba(222, 238, 249, 0.95);
  color: #1f4a66;
  font-size: 0.96rem;
  font-weight: 700;
  padding: 0.42rem 1.02rem;
}

.pd-corp-public-link {
  width: fit-content;
  max-width: min(100%, 440px);
  margin-top: 0.1rem;
  border-radius: 12px;
  border: 1px solid rgba(142, 180, 203, 0.56);
  background: rgba(243, 250, 255, 0.96);
  color: #1c4a67;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.44rem;
  padding: 0.3rem 0.58rem;
  font-size: 0.77rem;
  font-weight: 800;
  line-height: 1.2;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pd-corp-public-link span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pd-corp-public-link:hover {
  transform: translateY(-1px);
  border-color: rgba(73, 128, 162, 0.66);
  box-shadow: 0 12px 20px -18px rgba(10, 37, 57, 0.82);
}

.pd-corp-top-actions {
  width: 100%;
  max-width: 318px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.44rem;
}

.pd-corp-top-btn {
  border: 1px solid rgba(147, 182, 205, 0.64);
  border-radius: 16px;
  min-height: 58px;
  background: rgba(247, 252, 255, 0.98);
  color: #204965;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.32rem;
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
  padding: 0.46rem 0.46rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pd-corp-top-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 150, 182, 0.76);
  box-shadow: 0 16px 22px -24px rgba(6, 23, 38, 0.95);
}

.pd-corp-top-btn.is-strong {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(120deg, var(--corp-accent-strong), var(--corp-accent));
  box-shadow: 0 16px 24px -22px rgba(8, 76, 106, 0.82);
}

.pd-corp-location-row {
  margin-top: 0;
  margin-left: 184px;
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
  color: #335977;
  font-size: 1.02rem;
  font-weight: 700;
}

.pd-corp-divider {
  height: 1px;
  background: rgba(137, 176, 200, 0.48);
  margin-top: 0.12rem;
}

.pd-corp-action-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.62rem;
  align-items: center;
}

.pd-corp-main-actions {
  border-radius: 20px;
  border: 1px solid rgba(138, 178, 202, 0.48);
  background: rgba(248, 252, 255, 0.94);
  padding: 0.56rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.54rem;
}

.pd-corp-main-btn {
  border: 1px solid transparent;
  border-radius: 15px;
  min-height: 50px;
  padding: 0.62rem 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 1rem;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pd-corp-main-btn.is-solid {
  color: #fff;
  background: linear-gradient(120deg, var(--corp-accent-strong), var(--corp-accent));
  box-shadow: 0 14px 24px -20px rgba(8, 76, 106, 0.72);
}

.pd-corp-main-btn.is-outline {
  color: #244c69;
  background: rgba(250, 253, 255, 0.96);
  border-color: rgba(138, 178, 202, 0.72);
}

.pd-corp-main-btn:hover {
  transform: translateY(-1px);
}

.pd-corp-tab-actions {
  border-radius: 19px;
  border: 1px solid rgba(138, 178, 202, 0.48);
  background: rgba(248, 252, 255, 0.94);
  padding: 0.54rem;
  display: flex;
  align-items: center;
  gap: 0.48rem;
}

.pd-corp-tab-btn {
  border: 1px solid transparent;
  border-radius: 14px;
  min-height: 48px;
  padding: 0.58rem 0.94rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.36rem;
  color: #2b4f6a;
  background: transparent;
  font-size: 0.98rem;
  font-weight: 800;
}

.pd-corp-tab-btn.is-active {
  border-color: rgba(138, 178, 202, 0.62);
  background: rgba(230, 243, 251, 0.9);
  color: #1f4a66;
}

.pd-corp-grid-row {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 0.62rem;
}

.pd-corp-left-col {
  display: grid;
  gap: 0.52rem;
}

.pd-corp-stats-wide {
  border-radius: 18px;
  border: 1px solid rgba(138, 178, 202, 0.48);
  background: rgba(248, 252, 255, 0.95);
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 0.88fr) minmax(0, 0.88fr) minmax(0, 1.36fr);
  overflow: hidden;
}

.pd-corp-stat-item {
  min-height: 104px;
  padding: 0.62rem 0.44rem;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: 0.12rem;
  color: #355c76;
  border-right: 1px solid rgba(138, 178, 202, 0.32);
}

.pd-corp-stat-item:last-child {
  border-right: 0;
}

.pd-corp-stat-value {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
}

.pd-corp-stat-value i {
  color: var(--corp-accent);
  font-size: 0.9rem;
}

.pd-corp-stat-item strong {
  font-size: 1.58rem;
  line-height: 1.05;
  color: #13364f;
}

.pd-corp-stat-item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 0.28rem;
  font-size: 0.86rem;
  font-weight: 700;
  color: #496984;
  white-space: nowrap;
}

.pd-corp-stat-item span i {
  color: #5f7d95;
  font-size: 0.74rem;
}

.pd-corp-stat-item.is-clickable {
  cursor: pointer;
}

.pd-corp-stat-item.is-clickable:hover {
  background: rgba(240, 249, 255, 0.92);
}

.pd-corp-stat-item.is-clickable:focus-visible {
  outline: 2px solid rgba(14, 165, 233, 0.62);
  outline-offset: -2px;
}

.pd-corp-stat-item.is-long-label span {
  white-space: nowrap;
  text-align: center;
  line-height: 1.1;
  font-size: 0.82rem;
}

.pd-corp-about-card {
  border-radius: 18px;
  border: 1px solid rgba(138, 178, 202, 0.48);
  background: rgba(248, 252, 255, 0.95);
  padding: 1rem 1.1rem;
  display: grid;
  gap: 0.4rem;
  min-height: 120px;
}

.pd-corp-about-card h3 {
  margin: 0;
  color: #1e4965;
  font-size: 1.06rem;
  display: inline-flex;
  align-items: center;
  gap: 0.46rem;
}

.pd-corp-about-card p {
  margin: 0;
  color: #46647b;
  line-height: 1.7;
  font-size: 1.02rem;
}

.pd-corp-right-col {
  border-radius: 18px;
  border: 1px solid rgba(138, 178, 202, 0.48);
  background: rgba(248, 252, 255, 0.95);
  padding: 0.58rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.52rem;
  align-content: start;
}

.pd-corp-feature-card {
  border: 1px solid rgba(143, 183, 206, 0.52);
  border-radius: 16px;
  background: rgba(242, 250, 255, 0.92);
  color: #1e4865;
  min-height: 144px;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: 0.48rem;
  font-size: 0.94rem;
  font-weight: 800;
  padding: 0.62rem;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.pd-corp-feature-card span {
  width: auto;
  max-width: 100%;
  white-space: nowrap;
  font-size: 0.84rem;
  letter-spacing: -0.01em;
}

.pd-corp-feature-card i {
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(188, 225, 245, 0.82);
  color: var(--corp-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.42rem;
}

.pd-corp-feature-card:hover {
  transform: translateY(-1px);
  border-color: rgba(94, 150, 182, 0.72);
  box-shadow: 0 16px 22px -24px rgba(7, 24, 38, 0.95);
}

.pd-corp-right-footer {
  grid-column: 1 / -1;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(143, 183, 206, 0.46);
  background:
    radial-gradient(circle at 20% 30%, rgba(173, 216, 243, 0.48), transparent 32%),
    linear-gradient(120deg, rgba(229, 242, 250, 0.92), rgba(209, 230, 244, 0.96));
}

.pd-user-inst-hero-card {
  --inst-accent: #0e7490;
  --inst-accent-strong: #0b5e74;
  --inst-soft: #e6f7fb;
  border-radius: 22px;
  border: 1px solid rgba(11, 95, 125, 0.2);
  background:
    radial-gradient(circle at 8% 18%, rgba(14, 116, 144, 0.1), transparent 35%),
    radial-gradient(circle at 94% 82%, rgba(56, 189, 248, 0.18), transparent 36%),
    linear-gradient(155deg, #fafdff, #eef7fc);
  overflow: hidden;
  box-shadow: 0 22px 36px -32px rgba(9, 31, 51, 0.68);
}

.pd-user-inst-hero-card.is-vet {
  --inst-accent: #0b63ce;
  --inst-accent-strong: #084b9b;
  --inst-soft: #e8f1ff;
}

.pd-user-inst-hero-card.is-shelter {
  --inst-accent: #0f766e;
  --inst-accent-strong: #115e59;
  --inst-soft: #e7faf5;
}

.pd-user-inst-cover {
  position: relative;
  min-height: 220px;
  border-bottom: 1px solid rgba(11, 95, 125, 0.18);
  overflow: hidden;
}

.pd-user-inst-cover > img {
  width: 100%;
  height: clamp(210px, 28vw, 290px);
  object-fit: cover;
  display: block;
}

.pd-user-inst-cover::before,
.pd-user-inst-cover::after {
  content: "\f1b0";
  position: absolute;
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: rgba(255, 255, 255, 0.32);
  text-shadow: 0 8px 12px rgba(6, 19, 31, 0.22);
  pointer-events: none;
}

.pd-user-inst-cover::before {
  top: 22px;
  left: 26px;
  font-size: 1.5rem;
  transform: rotate(-20deg);
}

.pd-user-inst-cover::after {
  right: 52px;
  bottom: 22px;
  font-size: 1.2rem;
  transform: rotate(10deg);
}

.pd-user-inst-cover-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 80% 16%, rgba(255, 255, 255, 0.24), transparent 36%),
    linear-gradient(172deg, rgba(8, 24, 38, 0.12), rgba(8, 24, 38, 0.56));
}

.pd-user-inst-cover-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  border-radius: 999px;
  padding: 0.42rem 0.84rem;
  background: color-mix(in srgb, var(--inst-accent) 82%, #ffffff);
  border: 1px solid rgba(255, 255, 255, 0.46);
  color: #ffffff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 10px 18px -14px rgba(3, 25, 40, 0.8);
  z-index: 1;
}

.pd-user-inst-profile-body {
  margin-top: -58px;
  position: relative;
  z-index: 2;
  padding: 0 0.95rem 0.95rem;
  display: grid;
  gap: 0.72rem;
}

.pd-user-inst-head-grid {
  border-radius: 20px;
  border: 1px solid rgba(11, 95, 125, 0.16);
  background: rgba(255, 255, 255, 0.94);
  padding: 0.82rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.72rem;
  backdrop-filter: blur(2px);
}

.pd-user-inst-identity-block {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.74rem;
  align-items: center;
}

.pd-user-inst-avatar {
  width: 102px;
  height: 102px;
  border-radius: 999px;
  object-fit: cover;
  border: 4px solid #ffffff;
  box-shadow: 0 18px 24px -22px rgba(6, 24, 39, 0.75);
  background: #edf4f9;
}

.pd-user-inst-name-stack {
  min-width: 0;
  display: grid;
  gap: 0.32rem;
}

.pd-user-inst-name-line {
  display: flex;
  align-items: baseline;
  gap: 0.58rem;
  flex-wrap: wrap;
}

.pd-user-inst-name-line h1 {
  margin: 0;
  font-size: clamp(1.42rem, 2.8vw, 2.22rem);
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: #14324a;
}

.pd-user-inst-name-line span {
  color: #587186;
  font-size: 1.06rem;
  font-weight: 700;
}

.pd-user-inst-role-line {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  color: #285170;
  font-size: 0.9rem;
  font-weight: 800;
}

.pd-user-inst-brand-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  border: 1px solid rgba(11, 95, 125, 0.22);
  background: rgba(225, 241, 251, 0.88);
  color: #224a66;
  padding: 0.36rem 0.72rem;
  font-size: 0.82rem;
  font-weight: 700;
}

.pd-user-inst-location {
  margin: 0.1rem 0 0;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: #3f627b;
  font-size: 0.8rem;
  font-weight: 700;
}

.pd-user-inst-top-actions {
  width: 100%;
  max-width: 360px;
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.44rem;
}

.pd-user-inst-top-btn {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 13px;
  min-height: 40px;
  padding: 0.52rem 0.78rem;
  background: rgba(247, 252, 255, 0.95);
  color: #1d425f;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.84rem;
  font-weight: 800;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pd-user-inst-top-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 95, 125, 0.34);
  box-shadow: 0 16px 28px -26px rgba(6, 24, 39, 0.78);
}

.pd-user-inst-top-btn.is-strong {
  border-color: transparent;
  color: #ffffff;
  background: linear-gradient(120deg, var(--inst-accent-strong), var(--inst-accent));
  box-shadow: 0 14px 26px -20px color-mix(in srgb, var(--inst-accent) 62%, #001622);
}

.pd-user-inst-primary-actions {
  border-radius: 18px;
  border: 1px solid rgba(11, 95, 125, 0.16);
  background: rgba(255, 255, 255, 0.92);
  padding: 0.62rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pd-user-inst-btn {
  border-radius: 13px;
  min-height: 42px;
  padding: 0.58rem 0.84rem;
  border: 1px solid transparent;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.42rem;
  font-size: 0.84rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.18s ease;
}

.pd-user-inst-btn.is-solid {
  color: #ffffff;
  background: linear-gradient(120deg, var(--inst-accent-strong), var(--inst-accent));
  box-shadow: 0 14px 22px -18px color-mix(in srgb, var(--inst-accent) 56%, #001622);
}

.pd-user-inst-btn.is-outline {
  color: #214a67;
  border-color: rgba(11, 95, 125, 0.24);
  background: rgba(247, 252, 255, 0.96);
}

.pd-user-inst-btn:hover {
  transform: translateY(-1px);
}

.pd-user-inst-stats-grid {
  display: grid;
  gap: 0.52rem;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.pd-user-inst-stat-card {
  border-radius: 14px;
  border: 1px solid rgba(11, 95, 125, 0.14);
  background: rgba(255, 255, 255, 0.92);
  min-height: 92px;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 0.16rem;
  text-align: center;
  color: #325670;
}

.pd-user-inst-stat-card i {
  color: var(--inst-accent);
  font-size: 0.92rem;
}

.pd-user-inst-stat-card strong {
  font-size: 1.4rem;
  line-height: 1.08;
  color: #12364f;
}

.pd-user-inst-stat-card span {
  font-size: 0.74rem;
  font-weight: 700;
  color: #557089;
}

.pd-user-inst-bottom-grid {
  display: grid;
  gap: 0.52rem;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
}

.pd-user-inst-about-card {
  border-radius: 16px;
  border: 1px solid rgba(11, 95, 125, 0.14);
  background: rgba(255, 255, 255, 0.94);
  padding: 0.82rem;
  display: grid;
  gap: 0.44rem;
}

.pd-user-inst-about-card h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: #173f5b;
  font-size: 0.96rem;
}

.pd-user-inst-about-card p {
  margin: 0;
  color: #47647c;
  line-height: 1.64;
  font-size: 0.88rem;
}

.pd-user-inst-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.46rem;
}

.pd-user-inst-detail-card {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 14px;
  min-height: 124px;
  background: rgba(248, 252, 255, 0.95);
  color: #1f465f;
  padding: 0.62rem 0.56rem;
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
  gap: 0.4rem;
  font-size: 0.83rem;
  font-weight: 800;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pd-user-inst-detail-card i {
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: rgba(190, 231, 252, 0.7);
  color: var(--inst-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}

.pd-user-inst-detail-card:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 95, 125, 0.28);
  box-shadow: 0 16px 28px -28px rgba(6, 24, 39, 0.85);
}

.pd-user-profile-cover {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(11, 95, 125, 0.2);
  background: linear-gradient(135deg, rgba(221, 245, 251, 0.9), rgba(255, 255, 255, 0.9));
  min-height: 180px;
}

.pd-user-profile-cover > img {
  width: 100%;
  height: clamp(170px, 26vw, 250px);
  object-fit: cover;
  display: block;
  filter: saturate(1.08);
}

.pd-user-profile-cover-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.82rem;
  background: linear-gradient(145deg, rgba(2, 14, 24, 0.08), rgba(2, 14, 24, 0.48));
}

.pd-user-profile-cover-top,
.pd-user-profile-cover-bottom {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
}

.pd-user-role-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.36rem 0.72rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #ffffff;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.36);
  background: rgba(15, 23, 42, 0.35);
}

.pd-user-role-pill.is-vet {
  background: rgba(8, 145, 178, 0.78);
}

.pd-user-role-pill.is-shelter {
  background: rgba(234, 88, 12, 0.78);
}

.pd-user-role-pill.is-association {
  background: rgba(16, 185, 129, 0.78);
}

.pd-user-cover-cta {
  border-color: rgba(255, 255, 255, 0.42);
  color: #0f172a;
  background: rgba(255, 255, 255, 0.94);
}

.pd-user-profile-header {
  display: grid;
  gap: 0.82rem;
}

.pd-user-profile-header-plain {
  border-radius: 18px;
  border: 1px solid rgba(11, 95, 125, 0.18);
  background: rgba(255, 255, 255, 0.94);
  padding: 0.9rem;
}

.pd-user-profile-pro {
  border-radius: 22px;
  border: 1px solid #d8e2eb;
  background: #ffffff;
  box-shadow: 0 16px 36px -28px rgba(15, 23, 42, 0.46);
  padding: 1.12rem 1.18rem;
  display: grid;
  gap: 0.92rem;
  animation: pd-user-profile-card-in 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pd-user-profile-pro-cover {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(132, 166, 196, 0.34);
  overflow: hidden;
  min-height: 172px;
  box-shadow: 0 20px 36px -28px rgba(2, 6, 23, 0.88);
  animation: pd-user-profile-cover-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.pd-user-profile-pro-cover > img {
  width: 100%;
  height: clamp(164px, 24vw, 228px);
  object-fit: cover;
  display: block;
  filter: saturate(1.08) contrast(1.03);
}

.pd-user-profile-pro-cover.is-default-community-cover {
  min-height: 0;
  aspect-ratio: 1175 / 220;
}

.pd-user-profile-pro-cover.is-default-community-cover > img {
  height: 100%;
  object-fit: contain;
  object-position: center center;
  background: linear-gradient(180deg, #eef6fc 0%, #e6f1f9 100%);
  filter: saturate(1.02) contrast(1.01);
}

.pd-user-profile-pro-cover.is-default-community-cover .pd-user-profile-pro-cover-overlay {
  background:
    radial-gradient(circle at 12% 22%, rgba(56, 189, 248, 0.08), transparent 54%),
    linear-gradient(168deg, rgba(8, 20, 41, 0.08), rgba(8, 20, 41, 0.24));
}

.pd-user-profile-pro-cover-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 22%, rgba(56, 189, 248, 0.2), transparent 48%),
    linear-gradient(168deg, rgba(8, 20, 41, 0.24), rgba(8, 20, 41, 0.62));
}

.pd-user-profile-pro-cover-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  padding: 0.34rem 0.66rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  background: rgba(15, 23, 42, 0.42);
  color: #f8fafc;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pd-user-profile-pro-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.pd-user-profile-pro-top.is-over-cover {
  margin-top: -52px;
  position: relative;
  z-index: 2;
  padding-inline: 0.38rem;
}

.pd-user-profile-pro-cover.is-default-community-cover + .pd-user-profile-pro-top.is-over-cover {
  margin-top: clamp(-36px, -7vw, -18px);
}

.pd-user-profile-pro-left {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.78rem 0.84rem;
  border-radius: 18px;
  border: 1px solid #dce7f0;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  box-shadow: 0 16px 28px -28px rgba(2, 6, 23, 0.88);
}

.pd-user-profile-pro-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.pd-user-profile-pro-avatar {
  width: 136px;
  height: 136px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #ffffff;
  box-shadow: 0 12px 28px -20px rgba(2, 6, 23, 0.85);
}

.pd-user-profile-pro-avatar-edit-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(15, 23, 42, 0.82);
  color: #f8fafc;
  box-shadow: 0 12px 20px -16px rgba(2, 6, 23, 0.9);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  z-index: 3;
}

.pd-user-profile-pro-avatar-edit-btn:hover {
  transform: translateY(-1px);
  background: rgba(14, 116, 144, 0.92);
  box-shadow: 0 16px 24px -18px rgba(2, 6, 23, 0.95);
}

.pd-user-profile-pro-avatar-edit-btn:disabled {
  opacity: 0.72;
  cursor: not-allowed;
  transform: none;
}

.pd-user-profile-pro-online-dot {
  position: absolute;
  right: 8px;
  bottom: 9px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid #ffffff;
  background: #22c55e;
  box-shadow: 0 6px 16px -10px rgba(2, 6, 23, 0.9);
}

.pd-user-profile-pro-identity {
  min-width: 0;
  display: grid;
  gap: 0.46rem;
}

.pd-user-profile-pro-name-row h1 {
  margin: 0;
  color: #112f45;
  font-size: clamp(1.55rem, 2.9vw, 2.28rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  font-weight: 900;
}

.pd-user-profile-pro-name-row span {
  color: #4f6678;
  font-weight: 800;
  font-size: 0.96rem;
}

.pd-user-profile-pro-subtitle {
  margin: 0;
  color: #1d75d8;
  font-size: 1.04rem;
  font-weight: 800;
  line-height: 1.3;
  white-space: normal;
  overflow-wrap: anywhere;
}

.pd-user-profile-pro-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.72rem;
}

.pd-user-profile-pro-meta .pd-user-profile-location {
  margin: 0;
  color: #5a6e80;
  font-size: 0.92rem;
  font-weight: 700;
}

.pd-user-profile-pro-status {
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  color: #4b5563;
  font-size: 0.9rem;
  font-weight: 700;
}

.pd-user-profile-pro-status i {
  color: #22c55e;
  font-size: 0.84rem;
}

.pd-user-profile-pro-main {
  min-width: 0;
  display: grid;
  gap: 0.72rem;
}

.pd-user-profile-pro-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  gap: 0.9rem;
  align-items: start;
}

.pd-user-profile-pro-side {
  min-width: 0;
  display: grid;
  gap: 0.66rem;
}

.pd-user-profile-pro-bio {
  margin: 0;
  color: #495d70;
  font-size: 1rem;
  line-height: 1.62;
  max-width: 840px;
  white-space: pre-line;
}

.pd-user-profile-pro-chips {
  margin-top: 0;
}

.pd-user-profile-pro-chips a,
.pd-user-profile-pro-chips span {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  text-decoration: none;
  padding: 0.3rem 0.62rem;
  border-radius: 999px;
  border: 1px solid #dce7f0;
  background: #f8fbff;
  color: #36526a;
  font-size: 0.73rem;
  font-weight: 800;
}

.pd-user-profile-pro-chips a:hover {
  border-color: #bed3e6;
  background: #f2f8ff;
}

.pd-user-profile-pro-stats {
  border: 1px solid #dce7f0;
  border-radius: 16px;
  padding: 0.64rem;
  background:
    linear-gradient(160deg, rgba(249, 252, 255, 0.98), rgba(242, 249, 255, 0.94));
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.48rem;
}

.pd-user-profile-pro-stat {
  min-height: 74px;
  display: grid;
  align-content: center;
  gap: 0.2rem;
  text-align: left;
  padding: 0.5rem 0.56rem;
  border-radius: 11px;
  border: 1px solid #deebf5;
  background: #ffffff;
  box-shadow: 0 10px 20px -26px rgba(2, 6, 23, 0.72);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  animation: pd-user-profile-stat-in 520ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.pd-user-profile-pro-stat:nth-child(1) {
  animation-delay: 60ms;
}

.pd-user-profile-pro-stat:nth-child(2) {
  animation-delay: 120ms;
}

.pd-user-profile-pro-stat:nth-child(3) {
  animation-delay: 180ms;
}

.pd-user-profile-pro-stat:nth-child(4) {
  animation-delay: 240ms;
}

.pd-user-profile-pro-stat:nth-child(5) {
  animation-delay: 300ms;
}

.pd-user-profile-pro-stat strong {
  color: #162f42;
  font-size: 1.34rem;
  line-height: 1.02;
  font-weight: 900;
}

.pd-user-profile-pro-stat small {
  display: block;
  color: #6b7f91;
  font-size: 0.61rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 800;
}

.pd-user-profile-pro-stat.is-clickable {
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.pd-user-profile-pro-stat.is-clickable:hover {
  transform: translateY(-1px);
  border-color: #bfd8ea;
  box-shadow: 0 14px 24px -24px rgba(2, 6, 23, 0.82);
}

.pd-user-profile-pro-actions {
  min-width: 0;
}

.pd-user-profile-pro-actions.is-top {
  margin-left: auto;
}

.pd-user-profile-pro-actions .pd-community-actions {
  margin-top: 0;
  justify-content: flex-end;
  gap: 0.55rem;
}

.pd-user-profile-pro-actions.is-bottom .pd-community-actions {
  justify-content: flex-start;
}

.pd-user-profile-pro-actions.is-side .pd-community-actions {
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 0.46rem;
}

.pd-user-profile-pro-actions.is-side .pd-community-actions .pd-btn {
  width: 100%;
  justify-content: center;
}

.pd-user-profile-pro-actions .pd-btn {
  min-height: 38px;
  border-radius: 11px;
  padding: 0.5rem 0.78rem;
  font-size: 0.79rem;
  font-weight: 800;
}

.pd-user-profile-modern {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(14, 116, 144, 0.2);
  background:
    radial-gradient(circle at 12% 8%, rgba(14, 165, 233, 0.16), transparent 36%),
    radial-gradient(circle at 92% 0%, rgba(59, 130, 246, 0.14), transparent 32%),
    linear-gradient(165deg, rgba(255, 255, 255, 0.98), rgba(244, 251, 255, 0.96));
  box-shadow: 0 18px 44px -28px rgba(6, 24, 39, 0.38);
  padding: 0;
}

@keyframes pd-user-profile-card-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pd-user-profile-cover-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pd-user-profile-stat-in {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pd-user-profile-pro,
  .pd-user-profile-pro-cover,
  .pd-user-profile-pro-stat {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.pd-user-profile-modern-glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 80% 90%, rgba(56, 189, 248, 0.12), transparent 42%),
    radial-gradient(circle at 0% 100%, rgba(16, 185, 129, 0.1), transparent 34%);
}

.pd-user-profile-modern-content {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1rem;
  padding: 1.15rem;
}

.pd-user-profile-intro {
  display: flex;
  align-items: center;
  gap: 0.82rem;
  min-width: 0;
}

.pd-user-profile-modern-intro {
  align-items: flex-start;
  gap: 0.95rem;
}

.pd-user-profile-avatar {
  width: 110px;
  height: 110px;
  border-radius: 24px;
  object-fit: cover;
}

.pd-user-profile-modern .pd-user-profile-avatar {
  width: 128px;
  height: 128px;
  border-radius: 28px;
  border: 3px solid rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 28px -18px rgba(2, 6, 23, 0.68);
}

.pd-user-profile-identity {
  display: grid;
  gap: 0.36rem;
  flex: 1;
  min-width: 0;
}

.pd-user-profile-modern-identity {
  gap: 0.48rem;
}

.pd-user-profile-main {
  min-width: 0;
  display: grid;
  gap: 0.45rem;
}

.pd-user-profile-modern-main {
  gap: 0.7rem;
}

.pd-user-profile-name-row {
  display: grid;
  gap: 0.16rem;
  align-items: flex-start;
}

.pd-user-profile-modern-name-row {
  gap: 0.22rem;
}

.pd-user-profile-name-row h1 {
  margin: 0;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  line-height: 1.15;
  color: #0f3148;
  letter-spacing: -0.01em;
}

.pd-user-profile-name-row span {
  display: block;
  color: #496377;
  font-weight: 700;
  font-size: 0.92rem;
}

.pd-user-profile-location {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: 0.38rem;
  color: #4d6478;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.45;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pd-user-profile-main>p {
  margin: 0;
  color: #4d6478;
  line-height: 1.56;
  display: block;
  width: 100%;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.pd-user-profile-bio {
  margin: 0;
  color: #365268;
  line-height: 1.58;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
  font-size: 0.92rem;
  padding: 0.68rem 0.72rem;
  border-radius: 15px;
  border: 1px solid rgba(125, 211, 252, 0.26);
  background: rgba(248, 252, 255, 0.88);
}

.pd-user-profile-meta-chips {
  margin-top: 0.64rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

.pd-user-profile-meta-chips span {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
  padding: 0.3rem 0.58rem;
  border-radius: 999px;
  border: 1px solid rgba(11, 95, 125, 0.18);
  background: rgba(238, 250, 255, 0.9);
  color: #224258;
  font-size: 0.73rem;
  font-weight: 700;
}

.pd-user-profile-modern-chips {
  margin-top: 0.08rem;
  gap: 0.5rem;
}

.pd-user-profile-modern-chips a,
.pd-user-profile-modern-chips span {
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  text-decoration: none;
  padding: 0.34rem 0.62rem;
  border-radius: 999px;
  border: 1px solid rgba(14, 116, 144, 0.2);
  background: rgba(239, 248, 255, 0.88);
  color: #1f4a63;
  font-size: 0.74rem;
  font-weight: 800;
}

.pd-user-profile-modern-chips a:hover {
  border-color: rgba(14, 116, 144, 0.34);
  background: rgba(226, 243, 255, 0.92);
}

.pd-user-profile-modern-stats {
  margin-top: 0.2rem;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.5rem;
}

.pd-user-profile-modern-stat {
  border-radius: 14px;
  border: 1px solid rgba(14, 116, 144, 0.18);
  background: rgba(255, 255, 255, 0.82);
  min-height: 62px;
  display: grid;
  place-content: center;
  gap: 0.14rem;
  text-align: center;
  padding: 0.42rem;
}

.pd-user-profile-modern-stat small {
  display: block;
  color: #5a7489;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.pd-user-profile-modern-stat strong {
  color: #12374f;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1;
}

.pd-user-profile-modern-stat.is-clickable {
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.pd-user-profile-modern-stat.is-clickable:hover {
  transform: translateY(-1px);
  border-color: rgba(14, 116, 144, 0.36);
  box-shadow: 0 14px 28px -24px rgba(6, 24, 39, 0.78);
}

.pd-user-profile-modern-actions .pd-community-actions {
  margin-top: 0.15rem;
}

.pd-user-profile-modern-actions .pd-btn {
  min-height: 38px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 0.52rem 0.72rem;
}

.pd-user-stats {
  margin-top: 0.62rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.46rem;
}

.pd-user-stats span {
  border-radius: 999px;
  background: #eef5f9;
  color: #345067;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.3rem 0.54rem;
}

.pd-user-institution-highlights {
  margin-top: 0.65rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.pd-user-institution-highlights span {
  border-radius: 12px;
  border: 1px solid rgba(11, 95, 125, 0.16);
  background: rgba(255, 255, 255, 0.9);
  color: #2c4f68;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.52rem;
}

.pd-user-institution-highlights strong {
  margin-right: 0.24rem;
  color: #0f3b57;
}

.pd-user-edit-form {
  margin-top: 0.58rem;
  display: grid;
  gap: 0.5rem;
}

.pd-user-edit-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.pd-user-edit-form label {
  display: grid;
  gap: 0.22rem;
  font-size: 0.77rem;
  color: #4e6478;
  font-weight: 700;
}

.pd-user-edit-form input,
.pd-user-edit-form textarea {
  width: 100%;
  border: 1px solid rgba(11, 95, 125, 0.18);
  border-radius: 11px;
  min-height: 38px;
  padding: 0.5rem 0.58rem;
  font-size: 0.84rem;
}

.pd-user-edit-input-disabled {
  background: #f1f5f9;
  color: #64748b;
  cursor: not-allowed;
}

.pd-user-edit-status {
  min-height: 1.05rem;
  margin-top: 0.08rem;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.25;
}

.pd-user-edit-status.is-muted {
  color: #64748b;
}

.pd-user-edit-status.is-success {
  color: #059669;
}

.pd-user-edit-status.is-warning {
  color: #d97706;
}

.pd-user-edit-status.is-danger {
  color: #dc2626;
}

.pd-user-edit-hint {
  margin-top: 0.08rem;
  font-size: 0.7rem;
  line-height: 1.35;
  color: #64748b;
}

.pd-user-edit-hint.is-warning {
  color: #b45309;
}

.pd-user-profile-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.pd-user-profile-tabs button {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 12px;
  background: #ffffff;
  color: #2a455b;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.44rem 0.66rem;
}

.pd-user-profile-tabs button.is-active {
  background: var(--pd-primary-soft);
  color: var(--pd-primary-strong);
  border-color: rgba(11, 95, 125, 0.42);
}

.pd-user-tab-content {
  display: none;
}

.pd-user-tab-content.is-visible {
  display: block;
  border: 1px solid rgba(11, 95, 125, 0.14);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  padding: 0.72rem;
}

.pd-user-inst-loading {
  min-height: 180px;
  display: grid;
  place-items: center;
  gap: 0.5rem;
  color: #4f6679;
  font-size: 0.9rem;
  font-weight: 700;
}

.pd-user-inst-head {
  border-radius: 16px;
  border: 1px solid rgba(11, 95, 125, 0.14);
  background: linear-gradient(135deg, rgba(229, 246, 255, 0.95), rgba(237, 250, 245, 0.92));
  padding: 0.76rem;
}

.pd-user-inst-head h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  font-size: 1rem;
  color: #17374d;
}

.pd-user-inst-head p {
  margin: 0.36rem 0 0;
  font-size: 0.82rem;
  color: #486177;
  line-height: 1.54;
}

.pd-user-inst-kpis {
  margin-top: 0.62rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.46rem;
}

.pd-user-inst-kpis span {
  border-radius: 12px;
  border: 1px solid rgba(11, 95, 125, 0.16);
  background: rgba(255, 255, 255, 0.88);
  color: #33546c;
  padding: 0.44rem 0.48rem;
  font-size: 0.74rem;
  font-weight: 700;
}

.pd-user-inst-kpis strong {
  color: #123953;
}

.pd-user-inst-info-card {
  margin-bottom: 0.72rem;
  border-radius: 16px;
  border: 1px solid rgba(11, 95, 125, 0.16);
  background: #ffffff;
  padding: 0.72rem;
  box-shadow: 0 10px 24px -24px rgba(11, 95, 125, 0.65);
}

.pd-user-inst-info-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.pd-user-inst-info-head h3 {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.42rem;
  color: #17374d;
  font-size: 0.94rem;
}

.pd-user-inst-info-grid {
  margin-top: 0.56rem;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}

.pd-user-inst-info-item {
  border-radius: 12px;
  border: 1px solid rgba(11, 95, 125, 0.14);
  background: rgba(244, 250, 253, 0.9);
  padding: 0.5rem 0.56rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.46rem;
  align-items: start;
}

.pd-user-inst-info-item i {
  width: 28px;
  height: 28px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(190, 231, 252, 0.68);
  color: var(--inst-accent);
  font-size: 0.8rem;
}

.pd-user-inst-info-item small {
  display: block;
  color: #5a7488;
  font-size: 0.69rem;
  font-weight: 700;
}

.pd-user-inst-info-item strong {
  display: block;
  margin-top: 0.08rem;
  color: #1f445d;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.4;
  word-break: break-word;
}

.pd-user-inst-info-link {
  display: block;
  margin-top: 0.08rem;
  color: #0b5f7d;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.4;
  word-break: break-word;
  text-decoration: none;
}

.pd-user-inst-info-link:hover {
  text-decoration: underline;
}

.pd-user-inst-social-links {
  margin-top: 0.56rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.44rem;
}

.pd-user-inst-social-link {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 999px;
  background: rgba(247, 252, 255, 0.98);
  color: #214b66;
  text-decoration: none;
  min-height: 32px;
  padding: 0.34rem 0.66rem;
  display: inline-flex;
  align-items: center;
  gap: 0.36rem;
  font-size: 0.74rem;
  font-weight: 800;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.pd-user-inst-social-link:hover {
  transform: translateY(-1px);
  border-color: rgba(11, 95, 125, 0.28);
  box-shadow: 0 10px 18px -18px rgba(6, 24, 39, 0.75);
}

.pd-user-inst-empty-compact {
  min-height: auto;
  margin-top: 0.5rem;
  padding: 0.62rem;
}

.pd-user-inst-info-form {
  margin-top: 0.56rem;
}

.pd-user-inst-list {
  margin-top: 0.72rem;
  display: grid;
  gap: 0.56rem;
}

.pd-user-inst-card {
  border-radius: 15px;
  border: 1px solid rgba(11, 95, 125, 0.15);
  background: #ffffff;
  padding: 0.62rem;
  box-shadow: 0 10px 24px -24px rgba(11, 95, 125, 0.75);
}

.pd-user-inst-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.62rem;
}

.pd-user-inst-card h4 {
  margin: 0;
  font-size: 0.88rem;
}

.pd-user-inst-card small {
  color: #60778c;
  font-size: 0.74rem;
  font-weight: 700;
}

.pd-user-inst-status {
  border-radius: 999px;
  padding: 0.28rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.pd-user-inst-status.is-pending,
.pd-user-inst-status.is-reserved {
  background: rgba(245, 158, 11, 0.16);
  color: #9a6300;
}

.pd-user-inst-status.is-approved,
.pd-user-inst-status.is-available {
  background: rgba(16, 185, 129, 0.14);
  color: #0f7a57;
}

.pd-user-inst-status.is-rejected,
.pd-user-inst-status.is-adopted {
  background: rgba(239, 68, 68, 0.14);
  color: #be123c;
}

.pd-user-inst-grid {
  margin-top: 0.52rem;
  display: grid;
  gap: 0.38rem;
}

.pd-user-inst-grid span {
  color: #4f667a;
  font-size: 0.77rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
}

.pd-user-inst-note {
  margin: 0.52rem 0 0;
  border-radius: 11px;
  background: #f2f9fd;
  border: 1px solid rgba(11, 95, 125, 0.12);
  padding: 0.44rem 0.5rem;
  color: #3d5970;
  font-size: 0.78rem;
  line-height: 1.5;
}

.pd-user-inst-actions {
  margin-top: 0.56rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.pd-user-inst-actions .pd-btn {
  flex: 1 1 120px;
}

.pd-user-inst-actions.is-wrap .pd-btn {
  flex: 1 1 140px;
}

.pd-user-inst-listing-row {
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.52rem;
}

.pd-user-inst-listing-row img,
.pd-user-inst-thumb-placeholder {
  width: 72px;
  height: 72px;
  border-radius: 11px;
  object-fit: cover;
}

.pd-user-inst-thumb-placeholder {
  border: 1px dashed rgba(11, 95, 125, 0.2);
  background: #eef6fb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #5b748a;
}

.pd-user-inst-listing-copy {
  min-width: 0;
  display: grid;
  gap: 0.3rem;
}

.pd-user-inst-listing-copy span {
  color: #4d657a;
  font-size: 0.76rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.pd-user-inst-empty {
  border-radius: 14px;
  border: 1px dashed rgba(11, 95, 125, 0.22);
  background: #f4fafd;
  min-height: 160px;
  display: grid;
  place-items: center;
  text-align: center;
  color: #5b748a;
  gap: 0.4rem;
  padding: 0.82rem;
}

.pd-user-post-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

@media (max-width: 1200px) {
  .pd-user-post-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  .pd-user-post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 600px) {
  .pd-user-post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pd-user-post-card {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 15px;
  background: #ffffff;
  overflow: hidden;
  text-align: left;
  width: 100%;
  display: grid;
  gap: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.pd-user-post-card:hover {
  transform: translateY(-2px);
  border-color: rgba(11, 95, 125, 0.28);
  box-shadow: 0 16px 26px -24px rgba(10, 33, 53, 0.75);
}

.pd-user-post-media {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  min-height: 0;
  background: #eef4f9;
}

.pd-user-post-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-user-post-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #041423;
}

.pd-user-post-video-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: 0.3rem;
  background: radial-gradient(circle at 50% 30%, rgba(52, 211, 153, 0.15), rgba(15, 23, 42, 0.88));
  color: #e8f5ff;
}

.pd-user-post-video-placeholder i {
  font-size: 1.35rem;
}

.pd-user-post-video-placeholder span {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.pd-user-post-media.is-error::before {
  content: "Medya";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #5f7388;
  font-size: 0.78rem;
  font-weight: 700;
}

.pd-user-post-badge {
  position: absolute;
  top: 0.42rem;
  right: 0.42rem;
  border-radius: 999px;
  background: rgba(10, 33, 53, 0.74);
  color: #f8fbff;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 0.18rem 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.22rem;
}

.pd-user-post-count {
  position: absolute;
  top: 0.42rem;
  left: 0.42rem;
  border-radius: 999px;
  background: rgba(10, 33, 53, 0.74);
  color: #f8fbff;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 0.18rem 0.42rem;
  display: inline-flex;
  align-items: center;
  gap: 0.24rem;
}

.pd-user-post-card > span {
  display: block;
  padding: 0.52rem;
  font-size: 0.79rem;
  color: #4e6479;
  line-height: 1.4;
}

.pd-user-post-card > small {
  display: block;
  padding: 0 0.52rem 0.56rem;
  color: #5f7488;
  font-size: 0.72rem;
  font-weight: 700;
}

.pd-user-post-empty {
  min-height: 180px;
  display: grid;
  place-items: center;
  background: #eef4f9;
  color: #5f7388;
}

.pd-user-story-grid {
  display: grid;
  gap: 0.66rem;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.pd-user-story-card {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 14px;
  background: #ffffff;
  overflow: hidden;
}

.pd-user-story-card img {
  width: 100%;
  height: 170px;
  object-fit: cover;
}

.pd-user-story-card span {
  display: block;
  padding: 0.45rem;
  color: #60778b;
  font-size: 0.74rem;
  font-weight: 700;
}

.pd-user-post-modal-panel {
  width: min(960px, calc(100vw - 1.4rem));
}

.pd-user-post-detail {
  display: grid;
  gap: 0.78rem;
}

.pd-user-post-detail-head {
  display: flex;
  align-items: center;
  gap: 0.62rem;
}

.pd-user-post-detail-head img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  object-fit: cover;
}

.pd-user-post-detail-head strong {
  display: block;
}

.pd-user-post-detail-head small {
  color: #647a8e;
}

.pd-user-post-detail-caption {
  margin: 0;
  color: #2f465c;
  line-height: 1.6;
}

.pd-user-post-detail-grid {
  display: grid;
  gap: 0.52rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  align-items: start;
}

.pd-user-post-detail-grid.is-single {
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
}

.pd-user-post-detail-tile {
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #041423;
  cursor: zoom-in;
  min-height: 180px;
  aspect-ratio: 4 / 5;
  padding: 0;
  position: relative;
}

.pd-user-post-detail-tile img,
.pd-user-post-detail-tile video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pd-user-post-detail-tile.is-video {
  background: #020912;
  cursor: pointer;
}

.pd-user-post-detail-tile.is-video.is-single {
  width: 100%;
}

.pd-user-post-detail-tile.is-video video {
  object-fit: cover;
}

.pd-user-post-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.56rem;
  color: #546b7f;
  font-size: 0.8rem;
}

.pd-user-post-media-panel {
  width: min(980px, calc(100vw - 1.4rem));
  padding: 0.8rem;
  background: rgba(8, 22, 35, 0.96);
  border-color: rgba(255, 255, 255, 0.16);
}

.pd-user-post-media-panel img {
  width: 100%;
  max-height: calc(100vh - 8rem);
  min-height: 220px;
  object-fit: contain;
  border-radius: 12px;
  background: #05101a;
}

#user-post-media-preview-video {
  width: 100%;
  max-height: calc(100vh - 8rem);
  min-height: 220px;
  border-radius: 12px;
  background: #05101a;
}

.pd-user-cover-crop-panel {
  width: min(980px, calc(100vw - 1.4rem));
  padding: 0.96rem;
  display: grid;
  gap: 0.56rem;
}

.pd-user-cover-crop-panel h3 {
  margin: 0;
  color: #17374f;
  padding-right: 2.4rem;
}

.pd-user-cover-crop-hint {
  margin: 0;
  color: #5b7388;
  font-size: 0.82rem;
}

.pd-user-cover-crop-stage {
  border: 1px solid rgba(135, 176, 199, 0.44);
  border-radius: 14px;
  background: #0a1825;
  min-height: 240px;
  max-height: calc(100vh - 12rem);
  overflow: hidden;
}

#user-profile-cover-crop-image {
  display: block;
  width: 100%;
  max-height: calc(100vh - 12rem);
  object-fit: contain;
}

.pd-user-cover-crop-toolbar {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.48rem;
}

.pd-explore-home-video-preview {
  width: 100%;
  max-height: calc(100vh - 8rem);
  min-height: 220px;
  border-radius: 12px;
  background: #05101a;
  object-fit: contain;
}

.pd-pet-card h3 {
  margin: 0 0 0.3rem;
}

.pd-pet-card p {
  margin: 0.12rem 0;
  font-size: 0.84rem;
}

.pd-footer-socials {
  display: flex;
  gap: 0.46rem;
}

.pd-footer-socials a {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid rgba(203, 213, 225, 0.26);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pd-footer-socials a.is-disabled {
  opacity: 0.42;
  filter: grayscale(1);
  pointer-events: none;
}

.pd-footer-socials a.is-hidden {
  display: none;
}

.pd-mobile-lang {
  border: 1px solid rgba(11, 95, 125, 0.16);
  margin-top: 0.34rem;
}

.dropdown-menu {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 0.48rem);
  min-width: 220px;
  background: #ffffff;
  z-index: 120;
}

.dropdown-menu.show {
  display: block;
}

.dropdown-divider {
  height: 1px;
  margin: 0.34rem 0;
  background: rgba(11, 95, 125, 0.12);
}

@media (max-width: 1290px) {
  .pd-social-layout {
    grid-template-columns: minmax(168px, 188px) minmax(0, 1fr) minmax(236px, 288px);
    gap: 0.26rem;
  }

  .pd-adoption-topic-layout,
  .pd-notifications-layout,
  .pd-static-legal-layout {
    grid-template-columns: minmax(164px, 188px) minmax(0, 1fr);
    gap: 0.46rem;
  }

  .pd-adoption-topic-layout .pd-home-right,
  .pd-notifications-layout .pd-home-right,
  .pd-static-legal-layout .pd-home-right {
    display: none;
  }

  .pd-home-right {
    grid-column: auto;
    grid-template-columns: 1fr;
    position: sticky;
    top: 92px;
  }
}

@media (max-width: 991px) {
  .pd-header-actions {
    margin-left: auto;
  }

  .pd-auth-area {
    display: none;
  }

  .pd-social-layout {
    grid-template-columns: 1fr;
  }

  .pd-adoption-topic-layout,
  .pd-notifications-layout,
  .pd-static-legal-layout {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .pd-adoption-topic-layout .pd-home-left,
  .pd-adoption-topic-layout .pd-home-right,
  .pd-notifications-layout .pd-home-left,
  .pd-notifications-layout .pd-home-right,
  .pd-static-legal-layout .pd-home-left,
  .pd-static-legal-layout .pd-home-right {
    display: none;
  }

  .pd-home-left,
  .pd-home-right {
    position: static;
  }

  .pd-app-install-card {
    display: none;
  }

  .pd-home-left {
    order: 2;
  }

  .pd-home-main {
    order: 1;
  }

  .pd-home-right {
    order: 3;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .pd-map-board {
    grid-template-columns: 1fr;
  }

  .pd-map-canvas,
  .pd-map-canvas-wrap {
    min-height: 420px;
  }

  .pd-map-list {
    max-height: none;
  }

  .pd-post-detail-shell {
    grid-template-columns: 1fr;
  }

  .pd-quiz-shell {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .pd-home-hero {
    grid-template-columns: 1fr;
  }

  .pd-home-hero-media {
    justify-self: stretch;
  }

  .pd-home-hero-media img {
    width: 100%;
    max-width: none;
  }

  .pd-messages-shell {
    grid-template-columns: 1fr;
    min-height: auto;
    height: auto;
    max-height: none;
  }

  .pd-messages-list,
  .pd-messages-thread {
    max-height: 420px;
  }

  .pd-user-profile-intro {
    align-items: flex-start;
  }

  .pd-user-profile-avatar {
    width: 92px;
    height: 92px;
    border-radius: 20px;
  }

  .pd-user-profile-pro {
    padding: 0.84rem;
    gap: 0.72rem;
  }

  .pd-user-profile-pro-cover {
    border-radius: 14px;
    min-height: 132px;
  }

  .pd-user-profile-pro-cover > img {
    height: 132px;
  }

  .pd-user-profile-pro-cover-badge {
    top: 8px;
    right: 8px;
    font-size: 0.62rem;
    padding: 0.28rem 0.56rem;
  }

  .pd-user-profile-pro-top {
    flex-direction: column;
    gap: 0.72rem;
  }

  .pd-user-profile-pro-top.is-over-cover {
    margin-top: -42px;
    padding-inline: 0.18rem;
  }

  .pd-user-profile-pro-polished.is-community-profile .pd-user-profile-pro-cover {
    display: none;
  }

  .pd-user-profile-pro-polished.is-community-profile .pd-user-profile-pro-top.is-over-cover {
    margin-top: 0;
    padding-inline: 0;
  }

  .pd-user-profile-pro-body {
    grid-template-columns: 1fr;
    gap: 0.72rem;
  }

  .pd-user-profile-pro-left {
    width: 100%;
    gap: 0.72rem;
    padding: 0.62rem 0.66rem;
    border-radius: 14px;
  }

  .pd-user-edit-row {
    grid-template-columns: 1fr;
  }

  .pd-user-profile-pro-avatar {
    width: 96px;
    height: 96px;
  }

  .pd-user-profile-pro-avatar-edit-btn {
    top: 4px;
    right: 4px;
    width: 30px;
    height: 30px;
  }

  .pd-user-profile-pro-online-dot {
    right: 5px;
    bottom: 6px;
  }

  .pd-user-profile-pro-name-row h1 {
    font-size: clamp(1.42rem, 6vw, 1.9rem);
  }

  .pd-user-profile-pro-subtitle {
    font-size: 0.95rem;
  }

  .pd-user-profile-pro-bio {
    font-size: 0.9rem;
  }

  .pd-user-profile-pro-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.42rem;
    padding: 0.52rem;
  }

  .pd-user-profile-pro-stat {
    min-height: 66px;
    padding: 0.44rem 0.5rem;
  }

  .pd-user-profile-pro-stat strong {
    font-size: 1.18rem;
  }

  .pd-user-profile-pro-actions,
  .pd-user-profile-pro-actions.is-top,
  .pd-user-profile-pro-actions.is-bottom {
    width: 100%;
    margin-left: 0;
  }

  .pd-user-profile-pro-actions .pd-community-actions {
    justify-content: flex-start;
  }

  .pd-user-profile-pro-chips a,
  .pd-user-profile-pro-chips span {
    max-width: 100%;
    font-size: 0.7rem;
  }

  .pd-user-profile-location {
    white-space: normal;
  }

  .pd-user-profile-cover > img {
    height: 170px;
  }

  .pd-user-profile-cover-overlay {
    padding: 0.62rem;
  }

  .pd-user-role-pill {
    font-size: 0.66rem;
    padding: 0.3rem 0.58rem;
  }

  .pd-corp-content {
    margin-top: -52px;
    padding: 0 0.74rem 0.82rem;
  }

  .pd-corp-head-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.62rem;
  }

  .pd-corp-avatar {
    width: 126px;
    height: 126px;
    margin-top: -54px;
  }

  .pd-corp-top-actions {
    max-width: none;
  }

  .pd-corp-top-btn {
    min-height: 52px;
    font-size: 0.82rem;
  }

  .pd-corp-cover-actions {
    left: 12px;
    top: 10px;
    flex-wrap: wrap;
  }

  .pd-corp-cover-btn {
    min-height: 32px;
    font-size: 0.72rem;
    padding: 0.3rem 0.62rem;
  }

  .pd-corp-location-row {
    margin-left: 0;
  }

  .pd-corp-action-row {
    grid-template-columns: 1fr;
  }

  .pd-corp-tab-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .pd-corp-grid-row {
    grid-template-columns: 1fr;
  }

  .pd-vet-directory-tabs,
  .pd-vet-appointment-grid {
    grid-template-columns: 1fr;
  }

  .pd-association-donation-steps,
  .pd-association-donation-methods,
  .pd-association-donation-form-grid {
    grid-template-columns: 1fr;
  }

  .pd-association-donation-nav {
    flex-direction: column;
    align-items: stretch;
  }

  .pd-association-donation-submit-btn {
    width: 100%;
  }

  .pd-corp-feature-card {
    min-height: 118px;
  }

  .pd-user-inst-profile-body {
    margin-top: -44px;
    padding: 0 0.72rem 0.78rem;
  }

  .pd-user-inst-head-grid {
    grid-template-columns: 1fr;
    gap: 0.62rem;
  }

  .pd-user-inst-avatar {
    width: 90px;
    height: 90px;
  }

  .pd-user-inst-name-line h1 {
    font-size: clamp(1.2rem, 6vw, 1.74rem);
  }

  .pd-user-inst-name-line span {
    font-size: 0.94rem;
  }

  .pd-user-inst-top-actions {
    max-width: none;
    justify-content: flex-start;
  }

  .pd-user-inst-stats-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pd-user-inst-bottom-grid {
    grid-template-columns: 1fr;
  }

  .pd-user-inst-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pd-user-inst-info-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .pd-user-inst-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .pd-lightbox-nav {
    width: 40px;
    height: 40px;
  }

  .pd-lightbox-nav.is-prev {
    left: 8px;
  }

  .pd-lightbox-nav.is-next {
    right: 8px;
  }

  .pd-lightbox-close {
    width: 38px;
    height: 38px;
    top: 8px;
    right: 8px;
  }

  .pd-page-header h1 {
    font-size: 1.42rem;
  }

  .pd-home-hero-copy h1 {
    font-size: 1.42rem;
  }

  .pd-user-inst-social-link {
    width: 100%;
    justify-content: flex-start;
  }

  .pd-widget-row,
  .pd-vet-trust-row,
  .pd-adoption-item-row,
  .pd-member-row,
  .pd-conversation-row,
  .pd-notification-row {
    border-radius: 12px;
  }

  .pd-home-inst-tabs {
    grid-template-columns: 1fr;
  }

  .pd-modal-panel {
    padding: 0.85rem;
  }

  .pd-story-preview-edit-toolbar {
    top: 0.52rem;
    left: 0.52rem;
    right: 0.52rem;
  }

  .pd-story-preview-edit-btn {
    min-height: 34px;
    padding: 0.32rem 0.62rem;
    font-size: 0.76rem;
  }

  .pd-story-caption-inline-input {
    min-height: 54px;
    padding: 0.64rem 0.72rem 1.24rem;
    font-size: 0.84rem;
  }

  .pd-user-cover-crop-stage {
    min-height: 180px;
    max-height: calc(100vh - 11rem);
  }

  #user-profile-cover-crop-image {
    max-height: calc(100vh - 11rem);
  }

  .pd-quiz-start h2,
  .pd-quiz-finish h2 {
    font-size: 1.55rem;
  }

  .pd-community-actions .pd-btn,
  .pd-community-create-actions .pd-btn,
  .pd-market-detail-actions .pd-btn,
  .pd-map-detail-actions .pd-btn {
    width: 100%;
  }

  .pd-community-forum-toolbar {
    align-items: stretch;
  }

  .pd-community-create-trigger {
    width: 100%;
    justify-content: center;
  }

  .pd-community-create-panel {
    width: min(900px, calc(100vw - 0.6rem));
    padding: 0.8rem;
  }

  .pd-community-create-grid {
    grid-template-columns: 1fr;
  }

  .pd-corp-cover-wrap > img {
    height: 205px;
  }

  .pd-corp-account-badge {
    top: 10px;
    right: 10px;
    font-size: 0.66rem;
    padding: 0.3rem 0.64rem;
  }

  .pd-corp-content {
    margin-top: -36px;
    padding: 0 0.58rem 0.72rem;
    gap: 0.5rem;
  }

  .pd-corp-head-row {
    padding: 0.66rem;
  }

  .pd-corp-identity-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .pd-corp-avatar {
    width: 96px;
    height: 96px;
    margin-top: -50px;
  }

  .pd-corp-name-stack {
    justify-items: center;
  }

  .pd-corp-name-row {
    text-align: center;
  }

  .pd-corp-name-row h1 {
    font-size: clamp(1.2rem, 7vw, 1.72rem);
  }

  .pd-corp-username {
    font-size: 0.88rem;
  }

  .pd-corp-username.is-authority {
    justify-content: center;
    width: auto;
  }

  .pd-corp-authority-label {
    font-size: 0.55rem;
  }

  .pd-corp-authority-name {
    font-size: 0.72rem;
  }

  .pd-corp-role-row,
  .pd-corp-location-row {
    justify-content: center;
    margin-left: 0;
    text-align: center;
  }

  .pd-corp-public-link {
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    font-size: 0.72rem;
  }

  .pd-corp-top-actions {
    grid-template-columns: 1fr;
  }

  .pd-corp-top-btn {
    min-height: 44px;
    font-size: 0.8rem;
  }

  .pd-corp-cover-actions {
    left: 10px;
    top: 10px;
    width: calc(100% - 116px);
  }

  .pd-corp-cover-btn {
    min-height: 30px;
    font-size: 0.68rem;
    padding: 0.26rem 0.52rem;
  }

  .pd-corp-main-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pd-corp-main-btn {
    width: 100%;
  }

  .pd-corp-tab-actions {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
  }

  .pd-corp-tab-btn {
    width: 100%;
    justify-content: flex-start;
  }

  .pd-corp-stats-wide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pd-corp-stat-item {
    border-bottom: 1px solid rgba(138, 178, 202, 0.32);
  }

  .pd-corp-stat-item:nth-child(2),
  .pd-corp-stat-item:nth-child(4) {
    border-right: 0;
  }

  .pd-corp-stat-item:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .pd-corp-right-col {
    grid-template-columns: 1fr;
  }

  .pd-corp-feature-card {
    min-height: 88px;
    grid-template-columns: auto 1fr;
    justify-content: start;
    text-align: left;
  }

  .pd-corp-feature-card i {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    font-size: 1.14rem;
  }

  .pd-corp-feature-card span {
    font-size: 0.82rem;
  }

  .pd-user-inst-cover > img {
    height: 196px;
  }

  .pd-user-inst-cover-badge {
    top: 10px;
    right: 10px;
    font-size: 0.66rem;
    padding: 0.32rem 0.62rem;
  }

  .pd-user-inst-identity-block {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  .pd-user-inst-name-stack {
    justify-items: center;
  }

  .pd-user-inst-location {
    justify-content: center;
  }

  .pd-user-inst-top-actions,
  .pd-user-inst-primary-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .pd-user-inst-btn,
  .pd-user-inst-top-btn {
    width: 100%;
  }

  .pd-user-inst-detail-grid {
    grid-template-columns: 1fr;
  }

  .pd-user-inst-detail-card {
    min-height: 88px;
    grid-template-columns: auto 1fr;
    justify-content: start;
    text-align: left;
    padding: 0.56rem 0.64rem;
  }

  .pd-user-inst-listing-row img,
  .pd-user-inst-thumb-placeholder {
    width: 62px;
    height: 62px;
  }

  .pd-thread-bubble {
    max-width: 90%;
  }

  .pd-thread-media-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pd-thread-media-thumb,
  .pd-thread-media-thumb img {
    min-height: 82px;
  }

  .pd-messages-composer #messages-composer-input {
    min-height: 38px;
  }

  .pd-messages-attach-btn {
    width: 38px;
    height: 38px;
  }

  .pd-feed-action-row {
    gap: 0.12rem;
  }

  .pd-feed-action-btn {
    gap: 0.33rem;
    padding: 0.5rem 0.2rem;
  }

  .pd-feed-action-btn i {
    font-size: 0.95rem;
  }

  .pd-feed-action-label {
    font-size: clamp(0.72rem, 3.15vw, 0.82rem);
  }
}

@media (min-width: 768px) {
  .pd-likes-modal-panel {
    width: 565px !important;
    height: 465px !important;
    max-height: 465px !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    border-radius: 1.3rem !important;
  }

  .pd-post-media-editor-panel {
    left: 50%;
    top: 50%;
    right: auto;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(920px, calc(100vw - 3rem));
    height: min(78vh, 720px);
    border-radius: 1.45rem;
    box-shadow: 0 26px 80px rgba(2, 6, 23, 0.45);
    border: 1px solid rgba(226, 232, 240, 0.85);
  }

  .pd-post-media-editor-body {
    padding: 1rem 1.15rem;
  }

  .pd-post-media-editor-head {
    padding: 1rem 1.15rem;
  }

  .pd-post-media-editor-foot {
    padding: 0.86rem 1.15rem;
  }
}

@media (min-width: 992px) {
  .pd-story-creator-shell {
    width: min(560px, 94vw);
    height: auto;
    max-height: min(92vh, 920px);
    margin: 1.4rem auto;
    border-radius: 30px;
    border: 1px solid rgba(148, 163, 184, 0.45);
    background:
      radial-gradient(circle at 86% 8%, rgba(56, 189, 248, 0.12), transparent 36%),
      linear-gradient(180deg, rgba(15, 23, 42, 0.94), rgba(15, 23, 42, 0.88));
    box-shadow: 0 34px 86px rgba(2, 6, 23, 0.62);
    padding: 1.05rem 1.05rem 1.18rem;
  }

  .pd-story-creator-head {
    margin-bottom: 0.9rem;
  }

  .pd-story-creator-body {
    padding-right: 0.16rem;
    gap: 0.95rem;
  }

  .pd-story-creator-title {
    font-size: 1.12rem;
  }

  .pd-story-creator-subtitle {
    font-size: 0.82rem;
  }

  .pd-story-text-editor {
    padding: 0.95rem 0.95rem 1rem;
  }

  .pd-story-viewer-shell {
    inset: auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(430px, 92vw);
    height: min(82vh, 760px);
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.58);
  }

  .pd-story-viewer-shell #story-content {
    padding: 62px 12px 64px;
  }

  .pd-story-media-stage {
    border-radius: 18px;
  }

  .pd-story-viewer-meta {
    left: 18px;
    right: 18px;
    bottom: 78px;
    border-radius: 18px;
  }

  .pd-story-viewer-caption {
    font-size: 0.84rem;
  }

  .pd-story-owner-nav-wrap.is-left {
    left: max(14px, calc(50% - 300px));
  }

  .pd-story-owner-nav-wrap.is-right {
    right: max(14px, calc(50% - 300px));
  }

  .pd-story-owner-nav-btn {
    width: 54px;
    height: 54px;
    border-color: rgba(255, 255, 255, 0.32);
    background: rgba(238, 238, 238, 0.62);
    color: rgba(24, 39, 59, 0.88);
  }

  .pd-story-owner-nav-btn:hover {
    background: rgba(245, 245, 245, 0.78);
  }
}

/* Desktop override: always keep right widgets visible and sticky */
@media (min-width: 992px) {
  .pd-social-layout {
    grid-template-columns: minmax(168px, 196px) minmax(580px, 700px) minmax(258px, 328px) !important;
    gap: 0.14rem;
    justify-content: center;
    align-items: start;
  }

  .pd-home-main,
  .pd-home-feed-shell,
  .pd-home-feed-shell > * {
    min-width: 0 !important;
  }

  .pd-home-feed-shell .pd-home-feed-frame {
    width: 100%;
    max-width: none;
    margin-inline: 0;
  }

  .pd-home-feed-shell .pd-home-feed-inner {
    padding-left: 0.22rem !important;
    padding-right: 0.22rem !important;
  }

  .pd-home-feed-post-card {
    width: 100%;
    min-height: 520px;
    margin-inline: 0;
  }

  .pd-home-feed-post-card.pd-home-feed-post-card--text-only {
    min-height: 0;
  }

  .pd-home-left,
  .pd-home-right {
    position: sticky !important;
    top: 92px;
    align-self: start;
  }

  .pd-home-right {
    grid-column: 3 / 4 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-width: 0;
    max-height: calc(100vh - 108px);
    overflow-y: auto;
    padding-right: 0.18rem;
  }
}

/* Duels page */
.pd-duel-shell {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr) minmax(280px, 340px);
  gap: 0.9rem;
  align-items: start;
}

.pd-duel-side {
  display: grid;
  gap: 0.75rem;
}

.pd-duel-side h1 {
  margin: 0.1rem 0 0;
  font-size: clamp(1.42rem, 2.4vw, 1.92rem);
  line-height: 1.15;
}

.pd-duel-side p {
  margin: 0;
  color: #5a7084;
  line-height: 1.55;
}

.pd-duel-metrics {
  display: grid;
  gap: 0.45rem;
}

.pd-duel-metric {
  border: 1px solid rgba(14, 116, 144, 0.18);
  border-radius: 14px;
  padding: 0.62rem 0.66rem;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.97), rgba(233, 248, 252, 0.82));
  display: grid;
  gap: 0.15rem;
}

.pd-duel-metric small {
  color: #5c7388;
  font-weight: 700;
  font-size: 0.73rem;
}

.pd-duel-metric strong {
  font-size: 1.22rem;
  color: #123951;
}

.pd-duel-main {
  padding: 0;
  overflow: hidden;
}

.pd-duel-main-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.95rem;
  border-bottom: 1px solid rgba(11, 95, 125, 0.14);
  background: linear-gradient(135deg, rgba(219, 245, 255, 0.78), rgba(255, 255, 255, 0.94));
}

.pd-duel-main-head strong {
  display: block;
  font-size: 1.05rem;
  line-height: 1.2;
}

.pd-duel-main-head span {
  color: #587188;
  font-size: 0.82rem;
  font-weight: 700;
}

.pd-duel-main-content {
  padding: 0.95rem;
}

.pd-duel-empty {
  min-height: 240px;
  border: 1px dashed rgba(11, 95, 125, 0.26);
  border-radius: 14px;
  background: rgba(245, 250, 253, 0.78);
  display: grid;
  place-items: center;
  text-align: center;
  gap: 0.42rem;
  color: #5c7388;
}

.pd-duel-empty i {
  font-size: 1.32rem;
}

.pd-duel-feed {
  display: grid;
  gap: 0.82rem;
}

.pd-duel-feed.is-detail {
  max-width: 760px;
  margin: 0 auto;
}

.pd-duel-card {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 18px;
  background: #ffffff;
  padding: 0.8rem;
  display: grid;
  gap: 0.72rem;
  box-shadow: 0 22px 34px -34px rgba(10, 33, 53, 0.72);
}

.pd-duel-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.pd-duel-card-head small {
  color: #5f758a;
  font-weight: 700;
  font-size: 0.78rem;
}

.pd-duel-live-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.26rem 0.56rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}

.pd-duel-live-chip.is-live {
  color: #0f5f7d;
  background: rgba(14, 165, 233, 0.16);
  border: 1px solid rgba(14, 165, 233, 0.3);
}

.pd-duel-live-chip.is-ended {
  color: #9a3412;
  background: rgba(251, 146, 60, 0.18);
  border: 1px solid rgba(249, 115, 22, 0.32);
}

.pd-duel-matchup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px minmax(0, 1fr);
  gap: 0.42rem;
  align-items: center;
}

.pd-duel-vs {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid rgba(239, 68, 68, 0.24);
  background: linear-gradient(140deg, rgba(254, 226, 226, 0.72), rgba(254, 242, 242, 0.92));
  color: #dc2626;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 0.82rem;
}

.pd-duel-pet {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 15px;
  background: rgba(248, 252, 255, 0.84);
  padding: 0.56rem 0.5rem;
  display: grid;
  gap: 0.26rem;
  text-align: center;
  color: #173c54;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.pd-duel-pet:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(14, 116, 144, 0.32);
  box-shadow: 0 16px 26px -22px rgba(10, 33, 53, 0.72);
}

.pd-duel-pet:disabled {
  opacity: 0.86;
  cursor: not-allowed;
}

.pd-duel-pet.is-voted {
  border-color: rgba(22, 163, 74, 0.45);
  background: rgba(240, 253, 244, 0.9);
}

.pd-duel-pet strong {
  font-size: 0.88rem;
  line-height: 1.2;
}

.pd-duel-pet small,
.pd-duel-pet em {
  font-size: 0.74rem;
  color: #5d7388;
  font-style: normal;
  font-weight: 700;
}

.pd-duel-pet-image {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(11, 95, 125, 0.16);
  margin: 0 auto 0.2rem;
}

.pd-duel-pet-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-duel-pct {
  position: relative;
  width: 100%;
  height: 16px;
  border-radius: 999px;
  background: #edf4f9;
  overflow: hidden;
}

.pd-duel-pct > span {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(14, 116, 144, 0.32), rgba(14, 165, 233, 0.38));
}

.pd-duel-pct b {
  position: relative;
  z-index: 1;
  display: block;
  line-height: 16px;
  font-size: 0.7rem;
  color: #1f3a50;
}

.pd-duel-card-foot {
  display: grid;
  gap: 0.56rem;
}

.pd-duel-vote-hint {
  text-align: center;
  font-size: 0.78rem;
  color: #657c90;
  font-weight: 700;
}

.pd-duel-vote-hint.is-voted {
  color: #15803d;
}

.pd-duel-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.44rem;
  justify-content: center;
}

.pd-duel-manage {
  display: grid;
  gap: 0.74rem;
}

.pd-duel-auth-box {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 14px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.98), rgba(239, 250, 255, 0.86));
  padding: 0.68rem;
  display: grid;
  gap: 0.45rem;
}

.pd-duel-auth-box p {
  margin: 0;
  font-size: 0.8rem;
  color: #60768a;
  line-height: 1.5;
}

.pd-duel-auth-box.is-auth {
  text-align: center;
}

.pd-duel-auth-box.is-auth strong {
  font-size: 0.95rem;
}

.pd-duel-auth-box.is-auth span {
  color: #5b7286;
  font-size: 0.78rem;
  font-weight: 700;
}

.pd-duel-create-wrap,
.pd-duel-my-entries-wrap,
.pd-duel-rivals {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 14px;
  background: #fff;
  padding: 0.68rem;
  display: grid;
  gap: 0.52rem;
}

.pd-duel-create-wrap.is-disabled,
.pd-duel-my-entries-wrap.is-disabled {
  opacity: 0.58;
  pointer-events: none;
}

.pd-duel-create-wrap h3,
.pd-duel-my-entries-wrap h3,
.pd-duel-rivals h3 {
  margin: 0;
  font-size: 0.9rem;
}

.pd-duel-entry-form {
  display: grid;
  gap: 0.5rem;
}

.pd-duel-entry-form label {
  display: grid;
  gap: 0.24rem;
}

.pd-duel-entry-form label > span {
  color: #587086;
  font-size: 0.73rem;
  font-weight: 800;
}

.pd-duel-entry-form input,
.pd-duel-entry-form select {
  border: 1px solid rgba(11, 95, 125, 0.22);
  border-radius: 11px;
  padding: 0.52rem 0.6rem;
  font-size: 0.82rem;
  font-family: inherit;
}

.pd-duel-mini-empty {
  border: 1px dashed rgba(11, 95, 125, 0.24);
  border-radius: 11px;
  padding: 0.62rem;
  text-align: center;
  color: #61788c;
  font-size: 0.78rem;
  display: grid;
  gap: 0.28rem;
}

.pd-duel-my-entries {
  display: grid;
  gap: 0.42rem;
}

.pd-duel-entry-item {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 12px;
  background: rgba(248, 252, 255, 0.82);
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  grid-template-areas:
    "thumb content"
    "thumb actions";
  gap: 0.24rem 0.5rem;
  padding: 0.44rem;
}

.pd-duel-entry-item.is-selected {
  border-color: rgba(14, 116, 144, 0.36);
  background: rgba(224, 242, 254, 0.52);
}

.pd-duel-entry-item img {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  grid-area: thumb;
}

.pd-duel-entry-item > div:first-of-type {
  grid-area: content;
  min-width: 0;
}

.pd-duel-entry-item strong {
  display: block;
  font-size: 0.83rem;
  line-height: 1.2;
}

.pd-duel-entry-item small {
  color: #5d7388;
  font-size: 0.72rem;
  font-weight: 700;
}

.pd-duel-entry-item-actions {
  grid-area: actions;
  display: flex;
  gap: 0.36rem;
  flex-wrap: wrap;
}

.pd-duel-entry-item-actions button {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 999px;
  background: #fff;
  color: #19425d;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.25rem 0.52rem;
}

.pd-duel-entry-item-actions button.is-danger {
  border-color: rgba(220, 38, 38, 0.24);
  color: #b91c1c;
}

.pd-duel-rivals header small {
  color: #5f7589;
  font-size: 0.73rem;
  font-weight: 700;
}

.pd-duel-rival-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.42rem;
}

.pd-duel-rival-item {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 12px;
  background: #fff;
  padding: 0.45rem;
  display: grid;
  gap: 0.24rem;
  text-align: center;
}

.pd-duel-rival-item.is-selected {
  border-color: rgba(22, 163, 74, 0.45);
  background: rgba(240, 253, 244, 0.86);
}

.pd-duel-rival-item img {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  object-fit: cover;
  margin: 0 auto;
}

.pd-duel-rival-item strong {
  font-size: 0.78rem;
  line-height: 1.2;
}

.pd-duel-rival-item small {
  color: #647a8f;
  font-size: 0.7rem;
  font-weight: 700;
}

.pd-duel-rival-actions {
  display: flex;
  gap: 0.46rem;
  justify-content: flex-end;
}

@media (max-width: 1200px) {
  .pd-duel-shell {
    grid-template-columns: minmax(230px, 280px) minmax(0, 1fr);
  }

  .pd-duel-manage {
    grid-column: 1 / -1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }

  .pd-duel-auth-gate,
  .pd-duel-rivals {
    grid-column: 1 / -1;
  }
}

@media (max-width: 820px) {
  .pd-duel-shell {
    grid-template-columns: 1fr;
  }

  .pd-duel-main-content {
    padding: 0.72rem;
  }

  .pd-duel-matchup {
    grid-template-columns: minmax(0, 1fr) 36px minmax(0, 1fr);
    gap: 0.32rem;
  }

  .pd-duel-vs {
    justify-self: center;
  }

  .pd-duel-manage {
    grid-template-columns: 1fr;
  }

  .pd-duel-rival-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .pd-duel-main-head {
    padding: 0.72rem;
  }

  .pd-duel-main-head strong {
    font-size: 0.96rem;
  }

  .pd-duel-main-head span {
    font-size: 0.74rem;
  }

  .pd-duel-rival-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pd-duel-rival-actions {
    flex-direction: column;
  }

  .pd-duel-rival-actions .pd-btn {
    width: 100%;
  }
}

/* =============================================
   DUEL — WAITING PETS SECTION
   ============================================= */

.pd-duel-waiting-section {
  margin-top: 1.2rem;
  border-radius: 16px;
  overflow: hidden;
}

.pd-duel-waiting-primary {
  border: 1.5px solid rgba(14, 116, 144, 0.22);
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  padding: 1.2rem;
}

.pd-duel-waiting-secondary {
  border: 1px solid rgba(11, 95, 125, 0.14);
  background: #fafcfe;
  padding: 1rem;
}

.pd-duel-waiting-head {
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  margin-bottom: 0.9rem;
}

.pd-duel-waiting-head strong {
  font-size: 0.92rem;
  color: #0c4a6e;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pd-duel-waiting-head span {
  font-size: 0.76rem;
  color: #4e7a96;
  font-weight: 500;
}

.pd-duel-waiting-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}

.pd-duel-waiting-card {
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 14px;
  background: #ffffff;
  padding: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  box-shadow: 0 2px 8px -4px rgba(10, 33, 53, 0.12);
  transition: transform 0.15s, box-shadow 0.15s;
}

.pd-duel-waiting-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -6px rgba(10, 33, 53, 0.18);
}

.pd-duel-waiting-img {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
}

.pd-duel-waiting-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-duel-waiting-type {
  position: absolute;
  bottom: 4px;
  left: 4px;
  background: rgba(12, 74, 110, 0.82);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.18rem 0.4rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.pd-duel-waiting-info {
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
  min-width: 0;
}

.pd-duel-waiting-info strong {
  font-size: 0.82rem;
  color: #0f2a3f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-duel-waiting-info small {
  font-size: 0.7rem;
  color: #5d7a92;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pd-duel-challenge-btn {
  width: 100%;
  font-size: 0.76rem !important;
  padding: 0.38rem 0.5rem !important;
  justify-content: center;
}

@media (max-width: 1100px) {
  .pd-duel-waiting-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .pd-duel-waiting-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* =============================================
   PERSONALITY QUIZ (Kişilik Testi)
   ============================================= */

.pq-shell {
  display: grid;
  gap: 0.9rem;
  grid-template-columns: minmax(250px, 340px) minmax(0, 1fr);
  align-items: start;
}

.pq-side h1 {
  margin: 0.8rem 0 0.55rem;
  font-size: clamp(1.55rem, 2.6vw, 2rem);
  line-height: 1.15;
}

.pq-side p {
  margin: 0;
  color: #5a6f83;
  line-height: 1.6;
}

.pq-side ul {
  list-style: none;
  margin: 0.88rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.42rem;
}

.pq-side li {
  border: 1px solid rgba(124, 58, 237, 0.18);
  border-radius: 12px;
  background: #fff;
  padding: 0.44rem 0.7rem;
  font-size: 0.88rem;
}

.pq-side li i {
  color: #7C3AED;
  margin-right: 0.34rem;
}

.pq-personality-preview {
  margin-top: 1rem;
  padding: 0.8rem;
  background: #F8FAFC;
  border-radius: 14px;
  border: 1px solid #E2E8F0;
}

.pq-preview-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #374151;
  margin: 0 0 0.5rem;
}

.pq-preview-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.pq-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}

.pq-main {
  padding: 0;
  overflow: hidden;
}

/* Animal Selection */
.pq-select-header {
  padding: 1.2rem 1.2rem 0.6rem;
  text-align: center;
}

.pq-select-header h2 {
  margin: 0 0 0.3rem;
  font-size: 1.35rem;
  color: #111827;
}

.pq-select-header p {
  margin: 0;
  color: #6B7280;
  font-size: 0.88rem;
}

.pq-animal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.7rem;
  padding: 0.9rem 1.2rem 1.2rem;
}

.pq-animal-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.4rem 0.8rem;
  border: none;
  border-radius: 18px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.pq-animal-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
}

.pq-animal-btn:active {
  transform: scale(0.97);
}

.pq-animal-emoji {
  font-size: 2.4rem;
  line-height: 1;
}

.pq-animal-label {
  font-size: 1.05rem;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Quiz view */
.pq-quiz-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.1rem 0.5rem;
}

.pq-quiz-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #111827;
}

.pq-question-count {
  font-size: 0.82rem;
  font-weight: 700;
  color: #6B7280;
  background: #F3F4F6;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
}

.pq-progress-bar-wrap {
  margin: 0 1.1rem 0.8rem;
  height: 7px;
  background: #F1F5F9;
  border-radius: 999px;
  overflow: hidden;
}

.pq-progress-bar {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.pq-question-text {
  margin: 0 1.1rem 1rem;
  font-size: 1.02rem;
  font-weight: 700;
  color: #111827;
  line-height: 1.5;
}

.pq-options {
  display: grid;
  gap: 0.5rem;
  padding: 0 1.1rem;
}

.pq-option-btn {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
  padding: 0.75rem 0.9rem;
  border: 1.5px solid #E5E7EB;
  border-radius: 14px;
  background: #F9FAFB;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, opacity 0.15s;
  font-family: inherit;
  font-size: 0.88rem;
}

.pq-option-btn:hover:not(:disabled) {
  border-color: #7C3AED;
  background: #FAF5FF;
}

.pq-option-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 50%;
  background: #E5E7EB;
  font-size: 0.8rem;
  font-weight: 800;
  color: #374151;
  transition: background 0.15s, color 0.15s;
}

.pq-option-text {
  flex: 1;
  font-weight: 600;
  color: #374151;
  line-height: 1.4;
}

.pq-result-emoji-inline {
  font-size: 1.2rem;
  flex-shrink: 0;
}

#pq-next-wrap {
  padding: 0.9rem 1.1rem 1.1rem;
}

#pq-next-wrap.hidden {
  display: none;
}

.pq-next-btn {
  width: 100%;
  padding: 0.75rem;
  font-size: 0.95rem;
  font-weight: 700;
  border-radius: 14px;
  color: #fff;
  cursor: pointer;
}

/* Result view */
.pq-result-card {
  margin: 1rem 1rem 0;
  border-radius: 20px;
  padding: 1.2rem;
  overflow: hidden;
  display: grid;
  gap: 0.75rem;
}

.pq-result-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
}

.pq-result-card-header i {
  color: rgba(255,255,255,0.85);
}

.pq-result-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 0;
}

.pq-result-big-emoji {
  font-size: 4rem;
  line-height: 1;
}

.pq-result-personality-label {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

.pq-result-animal-badge {
  background: rgba(255,255,255,0.25);
  color: #fff;
  padding: 0.28rem 0.9rem;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 700;
}

.pq-result-desc {
  margin: 0;
  color: rgba(255,255,255,0.92);
  font-size: 0.88rem;
  line-height: 1.6;
  text-align: center;
}

.pq-result-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.pq-result-url {
  color: rgba(255,255,255,0.9);
  font-size: 0.82rem;
}

.pq-result-footer small {
  color: rgba(255,255,255,0.7);
  font-size: 0.76rem;
}

/* Share section */
.pq-share-section {
  padding: 1rem 1rem 0.4rem;
  text-align: center;
}

.pq-share-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 0.75rem;
}

.pq-share-buttons {
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  flex-wrap: wrap;
}

.pq-share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.6rem 0.5rem;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  min-width: 60px;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
  box-shadow: 0 3px 10px rgba(0,0,0,0.15);
}

.pq-share-btn i {
  font-size: 1.3rem;
}

.pq-share-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
}

.pq-share-whatsapp  { background: #25D366; }
.pq-share-instagram { background: linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); }
.pq-share-twitter   { background: #000; }
.pq-share-general   { background: #6B7280; }

.pq-finish-actions {
  display: flex;
  gap: 0.6rem;
  padding: 0.75rem 1rem 1.2rem;
}

.pq-finish-actions .pd-btn {
  flex: 1;
  justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
  .pq-shell {
    grid-template-columns: 1fr;
  }

  .pq-animal-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
    padding: 0.8rem;
  }

  .pq-animal-btn {
    padding: 1.1rem 0.5rem;
  }

  .pq-animal-emoji {
    font-size: 2rem;
  }

  .pq-result-big-emoji {
    font-size: 3.2rem;
  }

  .pq-result-personality-label {
    font-size: 1.7rem;
  }

  .pq-finish-actions {
    flex-direction: column;
  }

  .pq-finish-actions .pd-btn {
    width: 100%;
  }
}

/* ── Notification type icon badge ──────────────────────────────────── */
.pd-notification-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.pd-notification-type-badge {
  position: absolute;
  bottom: -3px;
  right: -3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--pd-bg, #fff);
  font-size: 7.5px;
  color: #fff;
  z-index: 1;
}

/* ── Adoption detail page layout ────────────────────────────────────── */
.pd-adoption-detail-page .pd-hero-banner {
  margin-bottom: 6px;
}

.pd-hero-banner--paw-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cpath fill='%23fff' d='M30 38c-2.5 2.5-6 4.5-8 6.5s-1 4.5 2 4.5 5-2 6-3.5c1 1.5 3 3.5 6 3.5s4-2.5 2-4.5-5.5-4-8-6.5zm-10-10a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zm6-5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zm8 0a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7zm6 5a3.5 3.5 0 1 0 0-7 3.5 3.5 0 0 0 0 7z'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 52px 52px;
}

.pd-adoption-detail-body {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1.25rem;
  align-items: start;
}

.pd-adoption-detail-main {
  min-width: 0;
}

.pd-adoption-detail-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* ── Adoption detail card (gallery | info table) ───────────────────── */
.pd-adoption-detail-card {
  overflow: hidden;
}

.pd-adoption-detail-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.pd-adoption-detail-gallery-col .pd-adoption-detail-gallery,
.pd-adoption-detail-gallery-col .pd-map-detail-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.5rem;
}

.pd-adoption-detail-gallery-col .pd-adoption-detail-gallery .pd-adoption-gallery-item:first-child,
.pd-adoption-detail-gallery-col .pd-map-detail-gallery .pd-adoption-gallery-item:first-child {
  grid-column: 1 / -1;
}

.pd-adoption-detail-gallery-col .pd-adoption-gallery-item img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.pd-adoption-detail-gallery-col .pd-adoption-gallery-item:first-child img {
  max-height: 320px;
}

.pd-adoption-detail-gallery-col .pd-adoption-gallery-item:not(:first-child) img {
  height: 80px;
}

.pd-adoption-detail-location {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--pd-primary, #0ea5b0);
  margin-bottom: 0.25rem;
}

.pd-adoption-detail-location i {
  margin-right: 0.3rem;
}

/* ── Detail specs (icon cards) ──────────────────────────────────────── */
.pd-adoption-detail-specs {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pd-adoption-spec-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--pd-border, #f0f0f0);
}

.pd-adoption-spec-item:last-child {
  border-bottom: none;
}

.pd-adoption-spec-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.pd-adoption-spec-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.pd-adoption-spec-label {
  font-size: 0.72rem;
  color: var(--pd-muted, #9ca3af);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 1px;
}

.pd-adoption-spec-value {
  font-size: 0.88rem;
  color: var(--pd-text, #1f2937);
  font-weight: 600;
  line-height: 1.3;
}

/* ── Author sidebar avatar ─────────────────────────────────────────── */
.pd-adoption-author-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--pd-primary-light, #b2ebf2);
  flex-shrink: 0;
}

.pd-adoption-author-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.pd-adoption-author-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pd-adoption-author-info strong {
  font-size: 0.95rem;
  color: var(--pd-text, #1f2937);
}

.pd-adoption-author-info small {
  font-size: 0.78rem;
  color: var(--pd-muted, #6b7280);
}

/* ── Description card ──────────────────────────────────────────────── */
.pd-adoption-description-card h4 {
  font-size: 0.92rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--pd-text, #1f2937);
  margin-bottom: 0.75rem;
}

.pd-adoption-description-card h4 i {
  margin-right: 0.4rem;
  color: var(--pd-muted, #6b7280);
}

/* ── Author sidebar card ───────────────────────────────────────────── */
.pd-adoption-author-sidebar-card {
  text-align: center;
}

.pd-adoption-author-header {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--pd-border, #e5e7eb);
}

.pd-adoption-author-header strong {
  font-size: 0.95rem;
}

.pd-adoption-author-header strong i {
  margin-right: 0.3rem;
  color: var(--pd-primary, #0ea5b0);
}

.pd-adoption-author-header small {
  font-size: 0.78rem;
  color: var(--pd-muted, #6b7280);
}

.pd-adoption-author-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pd-btn-block {
  width: 100%;
  justify-content: center;
}

/* ── Responsive ────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .pd-adoption-detail-body {
    grid-template-columns: 1fr;
  }

  .pd-adoption-detail-top {
    grid-template-columns: 1fr;
  }

  .pd-adoption-detail-sidebar {
    order: 2;
  }
}

/* ── Standalone gallery (main + thumbs) ────────────────────────────── */
.pd-adoption-standalone-gallery {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.pd-adoption-main-image-wrap {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  background: var(--pd-bg-alt, #f3f4f6);
}

.pd-adoption-main-image {
  width: 100%;
  display: block;
  max-height: 360px;
  object-fit: cover;
  border-radius: 12px;
  transition: transform 0.2s;
}

.pd-adoption-main-image-wrap:hover .pd-adoption-main-image {
  transform: scale(1.02);
}

.pd-adoption-main-image-zoom {
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  transition: background 0.18s;
  z-index: 1;
}

.pd-adoption-main-image-zoom:hover {
  background: rgba(0,0,0,0.8);
}

.pd-adoption-thumbs-row {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
}

.pd-adoption-thumb-item {
  width: 72px;
  height: 56px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: border-color 0.18s, opacity 0.18s;
  opacity: 0.7;
}

.pd-adoption-thumb-item:hover {
  opacity: 1;
}

.pd-adoption-thumb-item.is-active {
  border-color: var(--pd-primary, #0ea5b0);
  opacity: 1;
}

.pd-adoption-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── View count ────────────────────────────────────────────────────── */
.pd-adoption-view-count {
  text-align: center;
  padding: 1rem 0;
  font-size: 0.88rem;
  color: var(--pd-muted, #6b7280);
  border-top: 1px solid var(--pd-border, #e5e7eb);
  margin-top: 0.5rem;
}

.pd-adoption-view-count i {
  margin-right: 0.3rem;
}

/* ── Related listings ──────────────────────────────────────────────── */
.pd-adoption-related-section {
  margin-top: 0.5rem;
}

.pd-adoption-related-section > h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--pd-text, #1f2937);
}

.pd-adoption-related-section > h4 i {
  margin-right: 0.35rem;
  color: var(--pd-primary, #0ea5b0);
}

.pd-adoption-related-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.pd-adoption-related-card {
  background: var(--pd-card-bg, #fff);
  border: 1px solid var(--pd-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  transition: box-shadow 0.18s, transform 0.18s;
  padding-bottom: 1rem;
}

.pd-adoption-related-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}

.pd-adoption-related-img {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--pd-bg-alt, #f3f4f6);
}

.pd-adoption-related-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pd-adoption-related-card h5 {
  font-size: 0.82rem;
  font-weight: 600;
  margin: 0.65rem 0.5rem 0.5rem;
  color: var(--pd-text, #1f2937);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.2em;
}

.pd-btn-sm {
  padding: 0.3rem 0.75rem;
  font-size: 0.72rem;
  border-radius: 6px;
}

/* ── Comments login prompt ─────────────────────────────────────────── */
.pd-community-thread-login-prompt {
  text-align: center;
  padding: 1.25rem 0.75rem;
}

.pd-community-thread-login-prompt i.fa-lock {
  font-size: 1.4rem;
  color: var(--pd-muted, #6b7280);
  display: block;
  margin-bottom: 0.5rem;
}

.pd-community-thread-login-prompt span {
  display: block;
  font-size: 0.85rem;
  color: var(--pd-text-secondary, #6b7280);
  line-height: 1.45;
}

@media (max-width: 960px) {
  .pd-adoption-related-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .pd-adoption-related-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.6rem;
  }

  .pd-adoption-thumb-item {
    width: 56px;
    height: 44px;
  }
}

/* ── Adoption share bar ─────────────────────────────────────────────── */
.pd-adoption-share-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  align-items: center;
  padding: 0.85rem 0 0.3rem;
  border-top: 1px solid var(--pd-border, #e5e7eb);
  margin-top: 0.85rem;
}

.pd-adoption-share-label {
  font-size: 0.73rem;
  font-weight: 600;
  color: var(--pd-muted, #6b7280);
  white-space: nowrap;
  margin-right: 0.2rem;
}

.pd-adoption-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.38rem;
  padding: 0.42rem 0.85rem;
  border-radius: 8px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #fff;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.18s, transform 0.18s;
  line-height: 1;
}

.pd-adoption-share-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

.pd-adoption-share-btn--whatsapp  { background: #25D366; }
.pd-adoption-share-btn--facebook  { background: #1877F2; }
.pd-adoption-share-btn--twitter   { background: #000; }
.pd-adoption-share-btn--copy      { background: var(--pd-muted, #6b7280); }

/* ── pd-hero-banner ─────────────────────────────────────────────────── */
.pd-hero-banner {
  position: relative;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  padding: 2.25rem 2.5rem 1.9rem;
  margin-bottom: 1.75rem;
  background: linear-gradient(135deg, #0ea5b0 0%, #0b82a8 42%, #0b6590 76%, #074d6e 100%);
  box-shadow: 0 8px 40px rgba(11, 95, 125, 0.28), 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 152px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.pd-hero-banner::before {
  content: '';
  position: absolute;
  right: -80px;
  top: -80px;
  width: 340px;
  height: 340px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.13) 0%, transparent 65%);
  pointer-events: none;
}

.pd-hero-banner::after {
  content: '';
  position: absolute;
  right: 130px;
  bottom: -110px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.07) 0%, transparent 65%);
  pointer-events: none;
}

.pd-hero-banner-deco {
  position: absolute;
  pointer-events: none;
  user-select: none;
  line-height: 1;
}

.pd-hero-banner-deco--1 {
  right: 2rem;
  top: 0.75rem;
  font-size: 5.5rem;
  color: rgba(255, 255, 255, 0.07);
  transform: rotate(15deg);
}

.pd-hero-banner-deco--2 {
  right: 7.5rem;
  top: 1.75rem;
  font-size: 2.75rem;
  color: rgba(255, 255, 255, 0.055);
  transform: rotate(-10deg);
}

.pd-hero-banner-deco--3 {
  right: 13.5rem;
  top: 0.4rem;
  font-size: 1.9rem;
  color: rgba(255, 255, 255, 0.045);
  transform: rotate(25deg);
}

.pd-hero-banner-inner {
  position: relative;
  z-index: 1;
}

.pd-hero-banner-label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
}

.pd-hero-banner-title {
  color: #ffffff;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  font-weight: 900;
  line-height: 1.08;
  margin: 0 0 0.38rem;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.22);
  letter-spacing: -0.025em;
}

.pd-hero-banner-subtitle {
  color: rgba(255, 255, 255, 0.76);
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.5;
  max-width: 560px;
}

.pd-hero-banner-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 1.2rem;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.72rem;
  font-weight: 600;
}

.pd-hero-banner-breadcrumb a {
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.pd-hero-banner-breadcrumb a:hover {
  color: rgba(255, 255, 255, 0.95);
}

.pd-hero-banner-breadcrumb i {
  font-size: 0.5rem;
  opacity: 0.55;
}

/* -- Explore new posts banner -- */
.pd-explore-new-posts-banner {
  width: 100%;
  background: linear-gradient(90deg, #0ea5b0, #0891b2);
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 0.7rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 16px rgba(14, 165, 176, 0.3);
  animation: slideDown 0.4s ease;
  transition: opacity 0.2s;
}

.pd-explore-new-posts-banner:hover {
  opacity: 0.9;
}

/* -- Hero CTA button -- */
.pd-hero-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 1.5rem;
  font-size: 0.88rem;
  font-weight: 700;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.95);
  color: #0b4f64;
  border: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.pd-hero-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.24);
}

/* -- Variants -- */
/* -- Light Gradient Variant -- */
/* -- Light Gradient Variant (Premium Expert Edition) -- */
.pd-hero-banner--light-gradient {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 30%, #f0f9ff 100%);
  position: relative;
  box-shadow: 0 10px 30px -5px rgba(14, 165, 176, 0.12), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 1px solid rgba(14, 165, 176, 0.1);
  overflow: hidden;
  z-index: 1;
}

/* Add a subtle glass-like gloss layer */
.pd-hero-banner--light-gradient::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: radial-gradient(circle at 20% 30%, rgba(14, 165, 176, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: -1;
}

/* Soft decorative blobs for a modern feel */
.pd-hero-banner--light-gradient::after {
  content: "";
  position: absolute;
  bottom: -10%;
  right: -5%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(14, 165, 176, 0.08) 0%, transparent 70%);
  filter: blur(40px);
  pointer-events: none;
  z-index: -1;
}

.pd-hero-banner--light-gradient .pd-hero-banner-title {
  color: #0f172a;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: none;
  margin-bottom: 0.75rem;
}

.pd-hero-banner--light-gradient .pd-hero-banner-subtitle {
  color: #475569;
  font-weight: 500;
  line-height: 1.6;
  max-width: 500px;
}

.pd-hero-banner--light-gradient .pd-hero-banner-label {
  background: linear-gradient(90deg, #0ea5b0 0%, #1da6c5 100%);
  color: #ffffff;
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(14, 165, 176, 0.2);
  margin-bottom: 1rem;
}

.pd-hero-banner--light-gradient .pd-hero-banner-breadcrumb a {
  color: #94a3b8;
  font-weight: 600;
}

.pd-hero-banner--light-gradient .pd-hero-banner-breadcrumb span {
  color: #0ea5b0;
  font-weight: 700;
}

/* Floating decorations optimization */
.pd-hero-banner--light-gradient .pd-hero-banner-deco {
  color: rgba(14, 165, 176, 0.06);
  font-size: 2.5rem;
}

/* Refined CTA Button for this variant */
.pd-hero-banner--light-gradient .pd-hero-cta-btn {
  background: #0ea5b0;
  color: #ffffff;
  padding: 0.75rem 2rem;
  font-weight: 700;
  box-shadow: 0 8px 20px rgba(14, 165, 176, 0.25);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.pd-hero-banner--light-gradient .pd-hero-cta-btn:hover {
  background: #0b8d97;
  transform: translateY(-3px);
  box-shadow: 0 12px 25px rgba(14, 165, 176, 0.35);
}

.pd-hero-banner--light-gradient .pd-hero-banner-right-img img {
  border: 6px solid #ffffff;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  transform: rotate(2deg);
  transition: transform 0.3s ease;
}

.pd-hero-banner--light-gradient:hover .pd-hero-banner-right-img img {
  transform: rotate(0deg) scale(1.02);
}

.pd-hero-banner--light-gradient .pd-hero-banner-breadcrumb i {
  color: #94a3b8;
}

.pd-hero-banner--light-gradient .pd-hero-banner-deco {
  color: #0ea5b0;
  opacity: 0.12;
}

.pd-hero-banner-right-img {
  position: absolute;
  right: 3rem;
  top: 50%;
  transform: translateY(-50%);
  width: 240px;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.pd-hero-banner-right-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 12px 32px rgba(14, 165, 176, 0.2);
  border: 4px solid #ffffff;
  transform: rotate(3deg);
}

@media (max-width: 960px) {
  .pd-hero-banner-right-img {
    width: 200px;
    height: 150px;
    right: 1.5rem;
  }
}

@media (max-width: 768px) {
  .pd-hero-banner-right-img {
    width: 160px;
    height: 120px;
    right: 1rem;
    opacity: 0.8;
  }
}

@media (max-width: 640px) {
  .pd-hero-banner-right-img {
    display: none;
  }
}

.pd-hero-banner--image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.pd-hero-banner--image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 50%, rgba(0, 0, 0, 0.1) 100%);
  border-radius: inherit;
  z-index: 0;
}

.pd-hero-banner--image .pd-hero-banner-inner {
  position: relative;
  z-index: 2;
}

.pd-hero-banner--image .pd-hero-banner-deco {
  z-index: 1;
  opacity: 0.4;
}

.pd-hero-banner--adoption {
  background-image: url('https://images.unsplash.com/photo-1450778869180-41d0601e046e?auto=format&fit=crop&q=80&w=1200');
  background-color: #0ea5b0;
}

.pd-hero-banner--lost-img {
  background-image: url('https://images.unsplash.com/photo-1599443015574-be5fe8a05783?auto=format&fit=crop&q=80&w=1200');
  background-color: #1c3557;
}

.pd-hero-banner--market {
  background: linear-gradient(135deg, #b45309 0%, #d97706 36%, #f59e0b 72%, #eab308 100%);
  box-shadow: 0 8px 40px rgba(180, 83, 9, 0.34), 0 2px 8px rgba(0, 0, 0, 0.12);
}

.pd-hero-banner--lost {
  background: linear-gradient(135deg, #1c3557 0%, #2c5282 42%, #1a306a 76%, #0f1e3a 100%);
  box-shadow: 0 8px 40px rgba(28, 53, 87, 0.4), 0 2px 8px rgba(0, 0, 0, 0.16);
}

.pd-hero-banner--education {
  background: linear-gradient(135deg, #0f766e 0%, #0d9488 36%, #0891b2 72%, #0369a1 100%);
  box-shadow: 0 8px 40px rgba(15, 118, 110, 0.3), 0 2px 8px rgba(0, 0, 0, 0.1);
}

.pd-hero-banner--community {
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 36%, #5b21b6 72%, #3b0764 100%);
  box-shadow: 0 8px 40px rgba(109, 40, 217, 0.34), 0 2px 8px rgba(0, 0, 0, 0.12);
}

.pd-hero-banner--detail {
  background: linear-gradient(135deg, #065a78 0%, #0b6590 36%, #0d82a8 72%, #0ea5b0 100%);
  box-shadow: 0 8px 40px rgba(6, 90, 120, 0.32), 0 2px 8px rgba(0, 0, 0, 0.1);
}

@media (max-width: 640px) {
  .pd-hero-banner {
    padding: 1.6rem 1.25rem 1.35rem;
    border-radius: 14px;
    min-height: 124px;
  }

  .pd-hero-banner-deco--1 { right: 0.75rem; font-size: 3.8rem; }
  .pd-hero-banner-deco--2 { right: 4rem; font-size: 1.9rem; }
  .pd-hero-banner-deco--3 { display: none; }

  .pd-hero-banner-title { font-size: 1.45rem; }
  .pd-hero-banner-subtitle { font-size: 0.82rem; }
}

/* ==========================================================================
   Cookie Consent – Banner & Preferences Modal
   ========================================================================== */

/* -- Banner -- */
.pd-cc-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  padding: 0 1rem 1rem;
  animation: pdCcSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pdCcSlideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.pd-cc-banner.pd-cc-hiding {
  animation: pdCcSlideDown 0.35s ease forwards;
}

@keyframes pdCcSlideDown {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(100%); opacity: 0; }
}

.pd-cc-banner-inner {
  max-width: 960px;
  margin: 0 auto;
  background: #ffffff;
  border: 1px solid rgba(11, 95, 125, 0.12);
  border-radius: 18px;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06);
  padding: 1.3rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pd-cc-banner-content {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.pd-cc-banner-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(135deg, #0ea5b0, #0891b2);
  color: #fff;
  font-size: 1.25rem;
}

.pd-cc-banner-text strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 800;
  color: #0b3d52;
  margin-bottom: 0.25rem;
}

.pd-cc-banner-text p {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: #475569;
}

.pd-cc-banner-text a {
  color: #0891b2;
  text-decoration: underline;
  font-weight: 600;
}

.pd-cc-banner-text a:hover {
  color: #0b4f64;
}

.pd-cc-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

/* -- Shared button styles -- */
.pd-cc-btn {
  border: none;
  border-radius: 10px;
  padding: 0.6rem 1.15rem;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}

.pd-cc-btn:active {
  transform: scale(0.97);
}

.pd-cc-btn-primary {
  background: linear-gradient(135deg, #0ea5b0, #0891b2);
  color: #fff;
  box-shadow: 0 2px 10px rgba(14, 165, 176, 0.3);
}

.pd-cc-btn-primary:hover {
  box-shadow: 0 4px 16px rgba(14, 165, 176, 0.4);
}

.pd-cc-btn-secondary {
  background: #f0fdfa;
  color: #0b4f64;
  border: 1.5px solid rgba(14, 165, 176, 0.35);
}

.pd-cc-btn-secondary:hover {
  background: #ccfbf1;
}

.pd-cc-btn-outline {
  background: transparent;
  color: #475569;
  border: 1.5px solid #cbd5e1;
}

.pd-cc-btn-outline:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

/* -- Preferences overlay + modal -- */
.pd-cc-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: pdCcFadeIn 0.25s ease;
}

@keyframes pdCcFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pd-cc-overlay.pd-cc-hiding {
  animation: pdCcFadeOut 0.3s ease forwards;
}

@keyframes pdCcFadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.pd-cc-pref-modal {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.18);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: pdCcScaleIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes pdCcScaleIn {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

.pd-cc-pref-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 1.4rem 0.6rem;
}

.pd-cc-pref-header h3 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 800;
  color: #0b3d52;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.pd-cc-pref-header h3 i {
  color: #0ea5b0;
}

.pd-cc-pref-close {
  background: none;
  border: none;
  font-size: 1.15rem;
  color: #94a3b8;
  cursor: pointer;
  padding: 0.3rem;
  border-radius: 8px;
  transition: color 0.2s, background 0.2s;
}

.pd-cc-pref-close:hover {
  color: #334155;
  background: #f1f5f9;
}

.pd-cc-pref-desc {
  padding: 0 1.4rem;
  margin: 0 0 0.8rem;
  font-size: 0.82rem;
  color: #64748b;
  line-height: 1.55;
}

.pd-cc-pref-list {
  padding: 0 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.pd-cc-pref-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 0.9rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

.pd-cc-pref-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.pd-cc-pref-info strong {
  font-size: 0.86rem;
  font-weight: 700;
  color: #1e293b;
}

.pd-cc-pref-info span {
  font-size: 0.76rem;
  color: #64748b;
  line-height: 1.4;
}

/* -- Toggle switch -- */
.pd-cc-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.pd-cc-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.pd-cc-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.3s;
}

.pd-cc-slider::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.pd-cc-switch input:checked + .pd-cc-slider {
  background: #0ea5b0;
}

.pd-cc-switch input:checked + .pd-cc-slider::before {
  transform: translateX(20px);
}

.pd-cc-switch input:disabled + .pd-cc-slider {
  opacity: 0.6;
  cursor: not-allowed;
}

.pd-cc-pref-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  padding: 1rem 1.4rem 1.2rem;
}

/* -- Responsive -- */
@media (max-width: 640px) {
  .pd-cc-banner-inner {
    padding: 1rem;
    border-radius: 14px;
  }

  .pd-cc-banner-icon {
    display: none;
  }

  .pd-cc-banner-actions {
    flex-direction: column;
  }

  .pd-cc-btn {
    justify-content: center;
    width: 100%;
  }

  .pd-cc-pref-modal {
    border-radius: 16px;
    max-height: 85vh;
  }

  .pd-cc-pref-header { padding: 1rem 1rem 0.5rem; }
  .pd-cc-pref-desc { padding: 0 1rem; }
  .pd-cc-pref-list { padding: 0 1rem; }
  .pd-cc-pref-actions { padding: 0.8rem 1rem 1rem; }
}

/* ============================================================
   PATIDAS ENHANCEMENTs v2 — animations, hero, skeleton, etc.
   ============================================================ */

/* 1. Scroll-triggered card animations */
.pd-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pd-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.pd-animate.delay-1 { transition-delay: 0.08s; }
.pd-animate.delay-2 { transition-delay: 0.16s; }
.pd-animate.delay-3 { transition-delay: 0.24s; }
.pd-animate.delay-4 { transition-delay: 0.32s; }

/* 2. Page transition */
@keyframes pd-page-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-10px); }
}
@keyframes pd-page-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pd-page-transition-out {
  animation: pd-page-out 0.17s ease forwards;
  pointer-events: none;
}
.fade-in {
  animation: pd-page-in 0.32s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 3. Heart bounce animation */
@keyframes pd-heart-pop {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.6); }
  55%  { transform: scale(0.88); }
  75%  { transform: scale(1.22); }
  100% { transform: scale(1); }
}
.pd-heart-active {
  animation: pd-heart-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  color: #ef4444 !important;
}
.pd-post-detail-actions button i.fa-heart,
.pd-post-like-btn i {
  display: inline-block;
  transition: color 0.2s;
}

/* 4. Kayip ilan acil pulse badge */
@keyframes pd-urgent-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); }
  60%       { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
}
.pd-urgent-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  background: #ef4444;
  color: #fff;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.18rem 0.52rem;
  border-radius: 20px;
  animation: pd-urgent-ring 1.5s ease-in-out infinite;
  vertical-align: middle;
  line-height: 1.4;
}
.pd-market-card.is-lost {
  border-left: 3px solid #ef4444;
}

/* 5. Hero landing section */
.pd-hero-landing {
  position: relative;
  background: linear-gradient(135deg, #dff6ff 0%, #f0fafb 55%, #e6f7fb 100%);
  border-radius: 22px;
  padding: 2.2rem 1.75rem 1.75rem;
  margin-bottom: 1.25rem;
  overflow: hidden;
  border: 1px solid rgba(29, 166, 197, 0.2);
  box-shadow: 0 10px 36px -14px rgba(29, 166, 197, 0.25);
}
.pd-hero-landing-paws {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.pd-hero-landing-paw {
  position: absolute;
  font-size: 2rem;
  opacity: 0.08;
  animation: pd-paw-float 6s ease-in-out infinite;
}
.pd-hero-landing-paw:nth-child(1) { top: 8%;  left: 5%;   animation-delay: 0s;   animation-duration: 5.5s; }
.pd-hero-landing-paw:nth-child(2) { top: 18%; right: 7%;  animation-delay: 1s;   animation-duration: 7s;   }
.pd-hero-landing-paw:nth-child(3) { bottom: 20%; left: 15%; animation-delay: 2s;  animation-duration: 6.2s; }
.pd-hero-landing-paw:nth-child(4) { bottom: 10%; right: 10%; animation-delay: 3s; animation-duration: 5.8s; }
.pd-hero-landing-paw:nth-child(5) { top: 52%;  left: 42%; animation-delay: 1.5s; animation-duration: 6.8s; }
@keyframes pd-paw-float {
  0%, 100% { transform: translateY(0) rotate(-8deg); opacity: 0.08; }
  50%       { transform: translateY(-16px) rotate(7deg); opacity: 0.17; }
}
.pd-hero-landing-inner {
  position: relative;
  z-index: 1;
  text-align: center;
}
.pd-hero-landing-icon {
  font-size: 3rem;
  margin-bottom: 0.65rem;
  display: block;
  animation: pd-hero-icon-bounce 2.6s ease-in-out infinite;
}
@keyframes pd-hero-icon-bounce {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%       { transform: translateY(-9px) rotate(3deg); }
}
.pd-hero-landing h2 {
  font-size: 1.45rem;
  font-weight: 800;
  color: #0b5e74;
  margin: 0 0 0.5rem;
}
.pd-hero-landing p {
  color: #4a7a8a;
  font-size: 0.88rem;
  margin: 0 0 1.2rem;
  line-height: 1.55;
}
.pd-hero-landing-actions {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* 6. Pet of the Day — Premium Spotlight Card */
@keyframes pd-potd-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}
@keyframes pd-potd-glow {
  0%, 100% { box-shadow: 0 4px 22px -8px rgba(16, 185, 129, 0.28), 0 0 0 1px rgba(16, 185, 129, 0.14); }
  50%       { box-shadow: 0 8px 40px -6px rgba(16, 185, 129, 0.50), 0 0 0 1px rgba(16, 185, 129, 0.24); }
}
@keyframes pd-potd-badge-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.88; transform: scale(1.04); }
}
.pd-potd-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  background: linear-gradient(150deg, #f0fdf7 0%, #dcfce7 50%, #d1fae5 100%);
  border: 1px solid rgba(16, 185, 129, 0.22);
  cursor: pointer;
  transition: transform 0.24s ease, box-shadow 0.24s ease;
  margin-bottom: 0.85rem;
  box-shadow: 0 4px 22px -8px rgba(16, 185, 129, 0.28);
}
.pd-potd-card.pd-potd-glow-active {
  animation: pd-potd-glow 3.8s ease-in-out infinite;
}
.pd-potd-card:hover {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 42px -10px rgba(16, 185, 129, 0.42);
}
.pd-potd-card:hover .pd-potd-img {
  transform: scale(1.04);
}
.pd-potd-img-wrap {
  position: relative;
  overflow: hidden;
  height: 190px;
}
.pd-potd-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.38s ease;
}
.pd-potd-img-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(5, 46, 22, 0.72) 0%,
    rgba(5, 46, 22, 0.28) 40%,
    transparent 70%
  );
  pointer-events: none;
}
.pd-potd-spotlight {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: 1;
}
.pd-potd-badge {
  position: absolute;
  top: 0.72rem;
  left: 0.72rem;
  background: linear-gradient(120deg, #10b981, #059669);
  color: #fff;
  font-size: 0.64rem;
  font-weight: 800;
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  z-index: 3;
  box-shadow: 0 4px 12px -4px rgba(5, 150, 105, 0.55);
  animation: pd-potd-badge-pulse 2.8s ease-in-out infinite;
  background-size: 200% auto;
}
.pd-potd-overlay-title {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  padding: 0.7rem 0.85rem 0.62rem;
}
.pd-potd-overlay-title h4 {
  margin: 0 0 0.14rem;
  font-size: 0.98rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.pd-potd-overlay-title small {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.82);
  line-height: 1.3;
}
.pd-potd-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.62rem 0.85rem 0.7rem;
}
.pd-potd-countdown {
  display: flex;
  align-items: center;
  gap: 0.28rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #065f46;
  opacity: 0.82;
}
.pd-potd-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: linear-gradient(120deg, #059669, #10b981);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  letter-spacing: 0.02em;
  box-shadow: 0 4px 14px -6px rgba(5, 150, 105, 0.55);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  white-space: nowrap;
}
.pd-potd-cta:hover {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 6px 18px -6px rgba(5, 150, 105, 0.7);
}
.pd-potd-card.is-lost-potd {
  background: linear-gradient(150deg, #fff7ed 0%, #ffedd5 50%, #fed7aa 100%);
  border-color: rgba(251, 146, 60, 0.28);
  box-shadow: 0 4px 22px -8px rgba(251, 146, 60, 0.28);
}
.pd-potd-card.is-lost-potd.pd-potd-glow-active {
  animation: none;
}
.pd-potd-card.is-lost-potd .pd-potd-badge {
  background: linear-gradient(120deg, #f97316, #ea580c);
  box-shadow: 0 4px 12px -4px rgba(234, 88, 12, 0.5);
}
.pd-potd-card.is-lost-potd .pd-potd-cta {
  background: linear-gradient(120deg, #ea580c, #f97316);
  box-shadow: 0 4px 14px -6px rgba(234, 88, 12, 0.5);
}
.pd-potd-card.is-lost-potd .pd-potd-countdown { color: #7c2d12; }
/* ── Dark mode POTD ── */
[data-theme="dark"] .pd-potd-card {
  background: linear-gradient(150deg, #052e16 0%, #064e3b 50%, #065f46 100%);
  border-color: rgba(16, 185, 129, 0.25);
  box-shadow: 0 4px 22px -8px rgba(16, 185, 129, 0.35);
}
[data-theme="dark"] .pd-potd-card.is-lost-potd {
  background: linear-gradient(150deg, #431407 0%, #7c2d12 50%, #9a3412 100%);
  border-color: rgba(251, 146, 60, 0.3);
}
[data-theme="dark"] .pd-potd-countdown { color: #6ee7b7; }
[data-theme="dark"] .pd-potd-card.is-lost-potd .pd-potd-countdown { color: #fdba74; }

/* 6b. POTD enter animation (dinamik eklenen kart için) */
@keyframes pd-potd-enter {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.pd-potd-enter {
  animation: pd-potd-enter 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 7. Map marker drop-in animation */
@keyframes pd-marker-dropin {
  0%   { transform: translateY(-20px) scale(0.65); opacity: 0; }
  65%  { transform: translateY(3px) scale(1.07); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
/* NOT: animasyon .pd-map-marker-shell üzerinde DEĞİL — o element
   Leaflet tarafından transform:translate3d ile konumlandırılır.
   Animasyonu iç .pd-map-marker div'ine uyguluyoruz. */
.pd-map-marker {
  animation: pd-marker-dropin 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* 8. Bell shake */
@keyframes pd-bell-shake {
  0%   { transform: rotate(0deg); }
  10%  { transform: rotate(18deg); }
  20%  { transform: rotate(-15deg); }
  30%  { transform: rotate(13deg); }
  40%  { transform: rotate(-10deg); }
  50%  { transform: rotate(7deg); }
  60%  { transform: rotate(-4deg); }
  75%  { transform: rotate(2deg); }
  100% { transform: rotate(0deg); }
}
.pd-bell-shake {
  display: inline-block;
  animation: pd-bell-shake 0.75s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top center;
}

/* 9. CountUp number spin */
@keyframes pd-count-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.28); color: #1da6c5; }
  100% { transform: scale(1); }
}
.pd-stat-count-pop {
  animation: pd-count-pop 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* 10. Sticky app install banner (mobile only) */
.pd-sticky-app-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  padding: 0.65rem 1rem;
  background: linear-gradient(135deg, #0b5e74 0%, #1da6c5 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  box-shadow: 0 -3px 20px rgba(0, 0, 0, 0.18);
  transform: translateY(105%);
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.pd-sticky-app-banner.is-visible {
  transform: translateY(0);
}
.pd-sticky-app-banner-icon {
  font-size: 1.65rem;
  flex-shrink: 0;
  animation: pd-hero-icon-bounce 2.2s ease-in-out infinite;
}
.pd-sticky-app-banner-copy {
  flex: 1;
  min-width: 0;
}
.pd-sticky-app-banner-copy strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.3;
}
.pd-sticky-app-banner-copy small {
  font-size: 0.68rem;
  opacity: 0.82;
}
.pd-sticky-app-banner-btn {
  background: #fff;
  color: #0b5e74;
  font-size: 0.73rem;
  font-weight: 700;
  padding: 0.42rem 0.8rem;
  border-radius: 20px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}
.pd-sticky-app-banner-btn:hover { background: #dff6ff; transform: scale(1.04); }
.pd-sticky-app-banner-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.65);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem;
  flex-shrink: 0;
  line-height: 1;
  transition: color 0.2s;
}
.pd-sticky-app-banner-close:hover { color: #fff; }
@media (min-width: 768px) {
  .pd-sticky-app-banner { display: none !important; }
}

/* 11. Skeleton loading cards */
@keyframes pd-skeleton-wave {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
.pd-skeleton {
  background: linear-gradient(90deg, #eaf1f5 25%, #d5e2e9 50%, #eaf1f5 75%);
  background-size: 200% 100%;
  animation: pd-skeleton-wave 1.7s ease-in-out infinite;
  border-radius: 8px;
}
.pd-skeleton-card {
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(0,0,0,0.06);
  padding: 1rem;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.pd-skeleton-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
}
.pd-skeleton-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
}
.pd-skeleton-lines { flex: 1; }
.pd-skeleton-line {
  height: 11px;
  border-radius: 6px;
  margin-bottom: 0.45rem;
}
.pd-skeleton-line:last-child { margin-bottom: 0; }
.pd-skeleton-line.w-full  { width: 100%; }
.pd-skeleton-line.w-3-4   { width: 75%; }
.pd-skeleton-line.w-1-2   { width: 50%; }
.pd-skeleton-line.w-1-3   { width: 34%; }
.pd-skeleton-media {
  width: 100%;
  height: 210px;
  border-radius: 12px;
  margin: 0.5rem 0 0.75rem;
}

/* 12. Scroll-to-top button */
.pd-scroll-top-btn {
  position: fixed;
  bottom: 1.6rem;
  right: 1.4rem;
  z-index: 1100;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1da6c5 0%, #0b5e74 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  box-shadow: 0 5px 18px rgba(29, 166, 197, 0.42);
  opacity: 0;
  transform: translateY(18px) scale(0.8);
  transition: opacity 0.3s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s;
  pointer-events: none;
}
.pd-scroll-top-btn.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.pd-scroll-top-btn:hover {
  background: linear-gradient(135deg, #24b8d8, #0e6e88);
  transform: translateY(-3px) scale(1.06);
  box-shadow: 0 8px 24px rgba(29, 166, 197, 0.55);
}
@media (max-width: 767px) {
  .pd-scroll-top-btn { bottom: 4.8rem; right: 1rem; }
}

/* ═══════════════════════════════════════════════════════
   PLACES PAGE - İşletme Rehberi
   ═══════════════════════════════════════════════════════ */

.pd-places-page { padding-bottom: 3rem; }

/* ─── HERO CARD ─── */
.pd-places-hero-card {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #0f4c75 0%, #1b6ca8 45%, #1da6c5 100%);
  border-radius: 0 0 2rem 2rem;
  margin-bottom: 2.5rem;
  padding: 3rem 2rem 2.5rem;
  color: #fff;
  isolation: isolate;
}
.pd-places-hero-card-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 70% 50%, rgba(255,255,255,0.07) 0%, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(0,0,0,0.15) 0%, transparent 50%);
  pointer-events: none;
}
.pd-places-hero-deco {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.pd-places-deco-icon {
  position: absolute;
  opacity: 0.08;
  color: #fff;
  font-size: 3rem;
  line-height: 1;
  user-select: none;
}
.pd-places-deco-icon.deco-1 { top: 8%; left: 3%;  font-size: 4rem; transform: rotate(-15deg); }
.pd-places-deco-icon.deco-2 { bottom: 10%; left: 18%; font-size: 2.5rem; transform: rotate(20deg); }
.pd-places-deco-icon.deco-3 { top: 15%; right: 5%; font-size: 5rem; opacity: 0.06; }
.pd-places-deco-icon.deco-4 { bottom: 15%; right: 12%; font-size: 2rem; transform: rotate(-10deg); }
.pd-places-deco-icon.deco-5 { top: 55%; left: 40%; font-size: 3.5rem; opacity: 0.05; transform: rotate(30deg); }

.pd-places-hero-card-inner {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2.5rem;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
}
.pd-places-hero-card-left { flex: 1; min-width: 0; }
.pd-places-hero-card-right { flex-shrink: 0; width: 300px; }

.pd-places-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}
.pd-places-hero-title {
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1.2;
  margin: 0 0 0.75rem;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,0.2);
}
.pd-places-hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
  margin: 0 0 1.5rem;
  line-height: 1.6;
  max-width: 480px;
}

/* Stats row */
.pd-places-hero-stats {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1.75rem;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 14px;
  padding: 0.85rem 1.25rem;
  width: fit-content;
}
.pd-places-hero-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.25rem;
}
.pd-places-hero-stat:first-child { padding-left: 0; }
.pd-places-hero-stat:last-child { padding-right: 0; }
.pd-places-hero-stat-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: #fff;
  line-height: 1;
}
.pd-places-hero-stat-lbl {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
  font-weight: 500;
  margin-top: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pd-places-hero-stat-divider {
  width: 1px;
  height: 2rem;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
}

/* CTA buttons */
.pd-places-hero-card-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.pd-places-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #fff;
  color: #0f4c75;
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.7rem 1.5rem;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.pd-places-hero-cta:hover { background: #f0f9ff; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.22); }
.pd-places-hero-cta:active { transform: translateY(0); }
.pd-places-hero-cta-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.7rem 1.5rem;
  border-radius: 12px;
  border: 2px solid rgba(255,255,255,0.55);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.pd-places-hero-cta-outline:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.9); transform: translateY(-2px); }

/* Category pills on hero right */
.pd-places-hero-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}
.pd-places-hero-cat-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  text-align: left;
  backdrop-filter: blur(6px);
}
.pd-places-hero-cat-pill:hover {
  background: rgba(255,255,255,0.26);
  transform: translateY(-2px);
}
.pd-places-hero-cat-pill i {
  width: 1.1rem;
  text-align: center;
  font-size: 0.88rem;
  opacity: 0.9;
}

/* ─── NEWLY ADDED SECTION ─── */
.pd-places-new-section {
  padding: 0 0 2rem;
  overflow: hidden;
}
.pd-places-new-section.hidden { display: none; }
.pd-places-new-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2rem 1rem;
  max-width: 1200px;
  margin: 0 auto;
}
.pd-places-new-title-wrap { display: flex; align-items: center; gap: 0.6rem; }
.pd-places-new-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
}
.pd-places-new-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--pd-ink);
  margin: 0;
}
.pd-places-new-see-all {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--pd-primary, #1da6c5);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: 8px;
  transition: background 0.15s;
  white-space: nowrap;
}
.pd-places-new-see-all:hover { background: var(--pd-primary-light, #e8f7fa); }

/* Horizontal scrolling strip */
.pd-places-new-strip {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding: 0.25rem 2rem 1rem;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pd-places-new-strip::-webkit-scrollbar { display: none; }

/* New card */
.pd-places-new-card {
  flex: 0 0 200px;
  background: var(--pd-surface, #fff);
  border: 1px solid var(--pd-border);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  scroll-snap-align: start;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.pd-places-new-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}
.pd-places-new-card-img {
  position: relative;
  height: 130px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-places-new-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s;
}
.pd-places-new-card:hover .pd-places-new-card-img img { transform: scale(1.06); }
.pd-places-new-card-icon {
  font-size: 2.5rem;
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.pd-places-new-pill {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  background: linear-gradient(135deg, #f59e0b, #ef4444);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  z-index: 1;
}
.pd-places-new-cat-badge {
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.5rem;
  border-radius: 999px;
  z-index: 1;
}
.pd-places-new-card-body {
  padding: 0.75rem;
}
.pd-places-new-card-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--pd-ink);
  margin: 0 0 0.25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pd-places-new-card-loc {
  font-size: 0.75rem;
  color: var(--pd-muted);
  margin: 0 0 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}
.pd-places-new-card-loc i { color: var(--pd-primary, #1da6c5); font-size: 0.7rem; }
.pd-places-new-card-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pd-ink);
  margin-top: 0.25rem;
}

/* Toolbar */
.pd-places-toolbar {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.pd-places-search-wrap {
  flex: 1;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--pd-surface);
  border: 1.5px solid var(--pd-border);
  border-radius: 12px;
  padding: 0 1rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pd-places-search-wrap:focus-within {
  border-color: var(--pd-primary);
  box-shadow: 0 0 0 3px var(--pd-glow);
}
.pd-places-search-wrap i { color: var(--pd-muted); font-size: 0.85rem; }
.pd-places-search {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 0.65rem 0;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--pd-ink);
}
.pd-places-search::placeholder { color: #94a3b8; }
.pd-places-toolbar-right { display: flex; gap: 0.5rem; }
.pd-places-select {
  background: var(--pd-surface);
  border: 1.5px solid var(--pd-border);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--pd-ink);
  cursor: pointer;
  outline: none;
  min-width: 130px;
}
.pd-places-select:focus { border-color: var(--pd-primary); box-shadow: 0 0 0 3px var(--pd-glow); }

/* Category bar */
.pd-places-category-bar {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scrollbar-width: thin;
}
.pd-places-cat-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border-radius: 100px;
  border: 1.5px solid var(--pd-border);
  background: var(--pd-surface);
  color: var(--pd-ink);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s;
  font-family: inherit;
}
.pd-places-cat-chip:hover { border-color: var(--pd-primary); color: var(--pd-primary); }
.pd-places-cat-chip.is-active {
  background: linear-gradient(135deg, var(--pd-primary), var(--pd-primary-strong));
  color: #fff;
  border-color: transparent;
}
.pd-places-cat-chip i { font-size: 0.78rem; }

/* Stats */
.pd-places-stats { margin-top: 0.75rem; color: var(--pd-muted); font-size: 0.85rem; }

/* Grid */
.pd-places-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}

/* Card */
.pd-places-card {
  background: var(--pd-surface);
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid var(--pd-border);
  cursor: pointer;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
}
.pd-places-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  border-color: var(--pd-primary);
}
.pd-places-card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  overflow: hidden;
}
.pd-places-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-places-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #cbd5e1;
}
.pd-places-card-cat-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  backdrop-filter: blur(4px);
}
.pd-places-card-body { padding: 1rem 1.1rem 1.1rem; }
.pd-places-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0 0 0.35rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-places-card-location {
  color: var(--pd-muted);
  font-size: 0.82rem;
  margin: 0 0 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.pd-places-card-location i { color: var(--pd-primary); font-size: 0.75rem; }
.pd-places-card-rating {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.3rem 0;
}
.pd-places-card-phone {
  color: var(--pd-muted);
  font-size: 0.8rem;
  margin: 0.25rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.pd-places-card-phone i { font-size: 0.72rem; }

/* Badges */
.pd-places-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pd-places-badge-open { background: #dcfce7; color: #15803d; }
.pd-places-badge-closed { background: #fee2e2; color: #b91c1c; }
.pd-places-card-img .pd-places-badge { position: absolute; top: 0.75rem; right: 0.75rem; }

/* Stars */
.pd-places-stars { display: inline-flex; gap: 2px; }
.pd-places-star { color: #fbbf24; font-size: 0.82rem; transition: transform 0.15s; }
.pd-places-stars-interactive .pd-places-star { cursor: pointer; }
.pd-places-stars-interactive .pd-places-star:hover { transform: scale(1.25); }
.pd-places-rating-val { font-size: 0.82rem; color: var(--pd-muted); font-weight: 600; }
.pd-places-rating-count { font-weight: 400; }

/* Empty */
.pd-places-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--pd-muted);
}
.pd-places-empty i { font-size: 3rem; margin-bottom: 1rem; color: #cbd5e1; }
.pd-places-empty h3 { font-size: 1.2rem; margin: 0 0 0.5rem; color: var(--pd-ink); }
.pd-places-empty p { margin: 0; font-size: 0.9rem; }

/* Skeleton */
.pd-places-skeleton { pointer-events: none; }
.pd-places-skeleton-img {
  aspect-ratio: 16 / 10;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: pd-skeleton-wave 1.5s infinite;
}
.pd-places-skeleton-body { padding: 1rem; }
.pd-places-skeleton-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: pd-skeleton-wave 1.5s infinite;
  margin-bottom: 0.6rem;
}
.pd-places-skeleton-line.w60 { width: 60%; }
.pd-places-skeleton-line.w40 { width: 40%; }
.pd-places-skeleton-line.w80 { width: 80%; }
@keyframes pd-skeleton-wave {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── VIEW TOGGLE ─── */
.pd-places-view-toggle { display: flex; gap: 0.25rem; align-items: center; }
.pd-places-view-btn {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  border: 1.5px solid var(--pd-border);
  background: var(--pd-surface);
  color: var(--pd-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.88rem;
  transition: all 0.2s;
  font-family: inherit;
}
.pd-places-view-btn:hover { border-color: var(--pd-primary); color: var(--pd-primary); }
.pd-places-view-btn.is-active {
  background: var(--pd-primary);
  border-color: var(--pd-primary);
  color: #fff;
}

/* ─── PREMIUM MODE GRID ─── */
.pd-places-grid.is-premium-mode {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  grid-template-columns: unset;
}

/* ─── PREMIUM CARD ─── */
.pd-places-premium-card {
  display: flex;
  background: var(--pd-surface);
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid var(--pd-border);
  cursor: pointer;
  transition: transform 0.22s, box-shadow 0.22s, border-color 0.22s;
  position: relative;
  min-height: 140px;
}
.pd-places-premium-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
  border-color: var(--pd-primary);
}
.pd-places-premium-card-img {
  width: 180px;
  min-height: 140px;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.pd-places-premium-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-places-premium-card-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: #cbd5e1;
}
.pd-places-premium-card-body {
  flex: 1;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}
.pd-places-premium-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  justify-content: space-between;
}
.pd-places-premium-card-title {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0;
  line-height: 1.3;
  color: var(--pd-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pd-places-premium-card-badges { display: flex; gap: 0.4rem; flex-shrink: 0; }
.pd-places-premium-card-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.1rem;
}
.pd-places-premium-card-location,
.pd-places-premium-card-phone {
  color: var(--pd-muted);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0;
}
.pd-places-premium-card-location i,
.pd-places-premium-card-phone i { color: var(--pd-primary); font-size: 0.75rem; }
.pd-places-premium-card-desc {
  color: var(--pd-muted);
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0.1rem 0 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.pd-places-premium-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 0.6rem;
}
.pd-places-premium-card-cat-label {
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.pd-places-premium-card-detail-btn {
  padding: 0.45rem 1rem;
  background: linear-gradient(135deg, var(--pd-primary), var(--pd-primary-strong, var(--pd-primary)));
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  transition: opacity 0.2s, transform 0.15s;
}
.pd-places-premium-card-detail-btn:hover { opacity: 0.88; transform: scale(1.03); }
@media (max-width: 600px) {
  .pd-places-premium-card { flex-direction: column; }
  .pd-places-premium-card-img { width: 100%; height: 160px; min-height: unset; }
  .pd-places-premium-card-body { padding: 0.85rem 1rem; }
}

/* ─── MODAL BASE ─── */
.pd-places-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.pd-places-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(4px);
}
.pd-places-modal-panel {
  position: relative;
  background: var(--pd-surface);
  border-radius: 20px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
  scrollbar-width: thin;
}
.pd-places-modal-close {
  position: sticky;
  top: 0.75rem;
  float: right;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--pd-ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  margin: 0.75rem 0.75rem 0 0;
  transition: background 0.2s;
}
.pd-places-modal-close:hover { background: #f1f5f9; }

/* ─── DETAIL MODAL ─── */
.pd-places-detail-panel { width: min(780px, 100%); }

.pd-places-detail-hero { position: relative; }
.pd-places-detail-main-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
  background: #f1f5f9;
}
.pd-places-detail-main-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pd-places-detail-thumbs {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.pd-places-detail-thumb {
  width: 64px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.2s, opacity 0.2s;
  background: none;
  padding: 0;
}
.pd-places-detail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-places-detail-thumb:hover { opacity: 0.8; }
.pd-places-detail-thumb.is-active { border-color: var(--pd-primary); }
.pd-places-detail-no-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  font-size: 4rem;
  color: #cbd5e1;
  border-radius: 20px 20px 0 0;
}

.pd-places-detail-body { padding: 1.25rem 1.5rem 1.5rem; }
.pd-places-detail-header { margin-bottom: 1rem; }
.pd-places-detail-header > div { display: flex; gap: 0.5rem; align-items: center; margin-bottom: 0.4rem; }
.pd-places-detail-cat {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.7rem;
  border-radius: 8px;
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
}
.pd-places-detail-title { font-size: 1.5rem; font-weight: 800; margin: 0 0 0.35rem; line-height: 1.3; }
.pd-places-detail-rating { display: flex; align-items: center; gap: 0.5rem; }

/* Tabs */
.pd-places-detail-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--pd-border);
  margin-bottom: 1.25rem;
}
.pd-places-detail-tab {
  padding: 0.6rem 1rem;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--pd-muted);
  border-bottom: 2.5px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s, border-color 0.2s;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: inherit;
}
.pd-places-detail-tab:hover { color: var(--pd-primary); }
.pd-places-detail-tab.is-active {
  color: var(--pd-primary);
  border-bottom-color: var(--pd-primary);
}

/* About tab */
.pd-places-info-block { margin-bottom: 1.25rem; }
.pd-places-info-block h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--pd-ink);
  margin: 0 0 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.pd-places-info-block h4 i { color: var(--pd-primary); font-size: 0.8rem; }
.pd-places-info-block p { margin: 0; color: var(--pd-muted); font-size: 0.9rem; line-height: 1.6; }
.pd-places-info-block a { color: var(--pd-primary); text-decoration: none; }
.pd-places-info-block a:hover { text-decoration: underline; }

/* Map in detail */
.pd-places-detail-map {
  width: 100%;
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
  border: 1.5px solid var(--pd-border);
}

/* Working hours table */
.pd-places-wh-table { display: flex; flex-direction: column; gap: 0.25rem; }
.pd-places-wh-row {
  display: flex;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.85rem;
}
.pd-places-wh-day { font-weight: 600; color: var(--pd-ink); min-width: 40px; }
.pd-places-wh-time { color: var(--pd-muted); }
.pd-places-wh-closed { color: #ef4444; font-weight: 600; }

/* Action buttons */
.pd-places-detail-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}
.pd-places-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  text-decoration: none;
}

/* Owner badge */
.pd-places-detail-owner { margin-top: 1.25rem; }
.pd-places-owner-badge {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
  background: var(--pd-surface-soft);
  border: 1.5px solid var(--pd-border);
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pd-places-owner-badge:hover { border-color: var(--pd-primary); box-shadow: 0 2px 12px var(--pd-glow); }
.pd-places-owner-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--pd-border);
}
.pd-places-owner-info { flex: 1; min-width: 0; }
.pd-places-owner-label { display: block; font-size: 0.72rem; color: var(--pd-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; }
.pd-places-owner-info strong { display: block; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-places-owner-badge i { color: var(--pd-muted); font-size: 0.85rem; }

/* Reviews tab */
.pd-places-rate-box {
  background: var(--pd-surface-soft);
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
  margin-bottom: 1rem;
}
.pd-places-rate-box h4 { margin: 0 0 0.5rem; font-size: 0.9rem; }
.pd-places-rate-box .pd-places-stars { font-size: 1.5rem; }
.pd-places-rate-box .pd-places-star { font-size: 1.5rem; }

.pd-places-comment-form {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  margin-bottom: 1.25rem;
}
.pd-places-comment-textarea {
  flex: 1;
  border: 1.5px solid var(--pd-border);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.88rem;
  font-family: inherit;
  resize: vertical;
  min-height: 42px;
  outline: none;
  background: var(--pd-surface);
  color: var(--pd-ink);
}
.pd-places-comment-textarea:focus { border-color: var(--pd-primary); box-shadow: 0 0 0 3px var(--pd-glow); }
.pd-places-comment-submit { white-space: nowrap; }

.pd-places-auth-hint {
  text-align: center;
  padding: 1.5rem;
  background: var(--pd-surface-soft);
  border-radius: 12px;
  color: var(--pd-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}
.pd-places-auth-hint a { color: var(--pd-primary); font-weight: 600; text-decoration: underline; }

.pd-places-comments-list { display: flex; flex-direction: column; gap: 0.75rem; }
.pd-places-comment {
  padding: 0.75rem 1rem;
  border-radius: 10px;
  background: #f8fafc;
  border: 1px solid #f1f5f9;
}
.pd-places-comment-owner {
  background: #f0fdf4;
  border-color: #bbf7d0;
}
.pd-places-comment-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.pd-places-comment-author { font-size: 0.8rem; font-weight: 700; color: var(--pd-ink); }
.pd-places-comment-author i { font-size: 0.72rem; color: var(--pd-primary); margin-right: 0.2rem; }
.pd-places-comment-date { font-size: 0.72rem; color: #94a3b8; }
.pd-places-comment-delete {
  margin-left: auto;
  border: none;
  background: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0.2rem;
  opacity: 0.6;
  transition: opacity 0.2s;
}
.pd-places-comment-delete:hover { opacity: 1; }
.pd-places-comment-text { margin: 0; font-size: 0.88rem; line-height: 1.55; color: var(--pd-ink); }
.pd-places-no-comments { text-align: center; color: var(--pd-muted); font-size: 0.88rem; padding: 1.5rem 0; }

/* Photos tab */
.pd-places-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.6rem;
}
.pd-places-photo-item {
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: none;
  padding: 0;
  background: #f1f5f9;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.pd-places-photo-item:hover { transform: scale(1.04); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.pd-places-photo-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-places-no-photos {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--pd-muted);
}
.pd-places-no-photos i { font-size: 2.5rem; color: #cbd5e1; display: block; margin-bottom: 0.75rem; }

/* Lightbox */
.pd-places-lightbox {
  position: fixed;
  inset: 0;
  z-index: 3000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
}
.pd-places-lightbox-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
  z-index: 2;
}
.pd-places-lightbox-close:hover { background: rgba(255, 255, 255, 0.3); }
.pd-places-lightbox-img {
  max-width: 90vw;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 8px;
}
.pd-places-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.pd-places-lightbox-nav:hover { background: rgba(255, 255, 255, 0.3); }
.pd-places-lightbox-prev { left: 1rem; }
.pd-places-lightbox-next { right: 1rem; }
.pd-places-lightbox-counter {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.4);
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
}

/* ─── FORM MODAL ─── */
.pd-places-form-panel { width: min(640px, 100%); }
.pd-places-form-header {
  padding: 1.5rem 1.5rem 0;
}
.pd-places-form-header h2 {
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 0 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.pd-places-form-header h2 i { color: var(--pd-primary); }
.pd-places-form-header p { margin: 0; color: var(--pd-muted); font-size: 0.88rem; }

.pd-places-form { padding: 1.25rem 1.5rem 1.5rem; }
.pd-places-form-group { margin-bottom: 1.1rem; }
.pd-places-form-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.35rem;
  color: var(--pd-ink);
}
.pd-places-form-label i { color: var(--pd-primary); font-size: 0.78rem; }
.pd-places-form-input,
.pd-places-form-textarea {
  width: 100%;
  border: 1.5px solid var(--pd-border);
  border-radius: 10px;
  padding: 0.6rem 0.8rem;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--pd-ink);
  background: var(--pd-surface);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.pd-places-form-input:focus,
.pd-places-form-textarea:focus {
  border-color: var(--pd-primary);
  box-shadow: 0 0 0 3px var(--pd-glow);
}
.pd-places-form-textarea { resize: vertical; min-height: 80px; }
.pd-places-form-row { display: flex; gap: 0.75rem; }
.pd-places-form-half { flex: 1; min-width: 0; }

/* Category chips in form */
.pd-places-form-cats { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pd-places-form-cat-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.75rem;
  border-radius: 100px;
  border: 1.5px solid var(--pd-border);
  background: var(--pd-surface);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  color: var(--pd-ink);
  font-family: inherit;
}
.pd-places-form-cat-chip:hover { border-color: var(--pd-primary); color: var(--pd-primary); }
.pd-places-form-cat-chip.is-active {
  background: var(--pd-primary);
  color: #fff;
  border-color: var(--pd-primary);
}

/* Toggle switch */
.pd-places-form-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  font-size: 0.88rem;
  font-weight: 600;
}
.pd-places-toggle {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
}
.pd-places-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.pd-places-toggle-slider {
  position: absolute;
  inset: 0;
  background: #cbd5e1;
  border-radius: 100px;
  cursor: pointer;
  transition: background 0.25s;
}
.pd-places-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  left: 3px;
  bottom: 3px;
  transition: transform 0.25s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}
.pd-places-toggle input:checked + .pd-places-toggle-slider { background: var(--pd-primary); }
.pd-places-toggle input:checked + .pd-places-toggle-slider::before { transform: translateX(20px); }

/* Daily hours in form */
.pd-places-form-hours { margin-top: 0.5rem; border: 1.5px solid var(--pd-border); border-radius: 12px; overflow: hidden; }
.pd-places-form-day-row { border-bottom: 1px solid #f1f5f9; }
.pd-places-form-day-row:last-child { border-bottom: none; }
.pd-places-form-day-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--pd-ink);
  transition: background 0.15s;
}
.pd-places-form-day-header:hover { background: #f8fafc; }
.pd-places-form-day-label { font-weight: 700; min-width: 32px; }
.pd-places-form-day-label.is-closed { color: #ef4444; }
.pd-places-form-day-time { flex: 1; text-align: right; color: var(--pd-muted); font-size: 0.82rem; }
.pd-places-form-day-header i { color: var(--pd-muted); font-size: 0.72rem; }

.pd-places-form-day-detail {
  padding: 0.5rem 0.9rem 0.75rem;
  background: #fafbfc;
  border-top: 1px solid #f1f5f9;
}
.pd-places-form-time-row { display: flex; gap: 0.75rem; margin-top: 0.5rem; }
.pd-places-form-time-row > div { flex: 1; }
.pd-places-form-time-row label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--pd-muted); margin-bottom: 0.25rem; }
.pd-places-form-time-select {
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: 1.5px solid var(--pd-border);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: inherit;
  background: var(--pd-surface);
  color: var(--pd-ink);
  outline: none;
}
.pd-places-form-time-select:focus { border-color: var(--pd-primary); }
.pd-places-form-apply-all {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.6rem;
  border: none;
  background: none;
  color: var(--pd-primary);
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  padding: 0.25rem 0;
}
.pd-places-form-apply-all:hover { text-decoration: underline; }

/* Image upload in form */
.pd-places-form-img-actions { margin-bottom: 0.75rem; }
.pd-places-form-img-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 0.6rem;
}
.pd-places-form-img-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid var(--pd-border);
}
.pd-places-form-img-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-places-form-img-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0.35rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
}
.pd-places-form-img-cover,
.pd-places-form-img-remove {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  transition: background 0.2s;
}
.pd-places-form-img-cover { background: rgba(255, 255, 255, 0.85); color: #64748b; }
.pd-places-form-img-cover.is-active { background: #fbbf24; color: #fff; }
.pd-places-form-img-remove { background: rgba(239, 68, 68, 0.85); color: #fff; }
.pd-places-form-img-cover-badge {
  position: absolute;
  top: 0.35rem;
  left: 0.35rem;
  background: #fbbf24;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pd-places-form-img-hint { color: var(--pd-muted); font-size: 0.85rem; margin: 0; grid-column: 1 / -1; text-align: center; padding: 1rem 0; }

/* Form footer */
.pd-places-form-footer {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1.5px solid var(--pd-border);
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
  .pd-places-hero-card-right { display: none; }
  .pd-places-hero-card-inner { flex-direction: column; }
}

@media (max-width: 767px) {
  .pd-places-hero-card { padding: 2rem 1.25rem 2rem; border-radius: 0 0 1.5rem 1.5rem; }
  .pd-places-hero-title { font-size: 1.55rem; }
  .pd-places-hero-sub { font-size: 0.9rem; }
  .pd-places-hero-stats { padding: 0.65rem 0.85rem; }
  .pd-places-hero-stat { padding: 0 0.75rem; }
  .pd-places-hero-stat-num { font-size: 1.25rem; }
  .pd-places-hero-cta, .pd-places-hero-cta-outline { font-size: 0.88rem; padding: 0.6rem 1.1rem; }
  .pd-places-new-header { padding: 0 1rem 0.75rem; }
  .pd-places-new-strip { padding: 0.25rem 1rem 1rem; gap: 0.75rem; }
  .pd-places-new-card { flex: 0 0 160px; }
  .pd-places-new-card-img { height: 110px; }
  .pd-places-new-title { font-size: 1.05rem; }
  .pd-places-toolbar { flex-direction: column; }
  .pd-places-toolbar-right { width: 100%; }
  .pd-places-select { flex: 1; min-width: 0; }
  .pd-places-grid { grid-template-columns: 1fr; }
  .pd-places-modal { padding: 0; }
  .pd-places-modal-panel { border-radius: 0; max-height: 100vh; height: 100%; }
  .pd-places-detail-main-img { border-radius: 0; }
  .pd-places-detail-no-img { border-radius: 0; }
  .pd-places-detail-body { padding: 1rem; }
  .pd-places-detail-title { font-size: 1.25rem; }
  .pd-places-detail-tabs { overflow-x: auto; }
  .pd-places-detail-tab { font-size: 0.82rem; padding: 0.5rem 0.7rem; }
  .pd-places-detail-actions { flex-direction: column; }
  .pd-places-action-btn { justify-content: center; }
  .pd-places-form-row { flex-direction: column; gap: 0; }
  .pd-places-form-footer { flex-direction: column-reverse; }
  .pd-places-form-footer .pd-btn { width: 100%; justify-content: center; }
  .pd-places-photos-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
  .pd-places-lightbox-img { max-width: 100vw; max-height: 80vh; border-radius: 0; }
  .pd-places-lightbox-nav { width: 40px; height: 40px; }
}

/* ═══════════════════════════════════════════════════════
   PREMIUM FEATURES — Dark Mode, Scroll Shrink, Micro-UX
   ═══════════════════════════════════════════════════════ */

/* ── 1. Header scroll-shrink ── */
.pd-header {
  transition: box-shadow 0.28s ease, background 0.28s ease, backdrop-filter 0.28s ease;
}
.pd-header-shell {
  transition: min-height 0.28s ease;
}
.pd-header.is-scrolled .pd-header-shell {
  min-height: 58px;
}
.pd-header.is-scrolled {
  box-shadow: 0 4px 28px -8px rgba(11, 95, 125, 0.14);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
}

/* ── 2. Theme toggle button ── */
.pd-theme-toggle {
  border: 1px solid rgba(11, 95, 125, 0.2);
  border-radius: 12px;
  width: 42px;
  height: 42px;
  background: linear-gradient(140deg, rgba(221, 245, 251, 0.9), #ffffff);
  color: var(--pd-primary-strong);
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.25s ease, color 0.25s ease;
}
.pd-theme-toggle:hover {
  transform: translateY(-1px) rotate(12deg);
  box-shadow: 0 14px 26px -20px rgba(11, 95, 125, 0.55);
}

/* ── 3. Ctrl+K search keyboard badge ── */
.pd-search-kbd {
  display: none;
  align-items: center;
  gap: 0.1rem;
  font-size: 0.62rem;
  font-weight: 800;
  background: rgba(11, 95, 125, 0.1);
  border: 1px solid rgba(11, 95, 125, 0.16);
  border-radius: 5px;
  padding: 0.1rem 0.28rem;
  color: var(--pd-primary-strong);
  letter-spacing: 0.01em;
  white-space: nowrap;
  margin-left: 0.15rem;
  pointer-events: none;
}
@media (min-width: 1280px) {
  .pd-search-kbd { display: inline-flex; }
  .pd-search-trigger {
    width: auto !important;
    padding: 0.62rem 0.72rem !important;
  }
}

/* ── 4. Dark Mode Variables ── */
[data-theme="dark"] {
  --pd-bg: #0d1117;
  --pd-surface: #161b22;
  --pd-surface-soft: #0d1f2d;
  --pd-border: #21313f;
  --pd-ink: #cdd9e5;
  --pd-muted: #7a8fa0;
  --pd-primary: #29bdd5;
  --pd-primary-strong: #5dd5e8;
  --pd-primary-soft: #0c2535;
  --pd-secondary: #26c99f;
  --pd-accent: #f5954f;
  --pd-success: #3fb97a;
  --pd-warning: #f0b429;
  --pd-night: #020c18;
  --pd-glow: rgba(41, 189, 213, 0.35);
}

[data-theme="dark"] body {
  background: linear-gradient(180deg, #0d1117 0%, #080c12 100%);
  color: var(--pd-ink);
}

/* ── 5. Dark: Header ── */
[data-theme="dark"] .pd-header {
  background: rgba(10, 14, 20, 0.88);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .pd-header.is-scrolled {
  background: rgba(8, 12, 18, 0.96);
  box-shadow: 0 4px 28px -8px rgba(0, 0, 0, 0.5);
}
[data-theme="dark"] #mobile-menu {
  background: rgba(10, 14, 20, 0.97);
  border-top-color: rgba(255, 255, 255, 0.06);
}

/* ── 6. Dark: Nav links ── */
[data-theme="dark"] .pd-nav-link,
[data-theme="dark"] .pd-nav-toggle {
  color: #b0c4d2;
}
[data-theme="dark"] .pd-nav-link:hover,
[data-theme="dark"] .pd-nav-toggle:hover {
  background: rgba(41, 189, 213, 0.1);
  color: var(--pd-primary-strong);
  box-shadow: inset 0 0 0 1px rgba(41, 189, 213, 0.18);
}
[data-theme="dark"] .pd-nav-link.is-active,
[data-theme="dark"] .pd-nav-toggle.is-active {
  color: var(--pd-primary-strong);
  background: rgba(41, 189, 213, 0.13);
  box-shadow: inset 0 0 0 1px rgba(41, 189, 213, 0.22);
}

/* ── 7. Dark: Dropdowns & submenus ── */
[data-theme="dark"] .pd-submenu {
  background: #161b22;
  border-color: #21313f;
  box-shadow: 0 24px 40px -24px rgba(0, 0, 0, 0.8);
}
[data-theme="dark"] .pd-submenu-item {
  color: #b0c4d2;
}
[data-theme="dark"] .pd-submenu-item:hover,
[data-theme="dark"] .pd-submenu-item.is-active {
  background: rgba(41, 189, 213, 0.1);
  color: var(--pd-primary-strong);
}

/* ── 8. Dark: Mobile menu ── */
[data-theme="dark"] .pd-mobile-link,
[data-theme="dark"] .pd-mobile-toggle-link {
  color: #b0c4d2;
}
[data-theme="dark"] .pd-mobile-link:hover,
[data-theme="dark"] .pd-mobile-toggle-link:hover {
  background: rgba(41, 189, 213, 0.09);
  color: var(--pd-primary-strong);
}
[data-theme="dark"] .pd-mobile-link.is-active,
[data-theme="dark"] .pd-mobile-toggle-link.is-active {
  background: rgba(41, 189, 213, 0.12);
  color: var(--pd-primary-strong);
}
[data-theme="dark"] .pd-mobile-app-link {
  background: linear-gradient(135deg, rgba(12, 37, 53, 0.95), rgba(10, 35, 30, 0.92));
  border-color: rgba(41, 189, 213, 0.18);
}
[data-theme="dark"] .pd-mobile-app-title { color: #7dd3fc; }
[data-theme="dark"] .pd-mobile-app-subtitle { color: #5a8fa8; }
[data-theme="dark"] .pd-mobile-submenu { border-left-color: #21313f; }

/* ── 9. Dark: Header action buttons ── */
[data-theme="dark"] .pd-mobile-toggle {
  background: #161b22;
  border-color: #21313f;
  color: #b0c4d2;
}
[data-theme="dark"] .pd-lang-toggle {
  background: linear-gradient(140deg, rgba(12, 37, 53, 0.9), #161b22);
  border-color: rgba(41, 189, 213, 0.2);
  color: var(--pd-primary-strong);
}
[data-theme="dark"] .pd-lang-toggle:hover {
  background: linear-gradient(140deg, rgba(12, 45, 65, 0.9), #1c2530);
}
[data-theme="dark"] .pd-search-trigger {
  background: linear-gradient(145deg, rgba(12, 37, 53, 0.95), #161b22);
  border-color: rgba(41, 189, 213, 0.2);
  color: var(--pd-primary-strong);
}
[data-theme="dark"] .pd-theme-toggle {
  background: linear-gradient(140deg, rgba(12, 37, 53, 0.9), #161b22);
  border-color: rgba(241, 196, 15, 0.3);
  color: #f1c40f;
}
[data-theme="dark"] .pd-theme-toggle:hover {
  border-color: rgba(241, 196, 15, 0.5);
  box-shadow: 0 6px 18px -10px rgba(241, 196, 15, 0.4);
}
[data-theme="dark"] .pd-search-kbd {
  background: rgba(41, 189, 213, 0.1);
  border-color: rgba(41, 189, 213, 0.18);
}

/* ── 10. Dark: Cards & surfaces ── */
[data-theme="dark"] .pd-card {
  background: #161b22;
  border-color: #21313f;
  box-shadow: 0 18px 36px -34px rgba(0, 0, 0, 0.65);
}
[data-theme="dark"] .pd-card:hover {
  box-shadow: 0 24px 44px -30px rgba(0, 0, 0, 0.75);
}
[data-theme="dark"] .pd-card p { color: #7a8fa0; }
[data-theme="dark"] .pd-card h3 { color: #cdd9e5; }
[data-theme="dark"] .pd-glass-card {
  background: linear-gradient(145deg, rgba(22, 27, 34, 0.96), rgba(13, 31, 45, 0.88));
  border-color: rgba(41, 189, 213, 0.12);
}
[data-theme="dark"] .pd-widget-row {
  background: rgba(22, 27, 34, 0.88);
  border-color: rgba(41, 189, 213, 0.1);
  color: #b0c4d2;
}
[data-theme="dark"] .pd-widget-row span { color: #7a8fa0; }
[data-theme="dark"] .pd-timeline-item {
  background: #161b22;
  border-color: #21313f;
}
[data-theme="dark"] .pd-timeline-item h4 { color: #cdd9e5; }
[data-theme="dark"] .pd-timeline-item p { color: #7a8fa0; }

/* ── 11. Dark: Hero ── */
[data-theme="dark"] .hero-shell {
  background: linear-gradient(132deg, rgba(10, 27, 40, 0.95), rgba(10, 31, 23, 0.88) 55%, rgba(28, 18, 10, 0.82));
  border-color: rgba(41, 189, 213, 0.14);
}
[data-theme="dark"] .hero-copy h1 { color: #e6f2f7; }
[data-theme="dark"] .hero-copy p { color: #7a8fa0; }
[data-theme="dark"] .hero-metric {
  background: rgba(22, 27, 34, 0.92);
  border-color: rgba(41, 189, 213, 0.13);
}
[data-theme="dark"] .hero-metric strong { color: #cdd9e5; }
[data-theme="dark"] .hero-metric span { color: #7a8fa0; }
[data-theme="dark"] .hero-float-card {
  background: rgba(22, 27, 34, 0.95);
  border-color: rgba(41, 189, 213, 0.16);
}
[data-theme="dark"] .hero-float-card strong { color: #cdd9e5; }
[data-theme="dark"] .hero-float-card span { color: #7a8fa0; }

/* ── 12. Dark: Feed & KPI ── */
[data-theme="dark"] .pd-home-feed-head {
  background: linear-gradient(135deg, rgba(22, 27, 34, 0.95), rgba(10, 27, 40, 0.85));
  border-color: rgba(41, 189, 213, 0.12);
}
[data-theme="dark"] .pd-home-feed-head p { color: #7a8fa0; }
[data-theme="dark"] .pd-home-feed-gate {
  background: linear-gradient(135deg, rgba(10, 31, 23, 0.75), rgba(10, 27, 40, 0.8));
  border-color: rgba(41, 189, 213, 0.12);
}
[data-theme="dark"] .pd-kpi {
  background: rgba(22, 27, 34, 0.9);
  border-color: rgba(41, 189, 213, 0.13);
}
[data-theme="dark"] .pd-kpi strong { color: #cdd9e5; }
[data-theme="dark"] .pd-kpi span { color: #7a8fa0; }

/* ── 13. Dark: Buttons & chips ── */
[data-theme="dark"] .pd-btn-secondary {
  color: var(--pd-primary-strong);
  border-color: rgba(41, 189, 213, 0.26);
  background: rgba(22, 27, 34, 0.92);
}
[data-theme="dark"] .pd-btn-secondary:hover {
  background: rgba(41, 189, 213, 0.1);
  border-color: rgba(41, 189, 213, 0.4);
}
[data-theme="dark"] .pd-chip {
  background: linear-gradient(135deg, rgba(12, 37, 53, 0.96), rgba(10, 35, 30, 0.82));
  border-color: rgba(41, 189, 213, 0.2);
  color: var(--pd-primary-strong);
}
[data-theme="dark"] .pd-cat-chip {
  background: #161b22;
  border-color: rgba(41, 189, 213, 0.18);
  color: #b0c4d2;
}
[data-theme="dark"] .pd-cat-chip:hover {
  background: rgba(41, 189, 213, 0.08);
  border-color: rgba(41, 189, 213, 0.32);
}

/* ── 14. Dark: Modals & search ── */
[data-theme="dark"] .pd-modal-panel {
  background: #161b22;
  border-color: #21313f;
  box-shadow: 0 34px 46px -30px rgba(0, 0, 0, 0.9);
}
[data-theme="dark"] .pd-modal-close {
  background: rgba(41, 189, 213, 0.1);
  color: #b0c4d2;
}
[data-theme="dark"] .pd-global-search-panel { background: #161b22; }
[data-theme="dark"] .pd-global-search-header h3 { color: #cdd9e5; }
[data-theme="dark"] .pd-global-search-header p { color: #7a8fa0; }
[data-theme="dark"] .pd-global-search-input-wrap {
  background: rgba(13, 31, 45, 0.96);
  border-color: rgba(41, 189, 213, 0.16);
}
[data-theme="dark"] .pd-global-search-input-wrap i { color: #7a8fa0; }
[data-theme="dark"] .pd-global-search-input-wrap input {
  color: #cdd9e5;
}
[data-theme="dark"] .pd-global-search-input-wrap input::placeholder { color: #3d5466; }
[data-theme="dark"] .pd-global-search-input-wrap:focus-within {
  border-color: rgba(41, 189, 213, 0.38);
  box-shadow: 0 0 0 3px rgba(41, 189, 213, 0.12);
}
[data-theme="dark"] .pd-global-search-hint { color: #5a7080; }
[data-theme="dark"] .pd-global-search-item {
  background: #1c2430;
  border-color: #21313f;
  color: #b0c4d2;
}
[data-theme="dark"] .pd-global-search-item:hover,
[data-theme="dark"] .pd-global-search-item.is-focused {
  background: rgba(41, 189, 213, 0.08);
  border-color: rgba(41, 189, 213, 0.24);
  box-shadow: 0 8px 20px -16px rgba(41, 189, 213, 0.4);
}
[data-theme="dark"] .pd-global-search-avatar {
  background: linear-gradient(145deg, rgba(12, 37, 53, 0.9), #1c2430);
  border-color: rgba(41, 189, 213, 0.14);
  color: #5dd5e8;
}
[data-theme="dark"] .pd-global-search-copy strong { color: #cdd9e5; }
[data-theme="dark"] .pd-global-search-copy small { color: #5a7080; }
[data-theme="dark"] .pd-global-search-meta {
  background: rgba(12, 37, 53, 0.95);
  border-color: rgba(41, 189, 213, 0.16);
  color: #5dd5e8;
}
[data-theme="dark"] .pd-global-search-empty {
  background: rgba(13, 31, 45, 0.9);
  border-color: rgba(41, 189, 213, 0.14);
  color: #5a7080;
}

/* ── 15. Dark: Section headings ── */
[data-theme="dark"] .pd-section-head h2 { color: #e6f2f7; }
[data-theme="dark"] .pd-section-head p { color: #7a8fa0; }

/* ── 16. Dark: Dropdown auth menus ── */
[data-theme="dark"] .dropdown-menu {
  background: #161b22;
  border-color: #21313f;
}
[data-theme="dark"] .dropdown-item { color: #b0c4d2; }
[data-theme="dark"] .dropdown-item:hover { background: rgba(41, 189, 213, 0.09); }

/* ── 17. Dark: Scroll-to-top ── */
[data-theme="dark"] .pd-scroll-top-btn {
  box-shadow: 0 6px 24px rgba(41, 189, 213, 0.4);
}

/* ── 18. Dark: Corner tabs & misc ── */
[data-theme="dark"] .pd-home-corner-tab {
  background: rgba(22, 27, 34, 0.88);
  border-color: rgba(41, 189, 213, 0.14);
  color: #7a8fa0;
}
[data-theme="dark"] .pd-trend-row .pd-trend-meta { color: #5a7080; }
[data-theme="dark"] .pd-trend-row .pd-trend-pill-window {
  background: rgba(41, 189, 213, 0.1);
  border-color: rgba(41, 189, 213, 0.2);
  color: #5dd5e8;
}
[data-theme="dark"] .pd-badge-primary {
  color: #5dd5e8;
  background: rgba(41, 189, 213, 0.14);
}
[data-theme="dark"] .pd-list li { color: #b0c4d2; }

/* ── 19. Dark: Page loader ── */
[data-theme="dark"] .pd-page {
  color: var(--pd-ink);
}

/* ── 20. CTA block stays dark (already dark) ── */
[data-theme="dark"] .pd-cta-block {
  background: linear-gradient(130deg, #020c18, #0b3a55);
}

/* ── 21. Micro-UX: enhanced hover glow on primary button ── */
.pd-btn-primary {
  position: relative;
  overflow: hidden;
}
.pd-btn-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0);
  transition: background 0.22s ease;
  border-radius: inherit;
  pointer-events: none;
}
.pd-btn-primary:hover::after {
  background: rgba(255, 255, 255, 0.1);
}
.pd-btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* ── 22. Micro-UX: card subtle entrance animation ── */
.pd-animate {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.38s ease, transform 0.38s ease;
}
.pd-animate.delay-1 { transition-delay: 0.06s; }
.pd-animate.delay-2 { transition-delay: 0.12s; }
.pd-animate.delay-3 { transition-delay: 0.18s; }
.pd-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── 23. Dark: smooth bg transition on theme switch ── */
html {
  transition: background-color 0.3s ease;
}
body {
  transition: background 0.3s ease, color 0.3s ease;
}
.pd-card,
.pd-glass-card,
.pd-widget-row,
.pd-modal-panel,
.pd-submenu,
.pd-header,
#mobile-menu {
  transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.28s ease;
}

/* ── Post Detail Action Bar — Dark Mode ── */
[data-theme="dark"] .pd-post-detail-actions {
  border-top-color: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .pd-post-like-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #8eafc2;
}
[data-theme="dark"] .pd-post-like-btn:hover {
  background: rgba(239, 68, 68, 0.12);
  border-color: #ef4444;
  color: #f87171;
}
[data-theme="dark"] .pd-post-like-btn.is-liked {
  background: rgba(239, 68, 68, 0.15);
  border-color: #ef4444;
  color: #f87171;
}
[data-theme="dark"] .pd-post-action-btn {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
  color: #8eafc2;
}
[data-theme="dark"] .pd-post-action-btn:hover {
  background: rgba(41, 189, 213, 0.1);
  border-color: rgba(41, 189, 213, 0.4);
  color: #29bdd5;
}
[data-theme="dark"] .pd-post-share-btn:hover {
  background: rgba(56, 189, 248, 0.1);
  border-color: rgba(56, 189, 248, 0.4);
  color: #38bdf8;
}