:root {
  color-scheme: light;
  --page: #f5f7fb;
  --surface: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e2e8f0;
  --accent: #476de1;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: Inter, system-ui, sans-serif;
}

header {
  background: var(--surface);
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
}

h1 { margin: 0; font-size: 1.4rem; }
h2 { font-size: 1rem; margin-top: 0; }

#notes-workspace {
  display: grid;
  grid-template-columns: 245px minmax(0, 1fr);
  min-height: calc(100vh - 74px);
}

aside {
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 24px;
}

aside p {
  padding: 10px 12px;
  border-radius: 9px;
  background: var(--page);
}

section {
  min-width: 0;
  padding: 28px;
}

#notes-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 18px;
  align-items: start;
}

.sticky-note {
  min-height: 185px;
  padding: 18px;
  border-radius: 13px;
  box-shadow: 0 5px 14px #0f172a12;
  overflow-wrap: anywhere;
  color: #283044;
}

.sticky-note h3 {
  font-size: 1rem;
  margin: 0 0 12px;
}

.sticky-note[data-color="yellow"] { background: #fff0a8; }
.sticky-note[data-color="pink"] { background: #f9c8d9; }
.sticky-note[data-color="blue"] { background: #c9dfff; }
.sticky-note[data-color="green"] { background: #ccefd5; }
.sticky-note[data-color="purple"] { background: #e3d4ff; }
.sticky-note[data-color="white"] { background: #ffffff; }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --page: #121a2b;
    --surface: #1c273b;
    --text: #f1f5f9;
    --muted: #a5b4c8;
    --border: #36445c;
  }
}

@media (max-width: 720px) {
  #notes-workspace { grid-template-columns: 1fr; }
  aside { border-right: 0; border-bottom: 1px solid var(--border); }
  section { padding: 18px; }
}

/* Grid and Board workspace controls */
.notes-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 22px;
}

.notes-toolbar h2 {
  margin: 0;
  font-size: 1.25rem;
}

.view-controls {
  display: flex;
  gap: 6px;
  padding: 5px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}

.view-controls button {
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 9px 15px;
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
  font-size: .9rem;
}

.view-controls button[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
  font-weight: 600;
}

.view-controls button:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

/* Grid uses the existing responsive card layout. */
#notes-container.grid-layout {
  display: grid;
}

/* Board uses a separate positioning canvas. */
#notes-container.board-layout {
  display: block;
  position: relative;
  min-height: 650px;
  overflow: auto;
  border: 1px dashed var(--border);
  border-radius: 16px;
  background-color: var(--surface);
  background-image: radial-gradient(
    circle, var(--border) 1px, transparent 1px
  );
  background-size: 22px 22px;
}

/* Cards will receive saved coordinates from JavaScript. */
.board-layout .sticky-note {
  position: absolute;
  width: 230px;
  min-height: 185px;
  touch-action: none;
}

/* SkyCloud Notes — Sticky Note Editor */
.notes-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

#new-note, #save-note {
  background: var(--accent);
  color: #fff;
  border: 0;
  border-radius: 10px;
  padding: 11px 18px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

#note-editor {
  width: min(92vw, 540px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 20px 70px #0004;
}

#note-editor::backdrop {
  background: rgba(10, 20, 40, .65);
}

#note-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#note-form label {
  font-size: .9rem;
  font-weight: 600;
}

#note-form input,
#note-form textarea,
#note-form select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--page);
  color: var(--text);
  font: inherit;
}

#note-form textarea {
  resize: vertical;
  min-height: 160px;
}

.editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 12px;
}

#cancel-note {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 18px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}

#note-error {
  color: #dc3545;
  font-size: .9rem;
  min-height: 1em;
}

@media (max-width: 720px) {
  #note-editor { padding: 18px; }
  .notes-actions { width: 100%; }
}


/* SkyCloud Notes workspace and notebook navigation */
.nav-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 12px;
}
.nav-heading h2 { margin: 0; }
.notebooks-heading { margin-top: 28px; }
.nav-heading button {
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--accent);
  color: white;
  padding: 8px;
  cursor: pointer;
  font: inherit;
  font-size: .8rem;
}
button:disabled { opacity: .45; cursor: not-allowed; }
.navigation-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  margin: 5px 0;
  border: 1px solid transparent;
  border-radius: 9px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}
