html[data-note-theme="dark"] {
    color-scheme: dark;
}

html[data-note-theme="dark"] body.notepad-list-page {
    background-color: #10141d;
    color: #e7edf6;
}

html[data-note-theme="dark"] body.notepad-editor-page {
    color: #e7edf6;
}

html[data-note-theme="dark"] .header {
    background-color: #151b26;
    color: #f7f9fc;
    box-shadow: 0 5px 12px rgba(0, 0, 0, 0.45);
}

html[data-note-theme="dark"] .header .name {
    color: #f7f9fc;
}

html[data-note-theme="dark"] .header .menu-icon img,
html[data-note-theme="dark"] .header .right .icon img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

html[data-note-theme="dark"] .header .logo img,
html[data-note-theme="dark"] .header img[src*="logo"],
html[data-note-theme="dark"] .header img[src*="pro"] {
    filter: none;
}

html[data-note-theme="dark"] .header .right .icon img[src*="pro-thu"],
html[data-note-theme="dark"] .header .right .icon image[src*="pro-thu"],
html[data-note-theme="dark"] .header .right #pro-button img[src*="pro-thu"],
html[data-note-theme="dark"] .header .right #pro-button image[src*="pro-thu"] {
    /* O icone Note Pro deve manter as cores originais no tema escuro. */
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal;
}

html[data-note-theme="dark"] .sidebar {
    background-color: #111827;
    color: #f9fafb;
}

html[data-note-theme="dark"] .sidebar .links a {
    color: #f9fafb;
}

.sidebar-ads-box {
    width: 242px;
    height: 240px;
    min-height: 240px;
    margin: 0 auto;
    /* No tema claro a lateral original e escura, entao o iframe segue essa mesma superficie. */
    background-color: #333333;
    border-radius: 7px;
    overflow: hidden;
}

.sidebar-ads-iframe {
    display: block;
    width: 242px;
    height: 240px;
    border: 0;
    background-color: #333333;
}

html[data-note-theme="dark"] .sidebar-ads-box,
html[data-note-theme="dark"] .sidebar-ads-iframe {
    background-color: #111827;
}

html[data-note-theme="dark"] header input[type="text"],
html[data-note-theme="dark"] header input[type="search"],
html[data-note-theme="dark"] header #search,
html[data-note-theme="dark"] input[type="text"],
html[data-note-theme="dark"] input[type="search"],
html[data-note-theme="dark"] input[type="password"],
html[data-note-theme="dark"] textarea {
    background-color: #111827;
    color: #f3f4f6;
    border-color: #3b4658;
}

html[data-note-theme="dark"] input::placeholder,
html[data-note-theme="dark"] textarea::placeholder {
    color: #9ca3af;
}

html[data-note-theme="dark"] .locked-notes-shortcut-button {
    background-color: #111827;
    border-color: #3b4658;
}

html[data-note-theme="dark"] .locked-notes-shortcut-button img {
    filter: brightness(0) invert(1);
    opacity: 0.9;
}

html[data-note-theme="dark"] .locked-notes-shortcut-button.locked-active {
    background-color: #2a1020;
    border-color: #b80f52;
}

html[data-note-theme="dark"] #note-title {
    /* O titulo tem ID proprio, entao precisa acompanhar a borda suave do editor no tema escuro. */
    border-color: #3b4658 !important;
    box-shadow: none;
}

html[data-note-theme="dark"] #note-title:focus {
    border-color: #4b5568 !important;
    outline: none;
}

html[data-note-theme="dark"] #categories .category {
    background-color: #273244;
    color: #f3f4f6;
}

html[data-note-theme="dark"] #categories .selected {
    background-color: #b80f52;
    color: #ffffff;
}

html[data-note-theme="dark"] #notes-grid .note {
    color: #1f2937;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.28);
}

