/* Free canvas color, independent of interface accents. Black restores the original theme. */
.appearance-subtitle{margin:22px 0 8px}
.background-settings{border-top:1px solid var(--line);padding-top:24px;margin-top:24px}
.background-settings .section-head h3{font-size:var(--fs-14,14px)}
.background-palette{margin-top:20px}
.color-plane{position:relative;width:100%;height:200px;border-radius:12px;border:1px solid #8887;background-image:linear-gradient(to top,#000,transparent),linear-gradient(to right,#fff,transparent);cursor:crosshair;touch-action:none;isolation:isolate}
.color-plane:focus-visible{outline:3px solid var(--purple);outline-offset:4px}
.color-plane-cursor{position:absolute;width:19px;height:19px;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #000,0 1px 4px #0009;transform:translate(-50%,-50%);pointer-events:none}
.color-hue-label{display:grid;grid-template-columns:60px minmax(0,1fr);align-items:center;gap:12px;font-size:var(--fs-11,11px);color:var(--muted);margin-top:10px}
.color-hue{appearance:none;-webkit-appearance:none;width:100%;height:44px;cursor:pointer;background:linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00) center / 100% 15px no-repeat;border:0;margin:0;padding:0}
.color-hue::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:23px;height:23px;border:3px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #777,0 2px 5px #0005}
.color-hue::-moz-range-thumb{width:18px;height:18px;border:3px solid #fff;border-radius:50%;background:transparent;box-shadow:0 0 0 1px #777}
.color-picker-help{font-size:var(--fs-10,10px);color:var(--muted);margin-top:3px;line-height:1.6}
.background-palette .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@media(max-width:760px){.color-plane{height:175px}.color-hue-label{grid-template-columns:50px minmax(0,1fr);gap:8px}}
#background-form{display:flex;align-items:flex-end;gap:12px;margin-top:18px;flex-wrap:wrap}
.background-picker{position:relative;display:flex;align-items:center;gap:9px;min-height:48px;cursor:pointer;font-size:var(--fs-12,12px)}
.background-picker input{width:48px;height:48px;border:1px solid var(--line);border-radius:10px;background:transparent;padding:4px;cursor:pointer}
.background-picker input::-webkit-color-swatch-wrapper{padding:0}
.background-picker input::-webkit-color-swatch{border:0;border-radius:6px}
.background-hex-label{display:grid;gap:6px;font-size:var(--fs-10,10px);color:var(--muted);flex:1;min-width:112px}
.background-hex-label input{width:100%;min-height:48px;background:#ffffff05;border:1px solid var(--line);border-radius:9px;color:var(--ink);padding:10px 12px;font-size:var(--fs-13,13px);letter-spacing:.7px}
#background-form .btn{min-height:48px}
.background-presets{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin-top:18px}
.background-presets button{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:72px;padding:8px 3px;border-radius:10px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:var(--fs-10,10px)}
.background-presets button>span:first-child{display:grid;place-items:center;flex-shrink:0;width:30px;height:30px;border:1px solid #8888;border-radius:50%;font-size:var(--fs-15,15px)}
.background-presets button[aria-pressed=true]{border-color:var(--purple);background:var(--purple-soft);color:var(--ink)}
/* I 6 colori pronti stanno sempre in una riga (13 ottobre, richiesta del titolare): sul telefono nomi più piccoli. */
.background-presets button{text-align:center;line-height:1.25}
@media(max-width:760px){#background-form{gap:12px}.background-picker>span{display:none}.background-picker input{width:52px;height:52px}#background-form .btn{width:100%}.background-hex-label{min-width:100px}.background-presets{gap:4px}.background-presets button{min-height:64px;padding:6px 1px;font-size:var(--fs-9,9px);gap:6px}.background-presets button>span:first-child{width:28px;height:28px}.background-settings{padding-top:20px}}

:root[data-appearance][data-background]:not([data-background="original"]){
  --bg:var(--custom-canvas);--paper:var(--custom-surface);--ink:var(--custom-ink);--muted:var(--custom-muted);--line:var(--custom-border);
  --empathy-canvas:var(--custom-canvas);--empathy-elevated:var(--custom-elevated);--empathy-border:var(--custom-border);--empathy-text:var(--custom-ink);--empathy-text-muted:var(--custom-muted);
  color:var(--ink);background:var(--bg);
}
:root[data-background="light"]{color-scheme:light}
:root[data-background="dark"]{color-scheme:dark}
:root[data-appearance][data-background]:not([data-background="original"]) body{background:var(--bg);color:var(--ink)}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.sidebar,.topbar,.mobile-nav,.sheet-header){background:var(--custom-elevated);border-color:var(--line)}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.card,.meal-card,dialog,.hero,.ai-card,.checkin){background:var(--paper);color:var(--ink);border-color:var(--line);box-shadow:0 5px 24px #0000000d}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.metric,.segmented,.insight-tabs,.appearance-option,.appearance-preview,.route-readout,.strength-exercise,.strength-current,.physio-highlights>div,.evidence,.form-field input,.form-field select,.form-field textarea,.diary-row select,.diary-row input,.stepper input,.meal-slot input[type=time],.chat-form input,.data-table-scroll thead,.route-trace-heading select){background:var(--custom-elevated);border-color:var(--line);color:var(--ink)}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.side-note,.info-band,.ai-inline,.proposal-side.after,.chat-bubble,.chat-bubble.user){background:var(--paper);border-color:var(--line);color:var(--ink)}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.brand,.main h1,.main h2,.main h3,.main h4,.sheet-header h2,.hero h2,.card h2,.card h3,.section-head h2,.score-ring .score strong,.metric .metric-value,.plot-readout strong,.data-table-scroll td,.area-trend,.sleep-legend strong,.wellness-extra strong,.meal-card .meal-kcal,.meal-gi strong,.effort-settings output){color:var(--ink)}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.nav-link:not(.active),.nav-label,.side-note p,.hero p,.hero-footer,.score-ring .score small,.metric .metric-note.neutral,.tag.neutral,.mood,.ai-card p,.ai-card .ai-meta,.sheet-content p,.suggested-prompts button,.footer-note,.appearance-description,.appearance-save-note,.appearance-preview small,.appearance-option,.appearance-description,.insight-tabs button,.insight-section-heading p,.demo-data-banner,.plot-heading p:not(.eyebrow),.plot-expand,.plot-ranges button,.plot-legend button,.plot-readout,.plot-readout small,.plot-scrubber,.data-table-scroll caption,.data-table-scroll th,.area-trend>small,.area-trend strong small,.ai-inline p,.source-status-grid span,.source-status-grid small,.sleep-total>strong span,.sleep-total>span,.sleep-legend>span,.wellness-extra,.physio-highlights span,.physio-highlights small,.ride-kpis small,.ride-kpis em,.route-readout em,.route-color-key,.route-readout small,.route-trace-heading>span,.route-slider-label,.effort-settings p,.telemetry-explanation,.session-day-heading>span,.session-preview-meta,.session-time,.session-spark>span,.preview-attribution,.strength-summary small,.strength-summary em,.strength-current em,.strength-exercise summary small,.strength-exercise-content>p,.strength-current small,.strength-signal-heading>span,.meal-kcal span,.meal-macro-grid span,.meal-gi,.food-detail summary small,.food-macro-grid span){color:var(--muted)}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.plot-source,.meal-nutrition .meal-data-note){color:var(--muted)!important}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.data-plot,.strength-plot,.route-overlay) text{fill:var(--muted)}
:root[data-appearance][data-background]:not([data-background="original"]) .plot-grid{stroke:var(--line)}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.btn.secondary,.week-arrow,.icon-btn,.plot-expand,.exercise-check:not(.active),.check-btn:not(.active)){color:var(--ink);background:var(--custom-elevated);border-color:var(--line)}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.page-heading .eyebrow,.page-heading .green,.ai-header,.side-note .leaf-line,.footer-note .icon,.text-btn,.meal-card .text-btn,.meal-card .meal-time,.plot-values summary,.plot-readout .point-label,.week-navigation small,.week-today,.effort-settings strong,.effort-settings label,.effort-presets button:not([aria-pressed=true]),.route-readout .effort-percent,.session-open-label,.strength-exercise summary>b,.strength-exercise caption,.food-detail summary>span:last-child){color:var(--ink)}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.segmented .active,.insight-tabs button[aria-pressed=true],.activity-filters button[aria-pressed=true],.appearance-option[aria-pressed=true],.mood.active,.btn.subtle,.btn.purple,.btn.lime,.tag,.tag.ai,.tag.orange,.pill-icon,.pill-icon.purple,.pill-icon.orange,.notice-count,.mobile-nav a.active,.ai-inline button,.avatar,.integration-status){color:var(--ink)}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.appearance-check,.mobile-nav a:not(.active),.telemetry-toggles button,.strength-signal-toggles button){color:var(--ink)}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.nav-link.active,.day.active,.day.active strong,.day.active .day-session-count,.btn:not(.secondary):not(.subtle):not(.purple):not(.lime),.check-btn.active,.exercise-check.active,.effort-presets button[aria-pressed=true]){color:var(--ui-on-accent)}
:root[data-appearance][data-background]:not([data-background="original"]) .background-hex-label input{background:var(--custom-elevated)}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.progress,.zone-track){background:var(--line)}
/* The body illustration is a black-backed asset; its floating labels stay readable. */
:root[data-appearance][data-background]:not([data-background="original"]) :is(.twin-label,.twin-score){color:#fff}
:root[data-background="light"] :is(.chart-series-line,.data-plot circle,.data-plot rect,.strength-plot path:not(.plot-grid):not(.plot-cursor),.route-overlay path:not(.plot-grid):not(.plot-cursor)){filter:brightness(.68)}
:root[data-background="light"] :is(.meal-macro-grid strong,.meal-gi b,.meal-gi>span:last-child,.telemetry-toggles b,.telemetry-toggles small,.strength-signal-toggles button small,.route-readout strong,.metric .metric-note){color:var(--ink)}
:root[data-background="light"] .hero:after{opacity:.2}

/* Keep assistant and check-in cards on the same readable surfaces as the custom canvas.
   The accent selectors include compound classes, so these overrides must too. */
:root[data-appearance][data-background]:not([data-background="original"]) .card:is(.ai-card,.checkin){
  background:linear-gradient(135deg,var(--custom-elevated),var(--custom-surface));
  color:var(--ink);border-color:var(--line);box-shadow:0 5px 24px #0000000d;
}
:root[data-appearance][data-background]:not([data-background="original"]) .card:is(.ai-card,.checkin) :is(h2,h3,.ai-header){color:var(--ink)}
:root[data-appearance][data-background]:not([data-background="original"]) .card:is(.ai-card,.checkin) :is(p,.ai-meta){color:var(--muted)}
:root[data-appearance][data-background]:not([data-background="original"]) .card.ai-card .btn{color:var(--ui-on-accent)}

:root[data-appearance][data-background]:not([data-background="original"]) :is(.activity-filters button,.mood){
  color:var(--ink);background:var(--custom-elevated);border-color:var(--line);
}
:root[data-appearance][data-background]:not([data-background="original"]) :is(.activity-filters button[aria-pressed="true"],.mood.active){
  color:var(--ink);background:var(--custom-surface);border-color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--ink);
}

/* Selected appearance controls keep their accent instead of the neutral card edge. */
:root[data-appearance][data-background] .appearance-card :is(.appearance-option[aria-pressed="true"],.appearance-preview,.background-presets button[aria-pressed="true"]){
  border:2px solid var(--custom-accent-border);box-shadow:none;
}
:root[data-appearance][data-background] .appearance-card .appearance-option[aria-pressed="true"] .appearance-check{
  color:var(--custom-accent-border);
}