.o-app {
--mg-chest: #f472b6; --mg-back: #60a5fa; --mg-shoulders: #a78bfa; --mg-arms: #fbbf24;
--mg-legs: #34d399; --mg-core: #22d3ee; --mg-cardio: var(--flame); --mg-full: var(--accent);
--t-composer-h: 64px;
}
.o-app .t-mg--chest { color: var(--mg-chest); background: var(--mg-chest); }
.o-app .t-mg--back { color: var(--mg-back); background: var(--mg-back); }
.o-app .t-mg--shoulders { color: var(--mg-shoulders); background: var(--mg-shoulders); }
.o-app .t-mg--arms { color: var(--mg-arms); background: var(--mg-arms); }
.o-app .t-mg--legs { color: var(--mg-legs); background: var(--mg-legs); }
.o-app .t-mg--core { color: var(--mg-core); background: var(--mg-core); }
.o-app .t-mg--cardio { color: var(--mg-cardio); background: var(--mg-cardio); }
.o-app .t-mg--full { color: var(--mg-full); background: var(--mg-full); }
.o-app .t-search-pill {
display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 10px; margin-right: 6px;
border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border);
color: var(--text-muted); font-size: 13px; text-decoration: none; white-space: nowrap;
transition: background var(--dur-sm) var(--ease-out), color var(--dur-sm) var(--ease-out);
}
.o-app .t-search-pill__icon { display: grid; place-items: center; }
.o-app .t-search-pill__icon svg { width: 16px; height: 16px; display: block; }
.o-app .t-search-pill__kbd { font-size: 12px; padding: 1px 6px; border-radius: 6px; background: var(--glass-2); color: var(--text-faint); font-variant-numeric: tabular-nums; }
@media (hover: hover) { .o-app .t-search-pill:hover { background: var(--surface-3); color: var(--text); } }
@media (max-width: 960px) { .o-app .t-search-pill { display: none; } }
.o-app .t-member-row.is-inactive .o-list__title, .o-app .t-member-row.is-inactive .o-avatar { opacity: 0.6; }
.o-app .t-visit { min-width: 44px; justify-content: center; font-variant-numeric: tabular-nums; }
.o-app .t-member-row .o-list__trailing { gap: 6px; }
@media (max-width: 420px) { .o-app .t-row-expiry { display: none; } }
.o-app .t-icon-actions { display: inline-flex; gap: 6px; }
.o-app .t-icon-btn {
display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
background: var(--surface-2); border: 1px solid var(--border); color: var(--text-sub); text-decoration: none;
transition: background var(--dur-sm) var(--ease-out), transform var(--dur-sm) var(--ease-spring);
}
.o-app .t-icon-btn svg { width: 20px; height: 20px; }
@media (hover: hover) { .o-app .t-icon-btn:hover { background: var(--surface-3); color: var(--text); } }
.o-app .t-member-head { margin-top: var(--s-2, 8px); }
.o-app .t-flame { color: var(--flame); font-weight: var(--fw-bold, 600); }
.o-app .t-member-actions { align-items: center; }
.o-app .t-panel { margin-top: var(--s-4, 16px); }
.o-app .o-mini-stat__value.o-gold { color: var(--gold); }
.o-app .t-injury .o-note__meta span { color: var(--text-faint); }
.o-app .t-today__slot { cursor: pointer; }
.o-app .t-slipping .o-list__row { padding-left: 0; padding-right: 0; }
.o-app .o-home-chart .o-section__head { margin-bottom: var(--s-2, 8px); }
.o-app .t-att-row { position: relative; }
.o-app .t-att-row .o-list__sub { font-variant-numeric: tabular-nums; }
.o-app .t-switch { min-height: 44px; padding: 6px 0; }
.o-app .t-att-row[data-t-saving="1"] .t-switch { opacity: 0.6; }
.o-app .t-att-row.is-present .o-list__title { color: var(--text); }
.o-app .t-att-list .o-list__row--static { cursor: default; }
.o-app .t-att-row[data-t-hidden="1"] { display: none; }
.o-app .t-thread { display: flex; flex-direction: column; min-height: 40vh; }
.o-app .t-thread__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: var(--s-3, 12px); }
.o-app .t-thread__who { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; font-weight: var(--fw-bold, 600); min-height: 44px; }
.o-app .t-thread__scroll { display: flex; flex-direction: column; gap: 6px; padding-bottom: calc(var(--t-composer-h) + 12px); }
.o-app .t-thread__empty { margin: var(--s-4, 16px) 0; }
.o-app .t-day-sep { display: flex; align-items: center; gap: 10px; margin: var(--s-4, 16px) 0 var(--s-2, 8px); color: var(--text-faint); font-size: 12px; font-weight: var(--fw-bold, 600); letter-spacing: 0.06em; text-transform: uppercase; }
.o-app .t-day-sep::before, .o-app .t-day-sep::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--border); }
.o-app .t-bubble {
position: relative; max-width: 82%; padding: 10px 14px 8px;
border-radius: 18px; font-size: var(--fs-body); line-height: 1.45;
}
.o-app .t-bubble[data-new] { animation: t-bubble-in var(--dur-md) var(--ease-out) both; }
.o-app .t-bubble__body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.o-app .t-bubble__meta { display: block; margin-top: 4px; font-size: 12px; opacity: 0.7; font-variant-numeric: tabular-nums; text-align: right; }
.o-app .t-bubble--me { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: 6px; }
.o-app .t-bubble--them { align-self: flex-start; background: var(--surface-3); color: var(--text); border-bottom-left-radius: 6px; }
@keyframes t-bubble-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.o-app .t-composer {
position: sticky; bottom: calc(var(--o-tabbar-h, 0px) + env(safe-area-inset-bottom, 0px) + 8px); z-index: 6;
display: flex; align-items: flex-end; gap: 8px; margin: var(--s-3, 12px) 0 0; padding: 8px;
background: var(--surface-1); border: 1px solid var(--border-hi); border-radius: var(--o-r-card); box-shadow: var(--shadow-lg);
}
@media (min-width: 960px) { .o-app .t-composer { bottom: 16px; } }
.o-app .t-composer__input {
flex: 1 1 auto; min-height: 44px; max-height: 148px; resize: none; padding: 11px 14px;
font: inherit; font-size: 16px; line-height: 1.4; color: var(--text);
background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--o-r-control);
}
.o-app .t-composer__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.o-app .t-composer__send {
flex: none; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: var(--o-r-control);
background: var(--accent); color: var(--on-accent); cursor: pointer;
transition: transform var(--dur-sm) var(--ease-spring), opacity var(--dur-sm) var(--ease-out);
}
.o-app .t-composer__send svg { width: 20px; height: 20px; }
.o-app .t-composer__send[disabled] { opacity: 0.5; cursor: default; }
.o-app .t-thread-row.is-unread .o-list__title { color: var(--text); }
.o-app .t-thread-row.is-unread .o-list__sub { color: var(--text-sub); font-weight: var(--fw-semi, 500); }
.o-app .t-ring { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; }
.o-app .t-ring svg { position: absolute; inset: 0; width: 44px; height: 44px; transform: rotate(-90deg); }
.o-app .t-ring__track { fill: none; stroke: var(--track); stroke-width: 4; }
.o-app .t-ring__arc { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; }
.o-app .t-ring__value { position: relative; font-family: var(--font-display); font-size: 13px; font-weight: var(--fw-black, 700); font-variant-numeric: tabular-nums; color: var(--text); }
.o-app .t-ring--ok { color: var(--ok, #10b981); }
.o-app .t-ring--warn { color: var(--warn, #f59e0b); }
.o-app .t-ring--danger { color: var(--danger, #ef4444); }
.o-app .t-score-summary { display: flex; align-items: center; gap: var(--s-4, 16px); }
.o-app .t-score-summary .t-ring { width: 72px; height: 72px; }
.o-app .t-score-summary .t-ring svg { width: 72px; height: 72px; }
.o-app .t-score-summary .t-ring__value { font-size: 20px; }
.o-app .t-score-summary .o-mini-stats { flex: 1 1 auto; margin-top: 0; }
.o-app .t-cap { position: relative; display: block; width: 100%; max-width: 320px; height: 6px; margin-top: 8px; border-radius: 3px; background: var(--track); overflow: hidden; }
.o-app .t-cap__fill, .o-app .t-cap__wait { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; }
.o-app .t-cap__fill { background: var(--accent); }
.o-app .t-cap__wait { background: var(--warn, #f59e0b); opacity: 0.8; }
.o-app .t-class-row .o-list__text { gap: 4px; }
.o-app .t-days { display: flex; flex-direction: column; gap: var(--s-3, 12px); margin-top: var(--s-3, 12px); }
.o-app .t-day { background-color: var(--surface-1); border: 1px solid var(--border); border-radius: var(--o-r-card); box-shadow: var(--hairline-top); background-image: var(--light-layer); background-repeat: no-repeat; overflow: hidden; }
.o-app .t-day__head { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px var(--s-4, 16px); cursor: pointer; list-style: none; }
.o-app .t-day__head::-webkit-details-marker { display: none; }
.o-app .t-day__name { flex: 1 1 auto; font-family: var(--font-display); font-size: var(--fs-h3); font-weight: var(--fw-bold, 600); }
.o-app .t-day__count { font-size: var(--fs-cap); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.o-app .t-day[open] .t-day__head .o-list__chevron { transform: rotate(180deg); }
.o-app .t-day__body { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.o-app .t-ex { display: flex; align-items: center; gap: var(--s-3, 12px); min-height: 56px; padding: 10px var(--s-4, 16px); border-top: 1px solid var(--border); color: inherit; text-align: left; }
.o-app .t-ex:first-child { border-top: 0; }
.o-app .t-ex--button { width: 100%; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; font: inherit; cursor: pointer; }
.o-app .t-ex--button:active { background: var(--surface-3); }
@media (hover: hover) { .o-app .t-ex--button:hover { background: var(--surface-2); } }
.o-app .t-ex__dot { flex: none; width: 10px; height: 10px; border-radius: 50%; }
.o-app .t-ex__dot:not([class*="t-mg--"]) { background: var(--track); }
.o-app .t-ex__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.o-app .t-ex__name { font-weight: var(--fw-bold, 600); color: var(--text); }
.o-app .t-ex__meta { font-size: var(--fs-cap); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.o-app .t-ex__note { font-size: var(--fs-cap); color: var(--text-sub); font-style: italic; }
.o-app .t-plan-notes { margin-bottom: var(--s-3, 12px); }
.o-app .t-plan-card { display: flex; flex-direction: column; gap: 8px; padding: var(--s-4, 16px) var(--s-5, 20px); color: inherit; text-decoration: none; min-height: 120px; transition: transform var(--dur-sm) var(--ease-spring), background var(--dur-sm) var(--ease-out); }
@media (hover: hover) { .o-app .t-plan-card:hover { background-color: var(--surface-2); } }
.o-app .t-plan-card__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.o-app .t-plan-card__title { margin: 2px 0 0; font-family: var(--font-display); font-size: var(--fs-h2); font-weight: var(--fw-bold, 600); letter-spacing: -0.01em; overflow-wrap: anywhere; }
.o-app .t-plan-card__meta { margin: 0; font-size: var(--fs-cap); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.o-app .t-plan-card__notes { margin: 0; font-size: var(--fs-cap); color: var(--text-sub); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 720px) { .o-app .t-plan-grid { grid-template-columns: 1fr; } }
.o-app .t-note-card { padding: var(--s-4, 16px) var(--s-5, 20px); background-color: var(--surface-1); border: 1px solid var(--accent-line); border-radius: var(--o-r-card); box-shadow: var(--hairline-top); }
.o-app .t-note-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.o-app .t-note-card__author { font-size: var(--fs-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-bold, 600); }
.o-app .t-note-card__body { margin: 0; color: var(--text); font-style: italic; overflow-wrap: anywhere; }
.o-app .t-note-card__body--empty { color: var(--text-muted); font-style: normal; }
.o-app .t-plan-row.is-off .o-list__title { color: var(--text-sub); }
.o-app .t-photo-card { display: flex; align-items: flex-start; gap: var(--s-4, 16px); padding: var(--s-4, 16px) var(--s-5, 20px); }
.o-app .t-photo-card__media { flex: none; }
.o-app .t-photo-card__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.o-app .t-photo-card__text .o-card__title { margin: 0; }
.o-app .t-photo-card__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.o-app .t-photo-card__form { display: inline-flex; gap: 8px; align-items: center; }
.o-app .t-photo-card__pick { position: relative; overflow: hidden; cursor: pointer; }
.o-app .t-photo-card__input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 16px; }
.o-app .t-photo-card__form.is-saving { opacity: 0.6; pointer-events: none; }
.o-app .t-about__media { background: transparent; }
.o-app .t-about__media .o-img-box { width: 40px; height: 40px; }
.o-app .t-about__media .o-img { width: 40px; height: 40px; object-fit: contain; }
.o-app .t-about__media .o-illus { width: 24px; height: 24px; }
@media (max-width: 420px) { .o-app .t-photo-card { flex-direction: column; align-items: center; text-align: center; } .o-app .t-photo-card__actions { justify-content: center; } }
.o-app .t-slipping-rest { display: flex; flex-direction: column; align-items: center; gap: var(--s-2, 8px); padding: var(--s-3, 12px) 0 0; text-align: center; }
.o-app .t-slipping-rest__media { display: block; width: 160px; max-width: 100%; }
.o-app .t-slipping-rest__media .o-layers { width: 160px; }
.o-app .t-slipping-rest__media .o-illus { width: 96px; height: 96px; }
.o-app .t-slipping__notify .o-list__title, .o-app .t-filter-notify .o-list__title { color: var(--accent-light); }
.o-app .t-risk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-height: 44px; padding: 8px 14px; margin-bottom: var(--s-3, 12px); border-radius: var(--o-r-card); font-size: var(--fs-body); }
.o-app .t-risk__dot { width: 10px; height: 10px; border-radius: 50%; background: currentColor; flex: none; }
.o-app .t-risk__label { font-weight: var(--fw-bold, 600); }
.o-app .t-risk__reason { color: var(--text-sub); flex: 1 1 auto; }
.o-app .t-risk__src { color: var(--text-muted); background: var(--surface-2); }
.o-app .t-timeline__day { margin: var(--s-3, 12px) 0 4px; font-size: var(--fs-eyebrow); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); font-weight: var(--fw-bold, 600); }
.o-app .t-timeline__row { padding-left: 0; padding-right: 0; min-height: 52px; }
.o-app .t-latest__row { padding-left: 0; padding-right: 0; cursor: default; }
.o-app .t-latest__thumb { width: 48px; height: 48px; border-radius: 12px; object-fit: cover; flex: none; background: var(--surface-3); }
.o-app .t-plan-actions { margin: var(--s-3, 12px) 0; }
.o-app .t-plan-actions--center { justify-content: center; }
.o-app .t-sheet-danger { margin-top: var(--s-4, 16px); padding-top: var(--s-3, 12px); border-top: 1px solid var(--border); text-align: center; }
.o-app .t-note-role { font-size: 12px; padding: 0 6px; min-height: 18px; }
.o-app .t-staff-note.is-mine { border-left: 3px solid var(--accent); }
.o-app .t-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: var(--s-2, 8px); }
@media (max-width: 359px) { .o-app .t-photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 720px) { .o-app .t-photo-grid { grid-template-columns: repeat(4, 1fr); } }
.o-app .t-photo { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--surface-3); border: 1px solid var(--border); transition: transform var(--dur-sm) var(--ease-spring); }
.o-app .t-photo__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.o-app .t-photo__date { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 8px; background: var(--bg-0); color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; opacity: 0.92; }
.o-app .t-photos__private { margin-top: var(--s-2, 8px); }
.o-app .t-viewer .t-viewer__panel { position: fixed; inset: 0; margin: auto; display: flex; flex-direction: column; gap: 10px; width: min(100vw, 720px); height: fit-content; max-height: 100dvh; padding: 12px; overflow: auto; background: var(--bg-0); color: var(--text); border-radius: var(--o-r-card); }
.o-app .t-viewer__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; }
.o-app .t-viewer__meta { margin: 0; display: flex; gap: 10px; font-size: var(--fs-body); color: var(--text-sub); font-variant-numeric: tabular-nums; }
.o-app .t-viewer__img { display: block; width: 100%; max-height: calc(100dvh - 180px); object-fit: contain; border-radius: 12px; background: var(--surface-1); }
.o-app .t-viewer__notes { margin: 0; color: var(--text-sub); font-size: var(--fs-body); overflow-wrap: anywhere; min-height: 1.4em; }
.o-app .t-viewer__nav { display: flex; justify-content: space-between; gap: 10px; }
.o-app .t-viewer__nav .ds-btn[disabled] { opacity: 0.4; }
.o-app .t-inbox-row.is-new .o-list__title { color: var(--text); font-weight: var(--fw-bold, 600); }
.o-app .t-inbox-row[data-o-rowlink] { cursor: pointer; }
.o-app .t-inbox-row .o-list__title[href] { color: inherit; text-decoration: none; }
.o-app .t-roster-link { color: inherit; text-decoration: none; }
@media (hover: hover) { .o-app .t-roster-link:hover, .o-app .t-inbox-row .o-list__title[href]:hover { text-decoration: underline; } }
.o-app .t-assign-list { max-height: 40vh; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--o-r-control); margin-bottom: var(--s-2, 8px); }
.o-app .t-assign-row { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 6px 12px; cursor: pointer; border-top: 1px solid var(--border); }
.o-app .t-assign-row:first-child { border-top: 0; }
.o-app .t-assign-row[hidden] { display: none; }
.o-app .t-assign-row__box { width: 22px; height: 22px; flex: none; accent-color: var(--accent); }
@media (hover: hover) { .o-app .t-assign-row:hover { background: var(--surface-2); } }
.t-auth .o-auth__eyebrow { color: var(--accent-light); }
.t-auth .o-auth__forgot { line-height: 1.5; max-width: 36ch; margin-left: auto; margin-right: auto; }