body[data-surface="private"] {
  --mirror-gold: #d5ad60;
  --mirror-cyan: #7fe7ef;
  --mirror-ink: #050607;
  --mirror-line: rgba(213, 173, 96, 0.22);
}

body[data-surface="private"] .private-panel {
  width: min(1240px, calc(100% - 32px));
  padding-block: clamp(92px, 12vw, 168px) clamp(72px, 10vw, 128px);
}

body[data-surface="private"] .private-card {
  width: 100%;
  max-width: none;
  min-height: min(720px, 78vh);
  padding: clamp(28px, 5vw, 72px);
  overflow: hidden;
  isolation: isolate;
}

body[data-surface="private"] .private-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.28;
  background:
    linear-gradient(rgba(127, 231, 239, 0.025) 1px, transparent 1px) 0 0 / 100% 5px,
    radial-gradient(circle at 75% 18%, rgba(127, 231, 239, 0.12), transparent 34%),
    radial-gradient(circle at 15% 82%, rgba(213, 173, 96, 0.1), transparent 38%);
  mix-blend-mode: screen;
}

.mirror-entry {
  position: relative;
  z-index: 1;
}

.mirror-entry {
  max-width: 680px;
}

.mirror-session-line {
  margin-top: 18px;
  color: rgba(240, 236, 227, 0.46);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mirror-session-line strong {
  color: var(--mirror-cyan);
  font-weight: 600;
}

.mirror-status {
  min-height: 1.4em;
  margin: 16px 0 0;
  color: rgba(240, 236, 227, 0.5);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

body.is-mirror-alarmed {
  overflow: hidden;
}

.mirror-alarm[hidden] {
  display: none;
}

.mirror-alarm {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: clamp(18px, 4vw, 64px);
  overflow: hidden auto;
  color: #f8f2e9;
  background:
    radial-gradient(circle at 50% 42%, rgba(115, 0, 8, 0.23), transparent 42%),
    #020101;
  opacity: 0;
  transition: opacity 180ms ease;
}

.mirror-alarm.is-active {
  opacity: 1;
}

.mirror-alarm::before,
.mirror-alarm::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

.mirror-alarm::before {
  background: #c70013;
  mix-blend-mode: screen;
  animation: mirror-alarm-flash 3.2s steps(1, end) infinite;
}

.mirror-alarm::after {
  opacity: 0.22;
  background:
    repeating-linear-gradient(180deg, transparent 0 3px, rgba(255, 255, 255, 0.075) 3px 4px),
    linear-gradient(90deg, rgba(255, 0, 24, 0.07), transparent 24%, rgba(127, 231, 239, 0.045) 74%, transparent);
  animation: mirror-alarm-roll 5s linear infinite;
}

.mirror-alarm-noise {
  position: fixed;
  inset: -20%;
  opacity: 0.13;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.85'/%3E%3C/svg%3E");
  animation: mirror-alarm-noise 170ms steps(2, end) infinite;
}

.mirror-alarm-frame {
  position: relative;
  z-index: 2;
  width: min(1040px, 100%);
  padding: clamp(24px, 3.6vw, 54px);
  border: 1px solid rgba(255, 72, 86, 0.58);
  background:
    linear-gradient(135deg, rgba(255, 31, 50, 0.075), transparent 28%, rgba(127, 231, 239, 0.025)),
    rgba(3, 2, 2, 0.92);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.025) inset,
    0 0 120px rgba(176, 0, 14, 0.18);
  clip-path: polygon(0 0, 96% 0, 100% 8%, 100% 100%, 4% 100%, 0 92%);
  transform: scale(1.08) skewX(-0.7deg);
  filter: blur(9px) contrast(1.6);
  animation:
    mirror-alarm-impact 520ms cubic-bezier(.12, .82, .2, 1) forwards,
    mirror-alarm-frame-pulse 1.9s 520ms steps(2, end) infinite;
}

.mirror-alarm-code,
.mirror-alarm-warning,
.mirror-alarm-profile,
.mirror-alarm-sequence,
.mirror-alarm-state,
.mirror-alarm-dismiss {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  text-transform: uppercase;
}

.mirror-alarm-code {
  margin: 0 0 clamp(22px, 3vw, 36px);
  color: rgba(127, 231, 239, 0.66);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
}

.mirror-alarm-warning {
  margin: 0;
  color: #ff3446;
  font-size: clamp(0.82rem, 1.55vw, 1.2rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  animation: mirror-alarm-blink 680ms steps(1, end) infinite;
}

.mirror-alarm-address {
  display: block;
  margin-top: clamp(40px, 7vw, 78px);
  overflow-wrap: anywhere;
  color: #ff4352;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: clamp(2.4rem, 7vw, 6.8rem);
  font-weight: 570;
  letter-spacing: -0.055em;
  line-height: 0.92;
  text-shadow: 0 0 30px rgba(255, 26, 48, 0.36);
}

.mirror-alarm-profile {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: clamp(20px, 2.5vw, 28px) 0 0;
  background: rgba(255, 67, 82, 0.2);
}

.mirror-alarm-profile div {
  min-width: 0;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.82);
}

.mirror-alarm-profile dt {
  margin-bottom: 7px;
  color: rgba(248, 242, 233, 0.34);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
}

.mirror-alarm-profile dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: rgba(248, 242, 233, 0.82);
  font-size: clamp(0.64rem, 1.1vw, 0.8rem);
  letter-spacing: 0.05em;
}

