/* CRT texture belongs to the interface surfaces, never to review media.
   These are static background layers: no viewport overlay, flicker or filters. */
:root {
  --unicorn-crt-line: rgb(25 91 56 / .022);
  --unicorn-crt-panel-line: rgb(25 91 56 / .013);
  --unicorn-crt-dark-line: rgb(153 255 189 / .038);
  --unicorn-crt-edge: rgb(72 172 110 / .055);
  --unicorn-crt-frame: rgb(147 247 181 / .11);
  --unicorn-crt-hover: rgb(78 156 108 / .13);
}
html[data-unicorn-crt="studio"] {
  --unicorn-crt-line: rgb(25 91 56 / .045);
  --unicorn-crt-panel-line: rgb(25 91 56 / .028);
  --unicorn-crt-dark-line: rgb(153 255 189 / .082);
  --unicorn-crt-edge: rgb(72 172 110 / .105);
  --unicorn-crt-frame: rgb(147 247 181 / .21);
  --unicorn-crt-hover: rgb(78 156 108 / .22);
}
html:not([data-unicorn-crt="off"]) .workspace {
  background-image:
    repeating-linear-gradient(0deg, var(--unicorn-crt-line) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 15%, transparent 45%, var(--unicorn-crt-edge) 100%);
}
html:not([data-unicorn-crt="off"]) :is(.panel, .metric, .swb-shot) {
  background-image: repeating-linear-gradient(0deg, var(--unicorn-crt-panel-line) 0 1px, transparent 1px 4px);
}
html:not([data-unicorn-crt="off"]) :is(.sidebar, .topbar) {
  background-image:
    repeating-linear-gradient(0deg, var(--unicorn-crt-dark-line) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 50% 0, rgb(134 240 175 / .045), transparent 74%);
}
html:not([data-unicorn-crt="off"]) .sidebar {
  box-shadow: inset -1px 0 0 var(--unicorn-crt-frame), inset -14px 0 30px rgb(0 0 0 / .08);
}
html:not([data-unicorn-crt="off"]) .topbar {
  box-shadow: inset 0 -1px 0 var(--unicorn-crt-frame), 0 3px 14px rgb(7 34 17 / .08);
}
html:not([data-unicorn-crt="off"]) .sidebar .nav-item.active {
  box-shadow: inset 2px 0 0 #b1f2cd, inset 0 0 17px var(--unicorn-crt-frame);
}
html:not([data-unicorn-crt="off"]) .unicorn-wordmark {
  text-shadow: 0 0 5px #ff404048, 0 0 12px #ff40401c;
}
html:not([data-unicorn-crt="off"]) .auth-card .unicorn-wordmark { text-shadow: none; }
html[data-unicorn-crt="studio"] .sidebar .unicorn-wordmark {
  text-shadow: 0 0 5px #ff40406b, 0 0 16px #ff404038;
}

/* Quiet, immediate control feedback: no movement of production content. */
html:not([data-unicorn-crt="off"]) :is(.sidebar .nav-item, .top-actions > button, .top-tools > summary, .account-menu > summary, .view-tabs button, button.primary:not(.danger)) {
  transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease, color 120ms ease;
}
@media (hover: hover) {
  html:not([data-unicorn-crt="off"]) button.primary:not(.danger):hover:not(:disabled) {
    box-shadow: 0 0 0 1px var(--unicorn-crt-hover), 0 0 12px var(--unicorn-crt-hover);
  }
  html:not([data-unicorn-crt="off"]) .sidebar .nav-item:hover:not(:disabled) {
    box-shadow: inset 2px 0 0 #94c9aa, inset 0 0 15px var(--unicorn-crt-frame);
  }
  html:not([data-unicorn-crt="off"]) .shot-card:hover:not(:disabled) {
    transform: none;
    box-shadow: 0 0 0 1px var(--unicorn-crt-hover), 0 5px 18px rgb(24 63 40 / .07);
  }
}
html:not([data-unicorn-crt="off"]) :is(button.primary:not(.danger), .sidebar .nav-item, .top-actions > button):active:not(:disabled) {
  box-shadow: inset 0 2px 5px rgb(10 54 28 / .19);
}
html:not([data-unicorn-crt="off"]) .view-tabs button:active:not(:disabled) {
  background-color: rgb(62 129 84 / .075);
}

