.user-shell {
    color-scheme: light;
    --user-bg: #f8fafc;
    --user-card: #fff;
    --user-text: #102a43;
    --user-muted: #64748b;
    --user-border: #e2e8f0;
    --user-soft: #e6faf7;
    --user-brand: #35d8c2;
    --user-dark: #176b71;
    --user-header: #176b71;
    min-height: 100dvh;
    background: var(--user-bg);
    color: var(--user-text);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    padding-bottom: env(safe-area-inset-bottom);
}
.user-shell[data-theme="dark"] {
    color-scheme: dark;
    --user-bg: #0f172a;
    --user-card: #172235;
    --user-text: #e2e8f0;
    --user-muted: #a8b5c7;
    --user-border: #334155;
    --user-soft: #123b40;
    --user-header: #172235;
}
.user-shell[data-seasonal-themes="true"][data-theme="christmas"] {
    --user-bg: #fbf7ee;
    --user-card: #fffdf7;
    --user-text: #253e32;
    --user-muted: #596b5e;
    --user-border: #d9dfcd;
    --user-soft: #eaf1e3;
    --user-brand: #bc303f;
    --user-dark: #245842;
    --user-header: #173d2e;
    background-image: radial-gradient(circle at 10% 12%, #caa75722, transparent 28%),
        radial-gradient(circle at 90% 40%, #bc303f12, transparent 32%);
}
.user-shell[data-seasonal-themes="true"][data-theme="winter"] {
    --user-bg: #edf5fc;
    --user-card: #fff;
    --user-text: #183953;
    --user-muted: #516c82;
    --user-border: #ccdeed;
    --user-soft: #e0eef9;
    --user-brand: #286b9c;
    --user-dark: #245479;
    --user-header: #245479;
    background-image: radial-gradient(circle at 15% 10%, #fff 1px, transparent 2px),
        radial-gradient(circle at 70% 60%, #fff 2px, transparent 3px);
    background-size: 48px 64px, 80px 96px;
}
.user-shell[data-seasonal-themes="true"][data-theme="halloween"] {
    color-scheme: dark;
    --user-bg: #171322;
    --user-card: #241d32;
    --user-text: #fff1dc;
    --user-muted: #c5b5ce;
    --user-border: #4b3b5b;
    --user-soft: #38273e;
    --user-brand: #c65b20;
    --user-dark: #85381a;
    --user-header: #372244;
    background-image: radial-gradient(ellipse at 90% 5%, #925aaf24, transparent 40%),
        radial-gradient(ellipse at 5% 55%, #c65b2018, transparent 40%);
}
.user-shell[data-seasonal-themes="true"]:is([data-theme="christmas"], [data-theme="winter"], [data-theme="halloween"]) .top-bar {
    background: var(--user-header);
    border-bottom: 3px solid var(--user-brand);
}
.user-shell[data-seasonal-themes="true"]:is([data-theme="christmas"], [data-theme="winter"], [data-theme="halloween"]) .brand::after {
    margin-left: 6px;
    font-size: 1.3rem;
    pointer-events: none;
}
.user-shell[data-seasonal-themes="true"][data-theme="christmas"] .brand::after { content: "🎄"; }
.user-shell[data-seasonal-themes="true"][data-theme="winter"] .brand::after { content: "❄️"; }
.user-shell[data-seasonal-themes="true"][data-theme="halloween"] .brand::after { content: "🎃"; }
.user-shell[data-seasonal-themes="true"]:is([data-theme="christmas"], [data-theme="winter"], [data-theme="halloween"]) .ex-card {
    border-top: 3px solid var(--user-brand);
}
.user-shell[data-seasonal-themes="true"][data-theme="christmas"] .top-bar {
    border-bottom-color: #caa757;
    background-image: radial-gradient(circle, #ffdf8a 2px, transparent 3px),
        linear-gradient(120deg, var(--user-header), #245842);
    background-size: 28px 12px, auto;
    background-position: 0 0;
    background-repeat: repeat-x, no-repeat;
}
.user-shell[data-font="large"] { zoom: 1.1; }
.user-shell[data-font="xl"] { zoom: 1.2; }
.user-shell .content { width: 100%; }
.user-shell .page-content {
    max-width: 448px;
    padding: 24px 16px calc(110px + env(safe-area-inset-bottom));
    margin: 0 auto;
}
.user-shell .top-bar {
    background: var(--user-header);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.user-shell .seasonal-decorations { display: none; }
.user-shell[data-seasonal-themes="true"]:is([data-theme="christmas"], [data-theme="winter"], [data-theme="halloween"]) .seasonal-decorations {
    display: block;
    width: 100%;
    background: var(--user-soft);
    border-bottom: 1px solid var(--user-border);
    pointer-events: none;
    user-select: none;
}
.user-shell .seasonal-scene {
    display: none;
    width: 100%;
    max-width: 448px;
    height: 60px;
    margin: 0 auto;
}
.user-shell[data-theme="christmas"] .seasonal-christmas,
.user-shell[data-theme="winter"] .seasonal-winter,
.user-shell[data-theme="halloween"] .seasonal-halloween { display: block; }
.user-shell .user-page-header { margin-bottom: 20px; }
.user-shell .user-page-header h1,
.user-shell .grafik-header h1 { font-size: 1.25rem; font-weight: 750; color: var(--user-text); }
.user-shell h1[tabindex="-1"]:focus { outline: none; }
.user-shell .user-page-header p,
.user-shell .grafik-subtitle { color: var(--user-muted); font-size: .875rem; }
.user-shell .bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    transform: none;
    display: grid;
    grid-template-columns: 1fr 1fr 80px 1fr 1fr;
    align-items: end;
    background: var(--user-card);
    border-top: 1px solid var(--user-border);
    border-radius: 0;
    padding: 0 8px env(safe-area-inset-bottom);
    box-shadow: none;
    z-index: 80;
}
.user-shell .bottom-nav .nav-item {
    min-width: 0;
    padding: 12px 0;
    gap: 3px;
    color: var(--user-muted);
    font-size: .7rem;
}
.user-shell .bottom-nav .nav-item.active {
    color: var(--user-text);
    background: var(--user-soft);
    border-radius: 12px;
}
.user-shell .bottom-nav .nav-item.active .nav-label { font-weight: 800; }
.user-shell .bottom-nav .nav-item.active::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 4px;
    border-radius: 2px;
    background: var(--user-brand);
}
.user-shell .bottom-nav .nav-icon { font-size: 1.15rem; }
.user-shell .bottom-nav .nav-center {
    height: 68px;
    margin-top: -20px;
    margin-bottom: 3px;
    padding: 7px 0 !important;
    border: 4px solid var(--user-bg);
    border-radius: 16px;
    background: var(--user-card);
    color: var(--user-muted);
    box-shadow: 0 5px 12px #102a4326;
}
.user-shell .bottom-nav .nav-center.active { color: #fff; background: var(--user-dark); }
.user-shell .bottom-nav .nav-center.active::after { background: #fff; }
.user-shell .nav-center-circle,
.user-shell .nav-center.active .nav-center-circle,
.user-shell .nav-center:hover .nav-center-circle {
    height: 26px;
    width: auto;
    background: none;
    border: 0;
    box-shadow: none;
    transform: none;
    margin-top: 0;
    border-radius: 0;
}
.user-shell .nav-center-icon { filter: none; font-size: 1.5rem; }
.user-shell .week-nav,
.user-shell .meas-period-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--user-border);
    border: 0;
    border-radius: 12px;
    margin-bottom: 16px;
}
.user-shell .week-nav-btn,
.user-shell .meas-period-tab {
    flex: 1;
    padding: 8px 4px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: var(--user-muted);
    font-size: .75rem;
    font-weight: 600;
    box-shadow: none;
}
.user-shell .week-nav-btn.active,
.user-shell .meas-period-tab.active {
    color: var(--user-text);
    background: var(--user-card);
    box-shadow: 0 1px 3px #102a4314;
}
.user-shell .week-selector { display: flex; gap: 5px; padding: 0; margin-bottom: 16px; }
.user-shell .day-circle {
    flex: 1;
    width: auto;
    min-width: 0;
    height: 58px;
    border: 1px solid var(--user-border);
    border-radius: 12px;
    background: var(--user-card);
    gap: 5px;
}
.user-shell .day-circle .day-abbr,
.user-shell .day-circle .day-num { color: var(--user-muted); }
.user-shell .day-circle.today { border-color: var(--user-brand); }
.user-shell .day-circle.active { background: var(--user-brand); border-color: var(--user-brand); }
.user-shell .day-circle.active .day-abbr,
.user-shell .day-circle.active .day-num { color: #fff; }
.user-shell .start-training-wrap {
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
    box-shadow: none;
}
.user-shell .start-training-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    border: 0;
    border-radius: 12px;
    padding: 14px;
    color: #fff;
    font-size: .95rem;
    background: linear-gradient(110deg, var(--user-dark), var(--user-brand));
    box-shadow: 0 3px 8px #176b7126;
}
.user-shell .training-active-bar,
.user-shell .start-training-info {
    padding: 12px 16px;
    border: 1px solid var(--user-border);
    border-radius: 12px;
    background: var(--user-soft);
    color: var(--user-text);
    margin-bottom: 16px;
}
.user-shell .ex-card,
.user-shell .meas-card,
.user-shell .acct-section,
.user-shell .acct-avatar,
.user-shell .grafik-day-card,
.user-shell .meas-sum-card {
    background: var(--user-card);
    border: 1px solid var(--user-border);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 1px 2px #102a4309;
}
.user-shell .ex-card-name {
    color: var(--user-text);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 12px;
}
.user-shell .ex-row-label {
    color: var(--user-muted);
    font-size: .65rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin: 12px 0 4px;
}
.user-shell .ex-row { gap: 5px; }
.user-shell .ex-cell {
    min-height: 48px;
    border: 2px solid var(--user-border);
    border-radius: 12px;
    background: var(--user-bg);
}
.user-shell .ex-cell .ex-cell-val { color: var(--user-text); font-size: .875rem; }
.user-shell .ex-cell-up { background: #ecfdf5; border-color: #6ee7b7; }
.user-shell .ex-cell-up .ex-cell-val { color: #047857; }
.user-shell .ex-cell-down { background: #fef2f2; border-color: #fca5a5; }
.user-shell .ex-cell-down .ex-cell-val { color: #b91c1c; }
.user-shell .ex-cell-selected { border-color: var(--user-brand) !important; background: var(--user-soft) !important; }
.user-shell .ex-edit-bar {
    background: var(--user-card);
    border: 1px solid var(--user-border);
    border-radius: 12px;
    box-shadow: 0 4px 12px #102a4320;
}
.user-shell .ex-edit-arrow { background: var(--user-soft); color: var(--user-text); }
.user-shell .edit-overlay { background: transparent; }
.user-shell .ex-card-disabled { opacity: .7; }
.user-shell .ex-card-disabled .ex-cell { opacity: 1; }
.user-shell .training-notes-wrap {
    background: var(--user-card);
    border: 1px solid var(--user-border);
    border-radius: 12px;
    padding: 16px;
    margin-top: 16px;
}
.user-shell .training-notes-label { color: var(--user-text); font-size: .875rem; }
.user-shell .training-notes-text {
    color: var(--user-text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    margin-bottom: 0;
}
.user-shell .training-notes-input,
.user-shell input,
.user-shell select,
.user-shell textarea {
    color: var(--user-text);
    background: var(--user-card);
    border: 1px solid var(--user-border);
    border-radius: 8px;
    font-family: inherit;
}
.user-shell input::placeholder,
.user-shell textarea::placeholder { color: var(--user-muted); }
.user-shell .user-save-status { min-height: 22px; color: var(--user-muted); font-size: .8rem; }
.user-shell .user-save-status.error { color: #dc2626; }
.user-shell .empty-state,
.user-shell .meas-empty-summary {
    padding: 32px 16px;
    border: 1px dashed var(--user-border);
    border-radius: 16px;
    color: var(--user-muted);
    background: var(--user-card);
}
.user-shell .meas-card-title,
.user-shell .meas-summary-title,
.user-shell .meas-sum-card-label,
.user-shell .meas-sum-last,
.user-shell .meas-sum-single,
.user-shell .acct-name,
.user-shell .acct-section-title,
.user-shell .grafik-day-name { color: var(--user-text); }
.user-shell .meas-nav-bar {
    padding: 8px;
    border: 1px solid var(--user-border);
    border-radius: 12px;
    background: var(--user-card);
}
.user-shell .meas-nav-label,
.user-shell .meas-ftr-date,
.user-shell .meas-ftr-val,
.user-shell .acct-email,
.user-shell .acct-field label { color: var(--user-muted); }
.user-shell .meas-plus-btn { background: var(--user-soft); color: var(--user-dark); border-radius: 10px; }
.user-shell .meas-card-ftr { border-color: var(--user-border); }
.user-shell .acct-avatar { text-align: left; }
.user-shell .acct-avatar-circle { display: none; }
.user-shell .acct-name { font-size: 1rem; margin: 0; }
.user-shell .acct-section { padding: 0; overflow: hidden; }
.user-shell .acct-section-hdr { padding: 16px; background: var(--user-card); }
.user-shell .acct-section-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .035em; }
.user-shell .acct-section-body { border-color: var(--user-border); padding: 0 16px 16px; }
.user-shell .acct-gender-btn {
    background: var(--user-bg);
    color: var(--user-muted);
    border-color: var(--user-border);
    border-radius: 8px;
}
.user-shell .acct-gender-btn.active { color: var(--user-dark); background: var(--user-soft); border-color: var(--user-brand); }
.user-shell .acct-theme-options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}
.user-shell .acct-theme-options .acct-gender-btn {
    min-width: 0;
    white-space: normal;
    padding: 12px 8px;
}
.user-shell .acct-theme-options .acct-gender-btn.active {
    color: var(--user-text);
    border-width: 2px;
    font-weight: 700;
}
.user-shell .acct-terms { color: var(--user-muted); }
.user-shell .acct-logout-btn {
    color: var(--user-text);
    background: var(--user-card);
    border: 1px solid var(--user-border);
    border-radius: 8px;
}
.user-shell .btn-primary,
.user-shell .meas-btn-primary {
    color: #fff;
    background: var(--user-dark);
    border-color: var(--user-dark);
    border-radius: 8px;
}
.user-shell .grafik-header {
    text-align: left;
    margin-bottom: 20px;
    background: var(--user-card);
    border: 1px solid var(--user-border);
    box-shadow: none;
}
.user-shell .grafik-week-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.user-shell .grafik-day-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    margin: 0;
    padding: 16px 12px;
    box-shadow: none;
    transition: none;
}
.user-shell .grafik-day-card:hover {
    transform: none;
    border-color: var(--user-border);
    box-shadow: none;
}
.user-shell .grafik-day-header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--user-border);
    margin: 0;
    padding: 0 0 10px;
    min-width: 0;
}
.user-shell .grafik-day-name {
    display: block;
    font-size: .875rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}
.user-shell .grafik-day-body { min-height: 0; min-width: 0; padding: 0; }
.user-shell .grafik-today {
    border-color: var(--user-brand) !important;
    background: var(--user-soft);
    box-shadow: none;
}
.user-shell .grafik-today::before {
    inset: 0 0 auto 0;
    width: auto;
    height: 3px;
    background: var(--user-brand);
}
.user-shell .grafik-today-badge {
    color: var(--user-text);
    background: var(--user-card);
    border: 1px solid var(--user-border);
    letter-spacing: 0;
    font-size: .7rem;
}
.user-shell .grafik-times { flex-direction: column; gap: 8px; }
.user-shell .grafik-time-chip {
    display: inline-flex;
    justify-content: center;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 8px;
    color: var(--user-text);
    background: var(--user-bg);
    border: 1px solid var(--user-border);
    box-shadow: none;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.user-shell .grafik-time-chip::before {
    content: "";
    width: 3px;
    height: 14px;
    border-radius: 2px;
    background: var(--schedule-color, var(--user-brand));
}
.user-shell .grafik-time-chip::after { content: none; }
.user-shell .grafik-rest { opacity: 1; }
.user-shell .grafik-rest-content { align-items: flex-start; padding: 0; }
.user-shell .grafik-rest-text { color: var(--user-muted); text-align: left; }
.user-shell .meas-modal-overlay { z-index: 100; }
.user-shell .meas-modal { color: var(--user-text); background: var(--user-card); border-radius: 16px; }
.user-shell .meas-modal h3 { color: var(--user-text); }
.user-shell .login-page {
    background: var(--user-soft);
    padding: 32px 16px;
    min-height: 100dvh;
}
.user-shell .login-card {
    width: 100%;
    max-width: 384px;
    background: var(--user-card);
    border: 1px solid var(--user-border);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 8px 24px #102a4314;
}
.user-shell .main-logo { width: 72px; height: 72px; border-radius: 16px; }
.user-shell .login-card label,
.user-shell .footer-text,
.user-shell .login-card h2 { color: var(--user-text); }
.user-shell button:focus-visible,
.user-shell a:focus-visible,
.user-shell input:focus-visible,
.user-shell textarea:focus-visible { outline: 2px solid var(--user-brand); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .user-shell *, .user-shell *::before, .user-shell *::after { animation: none !important; transition: none !important; }
}