:root {
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
  color: #282828;
  background: #f3f3f3;
  font-size: 16px;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  display: flex;
}
aside {
  width: 230px;
  min-height: 100vh;
  background: #2e2e2e;
  color: #f1f1f1;
  padding: 36px 25px;
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.brand {
  font: italic 68px Georgia;
  line-height: 1;
}
.brand span {
  color: #c7c7c7;
}
aside strong {
  font-size: 23px;
}
nav {
  display: grid;
  gap: 10px;
}
nav button {
  background: transparent;
  color: inherit;
  text-align: left;
}
aside small {
  margin-top: auto;
  line-height: 1.8;
  opacity: 0.7;
}
main {
  margin-left: 230px;
  padding: 48px clamp(24px, 5vw, 80px);
  width: calc(100% - 230px);
  max-width: 1550px;
}
header {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: space-between;
  margin-bottom: 48px;
}
h1 {
  font: 42px/1.1 Georgia;
  margin: 12px 0;
  max-width: 600px;
}
h2 {
  font-size: 24px;
}
h3 {
  font-size: 22px;
  margin: 10px 0;
}
.eyebrow {
  letter-spacing: 0.13em;
  font-size: 11px;
  font-weight: 700;
}
.badge {
  font-size: 12px;
  background: #e2e2e2;
  padding: 10px 14px;
  border-radius: 30px;
  white-space: nowrap;
}
.muted,
small {
  color: #6b6b6b;
  line-height: 1.6;
}
button,
select,
input,
textarea {
  font: inherit;
}
button {
  cursor: pointer;
  border: 0;
  border-radius: 12px;
  background: #e7e7e7;
  padding: 12px 16px;
  min-height: 44px;
}
button:hover {
  filter: brightness(0.95);
}
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid #989898;
  outline-offset: 3px;
}
.primary {
  background: #3b3b3b;
  color: white;
}
button:disabled {
  opacity: 0.5;
  cursor: wait;
}
label {
  display: grid;
  gap: 8px;
  margin: 18px 0;
  font-size: 14px;
  font-weight: 600;
}
input,
textarea,
select {
  padding: 12px;
  border: 1px solid #cccccc;
  border-radius: 10px;
  background: #fff;
  color: #282828;
  max-width: 100%;
}
textarea {
  min-height: 100px;
  resize: vertical;
}
.sectionhead,
.actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.twocol {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.poll {
  padding: 24px 0;
  border-bottom: 1px solid #cfcfcf;
}
.poll p {
  margin: 8px 0 18px;
}
.actions {
  justify-content: flex-start;
}
.actions button {
  font-size: 13px;
  padding: 9px 12px;
}
.poll .meta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b6b6b;
}
#login {
  max-width: 480px;
  background: #fff;
  padding: 30px;
  border-radius: 24px;
}
dialog {
  border: 0;
  border-radius: 24px;
  padding: 28px;
  max-width: 950px;
  width: 90vw;
  max-height: 92vh;
  background: #f3f3f3;
  color: inherit;
}
dialog::backdrop {
  background: #23232399;
}
:is(#preview, .content-preview) {
  margin: 20px auto;
  padding: 28px;
  border-radius: 25px;
  background: #fff;
  max-width: 100%;
  transition: none;
}
:is(#preview, .content-preview).phone {
  width: 330px;
}
:is(#preview, .content-preview).tablet {
  width: 760px;
}
:is(#preview, .content-preview) h3 {
  overflow-wrap: anywhere;
  font: 28px Georgia;
}
:is(#preview, .content-preview).poster {
  background: #d5d5d5;
}
:is(#preview, .content-preview).orbit {
  background: #e8e8e8;
}
:is(#preview, .content-preview).ticket {
  border: 2px dashed #b3b3b3;
}
:is(#preview, .content-preview).editorial h3 {
  font: bold 32px Georgia;
}
:is(#preview, .content-preview).notebook {
  background: #f8f8f8;
}
.answer {
  padding: 10px 0;
  border-bottom: 1px solid #cfcfcf;
  overflow-wrap: anywhere;
}
.bar {
  height: 8px;
  background: #b2b2b2;
  border-radius: 4px;
  width: 60%;
  margin-top: 8px;
}
.bar.alt {
  width: 40%;
}
#error {
  color: #535353;
  white-space: pre-wrap;
}
#error:empty {
  display: none;
}
footer {
  margin-top: 60px;
  font-size: 13px;
  color: #6b6b6b;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 14px;
}
td,
th {
  text-align: left;
  padding: 12px;
  border-bottom: 1px solid #cfcfcf;
  overflow-wrap: anywhere;
}
.stats {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}
.stat {
  padding: 22px;
  background: white;
  border-radius: 18px;
  min-width: 190px;
}
.stat b {
  font: 40px Georgia;
  display: block;
}
.notice {
  padding: 18px;
  background: #eeeeee;
  border-radius: 15px;
  line-height: 1.6;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
[hidden] {
  display: none !important;
}
@media (max-width: 800px) {
  body {
    display: block;
  }
  aside {
    position: static;
    width: 100%;
    min-height: 0;
    flex-direction: row;
    align-items: center;
    padding: 16px;
    gap: 15px;
  }
  aside small,
  .brand {
    display: none;
  }
  aside strong {
    font-size: 15px;
  }
  nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  nav button {
    font-size: 12px;
    padding: 8px;
  }
  main {
    margin: 0;
    width: 100%;
    padding: 24px;
  }
  header {
    display: block;
  }
  h1 {
    font-size: 32px;
  }
  .twocol {
    grid-template-columns: 1fr;
  }
  table {
    display: block;
    overflow: auto;
  }
}

/* Administration: restrained, high contrast and predictable. */
h1 {
  font: 700 32px/1.2 system-ui;
}
.brand {
  display: none;
}
aside {
  background: #181818;
}
aside small {
  color: #ccc;
}
button,
input,
select,
textarea,
dialog,
#login,
.stat,
.notice {
  border-radius: 6px;
}
nav button[aria-current="page"] {
  background: #444;
  color: #fff;
}
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
  margin-bottom: 20px;
}
.toolbar label {
  flex: 1;
  min-width: 150px;
  margin: 0;
}
.tablewrap {
  overflow-x: auto;
}
th {
  font-size: 12px;
  color: #777;
}
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.stat {
  border: 1px solid #8885;
  min-width: 0;
}
.stat b {
  font: 700 30px system-ui;
}
#poll-list h3 {
  font-size: 17px;
}
.poll {
  padding: 16px 0;
}
#error,
.formerror {
  color: inherit;
  font-weight: 700;
  border-left: 4px solid currentColor;
  padding-left: 12px;
}
@media (max-width: 800px) {
  aside {
    flex-wrap: wrap;
  }
  header {
    margin-bottom: 24px;
  }
  main {
    padding: 18px;
  }
}
a {
  color: inherit;
  text-underline-offset: 3px;
}
.poll .actions {
  display: table-cell;
  vertical-align: middle;
  min-width: 200px;
}
.poll .actions button {
  margin: 3px;
}
#password-form {
  max-width: 520px;
}
:is(#preview, .content-preview).title-rounded h3 {
  font-family: ui-rounded, system-ui, sans-serif;
}
:is(#preview, .content-preview).title-serif h3 {
  font-family: ui-serif, Georgia, serif;
}
:is(#preview, .content-preview).title-standard h3 {
  font-family: system-ui, sans-serif;
}
.preview-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.preview-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 20px;
  font-size: 40px;
}
:is(#preview, .content-preview) progress {
  width: 100%;
  accent-color: currentColor;
}
.preview-stars {
  font: 48px/1.4 system-ui;
  letter-spacing: 4px;
  white-space: nowrap;
}
.rating {
  position: relative;
  width: max-content;
  max-width: 100%;
  color: #b9b9b9;
}
.rating-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 73.333%;
  overflow: hidden;
  color: #76521c;
}

