theme.css

/* ── Theme Toggle Button ─────────────────────────────────────────────────── */
.theme-toggle {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line2);
  border-radius: 8px;
  background: var(--panel2);
  color: var(--muted);
  padding: 0 12px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-size: 13px;
}

.theme-toggle:hover {
  border-color: var(--line2);
  background: var(--panel);
  color: var(--text);
}

.theme-icon {
  font-size: 13px;
  color: var(--accent);
  opacity: 0.85;
}

.theme-toggle:hover .theme-icon {
  opacity: 1;
}

.theme-copy {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.15;
  gap: 1px;
}

.theme-copy small {
  font-size: 9px;
  letter-spacing: 0.08em;
  opacity: 0.55;
  font-family: monospace;
  text-transform: uppercase;
}

.theme-copy b {
  font-size: 12px;
  font-weight: 600;
}

/* ── Confirmation Modal ──────────────────────────────────────────────────── */
.confirm-dialog {
  width: min(430px, calc(100% - 28px));
  background: #0d1218;
  color: var(--text);
  border: 1px solid var(--line2, #303946);
  border-radius: 12px;
  padding: 28px;
  box-shadow: 0 30px 120px #000;
}

.confirm-dialog::backdrop {
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(5px);
}

.confirm-icon {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2b171c;
  color: #ff7180;
  font-weight: 900;
  margin-bottom: 20px;
}

.confirm-dialog h2 {
  font-size: 24px;
  margin: 0 0 8px;
}

.confirm-dialog p {
  color: var(--muted);
  margin: 0 0 26px;
}

.confirm-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.confirm-actions button {
  border: 0;
  border-radius: 6px;
  padding: 12px 15px;
  font-weight: 750;
  cursor: pointer;
}

.confirm-danger {
  background: #e94b5a;
  color: #fff;
}

.confirm-primary {
  background: var(--accent);
  color: #17030d;
}

/* ── Original Pastel Pink Theme ──────────────────────────────────────────── */
body[data-theme="pink"] {
  color-scheme: light;
  --bg: #ffd6e7;
  --panel: #ffe8f1;
  --panel2: #ffc7dd;
  --line: #eba9c3;
  --line2: #d989aa;
  --text: #46152d;
  --muted: #8d526c;
  --accent: #d92f78;
  --accent-soft: rgba(217, 47, 120, 0.12);
  --success: #2d9e5f;
  --success-soft: rgba(45, 158, 95, 0.14);
  --danger: #bd285d;
  background: linear-gradient(145deg, #ffd2e4 0%, #ffe8f1 48%, #f8bdd5 100%);
  color: var(--text);
}

body[data-theme="pink"] .nav-shell {
  background: rgba(255, 200, 225, 0.92);
  border-color: #d98fac;
  backdrop-filter: blur(12px);
}

body[data-theme="pink"] .brand,
body[data-theme="pink"] .nav-stats span {
  color: #5e203d;
}

body[data-theme="pink"] .nav-stats b {
  color: #a51654;
}

body[data-theme="pink"] .primary {
  background: #d92f78;
  color: #fff;
  box-shadow: none;
}

body[data-theme="pink"] .primary:hover {
  background: #c2256a;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

body[data-theme="pink"] .secondary {
  background: #ffeaf2;
  border-color: #d989aa;
  color: #6c2445;
}

body[data-theme="pink"] .secondary:hover {
  background: #ffd6e7;
  color: #46152d;
}

body[data-theme="pink"] .nav-icon-btn {
  background: #ffeaf2;
  border-color: #d989aa;
  color: #7a3556;
}

body[data-theme="pink"] .nav-icon-btn:hover {
  background: #ffd6e7;
  color: #46152d;
}

body[data-theme="pink"] .theme-icon {
  color: #d92f78;
  opacity: 1;
  text-shadow: none;
}

body[data-theme="pink"] .theme-toggle.active .theme-icon {
  color: #8c194b;
}

body[data-theme="pink"] .section-code,
body[data-theme="pink"] .eyebrow,
body[data-theme="pink"] .clear-filters-link,
body[data-theme="pink"] #clear-filters,
body[data-theme="pink"] .field-label-row button {
  color: #b51f60;
}

body[data-theme="pink"] .clear-filters-link:hover,
body[data-theme="pink"] #clear-filters:hover {
  color: #7d1040;
  background: rgba(217, 47, 120, 0.12);
}

body[data-theme="pink"] .result-line {
  color: #855069;
}

body[data-theme="pink"] .control-bar {
  background: #f1b7cf;
  border-color: #d995b2;
}

body[data-theme="pink"] .table-shell {
  background: #ffeaf2;
  border-color: #d995b2;
}

body[data-theme="pink"] .control-select,
body[data-theme="pink"] .search-wrap {
  border-color: #d995b2;
}

body[data-theme="pink"] .control-select span {
  color: #a91b58;
}

body[data-theme="pink"] input,
body[data-theme="pink"] textarea,
body[data-theme="pink"] select {
  background: #f7bfd5;
  border-color: #c86f94;
  color: #4a1730;
  box-shadow: none;
}

body[data-theme="pink"] input:hover,
body[data-theme="pink"] select:hover {
  background: #f3b3cd;
  border-color: #b94e7c;
}

body[data-theme="pink"] input:focus,
body[data-theme="pink"] select:focus,
body[data-theme="pink"] textarea:focus {
  background: #fac9dc;
  border-color: #a9245d;
}

body[data-theme="pink"] input::placeholder,
body[data-theme="pink"] textarea::placeholder {
  color: #8d536c;
}

body[data-theme="pink"] .control-bar input,
body[data-theme="pink"] .control-bar select {
  background: transparent;
  border: 0;
}

body[data-theme="pink"] th {
  background: #efb6ce;
  border-color: #d18aa8;
  color: #6a2d49;
}

body[data-theme="pink"] td {
  border-color: #e3a8c0;
  color: #6d3650;
}

body[data-theme="pink"] tbody tr {
  background: #ffeaf2;
}

body[data-theme="pink"] tbody tr:nth-child(even) {
  background: #ffdeeb;
}

body[data-theme="pink"] tbody tr:hover {
  background: #eaa5c2;
}

body[data-theme="pink"] .table-title {
  color: #441329;
}

body[data-theme="pink"] .row-number {
  color: #ad6080;
}

body[data-theme="pink"] .category-pill {
  background: #f5b9d1;
  border-color: #ce7398;
  color: #711e46;
}

body[data-theme="pink"] .row-action {
  color: #9f174f;
}

body[data-theme="pink"] .resource-icon-link {
  background: rgba(217, 47, 120, 0.15);
  color: #b51f60;
}

body[data-theme="pink"] .resource-icon-link:hover {
  background: rgba(217, 47, 120, 0.3);
}

body[data-theme="pink"] .status-todo:not(.active) {
  background: #efb8cc;
  border-color: #c86179;
  color: #9d243f;
}

body[data-theme="pink"] .status-learning:not(.active) {
  background: #efd29f;
  border-color: #b98927;
  color: #73520e;
}

body[data-theme="pink"] .status-done:not(.active) {
  background: #abd8bd;
  border-color: #4b9c6e;
  color: #1f6841;
}

body[data-theme="pink"] .status-todo.active {
  background: #c83c5c;
  border-color: #c83c5c;
  color: #fff;
}

body[data-theme="pink"] .status-learning.active {
  background: #d5a832;
  border-color: #d5a832;
  color: #3f2b03;
}

body[data-theme="pink"] .status-done.active {
  background: #3b9d67;
  border-color: #3b9d67;
  color: #fff;
}

body[data-theme="pink"] .topic-page {
  background: #efb4cc;
  border-color: #ce7da0;
  box-shadow: 0 28px 80px rgba(104, 25, 61, 0.25);
}

body[data-theme="pink"] .topic-page::backdrop {
  background: rgba(111, 35, 69, 0.34);
}

body[data-theme="pink"] .editor-header,
body[data-theme="pink"] .editor-footer {
  background: #e7a4c0;
  border-color: #d58fac;
}

body[data-theme="pink"] .editor-header-actions > span {
  color: #805068;
}

body[data-theme="pink"] .topic-sidebar {
  background: #efb4cc;
  border-color: #d58fac;
}

body[data-theme="pink"] .field-number {
  border-color: #b74e7c;
  color: #7a2148;
  background: #f5b5ce;
}

body[data-theme="pink"] .topic-sidebar label,
body[data-theme="pink"] .editor-status > span,
body[data-theme="pink"] .field-label-row {
  color: #642a46;
}

body[data-theme="pink"] .notes-editor,
body[data-theme="pink"] .rich-notes-area {
  background: #f9cfe0;
  color: #4a1830;
}

body[data-theme="pink"] .notes-toolbar {
  background: #eaa9c4;
  border-color: #d58fac;
  color: #73435b;
}

body[data-theme="pink"] .rich-notes-area::-webkit-scrollbar-thumb,
body[data-theme="pink"] .topic-sidebar::-webkit-scrollbar-thumb,
body[data-theme="pink"] .category-list::-webkit-scrollbar-thumb {
  background: rgba(122, 33, 72, 0.25);
}

body[data-theme="pink"] .rich-notes-area::-webkit-scrollbar-thumb:hover,
body[data-theme="pink"] .topic-sidebar::-webkit-scrollbar-thumb:hover,
body[data-theme="pink"] .category-list::-webkit-scrollbar-thumb:hover {
  background: rgba(122, 33, 72, 0.45);
}

body[data-theme="pink"] .tool-btn {
  background: #ffeaf2;
  border-color: #d989aa;
  color: #642a46;
}

body[data-theme="pink"] .tool-btn:hover {
  background: #ffd6e7;
  color: #d92f78;
}

body[data-theme="pink"] .color-palette-popover {
  background: #ffe8f1;
  border-color: #d989aa;
}

body[data-theme="pink"] .editor-floating-toolbar {
  background: rgba(255, 232, 241, 0.96);
  border-color: #d989aa;
  box-shadow: 0 16px 40px rgba(100, 20, 50, 0.25);
}

body[data-theme="pink"] .float-btn {
  color: #4a1830;
}

body[data-theme="pink"] .float-btn:hover {
  background: #ffd6e7;
  color: #d92f78;
}

body[data-theme="pink"] .code-block-wrap {
  background: #2a0e1c;
  border-color: #d989aa;
}

body[data-theme="pink"] .code-block-header {
  background: #3d1428;
  border-color: #551d38;
}

body[data-theme="pink"] pre.code-block {
  background: #2a0e1c;
  color: #fce7f3;
}

body[data-theme="pink"] .terminal-block-wrap {
  background: #170810;
  border-color: #d989aa;
}

body[data-theme="pink"] .terminal-header {
  background: #2b0f1e;
  border-color: #451730;
}

body[data-theme="pink"] pre.terminal-block {
  background: #170810;
  color: #f472b6;
}

body[data-theme="pink"] .rich-quote {
  background: #ffd6e7;
  border-left-color: #d92f78;
  color: #642a46;
}

body[data-theme="pink"] .inline-code {
  background: rgba(217, 47, 120, 0.12);
  border-color: rgba(217, 47, 120, 0.25);
  color: #a51654;
}

body[data-theme="pink"] .green-dot {
  background: #b62563;
  box-shadow: none;
}


body[data-theme="pink"] .sidebar-tip {
  border-color: #d493af;
  color: #89566e;
}

body[data-theme="pink"] .sidebar-tip b {
  color: #9f174f;
}

body[data-theme="pink"] .category-manager {
  background: #dea0bb;
  border-color: #cd7b9e;
}

body[data-theme="pink"] .category-item {
  background: #efbdd1;
  color: #642a46;
}

body[data-theme="pink"] .add-category button {
  background: #b62563;
  color: #fff;
}

body[data-theme="pink"] .cancel-button,
body[data-theme="pink"] .secondary {
  background: #f7d1e0;
  border-color: #bc6b8e;
  color: #662a47;
}

body[data-theme="pink"] .cancel-button:hover,
body[data-theme="pink"] .secondary:hover {
  background: #eeb6cc;
  color: #4c1730;
}

body[data-theme="pink"] .confirm-dialog {
  background: #efb5cd;
  border-color: #c87599;
  color: #48152e;
  box-shadow: 0 25px 70px rgba(96, 25, 57, 0.28);
}

body[data-theme="pink"] .confirm-dialog::backdrop {
  background: rgba(105, 32, 65, 0.3);
}

body[data-theme="pink"] .confirm-icon {
  background: #edafc8;
  color: #841c4a;
}

body[data-theme="pink"] .confirm-dialog p {
  color: #805069;
}

body[data-theme="pink"] .confirm-danger {
  background: #b9255f;
  color: #fff;
}

body[data-theme="pink"] .empty {
  border-color: #ce86a4;
  background: #f8c7da;
}

body[data-theme="pink"] .nav-tabs {
  background: #f7cada;
  border-color: #d98fac;
}

body[data-theme="pink"] .nav-tab {
  color: #7a3556;
}

body[data-theme="pink"] .nav-tab:hover {
  color: #4a1730;
}

body[data-theme="pink"] .nav-tab.active {
  background: #ffd6e7;
  color: #46152d;
  box-shadow: 0 2px 6px rgba(104, 25, 61, 0.15);
}

body[data-theme="pink"] .tab-badge {
  background: #f1b5ce;
  color: #8c194b;
}

body[data-theme="pink"] .star-btn {
  color: #c87599;
}

body[data-theme="pink"] .star-btn:hover,
body[data-theme="pink"] .star-btn.active {
  color: #b51f60;
}


body[data-theme="pink"] .notion-icon,
body[data-theme="pink"] .editor-notion-link span,
body[data-theme="pink"] .notion-dialog-icon {
  background: #871948;
  color: #ffeaf2;
}

body[data-theme="pink"] .notion-dialog {
  background: #fde8f1;
  border-color: #d989aa;
  color: #4a1329;
}

body[data-theme="pink"] .notion-dialog .dialog-header {
  border-color: #eba9c3;
}

body[data-theme="pink"] .notion-guide-card {
  background: #ffc7dd;
  border-color: #d989aa;
}

body[data-theme="pink"] .sync-btn {
  background: #ffeaf2;
  border-color: #d989aa;
  color: #46152d;
}

body[data-theme="pink"] .sync-btn:hover {
  background: #ffd6e7;
}

body[data-theme="pink"] .notion-field-label input {
  background: #ffeaf2;
  border-color: #d989aa;
  color: #4a1329;
}

body[data-theme="pink"] .notion-field-label input:focus {
  border-color: #d92f78;
  box-shadow: 0 0 0 3px rgba(217, 47, 120, 0.15);
}

body[data-theme="pink"] .editor-notion-link {
  background: #f8c7da;
  border-color: #d995b2;
  color: #4a1329;
}

body[data-theme="pink"] .editor-notion-link:hover {
  background: #ffdeeb;
}

body[data-theme="pink"] .notion-row-link {
  background: #f1b5ce;
  border-color: #d995b2;
  color: #4a1329;
}

body[data-theme="pink"] .back-btn {
  background: #f8c7da;
  border-color: #d995b2;
  color: #4a1329;
}

body[data-theme="pink"] .back-btn:hover {
  background: #ffdeeb;
  border-color: #c86f94;
}

body[data-theme="pink"] .module-card {
  background: #f8c7da;
  border-color: #d995b2;
  box-shadow: 0 2px 8px rgba(135, 25, 72, 0.06);
}

body[data-theme="pink"] .module-card:hover {
  background: #ffdeeb;
  border-color: #c86f94;
  box-shadow: 0 4px 16px rgba(135, 25, 72, 0.12);
}

body[data-theme="pink"] .card-index,
body[data-theme="pink"] .card-avatar {
  background: #f1b5ce;
  border-color: #d995b2;
  color: #8c194b;
}

body[data-theme="pink"] .editor-resizer {
  background: #d995b2;
}

body[data-theme="pink"] .editor-resizer:hover,
body[data-theme="pink"] .editor-resizer.is-dragging {
  background: #d92f78;
}

body[data-theme="pink"] .notes-tool-btn {
  background: #ffeaf2;
  border-color: #d995b2;
  color: #7d1040;
}

body[data-theme="pink"] .notes-tool-btn:hover {
  background: #ffd6e7;
  color: #55082a;
}

body[data-theme="pink"] .card-status-badge.status-todo {
  background: #ffd3e4;
  color: #7a3556;
  border-color: #d995b2;
}

body[data-theme="pink"] .card-status-badge.status-learning {
  background: #f1b5ce;
  color: #8c194b;
}

body[data-theme="pink"] .card-status-badge.status-done {
  background: #d4edda;
  color: #155724;
}

body[data-theme="pink"] .card-progress-bar {
  background: #f1b5ce;
}

body[data-theme="pink"] .card-progress-fill {
  background: #d92f78;
}

body[data-theme="pink"] .card-progress-fill.done {
  background: #28a745;
}

body[data-theme="pink"] .card-count {
  color: #7a3556;
}

body[data-theme="pink"] .card-today-badge {
  background: #ffd3e4;
  color: #8c194b;
}

body[data-theme="pink"] .card-arrow {
  color: #7a3556;
}

body[data-theme="pink"] .module-card:hover .card-arrow {
  color: #4a1329;
}

body[data-theme="pink"] .add-module-card {
  border-color: #d995b2;
  color: #7a3556;
}

body[data-theme="pink"] .add-module-card:hover {
  border-color: #b51f60;
  color: #4a1329;
  background: #ffeaf2;
}

body[data-theme="pink"] .add-module-circle {
  background: #f8c7da;
  border-color: #d995b2;
  color: #b51f60;
}

body[data-theme="pink"] .add-module-card:hover .add-module-circle {
  background: #f1b5ce;
}

body[data-theme="pink"] .new-category-dialog {
  background: #fde8f1;
  border-color: #d995b2;
  color: #4a1329;
}

body[data-theme="pink"] .dialog-icon-badge {
  background: #d92f78;
  color: #fff;
}

@media (max-width: 650px) {
  .theme-copy,
  .add-copy,
  .notion-label {
    display: none;
  }
  .theme-toggle,
  .add-topic-button {
    padding: 0 10px;
  }
}