/* POB Redesign Pack 08 - UX, erros, loader e microinterações */
:root {
  --pob08-bg: #020609;
  --pob08-card: rgba(8, 18, 22, .78);
  --pob08-card-strong: rgba(12, 28, 34, .92);
  --pob08-line: rgba(110, 255, 196, .18);
  --pob08-line-strong: rgba(255, 211, 88, .28);
  --pob08-green: #36f59b;
  --pob08-green-soft: rgba(54, 245, 155, .18);
  --pob08-gold: #ffd35a;
  --pob08-gold-soft: rgba(255, 211, 90, .18);
  --pob08-cyan: #40c8ff;
  --pob08-cyan-soft: rgba(64, 200, 255, .16);
  --pob08-red: #ff5f6f;
  --pob08-radius: 24px;
  --pob08-shadow: 0 24px 80px rgba(0, 0, 0, .42);
}

html.pob-ux-loading,
html.pob-ux-loading body {
  overflow-x: hidden;
}

.pob-page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 36%, rgba(54, 245, 155, .16), transparent 30%),
    radial-gradient(circle at 70% 64%, rgba(64, 200, 255, .12), transparent 32%),
    linear-gradient(135deg, rgba(1, 5, 8, .98), rgba(4, 12, 16, .96));
  transition: opacity .5s ease, visibility .5s ease;
}

.pob-page-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.pob-loader-core {
  width: min(420px, calc(100vw - 42px));
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 30px;
  padding: 28px;
  background: linear-gradient(145deg, rgba(11, 28, 34, .86), rgba(4, 10, 14, .94));
  box-shadow: 0 34px 120px rgba(0, 0, 0, .58), 0 0 70px rgba(54, 245, 155, .14);
  position: relative;
  overflow: hidden;
}

.pob-loader-core::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: conic-gradient(from 180deg, transparent, rgba(54, 245, 155, .38), transparent, rgba(255, 211, 90, .28), transparent);
  opacity: .5;
  filter: blur(16px);
  animation: pob08Spin 4s linear infinite;
}

.pob-loader-inner {
  position: relative;
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
}

.pob-loader-badge {
  width: 92px;
  height: 92px;
  border-radius: 28px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  box-shadow: inset 0 0 22px rgba(255, 255, 255, .05), 0 0 38px rgba(54, 245, 155, .16);
}

.pob-loader-badge img {
  width: 78px;
  height: 78px;
  object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .45));
}

.pob-loader-title {
  margin: 0;
  font-size: clamp(1.15rem, 3.4vw, 1.7rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #fff;
}

.pob-loader-subtitle {
  margin: -8px 0 0;
  color: rgba(235, 255, 245, .68);
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.pob-loader-bar {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .08);
}

.pob-loader-bar span {
  display: block;
  height: 100%;
  width: 42%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pob08-green), var(--pob08-cyan), var(--pob08-gold));
  box-shadow: 0 0 26px rgba(54, 245, 155, .38);
  animation: pob08Load 1.35s ease-in-out infinite;
}

.pob-top-progress {
  position: fixed;
  inset: 0 auto auto 0;
  height: 3px;
  width: 0;
  z-index: 99998;
  background: linear-gradient(90deg, var(--pob08-green), var(--pob08-cyan), var(--pob08-gold));
  box-shadow: 0 0 18px rgba(54, 245, 155, .7);
  pointer-events: none;
  transition: width .18s ease, opacity .28s ease;
}

.pob-orb-cursor {
  position: fixed;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  opacity: .35;
  transform: translate3d(-50%, -50%, 0);
  background: radial-gradient(circle, rgba(54, 245, 155, .17), rgba(64, 200, 255, .08) 38%, transparent 70%);
  filter: blur(12px);
  mix-blend-mode: screen;
}

.pob-body main,
.site-shell,
.panel-shell {
  position: relative;
  z-index: 2;
}

.pob-reveal {
  opacity: 0;
  transform: translateY(26px) scale(.985);
  transition: opacity .72s ease, transform .72s cubic-bezier(.2, .82, .2, 1);
}

.pob-reveal.is-visible {
  opacity: 1;
  transform: none;
}

.pob-magnetic {
  transform-style: preserve-3d;
  transition: transform .2s ease, box-shadow .2s ease;
}