/* Isolated, multi-role poll palettes. Portal chrome stays monochrome. */
:is(#preview, .content-preview) {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: 32px;
  padding: 24px;
  color: var(--ink);
  background: var(--base);
}
:is(#preview, .content-preview).lagoon {
  --ink: #0f474a;
  --base: #ccf2e8;
  --pop: #d1ef61;
  --answer: #94d6d6;
  --other: #bdd6fa;
}
:is(#preview, .content-preview).berry {
  --ink: #451f5c;
  --base: #eddbfc;
  --pop: #ffa87a;
  --answer: #c5bffa;
  --other: #fac2ba;
}
:is(#preview, .content-preview).apricot {
  --ink: #29336b;
  --base: #ffe0b8;
  --pop: #87a8ff;
  --answer: #fac28a;
  --other: #b8cfff;
}
:is(#preview, .content-preview).mode-dark {
  --ink: #f5f0fa;
  --base: #123336;
  --answer: #274c4c;
  --other: #354454;
  --pop: #52632f;
}
:is(#preview, .content-preview).berry.mode-dark {
  --base: #2e1c40;
  --answer: #4b3b63;
  --other: #573d51;
  --pop: #60422f;
}
:is(#preview, .content-preview).apricot.mode-dark {
  --base: #382621;
  --answer: #584333;
  --other: #35435d;
  --pop: #3c4d73;
}
:is(#preview, .content-preview) > :not(.motifs) {
  position: relative;
  z-index: 1;
}
:is(#preview, .content-preview) h3 {
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  line-height: 1.1;
  max-width: 95%;
  margin: 30px 0 16px;
  color: var(--ink);
}
:is(#preview, .content-preview).title-serif h3 {
  font-family: ui-serif, Georgia, serif;
  font-weight: 700;
}
:is(#preview, .content-preview).title-rounded h3 {
  font-family: ui-rounded, system-ui, sans-serif;
  font-weight: 750;
}
:is(#preview, .content-preview).title-standard h3 {
  font-family: system-ui, sans-serif;
  font-weight: 900;
  letter-spacing: -0.7px;
}
:is(#preview, .content-preview) .aside {
  font-family: ui-rounded, system-ui, sans-serif;
  font-style: italic;
  display: inline-block;
  background: var(--pop);
  border-radius: 6px 16px;
  padding: 8px 12px;
  margin: 0 0 24px;
}
:is(#preview, .content-preview) .answer {
  border: 0;
  background: var(--answer);
  color: var(--ink);
  border-radius: 24px 24px 24px 10px;
  padding: 18px;
  margin-bottom: 12px;
  min-height: 60px;
  font-weight: 650;
}
:is(#preview, .content-preview) .answer:nth-child(even) {
  background: var(--other);
}
:is(#preview, .content-preview) .preview-pair .answer {
  flex: 1;
  min-height: 140px;
  display: grid;
  place-content: center;
  border-radius: 36px;
  font-size: 1.4rem;
  text-align: center;
}
:is(#preview, .content-preview) .preview-pair .answer:nth-child(even) {
  border-radius: 22px;
}
:is(#preview, .content-preview) .motifs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
}
:is(#preview, .content-preview) .motifs span {
  position: absolute;
  right: -12px;
  top: 10px;
  font-size: 100px;
  transform: rotate(18deg);
}
:is(#preview, .content-preview) .motifs span:nth-child(2) {
  font-size: 36px;
  right: 100px;
  top: 110px;
  transform: rotate(-18deg);
}
:is(#preview, .content-preview) .motifs span:nth-child(3) {
  font-size: 22px;
  right: 24px;
  top: 160px;
}
:is(#preview, .content-preview) .emoji-cloud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 24px 0;
}
:is(#preview, .content-preview) .emoji-cloud span:nth-child(even) {
  transform: translateY(12px) rotate(6deg);
}
:is(#preview, .content-preview) progress {
  accent-color: var(--ink);
  width: 100%;
}
:is(#preview, .content-preview) button {
  background: var(--ink);
  color: var(--base);
  width: 100%;
  margin-top: 20px;
}

:is(#preview, .content-preview) .cloud-size-0 {
  font-size: 44px;
}
:is(#preview, .content-preview) .cloud-size-1 {
  font-size: 52px;
}
:is(#preview, .content-preview) .cloud-size-2 {
  font-size: 64px;
}
:is(#preview, .content-preview) .cloud-size-3 {
  font-size: 68px;
}

:is(#preview, .content-preview) small {
  color: var(--ink);
  opacity: 0.85;
}

