.public-shell-root{
  min-height: 56vh;
  position: relative;
}

.public-shell-view{
  min-height: 52vh;
}

.public-shell-root.is-loading .public-shell-view{
  opacity: .96;
}

.public-shell-loading,
.public-shell-error{
  margin: 12px 16px 24px;
  padding: 16px;
  border-radius: 18px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(15,23,42,.05);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
}

.public-shell-loading .bar{
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(148,163,184,.18), rgba(96,165,250,.24), rgba(148,163,184,.18));
  background-size: 220% 100%;
  animation: public-shell-shimmer 1.3s linear infinite;
}

.public-shell-loading .bar + .bar{
  margin-top: 12px;
}

.public-shell-meta{
  margin: 12px 16px 0;
}

.public-shell-meta .meta-card{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  border: 1px solid rgba(148,163,184,.22);
  border-radius: 18px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
  padding: 12px 14px;
}

.public-shell-meta .meta-card.guest{
  border-color: rgba(59,130,246,.24);
}

.public-shell-meta .pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.24);
  background: rgba(148,163,184,.08);
  color: rgba(15,23,42,.92);
  font-size: 12px;
  font-weight: 900;
}

.public-shell-meta .pill.success{
  border-color: rgba(16,185,129,.24);
  background: rgba(16,185,129,.12);
  color: rgba(4,120,87,.96);
}

.public-shell-meta .text{
  flex: 1 1 260px;
  color: rgba(51,65,85,.92);
  font-weight: 700;
  line-height: 1.55;
}

.public-shell-sr{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.public-shell-error .title{
  font-size: 16px;
  font-weight: 900;
  color: #b91c1c;
}

.public-shell-error .text{
  margin-top: 8px;
  color: rgba(100,116,139,.95);
  font-weight: 600;
}

.public-shell-error .actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.public-shell-btn,
.public-list-inline-btn,
.public-list-status-btn{
  appearance: none;
  border: 1px solid rgba(148,163,184,.28);
  background: rgba(148,163,184,.10);
  color: inherit;
  border-radius: 12px;
  padding: 8px 12px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.public-shell-btn:hover,
.public-list-inline-btn:hover,
.public-list-status-btn:hover{
  transform: translateY(-1px);
  background: rgba(96,165,250,.14);
  border-color: rgba(96,165,250,.35);
}

.public-shell-btn.primary,
.public-list-inline-btn.primary,
.public-list-status-btn{
  border-color: rgba(59,130,246,.35);
  background: rgba(59,130,246,.14);
}

.public-list-inline-btn.ghost{
  background: transparent;
}

.public-list-error-box{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  max-width: 520px;
}

.public-list-error-box .title{
  font-size: 15px;
  font-weight: 900;
  color: #b91c1c;
}

.public-list-error-box .text{
  color: rgba(100,116,139,.95);
  line-height: 1.55;
}

.public-list-error-actions,
.public-shell-error .actions,
.public-shell-status-actions{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.public-list-status-btn{
  margin-left: 10px;
}

html[data-theme="dark"] .public-shell-meta .meta-card,
html[data-theme="dark"] .public-shell-meta .pill,
html[data-theme="dark"] .public-shell-meta .text{
  color: rgba(226,232,240,.96);
}

html[data-theme="dark"] .public-shell-meta .meta-card{
  background: rgba(2,6,23,.5);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
}

html[data-theme="dark"] .public-shell-meta .pill{
  background: rgba(148,163,184,.1);
  color: rgba(226,232,240,.96);
}

html[data-theme="dark"] .public-shell-meta .pill.success{
  color: rgba(110,231,183,.98);
}

@media (prefers-color-scheme: dark){
  html:not([data-theme="light"]) .public-shell-meta .meta-card,
  html:not([data-theme="light"]) .public-shell-meta .pill,
  html:not([data-theme="light"]) .public-shell-meta .text{
    color: rgba(226,232,240,.96);
  }

  html:not([data-theme="light"]) .public-shell-meta .meta-card{
    background: rgba(2,6,23,.5);
    box-shadow: 0 12px 28px rgba(0,0,0,.22);
  }

  html:not([data-theme="light"]) .public-shell-meta .pill{
    background: rgba(148,163,184,.1);
    color: rgba(226,232,240,.96);
  }

  html:not([data-theme="light"]) .public-shell-meta .pill.success{
    color: rgba(110,231,183,.98);
  }
}

header .nav-menu > a.active,
header .mobile-header-title.active,
header .logo-wrapper.active{
  color: var(--hdr-text) !important;
  background: var(--hdr-hover) !important;
}

header .nav-menu > a.active::after{
  width: 64%;
  left: 18%;
  opacity: .42;
}

@keyframes public-shell-shimmer{
  from{ background-position: 200% 0; }
  to{ background-position: -20% 0; }
}