/* Dark mode inherits the existing palette without color overrides. */
:root {
  --card-hover-shadow: 0 20px 40px -5px #0004;
  --card-hover-border: #63744e;
}

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f7f2;
  --panel: #ffffff;
  --panel2: #edf1e7;
  --line: #d8dfcf;
  --muted: #63715b;
  --ink: #253120;
  --accent: #426629;
  --accent-ink: #ffffff;
  --danger: #b7423d;
  --card-hover-shadow: 0 20px 40px -5px #263c1b1a;
  --card-hover-border: #94a780;
}

[data-theme="light"] :is(input, select, textarea) {background: #fbfcf8;}
[data-theme="light"] :is(input, select, textarea):focus {border-color: #71944f;box-shadow: 0 0 0 3px #42662914;}
[data-theme="light"] .btn:hover {background: #e3eadb;}
[data-theme="light"] .btn.primary:hover {background: #355322;box-shadow: 0 4px 25px #42662920;}
[data-theme="light"] .pill.green {background: #edf5e6;border-color: #cbdcbb;}
[data-theme="light"] .pill.warn {color: #876026;background: #fbf5e9;border-color: #ead7b3;}
[data-theme="light"] .pill.red {border-color: #e7bfbc;}
[data-theme="light"] .sidebar {background: #eff3e9;}
[data-theme="light"] .nav-label {color: #758169;}
[data-theme="light"] .nav-item:hover {background: #e2eada;}
[data-theme="light"] .nav-item.active {background: #dce8cc;}
[data-theme="light"] .sidebar-note {background: linear-gradient(135deg, #e7efdc, #f2f5ec);}
[data-theme="light"] .avatar {background: #e0e9d4;}
[data-theme="light"] .topbar {border-bottom-color: #d8dfcf99;}
[data-theme="light"] .quota-pill {color: #526447;}
/* Keep the original illustrated banners and their text readable on both themes. */
[data-theme="light"] :is(.hero, .auth-art) {color: #f0f3e9;}
[data-theme="light"] :is(.hero, .auth-art) .eyebrow {color: #d5f793;}
[data-theme="light"] .auth-art .brand small {color: #b9cab0;}
[data-theme="light"] .step-number {border-color: #b4c69c;}
[data-theme="light"] .prompt-box {background: #f7faf2;border-color: #cbd8bc;}
[data-theme="light"] .prompt-box textarea {background: transparent;}
[data-theme="light"] .prompt-box textarea::placeholder {color: #75816c;}
[data-theme="light"] :is(.prompt-footer, .auth-privacy, .footnote, .bottom-line) {color: #68775e;}
[data-theme="light"] :is(.field>label, .field-label) {color: #46553d;}
[data-theme="light"] .upload-box {border-color: #b7c8a6;}
[data-theme="light"] .upload-box.drag {background: #edf5e6;}
[data-theme="light"] .upload-box .icon {color: #698154;}
[data-theme="light"] .upload-box small {color: #6b7a60;}
[data-theme="light"] .style-card {color: #f0f3e9;}
[data-theme="light"] .style-card.selected:after {color: #d5f793;}
[data-theme="light"] .ratio-button {background: #f7faf2;}
[data-theme="light"] .ratio-button.active {background: #eaf2df;border-color: #87a56b;}
[data-theme="light"] .summary {background: #f2f6eb;}
[data-theme="light"] .hint {color: #85602a;background: #fcf8ee;border-color: #e9dcbc;}
[data-theme="light"] .hint.info {color: #51693f;background: #f1f7eb;border-color: #d2e0c5;}
[data-theme="light"] .active-strip {background: #edf4e5;}
[data-theme="light"] .progress {background: #dce6d2;}
[data-theme="light"] .tabs {background: #edf2e7;}
[data-theme="light"] .tab.active {background: #dce9ce;}
[data-theme="light"] .work-preview {background: radial-gradient(ellipse at 50% 100%, #d8e7c8, #edf3e7 65%);}
[data-theme="light"] .work-preview>.icon {color: #7c9566;}
[data-theme="light"] .work-preview .pill {background: #ffffffeb;}
[data-theme="light"] .expiry {color: #647c4e;}
[data-theme="light"] .expiry.expiring {color: #956027;}
[data-theme="light"] .empty-state {border-color: #c7d4bb;}
[data-theme="light"] .integration-logo {background: #e5efd9;}
[data-theme="light"] th {background: #f1f5eb;}
[data-theme="light"] .quota-line {color: #526746;}
[data-theme="light"] .stat {background: #f4f7ef;}
[data-theme="light"] .record .icon {color: #7b955e;}
[data-theme="light"] .auth-form input {background: #ffffff;}
[data-theme="light"] .error-message {border-color: #e7bfbc;}
[data-theme="light"] dialog {background: #ffffff;border-color: #c1cfb4;box-shadow: 0 25px 100px #263c1b33;}
[data-theme="light"] dialog::backdrop {background: #26332266;}
[data-theme="light"] .modal-head {background: #ffffff;}
[data-theme="light"] .modal-body pre {background: #f4f7ee;}
[data-theme="light"] :is(.modal-body video, .modal-body>.preview-img) {background: #e8efdf;}
[data-theme="light"] .toast {background: #f2f8e9;border-color: #a9c48b;color: #365425;box-shadow: 0 12px 40px #263c1b22;}
[data-theme="light"] .toast.error {background: #fff1ed;border-color: #d8a39a;color: #963e32;}
[data-theme="light"] .duration-presets button {background: #f4f7ef;}
[data-theme="light"] .duration-presets button.active {border-color: #87a56b;}
[data-theme="light"] .key-once {background: #f0f7e8;border-color: #a8bf8e;}

.theme-button {margin: 0 0 12px;font-size: 12px;}
.theme-button .theme-indicator {margin-left: auto;width: 28px;height: 16px;border-radius: 12px;background: var(--line);padding: 3px;}
.theme-button .theme-indicator::before {content: '';display: block;width: 10px;height: 10px;border-radius: 50%;background: var(--muted);transition: transform .3s, background .3s;}
.theme-button[aria-pressed="true"] .theme-indicator::before {transform: translateX(12px);background: var(--accent);}
.theme-button .icon {transition: transform .6s;transform-style: preserve-3d;}
.theme-button[aria-pressed="true"] .icon {transform: rotateY(180deg);}

@media (max-width: 680px) {
  [data-theme="light"] .auth-lang {color: #d9e5cd;border-color: #d9e5cd55;background: #17201466;}
}

/* Entrance curve, stagger, and 6px hover lift from the supplied index.html. */
@keyframes rotate-in-up {
  from {opacity: 0;transform: perspective(1000px) translateY(60px) rotateX(10deg) scale(.9);}
  to {opacity: 1;transform: none;}
}
.motion-card, dialog[open] {
  animation: rotate-in-up .6s cubic-bezier(.2,.8,.2,1) var(--motion-delay, 0s) backwards;
  transform-origin: center bottom;
}
:is(.work-card, .style-card, .integration-card) {
  transition: transform .3s cubic-bezier(.25,.8,.25,1), box-shadow .3s, border-color .3s;
}
.btn {transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;}
@media (hover: hover) and (pointer: fine) {
  :is(.work-card, .style-card, .integration-card):hover {
    transform: translateY(-6px);
    box-shadow: var(--card-hover-shadow);
    border-color: var(--card-hover-border);
  }
  .btn:not(:disabled):hover {transform: translateY(-1px);}
}
@media (prefers-reduced-motion: reduce) {
  .motion-card, dialog[open] {animation: none;}
  :is(.work-card, .style-card, .integration-card, .btn):hover {transform: none !important;}
}