/* Quiet editorial administration; colour belongs exclusively to content previews. */
:root {
  color-scheme: light;
  background: #fff;
  color: #171717;
}
body {
  background: #fff;
  color: #171717;
}
aside {
  background: #fafafa;
  color: #171717;
  border-right: 1px solid #ddd;
  width: 220px;
}
.brand {
  font: 700 28px system-ui;
  letter-spacing: -2px;
}
main {
  margin-left: 220px;
  width: calc(100% - 220px);
  padding: 48px clamp(20px, 4vw, 64px);
}
h1 {
  font: 600 42px/1.05 system-ui;
  letter-spacing: -1.5px;
}
h2 {
  font-size: 26px;
  letter-spacing: -0.6px;
}
.badge {
  border: 1px solid #ccc;
  background: #fff;
}
button,
input,
select,
textarea {
  border-radius: 4px;
}
button {
  min-height: 42px;
}
.primary {
  background: #171717;
  color: white;
  border: 1px solid #171717;
}
section {
  background: transparent;
}
table {
  border-collapse: collapse;
  width: 100%;
}
th {
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 11px;
}
td,
th {
  border-bottom: 1px solid #ddd;
  padding: 20px 12px;
}
.actions {
  min-width: 180px;
}
.actions button {
  margin: 3px;
}
.test-vote-panel { max-width: 38rem; }
.test-vote-panel label { display: grid; gap: 0.4rem; max-width: 14rem; margin: 1.2rem 0; }
.test-vote-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.2rem; }
.test-vote-answer { display: grid; grid-template-columns: minmax(0,1fr) 6rem auto; align-items: center; gap: 0.6rem; margin: 0.6rem 0; }
.test-vote-panel .test-vote-answer label { margin: 0; max-width: none; overflow-wrap: anywhere; }
.test-vote-answer input { width: 100%; min-width: 0; }
.exact-test-votes > button { margin: 0.3rem 0.4rem 0.3rem 0; }
.admin-emoji-cloud { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.1rem 0.3rem; max-width: 38rem; min-height: 12rem; padding: 0.75rem; }
.admin-emoji-cloud span { display: inline-block; line-height: 1.08; transition: font-size 220ms ease, transform 220ms ease; }
.listing-preview { max-width: min(100%, 520px); margin-top: 1rem; }
.listing-preview > small { display: block; margin-bottom: 0.55rem; font-size: 0.67rem; font-weight: 700; letter-spacing: 0.12em; opacity: 0.65; }
.listing-preview .studio-content-preview { min-height: 0; }
.listing-preview .native-text-preview { padding: 1rem 0; }
.submission-settings { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 1.2rem; margin: 1rem 0 1.4rem; border: 1px solid #d9dce0; border-radius: 20px; }
.submission-settings p { margin: 0.4rem 0 0; max-width: 46rem; }
.setting-switch { display: flex; align-items: center; gap: 0.65rem; white-space: nowrap; font-weight: 650; }
.setting-switch input { width: 1.25rem; height: 1.25rem; }
@media (max-width: 700px) { .submission-settings { align-items: flex-start; flex-direction: column; } }
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  border-bottom: 1px solid #ddd;
  padding: 20px 0;
}
.number {
  font-size: 32px;
  font-weight: 600;
}
.content-list {
  padding: 0;
  list-style: none;
}
.content-list li {
  border-top: 1px solid #ddd;
  padding: 16px 0;
  display: grid;
  gap: 6px;
}
.content-list small,
.content-list span {
  font-size: 13px;
  color: #555;
}
.word-editor {
  white-space: pre-wrap;
  line-height: 2.6;
  padding: 16px;
  border: 1px solid #ccc;
}
.word-editor button {
  padding: 2px 5px;
  min-height: 36px;
  background: #fff;
  color: #222;
  border: 1px solid #ddd;
}
.word-editor button[aria-pressed="true"] {
  font-weight: 800;
  background: #222;
  color: white;
}
.formatted-text {
  white-space: pre-wrap;
  font-weight: 500 !important;
}
.formatted-text strong {
  font-weight: 900;
}
dialog {
  max-width: min(1000px, 96vw);
  max-height: 92vh;
  background: #fff;
  color: #171717;
}
pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 12px;
}
.content-preview {
  margin: 24px auto;
  max-width: 660px;
}
.content-preview.phone {
  max-width: 390px;
}
.muted {
  color: #606060;
}
input,
textarea,
select {
  background: #fff;
  color: #171717;
  border-color: #aaa;
}
@media (max-width: 850px) {
  body {
    display: block;
  }
  aside {
    position: static;
    width: 100%;
    min-height: 0;
    inset: auto;
    padding: 20px;
    border-right: 0;
    border-bottom: 1px solid #ddd;
    gap: 14px;
  }
  aside nav {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  aside small {
    margin-top: 0;
  }
  main {
    margin-left: 0;
    width: 100%;
    padding: 24px 16px;
  }
  header {
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
  }
  h1 {
    font-size: 32px;
  }
  .twocol {
    grid-template-columns: 1fr;
  }
  .tablewrap {
    overflow-x: auto;
  }
  dialog {
    width: 96vw;
    padding: 20px;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
}

#login {
  background: #fff;
  color: #171717;
  border: 1px solid #d8d8d8;
  box-shadow: none;
}
aside small {
  color: #555;
}
button {
  background: #f5f5f5;
  color: #171717;
}
nav button {
  background: transparent;
}
nav button[aria-current="page"],
.primary {
  background: #171717;
  color: #fff;
}
.stat,
.notice {
  background: #f7f7f7;
  color: #171717;
}

form label,
.twocol > * {
  min-width: 0;
}
input,
select,
textarea {
  max-width: 100%;
  min-width: 0;
}
dialog form {
  min-width: 0;
}
dialog select {
  width: 100%;
}

.credit {
  font:
    0.75rem/1.5 system-ui,
    sans-serif;
  opacity: 0.8;
  margin-block: 1rem 0;
}

/* Editorial workbench: quiet controls, coloured student preview. */
.editor-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(300px, 1fr);
  gap: 32px;
  align-items: start;
}
.editor-preview {
  position: sticky;
  top: 0;
  padding: 18px;
  background: #f6f6f6;
  border: 1px solid #ddd;
  min-width: 0;
}
.editor-fields {
  min-width: 0;
}
.editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid #ddd;
}
.editor-actions button {
  flex: 1 1 150px;
}
.editor-fields label {
  margin-top: 14px;
}
#text-bold {
  margin-top: 12px;
}
#text-words[hidden] {
  display: none;
}
#preview {
  padding: 18px;
  border-radius: 24px;
  min-height: 0;
  max-width: 100%;
  margin: 18px auto;
}
#preview h3 {
  font-size: 1.4rem;
  line-height: 1.25;
  margin: 0 0 14px;
  max-width: 100%;
}
#preview .answer {
  padding: 12px;
  min-height: 44px;
  margin-bottom: 8px;
}
#preview .preview-pair .answer {
  min-height: 56px;
  font-size: 1.1rem;
  border-radius: 18px;
}
#preview .aside {
  display: none;
}
#preview.tablet {
  max-width: 100%;
}
.editor-preview .content-preview {
  max-width: 100%;
  margin: 18px 0;
}
#texts th {
  background: #f6f6f6;
}
#error:not(:empty) {
  padding: 12px;
  border: 1px solid #999;
  color: #222;
  background: #fafafa;
}
button:focus-visible {
  outline: 3px solid #555;
  outline-offset: 3px;
}
@media (max-width: 760px) {
  .editor-grid {
    grid-template-columns: 1fr;
  }
  .editor-preview {
    position: static;
    grid-row: 1;
  }
  dialog {
    max-width: 96vw;
  }
  .actions {
    min-width: 0;
  }
  td,
  th {
    padding: 14px 8px;
  }
}

#preview input[disabled] {
  font-size: 1.5rem;
  text-align: center;
  width: 100%;
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
  border: 0;
  border-radius: 14px;
  padding: 12px;
}
#preview.phone {
  max-width: 390px;
}
#preview.tablet {
  max-width: 660px;
}
.editor-fields > label[hidden] {
  display: none;
}
@media (max-width: 760px) {
  .editor-preview {
    grid-row: auto;
  }
  .editor-preview label {
    margin-top: 0;
  }
  .editor-preview {
    padding: 12px;
  }
}

.binary-ratio {
  display: flex;
  gap: 3px;
  height: 28px;
  margin: 16px 0;
}
.binary-ratio span:first-child {
  flex: 1;
  background: var(--ink);
  border-radius: 16px;
}
.binary-ratio span:last-child {
  flex: 2;
  background: var(--other);
  border-radius: 16px;
}
.editor-preview .sectionhead {
  display: block;
}
.editor-preview .sectionhead select {
  margin-top: 8px;
}

#preview .motifs{opacity:.12}#preview .motifs span{font-size:58px}#preview .motifs span:nth-child(2){font-size:25px;top:40px;right:55px}#preview .motifs span:nth-child(3){font-size:16px;top:65px}

