/* Soft skin: the same chunky type and saturated color as the default skin, with rounded shapes,
   soft depth and buttons that press down on a colored lip instead of black outlines and offset shadows.
   Everything is scoped to <html data-skin="soft">, so the default skin is untouched. */
:root[data-skin="soft"] {
  --bg: #f3eee6; --surface: #fffdf9; --ink: #1d2b33; --muted: #5b6670;
  --yellow: #ffc533; --pink: #ffa3c4; --blue: #a6c8ff;
  --fine: #2ccf8a; --check: #ff6f52;
  --lip-yellow: #dba10e; --lip-pink: #e57ea5; --lip-blue: #7aa6ec;
  --lip-fine: #1a9e66; --lip-check: #d94f34; --lip-plain: #d9d1c4;
  --display: "Fraunces", Georgia, serif;
  --body: "DM Sans", system-ui, sans-serif;
  --lift: 0 1px 2px rgb(29 43 51 / .06), 0 10px 30px rgb(29 43 51 / .12);
}
@media (prefers-color-scheme: dark) {
  :root[data-skin="soft"]:not([data-theme="light"]) { --bg: #172026; --muted: #c9d3da; }
}

[data-skin="soft"] body { font-family: var(--body); font-weight: 500; }

[data-skin="soft"] h1 { font: 900 28px/1 var(--display); letter-spacing: -0.02em; background: none; border: 0;
  box-shadow: none; transform: none; padding: 0; color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root[data-skin="soft"]:not([data-theme="light"]) h1 { color: #fff; }
}

/* Segmented control: one rounded track, the chosen mode raised inside it. */
[data-skin="soft"] .modes { border: 0; box-shadow: none; background: #e6dfd3; border-radius: 16px; padding: 4px; gap: 4px; }
[data-skin="soft"] .modes button { border: 0; border-radius: 12px; font: 700 14px var(--body); color: #5b6670; padding: 8px 6px; }
[data-skin="soft"] .modes button + button { border-left: 0; }
[data-skin="soft"] .modes button[aria-pressed="true"] { background: var(--surface); color: var(--ink);
  box-shadow: 0 2px 0 var(--lip-plain), 0 2px 8px rgb(29 43 51 / .10); }

[data-skin="soft"] .stat { border: 0; border-radius: 18px; box-shadow: none; padding: 8px 14px; }
[data-skin="soft"] .stat:first-child { box-shadow: inset 0 -4px 0 var(--lip-pink); }
[data-skin="soft"] .stat:last-child { box-shadow: inset 0 -4px 0 var(--lip-fine); }
[data-skin="soft"] .stat b { font: 900 24px/1.1 var(--display); }

[data-skin="soft"] .progress { gap: 4px; }
[data-skin="soft"] .progress i { height: 8px; border: 0; border-radius: 99px; background: #e2dacd; }
[data-skin="soft"] .progress i.ok { background: var(--fine); }
[data-skin="soft"] .progress i.bad { background: var(--check); }
[data-skin="soft"] .progress i.now { background: var(--ink); }
[data-skin="soft"] .progress i.done { background: var(--blue); }

/* The card: a big rounded photo tile floating on soft shadow. */
[data-skin="soft"] .card { inset: 0; border: 0; border-radius: 28px; box-shadow: var(--lift); }
[data-skin="soft"] .card img { background: #0f171c; }
[data-skin="soft"] .meta { border-top: 0; background: var(--surface); font: 700 15px var(--body); }
[data-skin="soft"] .credit { color: var(--muted); font-weight: 500; font-size: 12px; }
[data-skin="soft"] .tag { border: 0; border-radius: 16px; font: 900 32px var(--display); color: var(--ink); text-transform: none;
  box-shadow: 0 6px 0 rgb(0 0 0 / .18); padding: 6px 18px; }
[data-skin="soft"] .tag.fine { box-shadow: 0 6px 0 var(--lip-fine); }
[data-skin="soft"] .tag.check { box-shadow: 0 6px 0 var(--lip-check); }

[data-skin="soft"] .verdict { border-bottom: 0; padding: 16px 16px 14px; }
[data-skin="soft"] .verdict .big { font: 900 36px/1 var(--display); text-transform: none; letter-spacing: -0.02em; }
[data-skin="soft"] .verdict .truth { font: 700 18px var(--body); }
[data-skin="soft"] .verdict .dx { border: 0; border-radius: 99px; box-shadow: none; background: rgb(255 255 255 / .7);
  padding: 4px 12px; font: 700 14px var(--body); }
[data-skin="soft"] .say { border-top: 0; background: #fff4d2; }
[data-skin="soft"] .hint { border: 0; border-radius: 99px; background: rgb(29 43 51 / .82); color: #fff;
  box-shadow: none; font: 700 14px var(--body); padding: 6px 14px; }

/* Buttons sit on a lip of their own color and press down onto it. */
[data-skin="soft"] .actions button,
[data-skin="soft"] .check-btn,
[data-skin="soft"] .why,
[data-skin="soft"] .notes .close {
  border: 0; border-radius: 18px; color: var(--ink); transition: transform .08s, box-shadow .08s; }
[data-skin="soft"] .actions button { font: 800 19px var(--display); padding: 16px 12px; }
[data-skin="soft"] #fine { background: var(--fine); box-shadow: 0 6px 0 var(--lip-fine); }
[data-skin="soft"] #check { background: var(--check); box-shadow: 0 6px 0 var(--lip-check); }
[data-skin="soft"] #next { background: var(--yellow); box-shadow: 0 6px 0 var(--lip-yellow); }
[data-skin="soft"] #cancelCheck { background: var(--surface); box-shadow: 0 6px 0 var(--lip-plain); }
[data-skin="soft"] .actions button:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--lip-plain); }
[data-skin="soft"] #fine:active { box-shadow: 0 1px 0 var(--lip-fine); }
[data-skin="soft"] #check:active { box-shadow: 0 1px 0 var(--lip-check); }
[data-skin="soft"] #next:active { box-shadow: 0 1px 0 var(--lip-yellow); }

[data-skin="soft"] .check-btn { font: 700 15px var(--body); background: var(--pink); box-shadow: 0 4px 0 var(--lip-pink); padding: 8px 14px; }
[data-skin="soft"] .list-btn { background: var(--yellow); box-shadow: 0 4px 0 var(--lip-yellow); }
[data-skin="soft"] .check-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--lip-pink); }
[data-skin="soft"] .why { font: 700 14px var(--body); background: var(--surface); box-shadow: 0 3px 0 rgb(0 0 0 / .15); padding: 6px 12px; }
[data-skin="soft"] .notes { border-top: 0; border-radius: 24px 24px 0 0; box-shadow: 0 -10px 30px rgb(29 43 51 / .18); }
[data-skin="soft"] .notes h3 { font: 900 20px/1.15 var(--display); }
[data-skin="soft"] .notes .close { font: 800 16px var(--body); background: #efe8dc; box-shadow: 0 3px 0 var(--lip-plain); }

[data-skin="soft"] .summary .sum-body p { font-family: var(--body); }
[data-skin="soft"] .bar span { border: 0; border-radius: 8px 8px 4px 4px; }
[data-skin="soft"] .missed img { border: 0; border-radius: 12px; }
[data-skin="soft"] .msg { border: 0; border-radius: 28px; box-shadow: var(--lift); }
[data-skin="soft"] footer a, [data-skin="soft"] footer button { font-weight: 700; }
@media (max-width: 420px) { [data-skin="soft"] h1 { font-size: 22px; } [data-skin="soft"] .check-btn { font-size: 13px; padding: 6px 9px; } }