html[data-note-theme="dark"] #notes-grid .note.note-default-color,
html[data-note-theme="dark"] body.notepad-editor-page.note-default-color {
    background-color: #303846 !important;
    color: #f8fafc !important;
}

html[data-note-theme="dark"] #notes-grid .note.note-default-color h2,
html[data-note-theme="dark"] #notes-grid .note.note-default-color p {
    color: #f8fafc !important;
}

html[data-note-theme="dark"] #notes-grid .note.note-default-color #atualizado {
    color: #cbd5e1 !important;
}

html[data-note-theme="dark"] #notes-grid .note.note-default-color #id {
    /* Mantem o ID no HTML para a logica interna, mas invisivel para o usuario. */
    color: rgba(255, 255, 255, 0) !important;
}

html[data-note-theme="dark"] #alert-note {
    background-color: #10141d;
    color: #9ca3af;
}

html[data-note-theme="dark"] .modal-content,
html[data-note-theme="dark"] .modal-content-lk {
    background-color: #1b2432;
    color: #edf2f7;
    border-color: #3b4658;
}

html[data-note-theme="dark"] .modal-content h3 {
    background-color: #202b3a !important;
    color: #ff8ab6 !important;
    border-color: #42506a !important;
}

html[data-note-theme="dark"] .close-button,
html[data-note-theme="dark"] #close-modal-lk {
    color: #d1d5db;
}

html[data-note-theme="dark"] .close-button:hover,
html[data-note-theme="dark"] .close-button:focus,
html[data-note-theme="dark"] #close-modal-lk:hover {
    color: #ffffff;
}

html[data-note-theme="dark"] #existing-categories .category-option,
html[data-note-theme="dark"] #notes-list,
html[data-note-theme="dark"] #restore-notes-list {
    background-color: #111827;
    color: #f3f4f6;
    border-color: #3b4658 !important;
}

html[data-note-theme="dark"] .checkbox-container {
    background-color: #202b3a;
}

html[data-note-theme="dark"] .checkbox-label,
html[data-note-theme="dark"] .modal-content h4,
html[data-note-theme="dark"] .modal-content p {
    color: #e5e7eb !important;
}

html[data-note-theme="dark"] #menu-modal button[style*="background: transparent"],
html[data-note-theme="dark"] #menu-modal button[style*="background:transparent"] {
    background-color: #202b3a !important;
    border-color: #4b5568 !important;
    color: #e5e7eb !important;
}

html[data-note-theme="dark"] #menu-modal button span[style] {
    color: #e5e7eb !important;
}

html[data-note-theme="dark"] #locked-overlay-lk {
    background-color: rgba(17, 24, 39, 0.95);
    color: #f9fafb;
}

html[data-note-theme="dark"] #termsText {
    background-color: #111827;
    color: #f3f4f6;
}

html[data-note-theme="dark"] .cke_chrome {
    border-color: #3b4658 !important;
}

html[data-note-theme="dark"] .cke_inner,
html[data-note-theme="dark"] .cke_contents,
html[data-note-theme="dark"] .cke_wysiwyg_frame {
    background-color: #111827 !important;
}

html[data-note-theme="dark"] .cke_top,
html[data-note-theme="dark"] .cke_bottom,
html[data-note-theme="dark"] .cke_toolgroup,
html[data-note-theme="dark"] .cke_combo_button {
    background: #202b3a !important;
    border-color: #3b4658 !important;
}

html[data-note-theme="dark"] .cke_combo_text,
html[data-note-theme="dark"] .cke_combo_inlinelabel,
html[data-note-theme="dark"] .cke_combo_label,
html[data-note-theme="dark"] .cke_button_label,
html[data-note-theme="dark"] .cke_path_item,
html[data-note-theme="dark"] .cke_path_empty {
    color: #e5e7eb !important;
}

html[data-note-theme="dark"] a.cke_button,
html[data-note-theme="dark"] a.cke_combo_button {
    color: #e5e7eb !important;
    border-color: #3b4658 !important;
}