.pob-magnetic:hover {
  transform: translateY(-4px) perspective(900px) rotateX(var(--pob-tilt-y, 0deg)) rotateY(var(--pob-tilt-x, 0deg));
}

.pob-empty-state,
.pob-system-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--pob08-radius);
  border: 1px solid rgba(255, 255, 255, .1);
  background:
    linear-gradient(145deg, rgba(8, 24, 29, .82), rgba(3, 8, 12, .9)),
    radial-gradient(circle at 18% 22%, rgba(54, 245, 155, .18), transparent 34%);
  box-shadow: var(--pob08-shadow);
}

.pob-empty-state {
  padding: clamp(24px, 5vw, 44px);
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 12px;
  color: rgba(235, 255, 246, .8);
}

.pob-empty-state::before,
.pob-system-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, .055), transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 80px);
  opacity: .32;
  pointer-events: none;
}

.pob-empty-icon {
  width: 68px;
  height: 68px;
  border-radius: 22px;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  background: linear-gradient(135deg, rgba(54, 245, 155, .18), rgba(64, 200, 255, .12));
  border: 1px solid rgba(110, 255, 196, .2);
  box-shadow: 0 0 28px rgba(54, 245, 155, .14);
}

.pob-empty-state h3 {
  position: relative;
  margin: 0;
  color: #fff;
  font-size: clamp(1.25rem, 4vw, 2rem);
}

.pob-empty-state p {
  position: relative;
  max-width: 620px;
  margin: 0;
  color: rgba(235, 255, 246, .72);
}

.pob-toast-stack {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99990;
  display: grid;
  gap: 12px;
  width: min(390px, calc(100vw - 36px));
}

.pob-toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(7, 18, 23, .88);
  backdrop-filter: blur(18px);
  box-shadow: 0 18px 60px rgba(0,0,0,.38);
  color: rgba(235, 255, 246, .82);
  transform: translateX(22px);
  opacity: 0;
  animation: pob08ToastIn .32s ease forwards;
}

.pob-toast b {
  color: #fff;
  display: block;
  margin-bottom: 2px;
}

.pob-toast i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  margin-top: 6px;
  background: var(--pob08-green);
  box-shadow: 0 0 20px rgba(54,245,155,.7);
}

.pob-toast button {
  appearance: none;
  border: 0;
  color: rgba(255,255,255,.62);
  background: transparent;
  font-size: 1.1rem;
  cursor: pointer;
}

.notice,
.alert,
.panel-warning,
.panel-center-message > div {
  position: relative;
  overflow: hidden;
}

.notice::after,
.alert::after,
.panel-warning::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 0 35%, rgba(255,255,255,.065), transparent 65% 100%);
  transform: translateX(-130%);
  animation: pob08Sheen 4.8s ease-in-out infinite;
  pointer-events: none;
}

input,
select,
textarea,
button,
a {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(54, 245, 155, .46);
  outline-offset: 3px;
}

.pob-page-error {
  min-height: 100svh;
  color: #fff;
  background:
    radial-gradient(circle at 20% 20%, rgba(54, 245, 155, .14), transparent 32%),
    radial-gradient(circle at 78% 30%, rgba(64, 200, 255, .12), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(255, 211, 90, .09), transparent 36%),
    #020609;
  overflow-x: hidden;
}

.pob-error-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: .82;
  pointer-events: none;
}

.pob-error-shell {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 36px 18px;
}

.pob-error-card {
  width: min(1120px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 24px;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(145deg, rgba(8, 23, 30, .86), rgba(3, 8, 12, .94));
  box-shadow: 0 30px 120px rgba(0,0,0,.55), 0 0 90px rgba(54,245,155,.12);
  overflow: hidden;
  position: relative;
}

.pob-error-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(255,255,255,.08), transparent 28% 72%, rgba(54,245,155,.08)),
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 88px);
  opacity: .44;
  pointer-events: none;
}

.pob-error-main,
.pob-error-side {
  position: relative;
  padding: clamp(28px, 6vw, 56px);
}

.pob-error-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.pob-error-logo img {
  width: 68px;
  height: 68px;
  object-fit: contain;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,.42));
}

