/* Eight complete palettes with distinct typography, surfaces and shapes. */
.theme-button {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--purple);
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 13px;
}
.theme-button b {
  font-size: 10px;
  font-weight: 400;
}
.theme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  margin: 22px 0;
}
@media (min-width: 900px) {
  #themes-dialog {
    width: min(900px, calc(100vw - 56px));
  }
  .theme-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
.theme-option {
  border: 2px solid transparent;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  text-align: left;
  background: var(--bg);
}
.theme-option.selected {
  border-color: var(--purple);
}
.theme-preview {
  padding: 15px;
  height: 111px;
  position: relative;
  border-bottom: 1px solid #00000008;
}
.theme-preview strong {
  display: block;
  font: 19px var(--serif);
  margin-bottom: 15px;
}
.theme-preview .mini-line {
  height: 5px;
  width: 70%;
  opacity: 0.3;
  border-radius: 3px;
  margin: 7px 0;
  background: currentColor;
}
.theme-preview .mini-line:nth-of-type(2) {
  width: 48%;
}
.theme-preview .mini-symbol {
  position: absolute;
  right: 17px;
  top: 18px;
  font-size: 31px;
  opacity: 0.65;
}
.theme-caption {
  padding: 9px 12px;
}
.theme-caption b {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink);
}
.theme-caption small {
  display: block;
  color: var(--muted);
  font-size: 9px;
  margin-top: 2px;
}
.theme-violet {
  background: #f2edf8;
  color: #755b91;
}
.theme-warm {
  background: #f8ecd8;
  color: #9b733f;
  background-image: repeating-linear-gradient(
    transparent 0 21px,
    #a8907020 21px 22px
  );
}
.theme-night {
  background: #1c2526;
  color: #94c1ac;
  font-family: var(--sans);
}
.theme-night strong {
  font-family: var(--sans);
  font-weight: 600;
}
.theme-sea {
  background: #e4f3f7;
  color: #3b7d99;
  border-radius: 0 0 25px 0;
}
.theme-forest {
  background: #eef0df;
  color: #647d50;
}
.theme-forest .mini-symbol {
  border: 1px solid currentColor;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  text-align: center;
}
.theme-rose {
  background: #f9e8eb;
  color: #b87989;
  border-radius: 0 0 30px 30px;
}
.theme-minimal {
  background: #fff;
  color: #282828;
}
.theme-minimal strong {
  font-family: var(--sans);
  font-weight: 700;
}
.theme-minimal .mini-line {
  border-radius: 0;
}
.theme-dusk {
  background: #392f40;
  color: #e8ac79;
}
:root[data-theme="warm"] {
  --paper: #fff8e9;
  --bg: #f1e8d6;
  --ink: #4b3d2c;
  --muted: #9b8a71;
  --purple: #a37842;
  --purple-dark: #815624;
  --lavender: #f1e1c6;
  --border: #e5d6bd;
}
.app-shell:has([data-theme="never"]) {
  display: none;
}
:root[data-theme="warm"] .sidebar {
  background: #e9ddc8;
}
:root[data-theme="warm"] .paper {
  border-radius: 4px;
  box-shadow: 2px 3px 0 #d6c6ad33;
  background-image: repeating-linear-gradient(
    transparent 0 31px,
    #bca27a12 31px 32px
  );
}
:root[data-theme="warm"] textarea {
  background: #fffbf1;
  border-color: #e0cda9;
}
:root[data-theme="warm"] .nav-item.active {
  background: #deccb0;
}
:root[data-theme="warm"] .progress-card,
:root[data-theme="warm"] .progress-ring > div {
  background: #eee0c6;
}
:root[data-theme="warm"] .progress-card {
  border-color: #e4d0b1;
}
:root[data-theme="warm"] .art-circle {
  color: #c5a06a;
}
:root[data-theme="warm"] .art-equal {
  color: #d6b98e;
}
:root[data-theme="warm"] .hero h1 {
  font-size: 46px;
  letter-spacing: 2px;
}
:root[data-theme="night"] {
  color-scheme: dark;
  --paper: #1c2526;
  --bg: #141c1d;
  --ink: #d8e3df;
  --muted: #83968e;
  --purple: #96c6ae;
  --purple-dark: #bddccd;
  --lavender: #2a3d35;
  --border: #2c3a35;
}
:root[data-theme="night"] .sidebar {
  background: #172021;
}
:root[data-theme="night"] .hero h1 {
  font-family: var(--sans);
  font-weight: 600;
  letter-spacing: -1px;
}
:root[data-theme="night"] .paper {
  border-radius: 5px;
  box-shadow: none;
}
:root[data-theme="night"] .nav-item.active {
  background: #2a3d35;
}
:root[data-theme="night"] .primary {
  background: #95c5ac;
  color: #14251c;
}
:root[data-theme="night"] textarea,
:root[data-theme="night"] .proposal,
:root[data-theme="night"] .proposal textarea {
  background: #182022;
  border-color: #33433c;
  color: #d8e3df;
}
:root[data-theme="night"] .progress-card,
:root[data-theme="night"] .progress-ring > div {
  background: #21322b;
  border-color: #304f40;
}
:root[data-theme="night"] .progress-ring > div {
  border-color: #21322b;
}
:root[data-theme="night"] .symbol-chip,
:root[data-theme="night"] .proposal select,
:root[data-theme="night"] .summary-card,
:root[data-theme="night"] .migration-note {
  background: #2a3d35;
}
:root[data-theme="night"] .entry {
  border-color: #2c3a35;
}
:root[data-theme="night"] .hero-copy,
:root[data-theme="night"] .entry-meta {
  color: #889b92;
}
:root[data-theme="night"] .art-circle {
  color: #527d65;
}
:root[data-theme="night"] .paper-art {
  transform: rotate(0);
  opacity: 0.8;
}
:root[data-theme="night"] .art-line {
  border-color: #355743;
  border-radius: 0;
}
:root[data-theme="night"] .art-equal {
  color: #6e977f;
}
:root[data-theme="night"] .theme-caption {
  background: #1c2526;
}
:root[data-theme="sea"] {
  --paper: #fff;
  --bg: #eff7f9;
  --ink: #294451;
  --muted: #839eaa;
  --purple: #488fab;
  --purple-dark: #286c89;
  --lavender: #dfedf3;
  --border: #dbe9ed;
}
:root[data-theme="sea"] .sidebar {
  background: #e8f2f5;
}
:root[data-theme="sea"] .paper {
  border-radius: 22px;
  box-shadow: 0 10px 26px #6091a609;
  border-color: #e1edf1;
}
:root[data-theme="sea"] .hero h1 {
  font-family: var(--sans);
  font-weight: 300;
  letter-spacing: 2px;
}
:root[data-theme="sea"] .nav-item.active {
  background: #d9eaf0;
}
:root[data-theme="sea"] .primary {
  border-radius: 25px;
}
:root[data-theme="sea"] textarea {
  background: #f6fbfc;
  border-color: #d6e8ef;
  border-radius: 13px;
}
:root[data-theme="sea"] .progress-card,
:root[data-theme="sea"] .progress-ring > div {
  background: #e0f0f5;
  border-color: #d0e5ed;
}
:root[data-theme="sea"] .progress-ring > div {
  border-color: #e0f0f5;
}
:root[data-theme="sea"] .symbol-chip,
:root[data-theme="sea"] .summary-card,
:root[data-theme="sea"] .migration-note,
:root[data-theme="sea"] .proposal select {
  background: #e1eff4;
}
:root[data-theme="sea"] .paper-art {
  transform: rotate(10deg);
}
:root[data-theme="sea"] .art-circle {
  color: #94c5d8;
}
:root[data-theme="sea"] .art-line {
  border-color: #aad0df;
  border-radius: 50%;
}
:root[data-theme="sea"] .art-equal {
  color: #a8d4e4;
}
:root[data-theme="forest"] {
  --paper: #fffef4;
  --bg: #f2f2e6;
  --ink: #3b4c35;
  --muted: #91977b;
  --purple: #6f8755;
  --purple-dark: #4a6534;
  --lavender: #e7ebd7;
  --border: #e0e4cd;
}
:root[data-theme="forest"] .sidebar {
  background: #e9ecdc;
}
:root[data-theme="forest"] .hero h1 {
  letter-spacing: 3px;
}
:root[data-theme="forest"] .paper {
  border-radius: 9px 28px 9px 9px;
  box-shadow: 0 5px 0 #d2dbc329;
}
:root[data-theme="forest"] .nav-item.active {
  background: #dfe6ce;
}
:root[data-theme="forest"] textarea {
  background: #f6f8eb;
  border-color: #dbe2c6;
}
:root[data-theme="forest"] .progress-card,
:root[data-theme="forest"] .progress-ring > div {
  background: #e6ebd5;
  border-color: #dbe3c6;
}
:root[data-theme="forest"] .progress-ring > div {
  border-color: #e6ebd5;
}
:root[data-theme="forest"] .symbol-chip,
:root[data-theme="forest"] .summary-card,
:root[data-theme="forest"] .migration-note,
:root[data-theme="forest"] .proposal select {
  background: #e7ebd7;
}
:root[data-theme="forest"] .art-circle {
  color: #a9b58b;
}
:root[data-theme="forest"] .art-line {
  border-color: #b5c49d;
  border-radius: 90px 0 90px 0;
}
:root[data-theme="forest"] .quote-card {
  border: 0;
  background: #e9eddb;
  border-radius: 40px 4px 40px 4px;
  padding: 26px 20px;
}
:root[data-theme="forest"] .art-equal {
  color: #c4cda6;
}
:root[data-theme="rose"] {
  --paper: #fffafa;
  --bg: #faf1f1;
  --ink: #67404a;
  --muted: #b2929b;
  --purple: #b67c8e;
  --purple-dark: #944e66;
  --lavender: #f1dfe6;
  --border: #eedee3;
}
:root[data-theme="rose"] .sidebar {
  background: #f4e8eb;
}
:root[data-theme="rose"] .paper {
  border-radius: 20px;
  border: 1px solid #e9d6de;
  box-shadow: 0 8px 25px #b7809209;
}
:root[data-theme="rose"] .hero h1 {
  font-style: normal;
  letter-spacing: 3px;
}
:root[data-theme="rose"] .nav-item.active {
  background: #ebd9e2;
}
:root[data-theme="rose"] textarea {
  background: #fff5f8;
  border-color: #eed6e1;
}
:root[data-theme="rose"] .progress-card,
:root[data-theme="rose"] .progress-ring > div {
  background: #f4e1e8;
  border-color: #ecd3df;
}
:root[data-theme="rose"] .progress-ring > div {
  border-color: #f4e1e8;
}
:root[data-theme="rose"] .symbol-chip,
:root[data-theme="rose"] .summary-card,
:root[data-theme="rose"] .migration-note,
:root[data-theme="rose"] .proposal select {
  background: #f4e1e8;
}
:root[data-theme="rose"] .art-circle {
  color: #d6a0b2;
}
:root[data-theme="rose"] .art-line {
  border-color: #e0b7c6;
  border-radius: 100% 100% 50% 50%;
}
:root[data-theme="rose"] .art-equal {
  color: #e7bbca;
}
:root[data-theme="rose"] .quote-card {
  border-color: #e8c9d5;
  font-style: italic;
}
:root[data-theme="minimal"] {
  --paper: #fff;
  --bg: #fff;
  --ink: #171717;
  --muted: #919191;
  --purple: #252525;
  --purple-dark: #111;
  --lavender: #f0f0f0;
  --border: #e5e5e5;
}
:root[data-theme="minimal"] .sidebar {
  background: #fff;
}
:root[data-theme="minimal"] .hero h1 {
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: -1.5px;
}
:root[data-theme="minimal"] .paper {
  border-radius: 0;
  box-shadow: none;
  border: 0;
  border-top: 1px solid #252525;
  padding-left: 0;
  padding-right: 0;
}
:root[data-theme="minimal"] .nav-item.active {
  background: #eee;
  border-radius: 0;
}
:root[data-theme="minimal"] .primary,
:root[data-theme="minimal"] .secondary,
:root[data-theme="minimal"] textarea {
  border-radius: 0;
}
:root[data-theme="minimal"] textarea {
  background: #fafafa;
  border-color: #dedede;
}
:root[data-theme="minimal"] .progress-card,
:root[data-theme="minimal"] .progress-ring > div {
  background: #f7f7f7;
  border-color: #eee;
}
:root[data-theme="minimal"] .progress-card {
  border-radius: 0;
}
:root[data-theme="minimal"] .progress-ring > div {
  border-color: #f7f7f7;
}
:root[data-theme="minimal"] .symbol-chip,
:root[data-theme="minimal"] .summary-card,
:root[data-theme="minimal"] .migration-note,
:root[data-theme="minimal"] .proposal select {
  background: #eee;
  border-radius: 0;
}
:root[data-theme="minimal"] .section-heading h2 {
  font-weight: 650;
}
:root[data-theme="minimal"] .art-circle {
  color: #aaa;
}
:root[data-theme="minimal"] .art-line {
  border-color: #ddd;
  border-radius: 0;
}
:root[data-theme="minimal"] .art-equal {
  color: #999;
}
:root[data-theme="minimal"] .paper-art {
  transform: rotate(0);
}
:root[data-theme="dusk"] {
  color-scheme: dark;
  --paper: #392f40;
  --bg: #2d2633;
  --ink: #f1daca;
  --muted: #b09baf;
  --purple: #e3ab82;
  --purple-dark: #f1c7a7;
  --lavender: #55434f;
  --border: #514150;
}
:root[data-theme="dusk"] .sidebar {
  background: #302734;
}
:root[data-theme="dusk"] .hero h1 {
  font-family: var(--serif);
  letter-spacing: 3px;
}
:root[data-theme="dusk"] .paper {
  border-radius: 14px;
  box-shadow: 0 8px 28px #160e2520;
}
:root[data-theme="dusk"] .nav-item.active {
  background: #514050;
}
:root[data-theme="dusk"] .primary {
  background: #e3ab82;
  color: #392735;
}
:root[data-theme="dusk"] textarea,
:root[data-theme="dusk"] .proposal,
:root[data-theme="dusk"] .proposal textarea {
  background: #342b3b;
  border-color: #5b455a;
  color: #f1daca;
}
:root[data-theme="dusk"] .progress-card,
:root[data-theme="dusk"] .progress-ring > div {
  background: #4a3748;
  border-color: #644860;
}
:root[data-theme="dusk"] .progress-ring > div {
  border-color: #4a3748;
}
:root[data-theme="dusk"] .symbol-chip,
:root[data-theme="dusk"] .summary-card,
:root[data-theme="dusk"] .migration-note,
:root[data-theme="dusk"] .proposal select {
  background: #55434f;
}
:root[data-theme="dusk"] .entry {
  border-color: #514150;
}
:root[data-theme="dusk"] .art-circle {
  color: #ba7b8e;
}
:root[data-theme="dusk"] .art-line {
  border-color: #80556e;
  border-radius: 70px 70px 0 0;
}
:root[data-theme="dusk"] .art-equal {
  color: #cb8f79;
}
:root[data-theme="dusk"] .quote-card p {
  color: #c6a2b6;
}
:root[data-theme="dusk"] .theme-caption {
  background: #392f40;
}
:root:not([data-theme="violet"]) .nav-item:hover {
  background: var(--lavender);
}
:root:not([data-theme="violet"]) .filter-row button.active,
:root:not([data-theme="violet"]) .proposal {
  background: var(--lavender);
}
:root:not([data-theme="violet"]) .legend-card h3,
:root:not([data-theme="violet"]) .legend-card dd,
:root:not([data-theme="violet"]) .progress-card p,
:root:not([data-theme="violet"]) .quote-card em {
  color: var(--purple);
}
:root:not([data-theme="violet"]) .legend-card dt,
:root:not([data-theme="violet"]) .four-marks {
  color: var(--purple);
}
:root:not([data-theme="violet"]) .entry-meta,
:root:not([data-theme="violet"]) .entry-actions button,
:root:not([data-theme="violet"]) .quote-card small {
  color: var(--muted);
}
:root:not([data-theme="violet"]) .entry.done .entry-text {
  color: var(--muted);
}
:root:not([data-theme="violet"]) .setting-row input[type="time"],
:root:not([data-theme="violet"]) #edit-kind,
:root:not([data-theme="violet"]) #pair-code {
  background: var(--paper);
  border-color: var(--border);
}
@media (max-width: 820px) {
  :root[data-theme] .sidebar {
    background: var(--paper);
  }
  :root[data-theme="warm"] .hero h1 {
    font-size: 35px;
  }
  .theme-button b {
    display: none;
  }
  .theme-button {
    padding: 3px 6px;
    border: 0;
  }
  .top-actions {
    gap: 4px;
  }
  .connection {
    font-size: 8px;
  }
  .hero h1 {
    font-size: 33px;
  }
  .theme-preview {
    height: 100px;
  }
  .theme-grid {
    gap: 10px;
  }
  :root[data-theme="minimal"] .hero h1 {
    font-size: 31px;
    letter-spacing: -1px;
  }
}
.phase-note,
.art-dash {
  color: var(--purple);
}
.empty-title {color:var(--purple)}
:root[data-theme="warm"]{--muted:#7c6b51}
:root[data-theme="sea"]{--muted:#5b7888}
:root[data-theme="forest"]{--muted:#677252}
:root[data-theme="rose"]{--muted:#906674}
:root[data-theme="minimal"]{--muted:#737373}
:root[data-theme="warm"] .primary,:root[data-theme="sea"] .primary,:root[data-theme="forest"] .primary,:root[data-theme="rose"] .primary{background:var(--purple-dark)}
.symbol-chip{background:var(--lavender)}
.voice-button,.text-button,.phase-note,.symbol-chip,.filter-row button.active,.ai-chip{color:var(--purple-dark)}
.proposal .evidence,.entry-meta,textarea::placeholder{color:var(--muted)}
.theme-sea strong{font-family:var(--sans);font-weight:300}
.proposal .evidence{overflow-wrap:anywhere;white-space:pre-wrap}
@media(max-width:370px){:root[data-theme] .hero h1{font-size:27px}.top-actions .connection{display:none}}
.progress-ring small,
.paper-art small,
.legend-card dd small,
.quote-card small {
  color: var(--muted);
}
.entry {
  border-color: var(--border);
}
#toast {
  background: var(--purple-dark);
  color: var(--paper);
}
:root[data-theme="night"] #toast,
:root[data-theme="dusk"] #toast {
  color: var(--bg);
}
:root[data-theme="night"] .theme-option,
:root[data-theme="dusk"] .theme-option {
  border-color: var(--border);
}
:root[data-theme] .theme-option.selected {
  border-color: var(--purple);
}
@media (max-width: 820px) {
  .hero {
    display: block;
    position: relative;
  }
  .hero > div:first-child {
    min-width: 0;
  }
  .hero h1,
  :root[data-theme="warm"] .hero h1,
  :root[data-theme="night"] .hero h1,
  :root[data-theme="sea"] .hero h1,
  :root[data-theme="forest"] .hero h1,
  :root[data-theme="rose"] .hero h1,
  :root[data-theme="dusk"] .hero h1 {
    font-size: 30px;
    letter-spacing: 0;
  }
  .hero-copy {
    max-width: none;
  }
  .paper-art {
    position: absolute;
    right: 0;
    top: 9px;
    min-width: 42px;
    max-width: 42px;
    width: 42px;
    height: 40px;
    transform: none !important;
    margin: 0;
    opacity: 0.65;
  }
  .art-line {
    inset: 1px 5px 2px 4px;
    border-radius: 18px;
  }
  .art-dot {
    font-size: 12px;
    left: 26px;
    top: -6px;
  }
  .art-circle {
    font-size: 30px;
    left: 3px;
    top: 5px;
  }
  .art-equal {
    font-size: 16px;
    top: 10px;
    right: 0;
  }
  .art-dash {
    font-size: 16px;
    left: -5px;
    top: 18px;
  }
  .paper-art small {
    display: none;
  }
  .topbar > .eyebrow {
    font-size: 12px;
    letter-spacing: 1px;
  }
  .top-actions {
    gap: 2px;
  }
  .date-control input {
    width: 108px;
  }
  .theme-preview strong {
    font-size: 13px;
  }
  .hero-copy {
    font-size: 11px;
  }
}