/* A small corner preference, beside the memory archive. */
button.unicorn-display-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 34px;
  padding: 7px 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #456852;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
}
.unicorn-display-entry > small {
  font-family: var(--blader-mono);
  font-size: 9px;
  letter-spacing: .08em;
}
.sidebar-foot > .unicorn-display-entry { color: #bbdcc9; }
.sidebar-foot > .unicorn-display-entry:hover:not(:disabled) { color: #effff5; background: #213c2c; }
.account-menu .unicorn-display-entry { padding: 9px 10px; }
.unicorn-display-entry:hover:not(:disabled) { background: #e8f2eb; color: #244e34; }

dialog.unicorn-display-dialog {
  position: fixed;
  inset: auto auto 20px 18px;
  z-index: 270;
  width: 440px;
  max-width: calc(100vw - 36px);
  max-height: calc(100dvh - 40px);
  margin: 0;
  padding: 0;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #a4c4ae;
  border-radius: 9px;
  background: #f6faf7;
  color: #233e2e;
  box-shadow: 0 18px 70px rgb(5 31 14 / .28);
}
dialog.unicorn-display-dialog::backdrop { background: rgb(6 22 12 / .24); }
.unicorn-display-panel { padding: 23px; }
.unicorn-display-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 8px;
}
.unicorn-display-panel h2 { font-size: 19px; letter-spacing: -.02em; }
.unicorn-display-panel > p { color: #526d5a; font-size: 12px; line-height: 1.7; }
button.unicorn-display-close {
  display: grid;
  place-items: center;
  flex: 0 0 36px;
  min-height: 36px;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid #c6d9cc;
  border-radius: 5px;
  background: #fff;
  color: #365740;
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}
.unicorn-crt-options {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin: 19px 0 17px;
  padding: 0;
  border: 0;
}
.unicorn-crt-options > legend {
  margin-bottom: 9px;
  padding: 0;
  color: #526d5a;
  font-size: 11px;
  font-weight: 500;
}
.unicorn-crt-options > label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 72px;
  margin: 0;
  padding: 12px 78px 12px 13px;
  border: 1px solid #c8dace;
  border-radius: 6px;
  background: #fff;
  color: #294c36;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}
.unicorn-crt-options > label > input { margin: 0; accent-color: #32764c; }
.unicorn-crt-options > label > span { display: grid; gap: 3px; min-width: 0; }
.unicorn-crt-options strong { font-size: 13px; font-weight: 650; }
.unicorn-crt-options small { color: #536e5c; font-size: 11px; font-weight: 400; line-height: 1.5; }
.unicorn-crt-options > label:hover { border-color: #7da88b; background: #f2f8f4; }
.unicorn-crt-options > label:has(input:checked) { border-color: #4d9466; background: #eaf5ee; box-shadow: inset 3px 0 0 #4d9466; }
.unicorn-crt-options > label:has(input:focus-visible) { outline: 3px solid #36734c; outline-offset: 3px; }
.unicorn-crt-options > label::after {
  content: "";
  position: absolute;
  right: 13px;
  top: 50%;
  width: 47px;
  height: 34px;
  margin-top: -17px;
  border: 1px solid #9cbcaa;
  border-radius: 3px;
  background-color: #15281b;
  pointer-events: none;
}
.unicorn-crt-options > label:has(input[value="subtle"])::after {
  background-image: repeating-linear-gradient(0deg, rgb(155 255 185 / .18) 0 1px, transparent 1px 4px);
  box-shadow: inset 0 0 7px rgb(165 249 189 / .1);
}
.unicorn-crt-options > label:has(input[value="studio"])::after {
  background-image: repeating-linear-gradient(0deg, rgb(155 255 185 / .4) 0 1px, transparent 1px 4px);
  box-shadow: inset 0 0 9px rgb(165 249 189 / .22), 0 0 6px rgb(105 181 128 / .2);
}
.unicorn-display-panel .unicorn-display-note {
  margin: 0;
  padding-top: 13px;
  border-top: 1px solid #d3e3d7;
  font-size: 11px;
  color: #57715f;
}
@media (max-width: 520px) {
  dialog.unicorn-display-dialog { inset: auto 12px 12px; width: auto; max-width: none; max-height: calc(100dvh - 24px); }
  .unicorn-display-panel { padding: 18px; }
  .unicorn-crt-options > label { min-height: 74px; padding-right: 65px; }
  .unicorn-crt-options > label::after { right: 11px; width: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  html:not([data-unicorn-crt="off"]) :is(.sidebar .nav-item, .top-actions > button, .top-tools > summary, .account-menu > summary, .view-tabs button, button.primary:not(.danger)),
  .unicorn-crt-options > label { transition: none; }
}
@media (forced-colors: active) {
  html:not([data-unicorn-crt="off"]) :is(.workspace, .panel, .metric, .swb-shot, .sidebar, .topbar) { background-image: none; box-shadow: none; }
  html:not([data-unicorn-crt="off"]) .unicorn-wordmark { text-shadow: none; }
  .unicorn-crt-options > label::after { display: none; }
  .unicorn-crt-options > label { padding-right: 13px; }
  .unicorn-crt-options > label:has(input:checked) { border-color: Highlight; outline: 1px solid Highlight; box-shadow: none; }
  dialog.unicorn-display-dialog, .unicorn-crt-options > label, button.unicorn-display-close { background: Canvas; color: CanvasText; border-color: ButtonText; box-shadow: none; }
  .unicorn-display-panel :is(p, small, legend), .unicorn-display-entry { color: CanvasText; }
}
@media print {
  html:not([data-unicorn-crt="off"]) :is(.workspace, .panel, .metric, .swb-shot, .sidebar, .topbar) { background-image: none; box-shadow: none; }
  html:not([data-unicorn-crt="off"]) .unicorn-wordmark { text-shadow: none; }
  .unicorn-display-entry, dialog.unicorn-display-dialog { display: none !important; }
}