.pob-error-code {
  margin: 34px 0 0;
  font-size: clamp(4.8rem, 20vw, 10rem);
  line-height: .84;
  letter-spacing: -.08em;
  font-weight: 1000;
  color: transparent;
  background: linear-gradient(135deg, #fff, var(--pob08-gold) 48%, var(--pob08-green));
  -webkit-background-clip: text;
  background-clip: text;
  text-shadow: 0 0 44px rgba(255,211,90,.16);
}

.pob-error-main h1 {
  margin: 16px 0 12px;
  max-width: 720px;
  font-size: clamp(2rem, 6vw, 4.7rem);
  line-height: .95;
  letter-spacing: -.055em;
}

.pob-error-main p {
  max-width: 680px;
  margin: 0;
  color: rgba(235,255,246,.74);
  font-size: clamp(1rem, 2.4vw, 1.16rem);
  line-height: 1.75;
}

.pob-error-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.pob-error-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 950;
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.13);
  color: #06120b;
  background: linear-gradient(135deg, var(--pob08-gold), #fff2a8 52%, var(--pob08-green));
  box-shadow: 0 16px 40px rgba(255,211,90,.16);
}

.pob-error-btn.secondary {
  color: #fff;
  background: rgba(255,255,255,.06);
  box-shadow: none;
}

.pob-error-side {
  border-left: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.035);
  display: grid;
  align-content: center;
  gap: 14px;
}

.pob-error-radar {
  width: 230px;
  height: 230px;
  max-width: 100%;
  margin: 0 auto 10px;
  border-radius: 50%;
  border: 1px solid rgba(54,245,155,.24);
  background:
    radial-gradient(circle, transparent 0 24%, rgba(54,245,155,.08) 25% 26%, transparent 27% 49%, rgba(64,200,255,.09) 50% 51%, transparent 52%),
    conic-gradient(from 0deg, rgba(54,245,155,.32), transparent 18%, transparent 100%);
  box-shadow: inset 0 0 34px rgba(54,245,155,.13), 0 0 44px rgba(64,200,255,.1);
  position: relative;
  animation: pob08Spin 8s linear infinite;
}

.pob-error-radar::before,
.pob-error-radar::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--pob08-green);
  box-shadow: 0 0 22px rgba(54,245,155,.9);
}

.pob-error-radar::after {
  width: 52%;
  height: 1px;
  border-radius: 0;
  transform-origin: left center;
  transform: translate(0, -50%);
  background: linear-gradient(90deg, var(--pob08-green), transparent);
}

.pob-error-link-list {
  display: grid;
  gap: 10px;
}

.pob-error-link-list a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.88);
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.045);
  border-radius: 16px;
  padding: 13px 14px;
  font-weight: 850;
}

.pob-error-link-list a span {
  color: var(--pob08-green);
}

.pob-error-link-list a:hover {
  border-color: rgba(54,245,155,.32);
  background: rgba(54,245,155,.08);
  transform: translateX(3px);
}

@keyframes pob08Spin { to { transform: rotate(360deg); } }
@keyframes pob08Load {
  0% { transform: translateX(-120%); width: 38%; }
  52% { width: 72%; }
  100% { transform: translateX(260%); width: 38%; }
}
@keyframes pob08ToastIn { to { opacity: 1; transform: translateX(0); } }
@keyframes pob08Sheen { 0%, 54% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

@media (prefers-reduced-motion: reduce) {
  .pob-reveal,
  .pob-loader-bar span,
  .pob-loader-core::before,
  .pob-error-radar,
  .notice::after,
  .alert::after,
  .panel-warning::after {
    animation: none !important;
    transition: none !important;
  }
  .pob-reveal { opacity: 1; transform: none; }
  .pob-orb-cursor { display: none; }
}

@media (max-width: 860px) {
  .pob-error-card { grid-template-columns: 1fr; }
  .pob-error-side { border-left: 0; border-top: 1px solid rgba(255,255,255,.1); }
  .pob-error-main, .pob-error-side { padding: 28px; }
  .pob-error-code { letter-spacing: -.05em; }
}

@media (max-width: 640px) {
  .pob-orb-cursor { display: none; }
  .pob-page-loader { display: none; }
  .pob-error-actions { display: grid; }
  .pob-error-btn { width: 100%; }
  .pob-toast-stack { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
}