.mirror-alarm-sequence {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: rgba(248, 242, 233, 0.28);
  font-size: clamp(0.56rem, 1vw, 0.7rem);
  letter-spacing: 0.09em;
}

.mirror-alarm-sequence li {
  transition: color 100ms ease, text-shadow 100ms ease;
}

.mirror-alarm-sequence li::before {
  content: "[ ] ";
}

.mirror-alarm-sequence li.is-complete {
  color: #ff4352;
  text-shadow: 0 0 14px rgba(255, 30, 50, 0.38);
}

.mirror-alarm-sequence li.is-complete::before {
  content: "[X] ";
}

.mirror-alarm-state {
  margin: clamp(20px, 2.5vw, 28px) 0 0;
  color: var(--mirror-cyan);
  font-size: clamp(0.63rem, 1.1vw, 0.76rem);
  letter-spacing: 0.15em;
}

.mirror-alarm-dismiss {
  min-height: 48px;
  margin-top: 18px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 67, 82, 0.58);
  color: #f8f2e9;
  background: rgba(255, 31, 50, 0.08);
  font-size: 0.63rem;
  letter-spacing: 0.14em;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease, background 160ms ease;
}

.mirror-alarm.is-resolved .mirror-alarm-dismiss {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.mirror-alarm-dismiss:hover,
.mirror-alarm-dismiss:focus-visible {
  background: rgba(255, 31, 50, 0.2);
}

.mirror-alarm-dismiss:focus-visible {
  outline: 2px solid var(--mirror-cyan);
  outline-offset: 4px;
}

@keyframes mirror-alarm-impact {
  0% { transform: scale(1.12) skewX(-1.5deg); filter: blur(11px) contrast(2); }
  28% { transform: scale(0.985) skewX(0.8deg); filter: blur(0) contrast(1.35); }
  42% { transform: translateX(-9px) skewX(-0.4deg); }
  58% { transform: translateX(7px); }
  100% { transform: none; filter: none; }
}

@keyframes mirror-alarm-frame-pulse {
  0%, 78%, 100% {
    border-color: rgba(255, 72, 86, 0.58);
    box-shadow: 0 0 120px rgba(176, 0, 14, 0.18);
  }
  80%, 86% {
    border-color: rgba(255, 53, 70, 0.96);
    box-shadow: 0 0 0 1px rgba(255, 53, 70, 0.3) inset, 0 0 160px rgba(210, 0, 18, 0.34);
  }
}

@keyframes mirror-alarm-flash {
  0% { opacity: 0.84; }
  5% { opacity: 0; }
  9% { opacity: 0.38; }
  13%, 76% { opacity: 0; }
  78% { opacity: 0.45; }
  81%, 100% { opacity: 0; }
}

@keyframes mirror-alarm-blink {
  0%, 64% { opacity: 1; }
  65%, 78% { opacity: 0.2; }
  79%, 100% { opacity: 1; }
}

@keyframes mirror-alarm-roll {
  from { transform: translateY(-8px); }
  to { transform: translateY(8px); }
}

@keyframes mirror-alarm-noise {
  0% { transform: translate3d(-2%, 1%, 0); }
  25% { transform: translate3d(1%, -2%, 0); }
  50% { transform: translate3d(2%, 2%, 0); }
  75% { transform: translate3d(-1%, -1%, 0); }
  100% { transform: translate3d(1%, 1%, 0); }
}

@media (max-width: 580px) {
  body[data-surface="private"] .private-panel {
    width: min(100% - 18px, 1240px);
  }

  body[data-surface="private"] .private-card {
    padding: 22px 16px;
  }

  .mirror-alarm {
    align-items: start;
    padding: 10px;
  }

  .mirror-alarm-frame {
    width: 100%;
    min-height: calc(100dvh - 20px);
    padding: 24px 18px 28px;
    clip-path: polygon(0 0, 94% 0, 100% 4%, 100% 100%, 6% 100%, 0 96%);
  }

  .mirror-alarm-code {
    margin-bottom: clamp(28px, 8vh, 64px);
  }

  .mirror-alarm-address {
    font-size: clamp(2.3rem, 11vw, 3.4rem);
  }

  .mirror-alarm-profile,
  .mirror-alarm-sequence {
    grid-template-columns: 1fr;
  }

  .mirror-alarm-sequence {
    gap: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mirror-alarm,
  .mirror-alarm::before,
  .mirror-alarm::after,
  .mirror-alarm-noise,
  .mirror-alarm-frame,
  .mirror-alarm-warning {
    animation: none;
    transition: none;
  }
}