.navigation-item:hover { background: var(--page); }
.navigation-item[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}
#workspace-list, #notebook-list { overflow-wrap: anywhere; }
#navigation-message { color: var(--muted); font-size: .85rem; }
.navigation-dialog {
  width: min(440px, calc(100vw - 32px));
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  padding: 26px;
}
.navigation-dialog::backdrop { background: #0f172a99; }
.navigation-dialog form { display: grid; gap: 14px; }
.navigation-dialog input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 9px;
  font: inherit;
}
.navigation-dialog .editor-actions { justify-content: flex-end; }
.navigation-dialog [type="submit"] {
  background: var(--accent);
  color: white;
  border: 0;
  border-radius: 9px;
  padding: 10px 16px;
  cursor: pointer;
}

/* SKYNOTES-APPEARANCE-V1 */
:root[data-notes-theme="light"] {
  color-scheme: light;
  --page: #f5f7fb;
  --surface: #ffffff;
  --text: #1e293b;
  --muted: #64748b;
  --border: #e2e8f0;
}
:root[data-notes-theme="dark"] {
  color-scheme: dark;
  --page: #121a2b;
  --surface: #1c273b;
  --text: #f1f5f9;
  --muted: #a5b4c8;
  --border: #36445c;
}
.notes-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.appearance-menu {
  position: relative;
}
.appearance-menu summary {
  cursor: pointer;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface);
  list-style: none;
}
.appearance-menu summary::-webkit-details-marker {
  display: none;
}
.appearance-menu[open] fieldset {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 100;
  width: 185px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 10px 30px #0002;
}
.appearance-menu legend {
  color: var(--muted);
  font-size: .85rem;
}
.appearance-menu label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 5px;
  cursor: pointer;
}
.appearance-menu input {
  accent-color: var(--accent);
}

/* SKYNOTES-GROUPS-V2 */
#group-list { overflow-wrap: anywhere; }
#group-list .navigation-item { padding-left: 14px; }
#group-list .navigation-item[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}


/* SKYNOTES-PARAGRAPH-FORMATTING-V1
   Preserve entered line breaks and blank paragraphs.
   Works with existing note content and does not modify data.
*/
.sticky-note,
.sticky-note .note-content,
.sticky-note .note-body,
.sticky-note .note-text,
.sticky-note .sticky-content,
.sticky-note p {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}


/* SKYNOTES-FULLPAGE-EDITOR-V1 */

#note-editor {
    width: min(1100px, 96vw) !important;
    max-width: 1100px !important;
    height: 94vh !important;
    max-height: 94vh !important;
    margin: auto !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

#note-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding: 28px 36px;
    box-sizing: border-box;
}

#note-title {
    font-size: 1.65rem;
    font-weight: 700;
    padding: 14px;
}

#note-content {
    flex: 1;
    min-height: 280px;
    width: 100%;
    line-height: 1.75;
    font-size: 1rem;
    padding: 20px;
    resize: vertical;
    white-space: pre-wrap;
    box-sizing: border-box;
}

#note-form .editor-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

@media (max-width: 700px) {
    #note-editor {
        width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    #note-form {
        padding: 18px;
    }

    #note-content {
        min-height: 220px;
    }
}


/* SKYNOTES-VISUAL-RICH-EDITOR-V1 */
#rich-note-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border, #a8b2c1);
  border-radius: 10px 10px 0 0;
  margin-top: 10px;
}

#rich-note-toolbar button {
  min-width: 38px;
  min-height: 38px;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
}

#rich-note-content {
  flex: 1;
  min-height: 290px;
  padding: 22px;
  border: 1px solid var(--border, #a8b2c1);
  border-top: 0;
  border-radius: 0 0 10px 10px;
  overflow: auto;
  outline-offset: -3px;
  line-height: 1.65;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#rich-note-content p {
  margin: 0 0 1em;
}

#rich-note-content h1,
#rich-note-content h2,
#rich-note-content h3 {
  margin: 1.2em 0 .5em;
}

#rich-note-content ul,
#rich-note-content ol {
  padding-left: 2em;
  margin: .6em 0 1em;
}

#rich-note-content pre {
  padding: 12px;
  white-space: pre-wrap;
  border-radius: 8px;
  background: rgba(127,127,127,.14);
}

