/* METAMORPHOSIS / Studio — shared surfaces, type and interaction tokens. */
:root {
  --surface: #ffffff; --surface-2: #f3f6fc; --surface-3: #eaf0fa;
  --ink: #192b46; --muted: #63748c; --line: #dfe7f2;
  --accent: #356af0; --accent-soft: #eaf0ff; --accent-ink: #2454c2;
  --paper: #f5f7fc; --green: #356af0; --green-2: #487cff;
  --elevation: 0 2px 5px #172a4303, 0 14px 42px #273f6510;
}
html[data-theme="dark"] {
  --surface: #142037; --surface-2: #1b2a43; --surface-3: #233553;
  --ink: #eaf0fc; --muted: #a0b1cb; --line: #2b3d5a;
  --accent: #78a2ff; --accent-soft: #263d65; --accent-ink: #b1ccff;
  --paper: #0b1322; --green: #78a2ff; --green-2: #9abdff;
  --elevation: 0 16px 48px #00000024;
}
.app-body, .share-body { background: radial-gradient(ellipse at 75% 0%, #699afa10, transparent 45%), var(--paper); color: var(--ink); }
.share-title h1 { letter-spacing: -.045em; font-size: clamp(29px, 3vw, 42px); }
.label, .eyebrow { letter-spacing: .03em; font-weight: 600; }
.share-header, .app-share-header, .desktop-sidebar { background: var(--surface); border-color: var(--line); }
.brand, .desktop-sidebar .brand { color: var(--ink); font-weight: 850; letter-spacing: -.06em; }
.brand::after { background: linear-gradient(90deg, var(--accent), #79caff); }
.desktop-sidebar { border-right: 1px solid var(--line); }
.side-link { position: relative; transition: background .2s, color .2s, transform .2s; }
.side-link.active { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 3px 0 var(--accent); }
.side-link:not(.active) { color: var(--muted); }
.side-link:not(.active):hover { background: var(--surface-2); color: var(--ink); transform: translateX(3px); }
.shared-overview, .shared-stats, .shared-chart-card, .history-card { scroll-margin-top: 110px; }
/* Keep the contents in normal paint order; isolated/clipped layers can lose
   their text when a native dialog changes the document's scroll lock. */
.shared-weight-card { background: radial-gradient(circle at top right, #579bff22, transparent 65%), linear-gradient(125deg, #14294b 0%, #23458c 65%, #346add 140%); border: 1px solid #ffffff12; position: relative; isolation: auto; overflow: visible; transform: none; box-shadow: 0 18px 38px #173d8b22; }
.shared-weight-card::after { display: none; }
.shared-weight-card .shared-weight { position: static; z-index: auto; }
.shared-weight strong { font-size: clamp(62px, 5.5vw, 80px); font-weight: 650; letter-spacing: -.065em; }
.shared-progress-card, .shared-target-card, .shared-chart-card, .history-card, .shared-stats > div,
.activity-card .activity-copy, .activity-card .step-week-panel { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--elevation); }
.shared-progress-copy > strong, .shared-target-card > strong, .shared-stats strong { color: var(--ink); }
.shared-ring { background: conic-gradient(var(--accent) var(--progress), var(--surface-3) 0); }
.shared-ring::before { background: var(--surface); }
.shared-ring span { color: var(--ink); }
.weight-chain-card { background: var(--accent-soft); color: var(--ink); }
.weight-chain-card strong b { color: var(--accent-ink); }
.weight-chain-card p, .weight-chain-card small { color: var(--muted); }
.shared-date, .shared-date strong, .eyebrow, .label, .chart-footer, .history-date span, .history-note { color: var(--muted); }
.shared-weight-card .label { color: #c3d6f5; }
.shared-target-card p, .shared-target-card small, .shared-progress-copy p { color: var(--muted); }
.shared-target-card b, .shared-progress-copy b { color: var(--ink); }
.button, .training-root .button, .training-dialog .button { min-height: 46px; }
.button-primary, .button-accent, .training-root .button.primary, .training-dialog .button.primary { background: linear-gradient(135deg, #356df0, #2856cc); border: 1px solid #2a5edb; color: #fff; box-shadow: 0 5px 14px #235be523; }
.button-ghost, .training-root .button.secondary, .training-dialog .button.secondary { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.profile-menu-button { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.profile-menu-button:hover { background: var(--accent-soft); }
.header-profile-avatar { border: 2px solid var(--surface); box-shadow: 0 0 0 1px var(--line); }
.workspace-tabs, .chart-periods { background: var(--surface-3); }
.workspace-tabs button, .chart-periods button { color: var(--muted); min-height: 42px; }
.workspace-tabs button.active, .chart-periods button.active { background: var(--surface); color: var(--accent-ink); box-shadow: 0 2px 7px #172a4310; }
.chart-selection { background: var(--surface-2); border: 1px solid var(--line); border-radius: 16px; }
.chart-selection-value { color: var(--ink); letter-spacing: -.045em; }
.chart-selection-date, .chart-selection-note, .chart-window-count { color: var(--muted); }
.chart-axis-label, .chart-empty-text { fill: var(--muted); }
.chart-grid { stroke: var(--line); }
.chart-line { stroke: var(--accent); stroke-width: 3; }
.chart-dot { fill: var(--surface); stroke: var(--accent); }
.chart-focus-dot { stroke: var(--surface); fill: var(--accent); }
.chart-trend { stroke: #55b7e9; }
.chart-goal-label { fill: var(--muted); }
.interactive-chart-card .chart-grid { stroke: var(--line); }
.interactive-chart-card .chart-line { stroke: var(--accent); }
.interactive-chart-card .chart-dot { stroke: var(--accent); fill: var(--surface); }
.interactive-chart-card .chart-goal-label { fill: var(--muted); stroke: var(--surface); }
.weight-chain-card .label { color: var(--muted); }
.history-row { border-color: var(--line); transition: background .16s; }
.history-weight, .history-date strong { color: var(--ink); }
.edit-entry, .delete-entry { background: var(--surface-2); color: var(--accent-ink); }
.history-heading-actions .entry-count, .entry-count { background: var(--surface-3); color: var(--muted); }
.details-button { border-color: var(--line); color: var(--accent-ink); background: var(--surface-2); }
.activity-copy .step-count strong { color: var(--ink); font-size: clamp(52px, 5vw, 76px); letter-spacing: -.055em; }
.step-target { background: var(--surface-2); color: var(--ink); }
.step-goal-percent { color: var(--accent-ink); }
.step-bar-track, .activity-copy .step-goal-track { background: var(--surface-3); }
.step-bar-fill, .step-bar-item.today .step-bar-fill { background: linear-gradient(0deg, #3667de, #75a9ff); }
.step-bar-item.selected { background: var(--accent-soft); }
.step-bar-item.selected .step-bar-fill { background: #3569e8; }
.step-week-heading strong, .step-target strong { color: var(--ink); }
.step-today-heading time, .step-goal-status, .step-week-heading span, .step-week-panel small { color: var(--muted); }
.import-toolbar, .native-update-panel, .editor-info { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
.mobile-nav { background: var(--surface); border-color: var(--line); }
.mobile-nav button { color: var(--muted); }
.mobile-nav [data-app-tab].active { background: var(--accent-soft); color: var(--accent-ink); }
.modal, .training-dialog, .photo-crop-dialog { background: var(--surface); color: var(--ink); border-color: var(--line); }
/* Keep native dialog dimming independent of composited page surfaces. */
.modal::backdrop, .training-dialog::backdrop, .photo-viewer::backdrop, .photo-crop-dialog::backdrop { background: #061127b3; backdrop-filter: none; }
.modal[open], .modal[open]::backdrop { animation: none; }
.modal-header h2, .profile-editor-heading strong, .field > span { color: var(--ink); }
.close-button { color: var(--muted); background: var(--surface-2); }
.field input, .field select, .field textarea, .training-root input:not([type=checkbox]), .training-root select,
.training-dialog input:not([type=checkbox]), .training-dialog select, .training-dialog textarea { color: var(--ink); background: var(--surface-2); border-color: var(--line); }
input, select, textarea { accent-color: var(--accent); }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: .8; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.profile-list-pane, .profile-list { background: var(--surface-2); border-color: var(--line); }
.profile-list-item { background: transparent; color: var(--ink); }
.profile-list-item.active { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.profile-list-copy small, .profile-photo-editor small, .profile-photo-editor p { color: var(--muted); }
.profile-editor-heading, .settings-actions { border-color: var(--line); }
.preference-section { padding: 20px 0; border-bottom: 1px solid var(--line); }
.preference-section h3, .sharing-controls h3 { margin: 0 0 12px; font-size: 17px; color: var(--ink); }
.preference-section p, .preference-section small, .private-hint { color: var(--muted); font-size: 14px; }
.privacy-switch { display: flex; position: relative; align-items: center; gap: 16px; min-height: 60px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); cursor: pointer; }
.privacy-switch > span:first-child { flex: 1; font-size: 16px; font-weight: 650; color: var(--ink); }
.privacy-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.privacy-switch-track { flex: 0 0 46px; height: 28px; padding: 4px; border-radius: 30px; background: var(--muted); transition: background .18s; }
.privacy-switch-track::after { content: ''; display: block; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px #0003; transition: transform .18s; }
.privacy-switch input:checked + .privacy-switch-track { background: var(--accent); }
.privacy-switch input:checked + .privacy-switch-track::after { transform: translateX(18px); }
.privacy-switch:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }
.privacy-switch:has(input:disabled) { opacity: .65; cursor: wait; }
.privacy-switch:hover { border-color: var(--accent); }
.public-steps-preference p { line-height: 1.6; }
.public-steps-preference .privacy-sync-status { font-weight: 650; color: var(--ink); }
@media (prefers-reduced-motion: reduce) { .privacy-switch-track, .privacy-switch-track::after { transition: none; } }
.theme-choices { display: inline-flex; padding: 4px; gap: 4px; background: var(--surface-3); border-radius: 14px; }
.theme-choices button { background: transparent; border: 0; border-radius: 10px; color: var(--muted); min-height: 40px; padding: 8px 16px; cursor: pointer; font: inherit; font-size: 14px; }
.theme-choices button[aria-pressed=true] { background: var(--surface); color: var(--accent-ink); box-shadow: 0 2px 8px #0000000c; }
.public-view-preferences { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.public-view-preferences .theme-choices button { padding-inline: 14px; font-size: 20px; }
.backup-panel > div, .companion-app-panel > div { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0; }
.companion-app-panel .button { white-space: normal; text-align: center; }
.backup-dialog { max-width: 550px; padding: 26px; }
.backup-summary { padding: 18px; background: var(--accent-soft); border-radius: 14px; line-height: 1.8; }
.sharing-controls { margin: 20px 0 8px; padding: 20px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 16px; }
.sharing-controls > p { font-size: 14px; color: var(--muted); }
.sharing-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.sharing-options label { display: flex; align-items: center; gap: 12px; font-size: 15px; padding: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.sharing-options label:has(:checked) { border-color: var(--accent); background: var(--accent-soft); }
.sharing-options input { width: 21px; height: 21px; flex: 0 0 21px; }
.entry-photo-editor { background: var(--surface-2); padding: 18px; border: 1px dashed var(--line); border-radius: 16px; margin: 18px 0; }
.entry-photo-heading { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 12px; }
.entry-photo-heading small { color: var(--muted); font-weight: 400; font-size: 13px; }
.entry-photo-heading > span:last-child { color: var(--accent); font-size: 25px; line-height: 1; }
.entry-photo-preview { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.entry-photo-preview[hidden] { display: none; }
.entry-photo-open { width: 100px; height: 125px; border: 0; padding: 0; background: var(--surface-3); border-radius: 12px; overflow: hidden; cursor: zoom-in; }
.entry-photo-open img { width: 100%; height: 100%; object-fit: cover; }
.entry-photo-status { color: var(--muted); font-size: 13px; margin-bottom: 0; }
.photo-viewer { padding: 20px; border: 1px solid var(--line); border-radius: 22px; max-width: min(92vw, 900px); max-height: 88dvh; background: var(--surface); }
.photo-viewer img { display: block; object-fit: contain; max-height: 72dvh; max-width: 100%; margin-top: 52px; }
.photo-viewer .close-button { position: absolute; top: 14px; right: 14px; }
.empty-sharing { padding: 48px 24px; text-align: center; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); }
.training-root { color: var(--ink); }
.training-subnav { gap: 8px; padding-bottom: 14px; }
.training-subnav button { color: var(--muted); font-size: 15px; }
.training-subnav button.active { background: var(--accent-soft); color: var(--accent-ink); }
.training-metrics article, .training-library, .training-progress, .training-calendar, .routine-card, .routine-builder,
.training-music, .training-session-card, .training-exercise-card, .session-focus { background: var(--surface); border-color: var(--line); box-shadow: var(--elevation); }
.training-metrics strong, .training-session-card strong, .training-root h2, .training-root h3, .training-dialog h2, .training-dialog h3 { color: var(--ink); }
.training-root label, .training-dialog label, .training-root p, .training-root small, .training-session-card span, .training-library-list button { color: var(--muted); }
.training-day, .training-icon-button, .training-root .training-icon-button, .training-dialog .training-icon-button { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.training-day:hover, .training-day.selected { background: var(--accent-soft); border-color: var(--accent); }
.training-day strong, .training-day > span { color: var(--ink); }
.training-root .training-library-list button.selected { color: var(--accent-ink); background: var(--accent-soft); }
.training-progress-chart text { fill: var(--muted); }
.training-progress-chart circle:not([fill=transparent]) { fill: var(--accent); }
.training-chart-grid { stroke: var(--line); }
.training-progress-history button { color: var(--ink); border-color: var(--line); background: var(--surface); }
.training-dialog > header, .training-dialog-content { background: var(--surface); border-color: var(--line); }
.routine-picker-list label, .custom-muscle-fields label, .session-exercise-list > button { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.routine-picker-list label:has(input:checked), .session-exercise-list > button.selected { background: var(--accent-soft); color: var(--accent-ink); border-color: var(--accent); }
.routine-picker-footer, .session-focus-toolbar, .session-exercise-nav { background: var(--surface-2); border-color: var(--line); }
.routine-muscle-preview { background: var(--surface-2); }
.routine-card ol li, .routine-card footer, .training-detail-exercise > div { border-color: var(--line); }
.routine-card-identity span, .start-routine-copy small, .session-focus-hint, .session-progress > span { color: var(--muted); }
.start-routine-option { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.start-routine-option:hover { background: var(--accent-soft); border-color: var(--accent); transform: translateX(3px); }
.start-routine-play, .exercise-number { background: var(--accent-soft); color: var(--accent-ink); }
.start-routine-list { gap: 12px; }
.session-focus .training-exercise-card { box-shadow: none; }
.session-focus .training-set { border-color: var(--line); }
.session-focus .training-set input[type=number] { background: var(--surface-2); color: var(--ink); border-color: var(--line); }
.session-focus .training-set.is-done, .session-focus .training-set.is-done input[type=number] { background: var(--accent-soft); border-color: var(--line); }
.session-focus .training-set input:focus { background: var(--surface); }
.session-exercise-picker { color: var(--accent-ink); }
.session-exercise-picker > span { color: var(--accent-ink); background: var(--accent-soft); }
.session-focus .training-check { background: var(--surface-3); border-color: var(--line); color: var(--muted); }
.session-focus .training-check[aria-pressed=true] { background: #356aee; color: #fff; }
.training-timer-shelf, .training-timer-shelf::before { background: var(--paper); }
.training-timer-shelf .training-timer-dock { background: linear-gradient(120deg, #182c50, #203f75); border-color: #3e5985; box-shadow: 0 8px 22px #06112720; }
.training-session-active .app-share-header,
.unified-app-body:has([data-workspace-panel="training"]:not([hidden]) .has-active-session) .app-share-header { background: var(--surface); }
.training-music.has-music .training-player-controls { background: var(--surface-2); border-color: var(--line); }
.training-playlist button { color: var(--muted); border-color: var(--line); }
.training-playlist button.active { color: var(--accent-ink); background: var(--accent-soft); }
.personal-records { padding: 18px; margin: 20px 0; background: var(--accent-soft); border: 1px solid var(--line); border-radius: 16px; }
.records-title { display: flex; align-items: center; gap: 9px; color: var(--accent-ink); font-size: 14px; font-weight: 650; }
.records-title > span { font-size: 24px; line-height: 1; }
.records-title > small { margin-left: auto; border: 1px solid currentColor; border-radius: 6px; padding: 1px 6px; color: var(--accent-ink); font-size: 11px; letter-spacing: .1em; }
.personal-records > div:last-child { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.personal-records article > span { font-size: 13px; color: var(--muted); }
.personal-records strong { display: block; font-size: 34px; letter-spacing: -.045em; font-weight: 650; color: var(--ink); line-height: 1.4; }
.personal-records strong small { font-size: 15px; font-weight: 500; letter-spacing: 0; }
.personal-records article p { font-size: 12px; margin: 5px 0 0; color: var(--muted); }
html[data-theme=dark] .step-calendar-day, html[data-theme=dark] .step-month-summary,
html[data-theme=dark] .step-week-rail, html[data-theme=dark] .step-selected-week-heading,
html[data-theme=dark] .step-period-toolbar select, html[data-theme=dark] .step-month-arrow { background: var(--surface-2); border-color: var(--line); color: var(--ink); }
html[data-theme=dark] .step-calendar-day strong, html[data-theme=dark] .step-month-summary strong { color: var(--ink); }
html[data-theme=dark] .readonly-badge, html[data-theme=dark] .storage-chip { background: var(--surface-2); border-color: var(--line); color: var(--muted); }
html[data-theme=dark] .storage-chip strong, html[data-theme=dark] .profile-menu-button strong { color: var(--ink); }
html[data-theme=dark] .step-week-rail button, html[data-theme=dark] .step-goal-edit { color: var(--accent-ink); background: var(--surface-2); border-color: var(--line); }
html[data-theme=dark] .step-bar-label, html[data-theme=dark] .step-bar-value, html[data-theme=dark] .step-bar-date { color: var(--muted); }
html[data-theme=dark] .training-badge { background: var(--surface-3); color: #bed2ff; border-color: var(--line); }
html[data-theme=dark] .training-badge[data-category=pull] { color: #bcb4ff; }
html[data-theme=dark] .training-badge[data-category=legs] { color: #8edbe5; }
html[data-theme=dark] .training-badge[data-category=cardio] { color: #f0bc94; }
html[data-theme=dark] .form-error, html[data-theme=dark] .danger-link { color: #ffaab7; }
@media (hover: hover) and (pointer: fine) {
  .history-row:hover { background: var(--surface-2); }
  .training-session-card:hover, .routine-card:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: var(--elevation); }
  .button-primary:hover, .button-accent:hover, .training-root .button.primary:hover { background: linear-gradient(135deg, #467bf8, #3565dc); box-shadow: 0 7px 22px #245eea32; }
}
button, .training-session-card, .routine-card { -webkit-tap-highlight-color: transparent; }
button:active:not(:disabled) { transform: scale(.98); }
@media (max-width:780px) {
  .share-title h1 { font-size: 30px; }
  .shared-weight-card { min-height: 190px; }
  .shared-weight strong { font-size: 70px; }
  .shared-chart-card, .history-card { border-radius: 20px; }
  .shared-progress-card > .label, .shared-target-card > .label { font-size: 14px; }
  .shared-stats strong { font-size: 25px; }
  .chart-footer { font-size: 12px; gap: 12px; }
  .public-view-preferences { margin-top: -5px; }
  .public-view-preferences .theme-choices button { min-height: 38px; padding: 5px 13px; }
  .sharing-options { grid-template-columns: 1fr; }
  .personal-records { padding: 16px; }
  .personal-records strong { font-size: 29px; }
  .personal-records > div:last-child { gap: 12px; }
  .training-subnav button { font-size: 14px; }
  .backup-panel .button { font-size: 14px; flex: 1; }
  .theme-choices { display: flex; }
  .theme-choices button { flex: 1; padding-inline: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; scroll-behavior: auto !important; }
  button:active:not(:disabled), .side-link:not(.active):hover { transform: none; }
}