#privateSpace {
  --private-ink: #493f4a;
  --private-muted: #766b78;
  --private-accent: #806c8f;
  --private-accent-soft: #eee7f2;
  --private-line: rgba(91, 72, 99, .16);
}

.private-shell {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 18px 18px 110px;
  color: var(--private-ink);
}

.private-auth-shell { width: min(100%, 520px); padding-top: clamp(28px, 7vh, 80px); }
.private-heading { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.private-heading h1 { margin: 0; font-size: clamp(1.6rem, 4vw, 2.1rem); }
.private-heading p { margin: 4px 0 0; color: var(--private-muted); }
.private-lock { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border-radius: 17px; background: var(--private-accent-soft); font-size: 1.45rem; }
.private-unlocked-head .private-lock-button { margin-left: auto; }

.private-auth-card,
.private-card {
  border: 1px solid var(--private-line);
  border-radius: 22px;
  background: rgba(255, 255, 255, .9);
  box-shadow: 0 12px 35px rgba(61, 42, 67, .07);
  padding: clamp(18px, 4vw, 28px);
}

.private-auth-card { display: grid; gap: 12px; }
.private-pin-label,
.private-card label,
.private-card legend { font-weight: 750; font-size: .94rem; }
.private-pin,
.private-card textarea {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(82, 68, 88, .25);
  border-radius: 14px;
  background: #fff;
  color: var(--private-ink);
  font: inherit;
  padding: 12px 14px;
}
.private-pin { font-size: 1.35rem; letter-spacing: .42em; text-align: center; }
.private-card textarea { margin-top: 8px; min-height: 145px; resize: vertical; line-height: 1.5; }
.private-pin:focus,
.private-card textarea:focus,
.private-shell button:focus-visible { outline: 3px solid rgba(128, 108, 143, .3); outline-offset: 2px; }

.private-security-note,
.private-limit-note { margin: 5px 0; color: var(--private-muted); font-size: .86rem; line-height: 1.5; }
.private-message { min-height: 1.35em; margin: 0; color: #56735f; font-size: .9rem; }
.private-message[data-kind="error"] { color: #a13f4a; }

.private-shell button { min-height: 46px; border-radius: 13px; font: inherit; font-weight: 750; cursor: pointer; }
.private-primary { display: inline-flex; align-items: center; justify-content: center; border: 0; background: var(--private-accent); color: #fff; padding: 11px 18px; text-decoration: none; cursor: pointer; }
.private-primary:disabled { opacity: .55; cursor: wait; }
.private-link { border: 0; background: transparent; color: var(--private-accent); text-decoration: underline; }
.private-lock-button { border: 1px solid var(--private-line); background: #fff; color: var(--private-ink); padding: 8px 14px; }

.private-content { display: grid; gap: 18px; }
.private-card h2 { margin: 0; font-size: 1.15rem; }
.private-card > p { margin: 5px 0 16px; color: var(--private-muted); }
.private-moods { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.private-moods button { display: grid; place-items: center; gap: 4px; border: 1px solid var(--private-line); background: #fff; color: var(--private-ink); padding: 8px 4px; }
.private-moods button span { font-size: 1.55rem; }
.private-moods button small { font-size: .7rem; line-height: 1.15; }
.private-moods button[aria-pressed="true"],
.private-types button[aria-pressed="true"] { border-color: var(--private-accent); background: var(--private-accent-soft); box-shadow: inset 0 0 0 1px var(--private-accent); }

.private-card fieldset { margin: 14px 0 18px; padding: 0; border: 0; }
.private-types { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.private-types button,
.private-form-actions button,
.private-entry-actions button { border: 1px solid var(--private-line); background: #fff; color: var(--private-ink); padding: 9px 14px; }
.private-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.private-form-actions .private-primary { border: 0; color: #fff; background: var(--private-accent); }

.private-list { display: grid; gap: 10px; margin-top: 15px; }
.private-empty { display: grid; place-items: center; text-align: center; padding: 30px 15px; border: 1px dashed var(--private-line); border-radius: 16px; color: var(--private-muted); }
.private-empty span { font-size: 1.5rem; }
.private-empty strong { margin-top: 8px; color: var(--private-ink); }
.private-empty p { margin: 5px 0 0; max-width: 36ch; }
.private-entry { overflow: hidden; border: 1px solid var(--private-line); border-radius: 16px; background: #fff; }
.private-entry-head { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 12px 14px; border: 0; border-radius: 0; background: #fff; color: var(--private-ink); text-align: left; }
.private-entry-head span:first-child { display: grid; gap: 3px; }
.private-entry-head small,
.private-entry-body > small { color: var(--private-muted); font-weight: 500; }
.private-entry-body { padding: 0 14px 14px; }
.private-entry-body p { margin: 0 0 10px; overflow-wrap: anywhere; line-height: 1.55; }
.private-entry-actions { display: flex; gap: 8px; margin-top: 12px; }
.private-entry-actions .private-danger { color: #a13f4a; border-color: rgba(161, 63, 74, .22); }

body.night #privateSpace { --private-ink: #f5edf6; --private-muted: #c7bbc9; --private-accent-soft: rgba(156, 126, 172, .2); --private-line: rgba(235, 218, 240, .16); }
body.night .private-auth-card,
body.night .private-card,
body.night .private-pin,
body.night .private-card textarea,
body.night .private-moods button,
body.night .private-types button,
body.night .private-form-actions button,
body.night .private-entry,
body.night .private-entry-head,
body.night .private-entry-actions button,
body.night .private-lock-button { background: #2f2931; color: var(--private-ink); }

@media (max-width: 560px) {
  .private-shell { padding-inline: 12px; }
  .private-unlocked-head { align-items: flex-start; flex-wrap: wrap; }
  .private-unlocked-head .private-lock-button { margin-left: 66px; margin-top: -10px; }
  .private-moods { gap: 5px; }
  .private-moods button { min-width: 0; padding-inline: 2px; }
  .private-moods button small { font-size: .62rem; }
}

@media (min-width: 760px) {
  .private-content { grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); align-items: start; }
  .private-content .private-list-card,
  .private-content .private-limit-note { grid-column: 1 / -1; }
}