#rich-note-content:focus {
  outline: 2px solid #5277da;
}

#note-content[hidden] {
  display: none !important;
}

@media (max-width: 700px) {
  #rich-note-content {
    min-height: 220px;
    padding: 14px;
  }
}


/* SKYNOTES-RICH-CARD-RENDERING-V1 */
.sticky-note .note-card-preview {
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.sticky-note .note-card-preview p {
  white-space: pre-wrap;
  margin: 0 0 .85em;
}

.sticky-note .note-card-preview h1,
.sticky-note .note-card-preview h2,
.sticky-note .note-card-preview h3 {
  position: static;
  padding: 0;
  margin: .7em 0 .35em;
  line-height: 1.3;
}

.sticky-note .note-card-preview h1 {
  font-size: 1.35em;
}

.sticky-note .note-card-preview h2 {
  font-size: 1.2em;
}

.sticky-note .note-card-preview h3 {
  font-size: 1.08em;
}

.sticky-note .note-card-preview ul {
  list-style: disc outside;
}

.sticky-note .note-card-preview ol {
  list-style: decimal outside;
}

.sticky-note .note-card-preview ul,
.sticky-note .note-card-preview ol {
  margin: .5em 0 .8em;
  padding-left: 1.7em;
}

.sticky-note .note-card-preview li {
  display: list-item;
  margin-bottom: .2em;
}

.sticky-note .note-card-preview pre {
  padding: 9px;
  border-radius: 6px;
  background: rgba(0,0,0,.08);
  white-space: pre-wrap;
  font-family: ui-monospace, monospace;
}

.sticky-note .note-card-preview a {
  text-decoration: underline;
  overflow-wrap: anywhere;
}


/* SKYNOTES-GRID-BOARD-POSITION-ISOLATION-V1
   Grid ignores manually saved Board coordinates.
   Board continues using its existing stored positions.
*/

#notes-container.grid-layout {
    display: grid !important;
    grid-template-columns: repeat(
        auto-fill,
        minmax(min(210px, 100%), 1fr)
    ) !important;
    gap: 18px !important;
    align-items: start !important;
    align-content: start !important;
}

#notes-container.grid-layout .sticky-note {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    z-index: auto !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

#notes-container.grid-layout .sticky-note:hover {
    transform: translateY(-2px);
}

#notes-container.grid-layout .note-lifecycle-menu {
    z-index: 20;
}

@media (max-width: 600px) {
    #notes-container.grid-layout {
        grid-template-columns: repeat(
            auto-fill,
            minmax(min(190px, 100%), 1fr)
        ) !important;
        gap: 12px !important;
    }
}


/* SKYNOTES-FOCUSED-EDITOR-V2
   Presentation only: preserve existing editing and save behavior.
*/

#note-editor {
    width: min(1180px, 97vw) !important;
    max-width: 1180px !important;
    height: min(94dvh, 1050px) !important;
    max-height: 94dvh !important;
    padding: 0 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

#note-form {
    display: flex !important;
    flex-direction: column;
    box-sizing: border-box;
    height: 100%;
    overflow-y: auto;
    padding: clamp(18px, 3vw, 38px) !important;
    gap: 9px;
}

#editor-heading {
    font-size: 1rem;
    font-weight: 600;
    opacity: .75;
    margin: 0 0 14px;
}

#note-form > label {
    font-size: .83rem;
    font-weight: 600;
    opacity: .8;
}

#note-title {
    font-size: clamp(1.5rem, 2.8vw, 2.15rem) !important;
    font-weight: 750 !important;
    line-height: 1.3;
    padding: 12px 15px !important;
    border-radius: 9px;
    min-height: 54px;
}

#note-notebook,
#note-group,
#note-color {
    min-height: 40px;
    border-radius: 8px;
}

#rich-note-toolbar {
    display: flex;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 5;
    gap: 6px;
    margin: 4px 0 0;
    padding: 9px 10px;
    border-radius: 10px 10px 0 0;
    background: var(--surface, #263449);
    border: 1px solid rgba(130,150,180,.35);
}

#rich-note-toolbar button {
    min-width: 40px;
    min-height: 40px;
    border-radius: 7px;
    font-weight: 650;
    transition: background .12s ease;
}

#rich-note-toolbar button:focus-visible {
    outline: 2px solid #6695ff;
    outline-offset: 2px;
}