/* Editorial dashboard: quiet chrome, clear decisions. */
:root { background: #f7f7f5; color: #181818; }
aside { background: #171717; color: #f5f5f5; width: 224px; padding: 30px 18px; gap: 20px; }
aside small { color: #b9b9b9; opacity: 1; }
aside strong { font-size: 17px; line-height: 1.25; padding: 2px 10px 14px; }
nav { gap: 3px; }
nav button { color: #e8e8e8; border-radius: 8px; padding: 11px 12px; min-height: 40px; font-size: 14px; }
nav button:hover { background: #303030; filter: none; }
nav button[aria-current="page"] { background: #fff; color: #151515; }
main { margin-left: 224px; width: calc(100% - 224px); padding: 36px clamp(24px, 4vw, 64px); max-width: none; }
header { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid #e0e0dc; }
header h1 { font-size: 24px; letter-spacing: -.03em; margin: 4px 0 0; }
.badge { background: #ededeb; padding: 8px 11px; border-radius: 6px; color: #373737; }
.studio-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.studio-heading .eyebrow { margin: 0 0 5px; color: #777; }
.studio-heading h2 { font-size: clamp(28px, 3vw, 38px); letter-spacing: -.045em; line-height: 1.1; margin: 0; }
.studio-heading .muted { margin: 10px 0 0; max-width: 640px; }
.studio-heading > small { white-space: nowrap; }
.studio-create { display: flex; gap: 10px; flex-wrap: wrap; margin: 25px 0; }
.studio-create button { background: #181818; color: #fff; min-width: 165px; font-weight: 650; border-radius: 8px; }
.studio-create button + button { background: #fff; color: #181818; border: 1px solid #d7d7d2; }
.studio-create button:hover { filter: brightness(.88); }
.studio-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid #deded9; border-radius: 10px; background: #fff; overflow: hidden; margin-bottom: 20px; }
.studio-summary > div { display: flex; align-items: baseline; gap: 10px; padding: 15px 20px; border-right: 1px solid #e8e8e4; }
.studio-summary > div:last-child { border: 0; }
.studio-summary strong { font-size: 26px; line-height: 1; }
.studio-summary span { font-size: 13px; color: #5f5f5b; }
.studio-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 18px; align-items: start; }
.studio-layout > div { display: grid; gap: 18px; min-width: 0; }
.studio-panel { background: #fff; border: 1px solid #deded9; border-radius: 10px; padding: 23px; min-width: 0; }
.studio-panel-head { display: flex; justify-content: space-between; gap: 15px; margin-bottom: 18px; }
.studio-panel .eyebrow { margin: 0 0 4px; color: #777; }
.studio-panel h3 { font-size: 19px; letter-spacing: -.025em; margin: 0; }
.studio-panel .number { color: #777; font-size: .8em; margin-left: 4px; }
.studio-empty { border: 1px dashed #d5d5d0; border-radius: 8px; background: #fafaf8; padding: 20px; color: #62625f; line-height: 1.45; }
.studio-live-item { display: flex; gap: 15px; align-items: start; border-top: 1px solid #ebebe8; padding: 16px 0; }
.studio-live { margin-bottom: 18px; }
.studio-preview-grid, .moderation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.studio-preview-grid .studio-live-item { display: block; border: 0; padding: 0; }
.studio-preview-meta, .moderation-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 0; }
.moderation-meta p { flex-basis: 100%; margin: 0; color: #666; font-size: 13px; }
.moderation-meta strong { font-size: 12px; color: #555; }
.moderation-card { border: 1px solid #e2e2df; border-radius: 12px; padding: 14px; min-width: 0; background: #fff; }
.moderation-card .studio-card-actions { margin-top: 14px; }
.studio-content-preview { width: 100%; max-width: none; margin: 0; min-height: 180px; }
.studio-content-preview h3 { margin: 4px 0 16px !important; overflow-wrap: anywhere; }
.studio-content-preview .answer { min-height: 42px; padding: 10px 13px; margin-bottom: 7px; }
.studio-content-preview .preview-pair .answer { min-height: 70px; border-radius: 20px; font-size: 1.1rem; }
.studio-content-preview .preview-poles { display: flex; justify-content: space-between; gap: 12px; font-size: .85rem; font-weight: 650; }
.studio-content-preview .preview-scale { height: 8px; border-radius: 10px; background: var(--answer); margin: 22px 0 10px; position: relative; }
.studio-content-preview .preview-scale span { position: absolute; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); left: 50%; top: 50%; transform: translate(-50%,-50%); }
.studio-content-preview .emoji-cloud { font-size: 1.9rem; letter-spacing: .2em; text-align: center; }
.studio-content-preview .preview-stars { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.studio-live-item:first-of-type { border-top: 0; }
.studio-live-item div { display: grid; gap: 6px; min-width: 0; }
.studio-live-item strong { font-size: 16px; line-height: 1.35; }
.studio-live-item small { color: #696966; }
.studio-pill { display: inline-block; border: 1px solid #d3d3cf; border-radius: 100px; background: #f8f8f6; padding: 4px 9px; color: #4d4d4a; font-size: 11px; font-weight: 750; letter-spacing: .02em; white-space: nowrap; }
.studio-proposal { border-top: 1px solid #ebebe8; padding: 19px 0 4px; }
.studio-proposal-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.studio-proposal-meta small { color: #747470; }
.studio-proposal h4 { font-size: 18px; letter-spacing: -.02em; line-height: 1.35; margin: 11px 0 6px; overflow-wrap: anywhere; }
.studio-proposal p { margin: 0 0 15px; color: #666; font-size: 13px; }
.studio-card-actions { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.studio-card-actions button, .studio-card-actions select { min-height: 36px; padding: 7px 10px; font-size: 12px; border-radius: 6px; }
.studio-card-actions select { width: auto; max-width: 200px; margin: 0; }
.studio-card-actions button:nth-child(2) { background: #1c1c1c; color: #fff; }
.studio-next-item { display: grid; gap: 4px; border-left: 2px solid #deded8; margin-left: 4px; padding: 0 0 23px 18px; position: relative; }
.studio-next-item:last-child { padding-bottom: 0; }
.studio-next-item::before { content: ""; position: absolute; width: 8px; height: 8px; background: #1c1c1c; border-radius: 50%; top: 3px; left: -5px; }
.studio-next-item small, .studio-next-item span { color: #6a6a66; }
.studio-next-item strong { line-height: 1.3; }
.studio-help { margin: -6px 0 18px; font-size: 12px; line-height: 1.4; color: #666; }
.studio-secondary { background: #fdfdfc; }
.studio-secondary p:last-child { color: #666; line-height: 1.5; margin-bottom: 0; }

/* Both editors use the same three decisions: content, look, publishing. */
dialog:is(#editor, #text-editor) { width: min(1120px, 96vw); max-width: 1120px; max-height: 94vh; padding: 0; border-radius: 12px; background: #fff; }
dialog:is(#editor, #text-editor)::backdrop { background: #101010a8; }
dialog:is(#editor, #text-editor) .editor-grid { gap: 0; grid-template-columns: minmax(0, 1fr) minmax(330px, .85fr); }
.editor-fields { padding: 28px 32px 40px; max-height: 94vh; overflow-y: auto; }
.editor-fields > .sectionhead { position: sticky; top: -28px; z-index: 4; background: #fff; padding: 5px 0 17px; border-bottom: 1px solid #e7e7e4; margin: 0 0 12px; }
.editor-fields > .sectionhead h2 { margin: 0; font-size: 24px; letter-spacing: -.025em; }
.editor-fields > .sectionhead button { min-height: 36px; padding: 6px 10px; }
.editor-step-title { border-top: 1px solid #e9e9e5; padding-top: 22px; margin: 27px 0 8px; }
.editor-fields > .sectionhead + .editor-step-title { border-top: 0; padding-top: 7px; margin-top: 0; }
.editor-step-title small { color: #7d7d79; font-size: 11px; font-weight: 800; letter-spacing: .12em; }
.editor-step-title h3 { font-size: 18px; margin: 3px 0; letter-spacing: -.02em; }
.editor-step-title p { font-size: 13px; color: #6a6a66; line-height: 1.4; margin: 4px 0 0; }
.editor-fields label { margin: 13px 0; }
.editor-fields textarea { min-height: 85px; }
.editor-fields select, .editor-fields input, .editor-fields textarea { border-radius: 7px; }
.editor-fields .editor-actions { position: sticky; bottom: -40px; z-index: 3; background: #fff; margin: 25px -32px -40px; padding: 16px 32px 22px; border-top: 1px solid #ddd; box-shadow: 0 -8px 20px #fff; }
.editor-actions button { flex: 1 1 170px; }
.editor-preview { top: 0; height: 94vh; overflow-y: auto; border: 0; border-left: 1px solid #e1e1dd; background: #f5f5f2; padding: 28px; }
.editor-preview::before { content: "VORSCHAU IN DER APP"; display: block; font-size: 11px; font-weight: 800; letter-spacing: .12em; margin-bottom: 14px; color: #777; }
.repeat-options { border: 1px solid #dfdfdb; border-radius: 7px; padding: 12px 15px; margin: 14px 0; }
.repeat-options summary { cursor: pointer; font-weight: 650; }
.repeat-options p { font-size: 13px; }
#publish-confirm { width: min(440px, calc(100vw - 32px)); border-radius: 12px; padding: 0; background: #fff; }
.confirm-content { padding: 28px; }
.confirm-content h2 { font-size: 22px; margin: 8px 0; }
.confirm-content > p:not(.eyebrow) { color: #555; line-height: 1.5; white-space: pre-line; }
.confirm-actions { display: flex; justify-content: end; gap: 8px; margin-top: 24px; }
@media(max-width: 980px) { .studio-layout { grid-template-columns: 1fr; } .studio-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .studio-summary > div:nth-child(2) { border-right: 0; } .studio-summary > div:nth-child(-n+2) { border-bottom: 1px solid #e8e8e4; } }
@media(max-width: 800px) { aside { position: static; width: 100%; min-height: 0; flex-direction: row; flex-wrap: wrap; padding: 16px; } aside strong { padding: 0; } aside nav { flex: 1 1 100%; display: flex; overflow-x: auto; flex-wrap: nowrap; } nav button { white-space: nowrap; } main { margin: 0; width: 100%; padding: 22px; } }
@media(max-width: 760px) { .studio-summary { grid-template-columns: 1fr; } .studio-summary > div { border-right: 0; border-bottom: 1px solid #e8e8e4; } .studio-summary > div:last-child { border-bottom: 0; } .studio-heading { display: block; } .studio-heading > small { display: block; margin-top: 10px; } dialog:is(#editor, #text-editor) .editor-grid { grid-template-columns: 1fr; } .editor-fields { max-height: none; overflow: visible; padding: 20px; } .editor-fields > .sectionhead, .editor-fields .editor-actions { position: static; margin-inline: 0; padding-inline: 0; } .editor-preview { height: auto; max-height: none; border-left: 0; border-top: 1px solid #ddd; padding: 18px; } }
/* One card, one scroll surface, persistent tools and publishing actions. */
dialog#editor.direct-editor {width:min(940px,calc(100vw - 24px));max-width:none;height:min(840px,var(--editor-height,calc(100dvh - 24px)));max-height:var(--editor-height,calc(100dvh - 24px));padding:20px;overflow:hidden;}
.direct-poll-editor {height:100%;display:flex;flex-direction:column;gap:10px;position:relative;min-height:0;}
.direct-poll-editor > .sectionhead {margin:0;flex:none;}
.direct-poll-editor h2 {font-size:1.25rem;margin:0;}
.direct-poll-editor > label {margin:0;}
.direct-poll-editor > label select {max-width:360px;}
.poll-origin:empty {display:none;}
.poll-origin {margin:0;font-size:.85rem;}
.poll-view-controls {display:flex;gap:8px;flex-wrap:wrap;}
.poll-view-controls select {width:auto;min-width:0;margin:0;padding:6px;font-size:.8rem;}
.poll-canvas-scroll {overflow:auto;min-height:0;flex:1;padding:12px 4px;scroll-padding:20px;}
.direct-poll-editor #preview {min-height:0;margin:0 auto;width:100%;box-sizing:border-box;padding:24px;}
.direct-poll-editor #preview.phone {max-width:390px;}
.direct-poll-editor #preview.tablet {max-width:680px;}
.direct-poll-editor #preview textarea {display:block;background:transparent;border:0;border-radius:6px;box-shadow:none;resize:none;overflow:hidden;color:var(--ink);width:100%;min-height:0;margin:0;padding:4px;font:inherit;line-height:1.25;}
.direct-poll-editor #preview textarea::placeholder {color:var(--ink);opacity:.65;}
.direct-poll-editor #preview textarea:focus-visible {outline:2px solid currentColor;outline-offset:2px;}
.direct-poll-editor #preview .inline-question {font-size:1.9rem;line-height:1.15;font-weight:750;margin:0 0 18px;}
.direct-poll-editor #preview.title-serif .inline-question {font-family:ui-serif,Georgia,serif;}
.direct-poll-editor #preview.title-rounded .inline-question {font-family:ui-rounded,system-ui,sans-serif;}
.direct-poll-editor #preview.title-standard .inline-question {font-family:system-ui,sans-serif;font-weight:900;}
.direct-poll-editor #preview .inline-answer {display:flex;align-items:center;gap:4px;padding:10px;margin:0 0 8px;border-radius:16px;min-width:0;}
.answer-tools {display:flex;flex:none;}
.answer-tools button {background:transparent;color:inherit;border:0;padding:0;min-width:26px;min-height:36px;font-size:1rem;}
.answer-add {background:transparent;color:inherit;border:1px dashed currentColor;}
.inline-poles {display:grid;grid-template-columns:1fr 1fr;gap:8px;}
.inline-poles input {grid-column:1/-1;}
.poll-tools {display:flex;justify-content:center;gap:8px;flex:none;}
.poll-tools button {min-height:44px;color:#171717;background:#f2f2f2;border:1px solid #ddd;}
.poll-tools button:hover,.poll-tools button[aria-expanded=true] {background:#171717;color:white;}
.direct-poll-editor #preview .answer-tools button {background:transparent;color:var(--ink);width:auto;}
.direct-poll-editor #preview .answer-add {background:transparent;color:var(--ink);}
.poll-save-status {text-align:center;color:#666;font-size:.75rem;}
.direct-poll-editor .editor-actions {display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;margin:0;padding-top:10px;border-top:1px solid #ddd;flex:none;}
.poll-tool-panel {position:absolute;bottom:125px;left:50%;transform:translateX(-50%);z-index:10;background:white;color:#171717;border:1px solid #ccc;border-radius:18px;padding:20px;width:min(420px,95%);box-sizing:border-box;box-shadow:0 8px 40px #0002;max-height:calc(100% - 140px);overflow:auto;}
.poll-tool-panel[hidden] {display:none;}
.poll-tool-panel h3 {margin:0 0 12px;}
.poll-tool-panel label {margin:8px 0;}
.poll-tool-panel .twocol {display:block;}
.direct-editor .formerror {position:absolute;top:65px;left:20px;right:20px;background:white;color:#a00000;z-index:20;border:1px solid;padding:10px;}
@media(max-width:600px){dialog.direct-editor{width:100vw;height:var(--editor-height,100dvh);max-height:var(--editor-height,100dvh);margin:0;padding:12px;border-radius:0;}.direct-poll-editor #preview{padding:18px;}.direct-poll-editor .editor-actions button{flex:1;padding:10px 6px;font-size:.8rem;}.poll-tool-panel{bottom:120px;width:100%;}.answer-tools button{min-width:24px;}.direct-poll-editor > label select{width:100%;}.poll-view-controls{gap:4px;}}

/* Admin workspace: quiet contrast, compact navigation and clear editorial hierarchy. */
html { scrollbar-gutter: stable; }
body { background:#f8f8f7; color:#171717; min-width:0; }
aside { width:232px; height:100dvh; min-height:0; overflow-y:auto; padding:25px 17px; border-right:1px solid #333; }
aside .brand { font-size:48px; margin:0 10px -10px; }
aside strong { font-size:17px; letter-spacing:-.025em; }
aside nav { display:grid; gap:3px; }
aside nav button { width:100%; min-height:42px; padding:10px 12px; border-radius:8px; font-weight:540; }
aside nav button[aria-current="page"] { font-weight:730; box-shadow:0 1px 3px #0002; }
aside #password-button,aside #logout { width:100%; text-align:left; background:#303030; color:white; }
main { width:calc(100% - 232px); margin-left:232px; max-width:none; padding:30px clamp(24px,4vw,68px) 70px; }
main > header { margin-bottom:25px; padding-bottom:20px; }
main > header h1 { font:700 25px/1.15 system-ui,-apple-system,sans-serif; letter-spacing:-.045em; }
main > header .eyebrow { color:#666; }
button { border-radius:8px; transition:background .15s ease,border-color .15s ease,transform .15s ease; }
button:not(:disabled):active { transform:translateY(1px); }
.studio-panel,.studio-summary { border-color:#dededb; box-shadow:0 4px 20px #00000005; }
.studio-panel { padding:clamp(18px,2.2vw,27px); }
.studio-summary { margin-bottom:24px; }
.studio-preview-grid { align-items:start; }
.studio-live-item .native-text-preview { padding:14px 0; }
.studio-live-item .native-text-preview .note-body { display:block; }
.studio-live-item > button { margin-top:12px; background:#f0f0ee; border:1px solid #dededb; }

.daily-head h2 { font:700 clamp(28px,3.4vw,42px)/1.1 system-ui,-apple-system,sans-serif; letter-spacing:-.055em; margin:5px 0 8px; }
.daily-head .muted { margin:0; max-width:58ch; }
.daily-toolbar { display:flex; gap:12px; align-items:end; flex-wrap:wrap; margin:22px 0; }
.daily-toolbar label { margin:0; min-width:240px; }
.daily-toolbar select { min-height:44px; }
.daily-toolbar button { min-height:44px; }
.daily-now { display:grid; grid-template-columns:minmax(190px,.8fr) minmax(0,1.5fr); gap:10px 30px; align-items:center; background:#fff; border:1px solid #dededb; border-radius:14px; padding:clamp(20px,3vw,34px); box-shadow:0 10px 35px #00000008; }
.daily-now-label h3 { font-size:clamp(21px,2vw,28px); margin:4px 0 8px; letter-spacing:-.035em; }
.daily-now-label p:last-child { color:#646464; font-size:14px; line-height:1.5; }
.daily-now-card { min-width:0; border-left:1px solid #e8e8e5; padding:8px 10px 8px 28px; }
.daily-now-card .native-text-preview { margin:0; }
.daily-now-card .formatted-text { max-width:28ch; }
.daily-now-actions { grid-column:1/-1; display:flex; gap:9px; flex-wrap:wrap; border-top:1px solid #ececea; padding-top:18px; margin-top:6px; }
.daily-now-actions button { background:#efefed; font-weight:600; }
.daily-now-actions button:last-child { background:#171717; color:#fff; }
.daily-next { background:#f0f0ee; border:1px solid #e2e2df; border-radius:12px; padding:19px 25px; margin:15px 0 28px; }
.daily-next h3 { font-size:18px; margin:4px 0 6px; line-height:1.3; }
.daily-next .muted { margin:0; font-size:13px; }
.daily-library { border-top:1px solid #dededb; padding-top:24px; }
.daily-list-head { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.daily-list-head h3 { margin:3px 0 0; font-size:24px; letter-spacing:-.035em; }
.daily-list-head label { min-width:min(280px,100%); margin:0; }
.daily-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr)); gap:14px; }
.daily-item { min-width:0; display:flex; flex-direction:column; padding:20px; background:#fff; border:1px solid #e2e2df; border-radius:12px; }
.daily-item .native-text-preview { min-height:115px; margin:0; display:flex; align-items:center; }
.daily-item .native-text-preview .note-body { width:100%; }
.daily-item .formatted-text { font-size:clamp(23px,2.5vw,32px)!important; }
.daily-item-meta { display:flex; flex-wrap:wrap; gap:5px; padding-top:14px; border-top:1px solid #ececea; }
.daily-item > p { color:#686868; font-size:12px; line-height:1.45; margin:10px 0 14px; }
.daily-item-actions { margin-top:auto; display:flex; flex-wrap:wrap; gap:7px; }
.daily-item-actions button { min-height:38px; padding:7px 11px; font-size:12px; border:1px solid #ddd; background:#f6f6f5; }
.daily-item-actions button:last-child:not(:first-child) { background:#202020; color:#fff; border-color:#202020; }
.daily-dialog { max-width:950px; background:#fafafa; }
.daily-dialog-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(250px,.9fr); gap:30px; align-items:start; }
.daily-dialog h2 { margin:2px 0 10px; }
.daily-dialog .eyebrow { color:#666; margin:0; }
.daily-dialog .daily-check { display:flex; align-items:center; gap:9px; }
.daily-dialog .daily-check input { width:18px; height:18px; }
.daily-edit-preview { background:#fff; border:1px solid #e6e6e2; border-radius:12px; padding:24px; min-height:250px; }
.daily-edit-preview > small { font-size:11px; letter-spacing:.1em; font-weight:700; }
.daily-edit-preview .native-text-preview { margin-top:28px; }
@media(max-width:1000px) { .daily-now { grid-template-columns:1fr 1.3fr; } }
@media(max-width:800px) {
  aside { position:static; width:100%; height:auto; overflow:visible; padding:15px 20px; display:grid; grid-template-columns:1fr auto auto; gap:8px 12px; align-items:center; }
  aside .brand,aside small { display:none; }
  aside strong { grid-column:1; margin:0; padding:0; font-size:16px; }
  aside #password-button,aside #logout { width:auto; font-size:12px; padding:8px 10px; min-height:34px; }
  aside nav { grid-column:1/-1; display:flex; flex-wrap:wrap; overflow:visible; gap:5px; margin-top:8px; }
  aside nav button { width:auto; flex:0 0 auto; min-height:36px; padding:8px 11px; white-space:normal; font-size:13px; }
  main { margin:0; width:100%; padding:24px 20px 55px; }
  .studio-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .studio-summary > div { border-bottom:1px solid #e8e8e4; }
  .daily-now { grid-template-columns:1fr; }
  .daily-now-card { border-left:0; border-top:1px solid #e8e8e5; padding:18px 0 0; }
}
@media(max-width:550px) {
  aside { grid-template-columns:1fr auto; }
  aside strong { grid-column:1; }
  aside #password-button { display:none; }
  aside nav { gap:4px; }
  aside nav button { font-size:12px; min-height:35px; padding:7px 9px; }
  main { padding:20px 16px 50px; }
  main > header { margin-bottom:18px; gap:8px; align-items:start; }
  main > header h1 { font-size:21px; }
  main > header .badge { font-size:10px; padding:7px 9px; white-space:normal; max-width:145px; }
  .studio-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .studio-summary > div { display:grid; gap:3px; padding:13px; border-right:1px solid #e8e8e4; }
  .studio-summary > div:nth-child(2n) { border-right:0; }
  .studio-summary > div:nth-last-child(-n+2) { border-bottom:0; }
  .studio-summary strong { font-size:23px; }
  .daily-toolbar label { flex:1 1 100%; }
  .daily-list-head { display:block; }
  .daily-list-head label { margin-top:15px; }
  .daily-dialog { width:100vw; max-height:100dvh; height:100dvh; margin:0; border-radius:0; padding:18px; }
  .daily-dialog-grid { grid-template-columns:1fr; gap:16px; }
  .daily-edit-preview { min-height:150px; }
}
@media(prefers-reduced-motion:reduce){button{transition:none;}}


@font-face {font-family:Caveat;src:url('/fonts/Caveat.ttf') format('truetype');font-weight:100 900;font-display:swap;}
:is(#preview,.content-preview).native-text-preview {background:none;box-shadow:none;border:0;border-radius:0;padding:0;min-height:0;color:light-dark(#171717,#f5f5f5);max-width:760px;}
.native-text-preview .text-card-heading {display:flex;align-items:center;gap:10px;margin-bottom:12px;color:#777;}
.native-text-preview .text-card-heading small:empty {display:none;}
.native-text-preview .text-card-heading small {font:600 11px system-ui;letter-spacing:1.4px;}
.native-text-preview .text-card-heading span,.native-text-preview .note-arrow {color:#1f7ad9;}
.native-text-preview .note-body {position:relative;min-height:70px;}
.native-text-preview .note-motif {position:absolute;bottom:0;right:0;font-size:88px;opacity:.12;transform:rotate(-12deg);pointer-events:none;}
:is(#preview,.content-preview).native-text-preview h3.formatted-text {position:relative;white-space:pre-wrap;max-width:100%;font:600 34px/1.25 ui-rounded,system-ui;margin:0!important;overflow-wrap:anywhere;letter-spacing:normal;color:inherit;}
:is(#preview,.content-preview).day-note-poster h3.formatted-text {font-family:system-ui;font-weight:900;font-stretch:condensed;}
:is(#preview,.content-preview).day-note-editorial h3.formatted-text {font-family:ui-serif,Georgia,serif;font-weight:700;}
:is(#preview,.content-preview).day-note-laboratory h3.formatted-text {font:500 28px/1.3 ui-monospace,monospace;}
:is(#preview,.content-preview).day-note-book h3.formatted-text {font:italic 34px/1.4 ui-serif,Georgia,serif;}
:is(#preview,.content-preview).day-note-collage h3.formatted-text {font:400 36px/1.25 Caveat,cursive;}
.native-text-preview .formatted-text strong {font-weight:900;font-size:inherit;color:inherit;}
.native-text-preview .formatted-text .word-color {color:#1f7ad9;}
.native-text-preview .credit {margin:12px 0 0;font:15px/1.3 system-ui;color:#777;}
#text-preview {padding:16px;box-sizing:border-box;}
#text-preview.phone {max-width:390px;} #text-preview.tablet {max-width:760px;}
#text-preview.mode-dark {color-scheme:dark;background:#181818;}
#text-preview.mode-light {color-scheme:light;}

.day-note-laboratory .text-card-heading small {font:12px ui-monospace,monospace;letter-spacing:normal;}
.day-note-collage .text-card-heading small {font:500 12px ui-rounded,system-ui;letter-spacing:normal;}

/* Community photos keep the app's open, handwritten composition. */
.photo-admin-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr)); gap:32px; margin-top:28px; }
.photo-admin-item { padding:22px; border:1px solid var(--line,#dededb); border-radius:24px; min-width:0; }
.community-photo-preview { padding:12px 8px 8px; background:none; }
.community-photo-preview img { display:block; width:100%; height:auto; max-height:440px; object-fit:contain; border-radius:22px; transform:rotate(-2deg); margin-bottom:22px; }
.photo-submitter-caption { font-size:0.95rem; line-height:1.5; opacity:.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.photo-comment { display:flex; gap:12px; align-items:flex-start; }
.photo-comment > span { font-size:2rem; color:var(--accent,#167dd9); line-height:1.2; }
.photo-comment p { font-size:1.15rem; font-weight:550; margin:4px 0 12px; white-space:pre-wrap; overflow-wrap:anywhere; }
.photo-dates { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.photo-admin-item textarea { resize:vertical; width:100%; min-height:90px; }
.photo-admin-item .studio-card-actions { margin-top:18px; }
@media(max-width:520px) { .photo-dates { grid-template-columns:1fr; } .photo-admin-item { padding:16px; } }
@media(prefers-reduced-motion:reduce) { .community-photo-preview img { transform:none; } }

/* Text and pixels form one rounded, tilted photo, without a backing banner. */
.community-photo-canvas { position:relative; margin:0 0 20px; border-radius:22px; overflow:hidden; transform:rotate(-2deg); container-type:inline-size; }
.community-photo-canvas img { display:block; width:100%; height:auto; max-height:none; object-fit:contain; border-radius:0; transform:none; margin:0; }
.photo-overlay-text { position:absolute; left:6%; right:6%; bottom:6%; top:auto; margin:0; font:650 clamp(22px,8cqw,64px)/1.12 ui-rounded,system-ui; letter-spacing:-.02em; color:var(--photo-ink,#fff); white-space:pre-wrap; overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7; overflow:hidden; }
.photo-overlay-text strong { font-weight:900; }
.photo-overlay-text .word-color { color:var(--accent,#1586ed); }
.photo-outlined,.photo-outlined .word-color { -webkit-text-stroke:.045em var(--photo-outline,#111); paint-order:stroke fill; }
.photo-position-top { top:6%; bottom:auto; }
.photo-style-poster { font-family:system-ui; font-weight:900; font-stretch:condensed; }
.photo-style-editorial { font-family:ui-serif,Georgia,serif; font-weight:700; }
.photo-style-laboratory { font-family:ui-monospace,monospace; font-weight:500; }
.photo-style-book { font-family:ui-serif,Georgia,serif; font-style:italic; font-weight:400; }
.photo-style-collage { font-family:Caveat,cursive; font-weight:400; line-height:1.2; }
.photo-editor { width:min(1100px,96vw); max-width:96vw; max-height:92vh; overflow:auto; padding:26px; border-radius:26px; }
.photo-editor form { max-width:none; }
.photo-editor-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:38px; align-items:start; }
.photo-editor-fields { display:grid; gap:14px; min-width:0; }
.photo-editor-fields label { display:grid; gap:7px; }
.photo-editor-fields textarea { width:100%; resize:vertical; }
.photo-editor-fields input[type=color] { width:100%; height:44px; padding:5px; cursor:pointer; }
.photo-editor-fields .photo-outline-toggle { display:flex; align-items:center; gap:8px; }
.photo-editor-fields input[type=checkbox] { width:20px; height:20px; }
.photo-editor-preview { position:sticky; top:0; min-width:0; }
.photo-editor .word-token { padding:4px 6px; margin:2px; border-radius:7px; }
.photo-editor .word-token[aria-pressed=true] { color:var(--accent); background:var(--accent-soft,#dceaff); }
@media(max-width:720px) { .photo-editor { padding:18px; } .photo-editor-layout { grid-template-columns:1fr; gap:24px; } .photo-editor-preview { position:static; } }
@media(prefers-reduced-motion:reduce) { .community-photo-canvas { transform:none; } }
.photo-overlay-motif { display:block; font:400 .5em/1.3 system-ui; -webkit-text-stroke:0; margin-top:.15em; }

/* Compact poll surfaces: the same hierarchy, palette and details as the native app. */
:is(#preview, .content-preview).poll-compact {
  --poll-a0:#d4f08c;--poll-a1:#91d6d6;--poll-a2:#bdd6fa;--poll-page:#fff;--ink:#0f474a;
  background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;
  padding:8px 2px;min-height:0;max-width:620px;color:var(--ink);
  font:17px/1.3 ui-rounded,system-ui,sans-serif;
}
:is(#preview, .content-preview).poll-compact.berry {--ink:#451f5c;--poll-a0:#fac2ba;--poll-a1:#c5bffa;--poll-a2:#e8c9fa;}
:is(#preview, .content-preview).poll-compact.apricot {--ink:#29336b;--poll-a0:#fac28a;--poll-a1:#b8cfff;--poll-a2:#f7e8ad;}
:is(#preview, .content-preview).poll-compact.mode-dark {--poll-page:#000;--ink:#f5f0fa;}
.poll-canvas-scroll:has(.poll-compact.mode-dark) {background:#000;border-radius:12px;}
.poll-canvas-scroll:has(.poll-compact.mode-light) {background:#fff;}
@media(prefers-color-scheme:dark) {
  .poll-compact.mode-system {--poll-page:#000;--ink:#f5f0fa;}
  .poll-canvas-scroll:has(.poll-compact.mode-system) {background:#000;border-radius:12px;}
}
:is(#preview, .content-preview).poll-compact .poll-title {
  display:flex;align-items:flex-start;gap:10px;margin:0 0 10px;min-width:0;
}
:is(#preview, .content-preview).poll-compact .poll-title :is(h3,.inline-question) {
  flex:1;min-width:0;max-width:none;margin:0!important;padding:0;font-size:20px;
  line-height:1.2;font-weight:700;letter-spacing:normal;overflow-wrap:anywhere;
}
:is(#preview, .content-preview).poll-compact .poll-sticker {flex:none;font-size:24px;line-height:28px;width:28px;text-align:center;transform:rotate(-8deg);}
:is(#preview, .content-preview).poll-compact .answer {
  margin:0;padding:10px 14px;min-height:44px;box-sizing:border-box;color:var(--ink);
  border-radius:22px 22px 22px 10px;font-size:17px;font-weight:600;
  background:color-mix(in srgb,var(--poll-a0) 82%,var(--poll-page));
  border:1px solid color-mix(in srgb,var(--ink) 9%,transparent);
  box-shadow:0 3px 0 color-mix(in srgb,var(--ink) 4.5%,transparent);
}
:is(#preview, .content-preview).poll-compact .poll-answer-1 {background:color-mix(in srgb,var(--poll-a1) 82%,var(--poll-page));}
:is(#preview, .content-preview).poll-compact .poll-answer-2 {background:color-mix(in srgb,var(--poll-a2) 82%,var(--poll-page));}
:is(#preview, .content-preview).poll-compact.mode-dark .answer {background:color-mix(in srgb,var(--poll-a0) 18%,var(--poll-page));}
:is(#preview, .content-preview).poll-compact.mode-dark .poll-answer-1 {background:color-mix(in srgb,var(--poll-a1) 18%,var(--poll-page));}
:is(#preview, .content-preview).poll-compact.mode-dark .poll-answer-2 {background:color-mix(in srgb,var(--poll-a2) 18%,var(--poll-page));}
@media(prefers-color-scheme:dark) {
  #preview.poll-compact.mode-system .poll-answer-0 {background:color-mix(in srgb,var(--poll-a0) 18%,#000);}
  #preview.poll-compact.mode-system .poll-answer-1 {background:color-mix(in srgb,var(--poll-a1) 18%,#000);}
  #preview.poll-compact.mode-system .poll-answer-2 {background:color-mix(in srgb,var(--poll-a2) 18%,#000);}
}
:is(#preview, .content-preview).poll-compact :is(.poll-choice,.inline-answers) {display:grid;gap:10px;}
:is(#preview, .content-preview).poll-compact .poll-choice .answer {display:flex;align-items:center;gap:12px;}
:is(#preview, .content-preview).poll-compact .poll-radio {flex:none;width:18px;height:18px;box-sizing:border-box;border:1.5px solid currentColor;border-radius:50%;opacity:.45;}
:is(#preview, .content-preview).poll-compact .preview-pair {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
:is(#preview, .content-preview).poll-compact .preview-pair .answer {display:flex;align-items:center;justify-content:center;flex:1;min-height:52px;padding:14px;font-size:17px;border-radius:22px 22px 22px 10px;text-align:center;}
:is(#preview, .content-preview).poll-compact :is(.poll-stars,.poll-emoji-choices) {display:flex;gap:8px;align-items:center;}
:is(#preview, .content-preview).poll-compact .poll-stars .answer {flex:1;display:grid;place-items:center;font-size:28px;line-height:1;padding:8px 0;border:0;box-shadow:none;border-radius:18px;}
:is(#preview, .content-preview).poll-compact .poll-emoji-choices {gap:7px;}
:is(#preview, .content-preview).poll-compact .poll-emoji-choices .answer {flex:1;min-width:44px;padding:5px 0;text-align:center;font-size:28px;line-height:32px;border-radius:18px;border:0;box-shadow:none;}
:is(#preview, .content-preview).poll-compact .poll-emoji-entry {display:flex;gap:10px;align-items:center;min-height:44px;padding:0 13px;margin-top:9px;border-radius:14px;background:color-mix(in srgb,var(--ink) 7.5%,transparent);font:16px/1.3 system-ui;color:color-mix(in srgb,var(--ink) 72%,transparent);}
:is(#preview, .content-preview).poll-compact .preview-poles {display:flex;justify-content:space-between;gap:16px;font-size:17px;font-weight:600;margin:0;}
:is(#preview, .content-preview).poll-compact .preview-poles span:last-child {text-align:right;}
:is(#preview, .content-preview).poll-compact .poll-slider {height:44px;position:relative;margin-top:12px;}
:is(#preview, .content-preview).poll-compact .poll-slider::before {content:'';position:absolute;inset:20px 0;height:4px;border-radius:9px;background:linear-gradient(to right,var(--ink) 50%,color-mix(in srgb,var(--ink) 12%,transparent) 50%);}
:is(#preview, .content-preview).poll-compact .poll-slider span {position:absolute;left:50%;top:50%;width:28px;height:28px;border-radius:50%;transform:translate(-50%,-50%);background:#fff;box-shadow:0 1px 5px #0003;}
:is(#preview, .content-preview).poll-compact .poll-ticks {display:flex;justify-content:space-between;align-items:center;padding:0 12px;margin:10px 0 0;}
:is(#preview, .content-preview).poll-compact .poll-ticks span {width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.18;}
:is(#preview, .content-preview).poll-compact .poll-ticks .major {width:6px;height:6px;}
:is(#preview, .content-preview).poll-compact .poll-result-row {justify-content:space-between;gap:8px;}
:is(#preview, .content-preview).poll-compact .poll-result-row strong {font-size:20px;white-space:nowrap;}
:is(#preview, .content-preview).poll-compact .preview-pair .poll-result-row {flex-direction:column;align-items:flex-start;gap:6px;text-align:left;}
:is(#preview, .content-preview).poll-compact .own-vote {border:1.5px solid color-mix(in srgb,var(--ink) 50%,transparent);}
:is(#preview, .content-preview).poll-compact .poll-confirmation {font-size:15px;font-weight:600;background:color-mix(in srgb,var(--ink) 6.5%,transparent);padding:6px 10px;border-radius:100px;width:fit-content;margin:0 0 10px;}
:is(#preview, .content-preview).poll-compact .poll-mean {font-size:17px;font-weight:700;margin:10px 0;}
:is(#preview, .content-preview).poll-compact .poll-average-stars {display:flex;gap:8px;max-width:200px;font-size:32px;line-height:1;}
:is(#preview, .content-preview).poll-compact .poll-average-stars span {color:transparent;background:linear-gradient(to right,var(--ink) var(--star-fill,0%),color-mix(in srgb,var(--ink) 16%,transparent) var(--star-fill,0%));background-clip:text;}
:is(#preview, .content-preview).poll-compact .poll-mean-track {position:relative;height:44px;margin:0;}
:is(#preview, .content-preview).poll-compact .poll-mean-track::before {content:'';position:absolute;inset:15px 0 auto;height:10px;border-radius:20px;background:color-mix(in srgb,var(--ink) 20%,transparent);}
:is(#preview, .content-preview).poll-compact .poll-mean-track :is(span,i) {position:absolute;transform:translateX(-50%);top:5px;font-size:18px;font-style:normal;}
:is(#preview, .content-preview).poll-compact .poll-mean-track i {top:27px;font-size:12px;}
:is(#preview, .content-preview).poll-compact .poll-numbers {margin:10px 0;font-size:15px;}
:is(#preview, .content-preview).poll-compact .poll-numbers summary {cursor:pointer;min-height:32px;display:flex;align-items:center;gap:8px;list-style:none;}
:is(#preview, .content-preview).poll-compact .poll-numbers summary::before {content:'›';font-size:20px;transition:transform .2s;}
:is(#preview, .content-preview).poll-compact .poll-numbers[open] summary::before {transform:rotate(90deg);}
:is(#preview, .content-preview).poll-compact .poll-number-row {display:grid;gap:6px;padding:6px 0;font-size:14px;}
:is(#preview, .content-preview).poll-compact .poll-number-row progress {height:8px;margin:0;}
:is(#preview, .content-preview).poll-compact .poll-histogram {display:flex;align-items:flex-end;gap:8px;height:100px;margin:10px 0;}
:is(#preview, .content-preview).poll-compact .poll-histogram > div {flex:1;display:flex;flex-direction:column;align-items:center;gap:5px;}
:is(#preview, .content-preview).poll-compact .poll-histogram .answer {display:block;width:100%;min-height:2px;padding:0;border:0;box-shadow:none;border-radius:100px;}
:is(#preview, .content-preview).poll-compact .poll-emoji-cloud {display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0;max-width:620px;min-height:140px;margin:10px 0;line-height:1.08;}
:is(#preview, .content-preview).poll-compact :is(.poll-total,.credit) {display:block;font-size:12px;margin:10px 0 0;}
:is(#preview, .content-preview).poll-compact .poll-example-notice {display:block;margin:0 0 10px;color:var(--ink);font-size:12px;}
.direct-poll-editor #preview.poll-compact.phone {max-width:370px;}
.direct-poll-editor #preview.poll-compact.tablet {max-width:620px;}
.direct-poll-editor #preview.poll-compact .inline-answer {margin:0;min-height:44px;padding:0 4px 0 14px;}
.direct-poll-editor #preview.poll-compact .inline-answer textarea {font:600 17px/1.3 ui-rounded,system-ui,sans-serif;padding:8px 0;}
.direct-poll-editor #preview.poll-compact .inline-poles {display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.direct-poll-editor #preview.poll-compact .inline-poles input[type=range] {width:100%;height:44px;accent-color:var(--ink);margin:0;}
.direct-poll-editor #preview.poll-compact .inline-poles .poll-ticks {grid-column:1/-1;margin:0;}
.poll-type-selector {max-width:390px;margin:0;}
@media(max-width:360px) {
  :is(#preview, .content-preview).poll-compact .poll-emoji-choices {display:grid;grid-template-columns:repeat(3,minmax(44px,1fr));gap:8px;}
}
@media(prefers-reduced-motion:reduce) {.poll-compact * {animation:none!important;transition:none!important;}}

:is(#preview, .content-preview).poll-compact .poll-emoji-cloud{display:block;position:relative;min-height:64px;width:100%;padding:0;gap:0}
:is(#preview, .content-preview).poll-compact .poll-emoji-cloud>span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;line-height:1.2;padding:0}

.direct-poll-editor #preview.poll-compact .inline-poles input[type=range]{grid-column:1/-1}

:is(#preview, .content-preview).poll-compact .poll-mean~.preview-poles {font-size:12px;font-weight:400}

.poll-editor-target{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.poll-editor-target label{max-width:none;min-width:0;margin:0;align-content:start}
.poll-editor-target select{box-sizing:border-box;min-height:44px;height:44px;width:100%}
.poll-editor-target:has(label[hidden]){grid-template-columns:1fr}
@media(max-width:540px){.poll-editor-target{grid-template-columns:1fr}}