/**
 * Editor themes.
 * - Both themes: the front page's UI font and the daylight/dark toggle.
 * - Daylight (default, html[data-theme="light"]): matches the front page —
 *   lavender gradient, white cards, navy text, brand-blue pill buttons.
 * - Dark (html[data-theme="dark"]): the original look, untouched.
 * The handwriting page (.page-a) keeps its own handwriting font and paper colours.
 */

:root {
  --ui-font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell,
    'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  --fp-navy: #171717;
  --fp-plum: #240c2e;
  --fp-blue: #3c46fb;
  --fp-blue-2: #4049ff;
  --fp-purple: #8437fd;
  --fp-coral: #ff8177;
  --fp-lavender: #e8e9ff;
  --fp-muted: #3f3f46;
  --fp-line: rgba(64, 73, 255, 0.16);
}

/* ------------------------------------------------------------------ */
/* Both themes: front-page font for the interface (not the paper)      */

body.editor-shell,
.editor-shell button,
.editor-shell input,
.editor-shell select,
.editor-shell textarea,
.editor-shell label,
.editor-shell legend,
.editor-shell summary,
.editor-shell h1,
.editor-shell h2,
.editor-shell h3 {
  font-family: var(--ui-font);
}

/* Theme toggle (beside Home) */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #eee;
  font-weight: 650;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease;
}

.theme-toggle:hover {
  transform: translateY(-1px);
}

.theme-toggle-icon {
  font-size: 1.05rem;
  line-height: 1;
}

@media (max-width: 900px) {
  .theme-toggle-label {
    display: none;
  }
}