#rich-note-content {
    flex: 1 0 auto;
    min-height: 350px;
    height: auto;
    overflow: visible;
    padding: clamp(20px, 3vw, 40px) !important;
    font-size: 1rem;
    line-height: 1.8;
    border-radius: 0 0 10px 10px;
}

#rich-note-content p {
    margin: 0 0 1.15em;
}

#rich-note-content ul,
#rich-note-content ol {
    padding-left: 1.8em;
    margin: .7em 0 1.2em;
}

#note-form .editor-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 9px;
}

#draft-status,
#sync-status,
#note-error {
    min-height: 0;
    margin: 3px 0;
    font-size: .85rem;
}

#note-form > .editor-actions:last-of-type {
    justify-content: flex-end;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid rgba(130,150,180,.25);
}

#save-note {
    min-height: 42px;
    padding-inline: 23px;
    font-weight: 700;
}

@media (max-width: 700px) {
    #note-editor {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    #note-form {
        padding: 16px !important;
    }

    #rich-note-content {
        min-height: 45dvh;
        padding: 16px !important;
    }

    #rich-note-toolbar {
        top: 0;
        gap: 4px;
    }

    #rich-note-toolbar button {
        min-width: 37px;
        min-height: 38px;
        padding: 6px;
    }
}


/* SKYNOTES-SIDEBAR-REFINEMENT-V1
   Presentation only: existing navigation remains functional.
*/

.note-lifecycle-navigation {
    display: grid;
    gap: 4px;
    margin: 0 0 20px;
    padding: 0 0 18px;
    border-bottom: 1px solid rgba(140,160,190,.18);
}

.note-lifecycle-navigation button {
    display: flex;
    align-items: center;
    min-height: 39px;
    padding: 9px 13px;
    border-radius: 8px;
    font-weight: 550;
    transition: background .15s ease;
}

.note-lifecycle-navigation button:hover {
    background: rgba(110,145,210,.15);
}

.note-lifecycle-navigation button.selected {
    background: #416ee2;
    color: #fff;
    font-weight: 650;
}

.nav-heading {
    margin-top: 22px;
    margin-bottom: 9px;
}

.nav-heading h2 {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .025em;
}

#workspace-list,
#notebook-list,
#group-list {
    display: grid;
    gap: 4px;
}

#workspace-list button,
#notebook-list button,
#group-list button {
    line-height: 1.35;
    text-align: left;
    border-radius: 8px;
}

#navigation-message {
    margin-top: 14px;
    font-size: .8rem;
}

@media (max-width: 700px) {
    .note-lifecycle-navigation {
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
}


/* SKYNOTES-SIDEBAR-HIERARCHY-V2 */

.primary-notebook-heading {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(140,160,190,.18);
}

.primary-notebook-heading h2 {
  font-size: .95rem;
}

.skynotes-secondary-section {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid rgba(140,160,190,.18);
}

.skynotes-secondary-section > summary {
  cursor: pointer;
  padding: 10px 5px;
  font-size: .85rem;
  font-weight: 700;
  opacity: .88;
}

.skynotes-secondary-section > summary:hover {
  opacity: 1;
}

.skynotes-secondary-section > .nav-heading {
  margin-top: 5px;
}

.skynotes-secondary-section > .nav-heading h2 {
  display: none;
}

.skynotes-secondary-section > .nav-heading button {
  width: 100%;
  margin-bottom: 7px;
}

.skynotes-secondary-section > div[id$="-list"] {
  margin-bottom: 8px;
}


/* SKYNOTES-TAGS-UI-V1 */
.skynotes-tag-editor { margin: 12px 0; }
.skynotes-tag-input-row { display: flex; gap: 8px; margin-top: 6px; }
.skynotes-tag-input-row input { flex: 1; min-width: 0; }
.skynotes-tag-chips, .skynotes-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.skynotes-tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 4px 9px;
  background: rgba(100,130,170,.16);
  color: inherit;
  border: 1px solid rgba(130,150,170,.3);
  font-size: .76rem;
}
.skynotes-tag-chip button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0 2px;
  font-size: 1rem;
}
.skynotes-tag-filter {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 10px 0;
}
.skynotes-tag-filter select { max-width: 230px; }