html[data-note-theme="dark"] a.cke_button_on,
html[data-note-theme="dark"] a.cke_button_off:hover,
html[data-note-theme="dark"] a.cke_button_off:focus,
html[data-note-theme="dark"] a.cke_button_off:active,
html[data-note-theme="dark"] .cke_combo_on a.cke_combo_button,
html[data-note-theme="dark"] .cke_combo_off a.cke_combo_button:hover,
html[data-note-theme="dark"] .cke_combo_off a.cke_combo_button:focus,
html[data-note-theme="dark"] .cke_combo_off a.cke_combo_button:active {
    background: #334155 !important;
    border-color: #64748b !important;
}

html[data-note-theme="dark"] .cke_button_arrow,
html[data-note-theme="dark"] .cke_combo_arrow {
    border-top-color: #e5e7eb !important;
}

html[data-note-theme="dark"] .cke_toolbox_collapser .cke_arrow {
    border-bottom-color: #e5e7eb !important;
}

html[data-note-theme="dark"] .cke_toolbox_collapser.cke_toolbox_collapser_min .cke_arrow {
    border-top-color: #e5e7eb !important;
}

html[data-note-theme="dark"] .cke_toolbar_separator {
    background-color: #64748b !important;
}

html[data-note-theme="dark"] .cke_button_icon {
    filter: invert(1);
}

.note-theme-modal {
    z-index: 10001 !important;
}

.note-theme-card {
    position: relative;
    text-align: center;
}

.note-theme-close {
    position: absolute;
    top: 8px;
    right: 12px;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 28px;
    cursor: pointer;
}

.note-theme-title {
    display: inline-block;
    width: 200px;
    padding: 5px 0;
    margin: 18px auto 12px;
    background-color: #ffffff;
    color: #b80f52;
    border: 1px solid #b80f52;
}

.note-theme-current {
    margin: 8px 0 16px;
    color: #5f6672;
}

.note-theme-options {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.note-theme-choice {
    min-width: 130px;
    border: 1px solid #b80f52;
    background: transparent;
    color: #b80f52;
    border-radius: 5px;
    padding: 10px 16px;
    cursor: pointer;
    font-weight: bold;
}

.note-theme-choice.active {
    background-color: #b80f52;
    color: #ffffff;
}

.payment-warning-modal {
    z-index: 10002 !important;
}

.payment-warning-card {
    max-width: 390px;
    text-align: center;
    position: relative;
}

.payment-warning-title {
    width: 210px;
    padding: 6px 0;
    margin: 18px auto 14px;
    background-color: #fff7ed !important;
    color: #b45309 !important;
    border: 1px solid #f59e0b !important;
}

.payment-warning-text {
    max-width: 320px;
    margin: 0 auto 12px;
    color: #374151;
    font-size: 14px;
    line-height: 1.45;
}

.payment-warning-actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    align-items: center;
    margin-top: 16px;
}

.payment-warning-primary,
.payment-warning-secondary,
.payment-warning-muted {
    width: 210px;
    min-height: 38px;
    border-radius: 5px;
    border: 1px solid #b80f52;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.payment-warning-primary {
    background-color: #b80f52;
    color: #ffffff;
}

.payment-warning-secondary {
    background-color: #ffffff;
    color: #b80f52;
}

.payment-warning-muted {
    background-color: transparent;
    color: #6b7280;
}

html[data-note-theme="dark"] .payment-warning-title {
    background-color: #2d2418 !important;
    color: #fbbf24 !important;
    border-color: #92400e !important;
}

html[data-note-theme="dark"] .payment-warning-text {
    color: #e5e7eb;
}

html[data-note-theme="dark"] .payment-warning-secondary {
    background-color: #202b3a;
    color: #ff8ab6;
}

html[data-note-theme="dark"] .payment-warning-muted {
    color: #d1d5db;
}