/* Smooth switch between themes (UI chrome only) */
.editor-shell,
.editor-topbar,
.editor-step,
.editor-btn,
.editor-field,
.custom-panel {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

/* ------------------------------------------------------------------ */
/* Daylight theme                                                       */

/* Painted on the root, not body + "fixed": a fixed body background under the
   blurred sticky top bar renders noticeably darker in Chrome */
html[data-theme='light'] {
  min-height: 100%;
  background: linear-gradient(135deg, #d9d2ff 0%, #e6deff 40%, #f1eaff 100%);
}

html[data-theme='light'] body.editor-shell {
  color: var(--fp-navy);
  background: transparent;
}

html[data-theme='light'] .editor-shell .star-field,
html[data-theme='light'] .editor-shell .bg {
  display: none; /* old dark backdrop: starfield + a fixed 30% black layer */
}

/* Top bar */
html[data-theme='light'] .editor-topbar {
  background: rgba(255, 255, 255, 0.78);
  border-bottom: 1px solid var(--fp-line);
  box-shadow: 0 6px 24px rgba(64, 73, 255, 0.08);
}

html[data-theme='light'] .editor-brand,
html[data-theme='light'] .editor-brand * {
  color: var(--fp-navy);
}

html[data-theme='light'] .editor-shell .nav-link {
  color: var(--fp-navy);
}

html[data-theme='light'] .editor-shell .nav-link:hover {
  background: rgba(64, 73, 255, 0.08);
}

html[data-theme='light'] .theme-toggle {
  background: #fff;
  border-color: var(--fp-line);
  color: var(--fp-navy);
  box-shadow: 0 4px 12px rgba(64, 73, 255, 0.12);
}

html[data-theme='light'] .navbar-profile {
  background: #fff;
  border-color: var(--fp-line);
  color: var(--fp-navy);
}

html[data-theme='light'] .navbar-profile * {
  color: var(--fp-navy);
}

html[data-theme='light'] .avatar-fallback {
  background: linear-gradient(135deg, var(--fp-blue), var(--fp-purple));
  color: #fff !important;
}

/* Step cards */
html[data-theme='light'] .editor-step {
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid var(--fp-line);
  box-shadow: 0 12px 34px rgba(64, 73, 255, 0.1);
  color: var(--fp-navy);
}

html[data-theme='light'] .editor-step h1,
html[data-theme='light'] .editor-step h2,
html[data-theme='light'] .editor-step h3 {
  color: var(--fp-navy);
}

html[data-theme='light'] .editor-step .hint,
html[data-theme='light'] .editor-shell .hint {
  color: var(--fp-muted);
}

html[data-theme='light'] .editor-step-label {
  color: var(--fp-muted);
}

html[data-theme='light'] .step-num {
  background: linear-gradient(135deg, var(--fp-blue), var(--fp-purple)) !important;
  color: #fff !important;
}

html[data-theme='light'] .editor-shell label,
html[data-theme='light'] .editor-shell .block,
html[data-theme='light'] .editor-shell legend,
html[data-theme='light'] .editor-shell summary {
  color: var(--fp-navy);
}

/* Fields */
html[data-theme='light'] .editor-field,
html[data-theme='light'] .editor-shell textarea,
html[data-theme='light'] .editor-file,
html[data-theme='light'] .editor-shell input[type='file'] {
  background: #fff;
  color: var(--fp-navy);
  border: 1px solid rgba(64, 73, 255, 0.22);
}

html[data-theme='light'] .editor-field::placeholder,
html[data-theme='light'] .editor-shell textarea::placeholder {
  color: #595959;
}

html[data-theme='light'] .editor-field:focus,
html[data-theme='light'] .editor-shell textarea:focus,
html[data-theme='light'] .editor-shell input:focus,
html[data-theme='light'] .editor-shell select:focus {
  outline: 2px solid rgba(64, 73, 255, 0.35);
  outline-offset: 1px;
}

html[data-theme='light'] .editor-shell input[type='file']::before {
  background: var(--fp-lavender);
  color: var(--fp-navy);
}

html[data-theme='light'] .editor-shell select,
html[data-theme='light'] .editor-shell input[type='number'],
html[data-theme='light'] .editor-shell input[type='text'],
html[data-theme='light'] .editor-shell input[type='color'] {
  background-color: #fff;
  color: var(--fp-navy);
  border-color: rgba(64, 73, 255, 0.22);
}

/* Buttons: front-page brand-blue pills */
html[data-theme='light'] .editor-btn,
html[data-theme='light'] .editor-shell .button,
html[data-theme='light'] .diagram-actions button:not(.secondary),
html[data-theme='light'] .formula-popup-card button:not(.close-button) {
  background: var(--fp-blue);
  color: #fff;
  border: none;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(60, 70, 251, 0.28);
}

html[data-theme='light'] .editor-btn:hover,
html[data-theme='light'] .editor-shell .button:hover {
  background: var(--fp-blue-2);
}

html[data-theme='light'] .editor-btn.secondary,
html[data-theme='light'] .editor-shell button.secondary,
html[data-theme='light'] .delete-button.editor-btn {
  background: #fff;
  color: var(--fp-blue);
  border: 1px solid rgba(60, 70, 251, 0.35);
  box-shadow: none;
}

html[data-theme='light'] .editor-btn:disabled,
html[data-theme='light'] .editor-shell button:disabled {
  opacity: 0.55;
}

/* Customisation panels */
html[data-theme='light'] .editor-custom details.custom-panel,
html[data-theme='light'] details.custom-panel {
  background: rgba(244, 241, 255, 0.85);
  border: 1px solid var(--fp-line);
}

html[data-theme='light'] .editor-shell fieldset {
  border-color: rgba(64, 73, 255, 0.2);
}

html[data-theme='light'] .switch-toggle div {
  background-color: #d7d3f5;
}

html[data-theme='light'] .margin-layout-tooltip {
  background: #fff;
  color: var(--fp-navy);
  border: 1px solid var(--fp-line);
  box-shadow: 0 10px 26px rgba(64, 73, 255, 0.16);
}

/* Output strip */
html[data-theme='light'] .editor-shell .output {
  color: var(--fp-muted);
}

/* Popups (diagram, formula, draft, AI loading) */
html[data-theme='light'] .diagram-popup,
html[data-theme='light'] .formula-popup.popup-container,
html[data-theme='light'] .draft-modal:not(.pay-modal) {
  background: rgba(36, 12, 46, 0.45) !important;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

html[data-theme='light'] .diagram-popup-controls,
html[data-theme='light'] .diagram-popup-preview,
html[data-theme='light'] .formula-popup-card,
html[data-theme='light'] .draft-modal-card {
  background: #fff !important;
  color: var(--fp-navy) !important;
  border: 1px solid var(--fp-line) !important;
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(36, 12, 46, 0.25);
}

html[data-theme='light'] .diagram-popup-controls *,
html[data-theme='light'] .formula-popup-card label,
html[data-theme='light'] .formula-popup-card h2,
html[data-theme='light'] .draft-modal-card h2,
html[data-theme='light'] .draft-modal-card p {
  color: var(--fp-navy);
}

html[data-theme='light'] .diagram-popup-controls button,
html[data-theme='light'] .diagram-popup-controls button * {
  color: #fff;
}

html[data-theme='light'] .diagram-popup-controls button.secondary,
html[data-theme='light'] .diagram-popup-controls button.secondary * {
  color: var(--fp-blue);
}

html[data-theme='light'] .diagram-preview-frame {
  border-color: rgba(64, 73, 255, 0.25);
  color: var(--fp-muted);
}

html[data-theme='light'] .diagram-popup .close-button,
html[data-theme='light'] .formula-popup .close-button {
  color: var(--fp-navy);
}

html[data-theme='light'] #fullScreenOverlay {
  background: rgba(232, 233, 255, 0.92) !important;
  color: var(--fp-navy) !important;
}

html[data-theme='light'] .billing-notice {
  color: var(--fp-navy);
  background: #fff7e0;
  border-color: #ffd166;
}

/* ------------------------------------------------------------------ */
/* Daylight on the profile page (auth.css look → front-page look)       */

html[data-theme='light'] .auth-body {
  background: transparent;
  color: var(--fp-navy);
}

html[data-theme='light'] .auth-panel h1 {
  color: var(--fp-navy);
}

html[data-theme='light'] .auth-foot,
html[data-theme='light'] .ref-label {
  color: var(--fp-muted);
}

html[data-theme='light'] .ref-input {
  color: var(--fp-navy);
  background: #fff;
  border-color: var(--fp-line);
}

html[data-theme='light'] .ref-input::placeholder {
  color: #595959;
}

html[data-theme='light'] .ref-note {
  color: #a33131;
}

html[data-theme='light'] .ref-note.ok {
  color: #167346;
}

html[data-theme='light'] .editor-topbar .linkish {
  color: var(--fp-navy);
}

html[data-theme='light'] .profile-card h1,
html[data-theme='light'] .library-card h2,
html[data-theme='light'] .refer-card h2,
html[data-theme='light'] .library-row strong {
  color: var(--fp-navy);
}

html[data-theme='light'] .profile-layout .muted,
html[data-theme='light'] .profile-layout .small {
  color: var(--fp-muted);
}

html[data-theme='light'] .profile-avatar {
  border-color: var(--fp-line);
}

html[data-theme='light'] .profile-avatar.placeholder {
  background: linear-gradient(135deg, var(--fp-blue), var(--fp-purple));
  color: #fff;
}

html[data-theme='light'] .profile-ref-code {
  background: var(--fp-lavender);
  color: var(--fp-navy);
}

html[data-theme='light'] .profile-ref-stats {
  color: var(--fp-navy);
}

html[data-theme='light'] .pill {
  background: var(--fp-blue);
  color: #fff;
}

html[data-theme='light'] .pill.ghost {
  background: #fff;
  color: var(--fp-blue);
  border: 1px solid rgba(60, 70, 251, 0.35);
}

html[data-theme='light'] .library-row {
  border-bottom-color: var(--fp-line);
}

html[data-theme='light'] .library-table-wrap {
  border-color: var(--fp-line);
  background: #fff;
}

html[data-theme='light'] .library-table th,
html[data-theme='light'] .library-table td {
  border-bottom-color: rgba(64, 73, 255, 0.1);
  color: var(--fp-navy);
}

html[data-theme='light'] .library-table thead th {
  background: var(--fp-lavender);
  color: var(--fp-muted);
}

html[data-theme='light'] .library-table tbody tr:hover {
  background: rgba(64, 73, 255, 0.05);
}

html[data-theme='light'] .library-table .col-num,
html[data-theme='light'] .library-table .col-date {
  color: var(--fp-muted);
}

html[data-theme='light'] .pager-btn {
  background: #fff;
  border-color: rgba(60, 70, 251, 0.35);
  color: var(--fp-blue);
}

html[data-theme='light'] .pager-btn:hover:not(.disabled) {
  background: var(--fp-lavender);
}

html[data-theme='light'] .pager-info {
  color: var(--fp-muted);
}

html[data-theme='light'] #fullScreenOverlay h2,
html[data-theme='light'] #fullScreenOverlay p,
html[data-theme='light'] .editor-shell .diagram-help,
html[data-theme='light'] .editor-shell .diagram-label-size-hint,
html[data-theme='light'] .editor-shell #draft-resume-meta,
html[data-theme='light'] .editor-shell footer {
  color: var(--fp-navy) !important;
}