/* SKYNOTES-TAG-COLORS-V1 */
.skynotes-tag-color-picker {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.skynotes-tag-color-picker::-webkit-color-swatch-wrapper {
  padding: 2px;
}
.skynotes-tag-color-picker::-webkit-color-swatch {
  border-radius: 50%;
  border: 1px solid rgba(120,130,150,.4);
}
.skynotes-tag-color-picker::-moz-color-swatch {
  border-radius: 50%;
  border: 1px solid rgba(120,130,150,.4);
}


/* SKYNOTES-READONLY-VIEWER-V1 */
#skynotes-note-viewer {
  width: min(1000px, 96vw);
  max-width: 1000px;
  height: min(92vh, 980px);
  max-height: 92vh;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 20px 70px #0005;
  overflow: hidden;
  flex-direction: column;
}

#skynotes-note-viewer[open] {
  display: flex;
}

#skynotes-note-viewer::backdrop {
  background: rgba(10, 20, 40, .65);
}

.skynotes-viewer-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 12px;
  border-bottom: 1px solid var(--border);
}

.skynotes-viewer-header h2 {
  margin: 0;
  overflow-wrap: anywhere;
}

.skynotes-viewer-header button,
.skynotes-viewer-footer button {
  padding: 10px 16px;
  border-radius: 9px;
  cursor: pointer;
  font: inherit;
}

.skynotes-viewer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 12px 28px 0;
}

.skynotes-viewer-tags:empty {
  display: none;
}

.skynotes-viewer-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 20px 28px 32px;
  line-height: 1.7;
  overflow-wrap: anywhere;
  user-select: text;
}

.skynotes-viewer-body p {
  margin: 0 0 1em;
}

.skynotes-viewer-body pre {
  overflow-x: auto;
}

.skynotes-viewer-footer {
  display: flex;
  justify-content: flex-end;
  padding: 14px 28px;
  border-top: 1px solid var(--border);
}

.skynotes-viewer-footer button {
  background: var(--accent);
  color: white;
  border: 0;
}

@media (max-width: 700px) {
  #skynotes-note-viewer {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .skynotes-viewer-header {
    padding: 18px;
  }

  .skynotes-viewer-tags {
    padding: 12px 18px 0;
  }

  .skynotes-viewer-body {
    padding: 18px;
  }

  .skynotes-viewer-footer {
    padding: 12px 18px;
  }
}

/* SKYNOTES_MOBILE_EDITOR_USABILITY_20261025
   Touch-device corrections; desktop styling remains unchanged.
*/
@media (pointer: coarse) and (max-width: 1100px) {
  #note-editor,
  #note-editor #note-form {
    background-color: #f8fafc !important;
    color: #172338 !important;
    opacity: 1 !important;
  }

  #note-editor label,
  #note-editor #editor-heading,
  #note-editor .skynotes-tag-editor label {
    color: #172338 !important;
    opacity: 1 !important;
  }

  #note-editor input:not([type="checkbox"]):not([type="color"]),
  #note-editor textarea,
  #note-editor select,
  #note-editor #rich-note-content {
    background-color: #ffffff !important;
    color: #172338 !important;
    -webkit-text-fill-color: #172338;
    border-color: #94a3b8 !important;
    opacity: 1 !important;
    color-scheme: light;
  }

  #note-editor input::placeholder,
  #note-editor textarea::placeholder {
    color: #64748b !important;
    -webkit-text-fill-color: #64748b;
    opacity: 1 !important;
  }

  #note-editor select,
  #note-editor select option {
    background-color: #ffffff !important;
    color: #172338 !important;
    -webkit-text-fill-color: #172338 !important;
    color-scheme: light;
  }

  #note-editor #note-color {
    font-weight: 700 !important;
    min-height: 46px;
    appearance: auto;
    -webkit-appearance: menulist;
  }

  #note-editor #rich-note-toolbar {
    opacity: 1 !important;
  }

  #skynotes-mobile-existing-tag {
    display: block;
    width: 100%;
    min-height: 44px;
    margin: 8px 0;
    padding: 9px 12px;
    border-radius: 8px;
  }
}

/* Android phone control alignment */
@media (pointer: coarse) and (max-width: 700px) {
  #note-editor button,
  #note-editor select,
  #note-editor .editor-actions button {
    text-align: center !important;
  }

  #note-editor button,
  #note-editor .editor-actions button {
    align-items: center;
    justify-content: center;
  }

  /* Keep note typing left aligned. */
  #note-title,
  #rich-note-content,
  #note-content,
  #skynotes-tag-input {
    text-align: left !important;
  }
}

/* SKYNOTES_IPAD_FIELD_TEXT_CONTRAST_V2
   Explicit Safari field foreground colors.
   Preserve desktop styling and existing tag behavior.
*/
@media (hover: none) and (pointer: coarse) {
  #note-editor select,
  #note-editor input[type="text"],
  #note-editor input:not([type]),
  #note-editor textarea,
  #note-editor #skynotes-mobile-existing-tag,
  #note-editor #skynotes-tag-input {
    background: #ffffff !important;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    opacity: 1 !important;
    font-weight: 600;
    color-scheme: light !important;
  }

  #note-editor select option,
  #note-editor select optgroup {
    color: #111827 !important;
    background: #ffffff !important;
    -webkit-text-fill-color: #111827 !important;
  }

  #note-editor input::placeholder,
  #note-editor textarea::placeholder {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
    opacity: 1 !important;
  }

  #note-editor #note-color {
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    background: #ffffff !important;
    font-weight: 700 !important;
  }
}

/* SKYNOTES_IPAD_DROPDOWN_CONTRAST_V3
   Notebook, Group, Sticky Note Color only.
   iPad Safari: dark selected text on a white background.
*/
@supports (-webkit-touch-callout: none) {
  @media (pointer: coarse) and (min-width: 701px) {
    #note-editor #note-notebook,
    #note-editor #note-group,
    #note-editor #note-color {
      background-color: #ffffff !important;
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
      opacity: 1 !important;
      font-weight: 700 !important;
      color-scheme: light !important;
      -webkit-appearance: menulist;
      appearance: auto;
    }

    #note-editor #note-notebook option,
    #note-editor #note-group option,
    #note-editor #note-color option {
      background-color: #ffffff !important;
      color: #111827 !important;
      -webkit-text-fill-color: #111827 !important;
    }
  }
}

/* SKYNOTE-APPEARANCE-REPAIR-V2 */

/* Keep the application header readable in every theme. */
body > header.notes-header,
body > header.notes-header h1,
body > header.notes-header .account-controls {
    color: #ffffff !important;
}

body > header.notes-header .appearance-menu {
    position: relative;
    z-index: 10000;
}

/* The summary is the clickable selector. */
body > header.notes-header .appearance-menu > summary {
    display: flex;
    align-items: center;
    min-height: 42px;
    padding: 10px 15px;
    background: #173f65 !important;
    color: #ffffff !important;
    border: 1px solid #b8d4ed !important;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 650;
    list-style: none;
}

body > header.notes-header .appearance-menu > summary::after {
    content: " ▾";
    margin-left: 9px;
    color: #ffffff;
}

body > header.notes-header .appearance-menu[open] > summary::after {
    content: " ▴";
}

/* Each fieldset is in normal flow: no overlapping menus. */
body > header.notes-header .appearance-menu[open] {
    z-index: 10001;
}

body > header.notes-header .appearance-menu[open] fieldset {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    margin: 0 0 12px !important;
    padding: 10px !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 1px solid #9bb5cf !important;
    border-radius: 8px !important;
    color: #f8fafc !important;
}

body > header.notes-header .appearance-menu[open] fieldset legend,
body > header.notes-header .appearance-menu[open] fieldset label {
    color: #ffffff !important;
}

/* The dropdown's fields stay visible against the dark panel. */
body > header.notes-header .appearance-menu[open] {
    background: #173650 !important;
    border-radius: 10px;
    padding-bottom: 8px;
}

body > header.notes-header .appearance-menu[open] fieldset {
    margin-left: 10px !important;
    margin-right: 10px !important;
}

body > header.notes-header .appearance-menu input[type="radio"] {
    accent-color: #8ac7ff;
    width: 17px;
    height: 17px;
}

/* Ensure the entire dropdown remains above notebook content. */
body > header.notes-header {
    z-index: 10000 !important;
    isolation: auto !important;
}

/* Readable heading text on blue notebook surfaces. */
.skynotes-notebook-experience h1,
.skynotes-notebook-experience h2,
.skynotes-notebook-experience h3 {
    text-wrap: balance;
}