* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    background: #eef3f8;
    color: #172033;
}

button {
    border: 0;
    border-radius: 10px;
    min-height: 44px;
    padding: 10px 14px;
    background: #0b5fff;
    color: #fff;
    font: inherit;
    font-weight: 800;
}

.app-shell {
    min-height: 100vh;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
}

.app-loading {
    padding: 32px;
    text-align: center;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    background: #101828;
    color: #fff;
}

.app-header h1 {
    margin: 0;
    font-size: 20px;
}

.app-header p {
    margin: 2px 0 0;
    color: #c8d3e3;
}

.app-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.notification-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.35);
    background: transparent;
    color: #fff;
}

.notification-button.success {
    border-color: rgba(22, 163, 74, .9);
    background: #16a34a;
}

.notification-button.warning {
    border-color: rgba(245, 158, 11, .95);
    background: #f59e0b;
}

.notification-button.danger {
    border-color: rgba(220, 38, 38, .95);
    background: #dc2626;
}

.notification-button svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.notification-button span {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border-radius: 999px;
    background: #f04438;
    color: #fff;
    font-size: 11px;
    line-height: 20px;
}

.ghost-button {
    background: transparent;
    border: 1px solid rgba(255,255,255,.35);
}

.app-content {
    padding: 16px;
    padding-bottom: 92px;
}

.quick-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.quick-card,
.summary-card,
.notice-card {
    border: 1px solid #d7e0ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(16, 24, 40, .06);
}

.quick-card {
    min-height: 92px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #172033;
    text-align: left;
    font-weight: 400;
}

.quick-card strong {
    font-size: 16px;
}

.quick-card span {
    color: #607086;
    font-size: 13px;
}

.section-title {
    margin: 24px 0 10px;
    font-size: 15px;
    text-transform: uppercase;
    color: #44546a;
}

.summary-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.summary-card {
    padding: 14px;
}

.summary-card span {
    display: block;
    color: #607086;
    font-size: 13px;
}

.summary-card strong {
    display: block;
    margin-top: 5px;
    font-size: 22px;
}

.notice-card {
    padding: 14px;
    margin-bottom: 10px;
}

.notice-card h3 {
    margin: 0 0 6px;
    font-size: 16px;
}

.notice-card p {
    margin: 0;
    color: #607086;
}

.news-preview,
.news-list {
    display: grid;
    gap: 12px;
}

.news-card {
    overflow: hidden;
    border: 1px solid #d7e0ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(16, 24, 40, .06);
}

.news-card.unread {
    border-color: #0b5fff;
    box-shadow: inset 4px 0 0 #0b5fff, 0 4px 18px rgba(16, 24, 40, .06);
}

.news-card.featured {
    border-color: #f59e0b;
}

.news-card button {
    width: 100%;
    display: grid;
    gap: 7px;
    padding: 14px;
    background: transparent;
    color: #172033;
    text-align: left;
}

.news-card img,
.news-cover {
    width: 100%;
    max-height: 220px;
    border-radius: 10px;
    object-fit: cover;
    background: #d7e0ec;
}

.news-card span,
.news-card small,
.news-detail > span {
    color: #607086;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.news-card h3 {
    margin: 0;
    font-size: 16px;
}

.news-card p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    color: #475569;
    white-space: pre-wrap;
}

.news-detail {
    display: grid;
    gap: 12px;
    padding: 16px;
    border: 1px solid #d7e0ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(16, 24, 40, .06);
}

.news-detail h2 {
    margin: 0;
    font-size: 22px;
}

.news-summary {
    margin: 0;
    color: #475569;
    font-weight: 800;
}

.news-content {
    color: #172033;
    line-height: 1.55;
    white-space: pre-wrap;
}

.news-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.news-confirmation {
    margin: 18px 0;
    padding: 16px;
    border-radius: 18px;
    background: #f5f8ff;
    border: 1px solid #dbe6ff;
}

.news-confirmation h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: var(--tc-navy);
}

.news-confirmation p {
    margin: 0 0 12px;
    color: var(--tc-muted);
}

.news-confirmation-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

.news-confirmation-actions button {
    border: 0;
    border-radius: 14px;
    padding: 12px 14px;
    font-weight: 800;
    color: var(--tc-navy);
    background: #e8eef8;
}

.news-confirmation-actions button.success {
    color: #fff;
    background: #16a34a;
}

.news-confirmation-actions button.danger {
    color: #fff;
    background: #ef4444;
}

.button-link,
.link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: 10px;
    background: #0b5fff;
    color: #fff;
    font-weight: 800;
    text-decoration: none;
}

.button-link.secondary,
.link-button {
    border: 1px solid #cdd8e6;
    background: #fff;
    color: #172033;
}

.link-button {
    margin-bottom: 12px;
}

.shop-grid,
.order-list {
    display: grid;
    gap: 12px;
}

.shop-card {
    overflow: hidden;
    border: 1px solid #d7e0ec;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(16, 24, 40, .06);
}

.shop-card img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #d7e0ec;
}

.shop-card > div,
.shop-order-form {
    padding: 14px;
}

.shop-card span,
.shop-card small {
    display: block;
    color: #607086;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.shop-card h3 {
    margin: 6px 0;
    font-size: 18px;
}

.shop-card p {
    margin: 0 0 10px;
    color: #607086;
}

.shop-card strong,
.notice-card strong {
    display: block;
    margin: 8px 0;
    font-size: 18px;
}

.shop-order-form {
    display: grid;
    grid-template-columns: 1fr 88px;
    gap: 8px;
    border-top: 1px solid #e4ebf3;
}

.shop-order-form select,
.shop-order-form input,
.shop-order-form textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid #cdd8e6;
    border-radius: 10px;
    padding: 8px 10px;
    font: inherit;
}

.shop-order-form select,
.shop-order-form input:not([name="cantidad"]),
.shop-order-form textarea,
.shop-question-fields,
.shop-question-fields label {
    grid-column: 1 / -1;
}

.shop-question-fields {
    display: grid;
    gap: 8px;
}

.shop-question-fields label {
    color: var(--muted, #607086);
    display: grid;
    font-size: 12px;
    font-weight: 900;
    gap: 5px;
    text-transform: none;
}

.shop-order-form textarea {
    min-height: 82px;
    resize: vertical;
}

.shop-order-form .mobile-check {
    align-items: center;
    display: flex;
    gap: 8px;
}

.shop-order-form .mobile-check input {
    min-height: auto;
    width: auto;
}

.actions-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.danger-button {
    background: #b42318;
}

.app-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2px;
    padding: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #d7e0ec;
}

.app-nav button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-height: 54px;
    padding: 6px 4px;
    background: transparent;
    color: #475569;
    font-size: 12px;
}

.app-nav svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-nav span {
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-nav button.active {
    color: #0b5fff;
    background: #eaf1ff;
}

.empty-panel {
    padding: 24px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #d7e0ec;
    color: #607086;
}

.notification-list,
.preference-list {
    display: grid;
    gap: 10px;
}

.notification-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 10px 0;
    padding: 12px 14px;
    border: 1px solid #d7e0ec;
    border-radius: 12px;
    background: #fff;
}

.notification-toolbar strong {
    color: #172033;
    font-size: 14px;
}

.notification-toolbar button {
    border: 1px solid #d7e0ec;
    border-radius: 999px;
    padding: 8px 12px;
    background: #f8fbff;
    color: #0b5fff;
    font-weight: 900;
}

.notification-item {
    border: 1px solid #d7e0ec;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.notification-item.unread {
    border-color: #0b5fff;
    box-shadow: inset 4px 0 0 #0b5fff;
}

.notification-item button {
    width: 100%;
    display: grid;
    gap: 4px;
    padding: 14px;
    background: transparent;
    color: #172033;
    text-align: left;
    font-weight: 400;
}

.notification-item span,
.notification-item small {
    color: #607086;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.notification-item strong {
    font-size: 16px;
}

.notification-item p {
    margin: 0;
    color: #475569;
}

.preference-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 52px;
    padding: 12px 14px;
    border: 1px solid #d7e0ec;
    border-radius: 12px;
    background: #fff;
    font-weight: 800;
}

.preference-row input {
    width: 22px;
    height: 22px;
}

.chat-layout {
    display: grid;
    gap: 12px;
}

.chat-list {
    display: grid;
    gap: 8px;
}

.chat-thread {
    position: relative;
    display: grid;
    gap: 4px;
    min-height: 70px;
    padding: 12px;
    border: 1px solid #d7e0ec;
    border-radius: 12px;
    background: #fff;
    color: #172033;
    text-align: left;
}

.chat-thread strong,
.chat-thread span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-thread span {
    color: #607086;
    font-size: 13px;
    font-weight: 400;
}

.chat-thread em {
    position: absolute;
    top: 10px;
    right: 10px;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: #0b5fff;
    color: #fff;
    font-size: 12px;
    font-style: normal;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chat-thread.active {
    border-color: #0b5fff;
    background: #eaf1ff;
}

.chat-panel {
    border: 1px solid #d7e0ec;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.chat-create {
    margin-bottom: 12px;
    border: 1px solid #d7e0ec;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.chat-create summary {
    cursor: pointer;
    padding: 14px;
    font-weight: 800;
}

.chat-create-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 14px 14px;
}

.chat-create-form label {
    display: grid;
    gap: 5px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.chat-create-form input[type="text"],
.chat-create-form select {
    width: 100%;
    min-height: 44px;
    border: 1px solid #c9d5e5;
    border-radius: 10px;
    padding: 9px 10px;
    background: #fff;
    color: #172033;
    font: inherit;
}

.chat-create-form select[multiple] {
    min-height: 138px;
}

.chat-create-form .check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}

.actions-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.form-message {
    color: #b42318;
    font-weight: 800;
}

.chat-title {
    padding: 12px;
    border-bottom: 1px solid #d7e0ec;
}

.chat-title h3,
.chat-title p {
    margin: 0;
}

.chat-title p {
    margin-top: 3px;
    color: #607086;
    font-size: 13px;
}

.chat-messages {
    display: grid;
    gap: 8px;
    min-height: 260px;
    max-height: 48vh;
    overflow: auto;
    padding: 12px;
    align-content: end;
}

.chat-message {
    max-width: 86%;
    padding: 10px 12px;
    border-radius: 12px;
    background: #eef3f8;
}

.chat-message.own {
    justify-self: end;
    background: #0b5fff;
    color: #fff;
}

.chat-message.system {
    justify-self: center;
    background: transparent;
    color: #607086;
    font-size: 12px;
}

.chat-message span {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    font-weight: 800;
    opacity: .75;
}

.chat-message p {
    margin: 0;
    white-space: pre-wrap;
}

.chat-message small {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    font-weight: 800;
    opacity: .68;
}

.chat-message.pending {
    opacity: .78;
}

.chat-message.failed {
    background: #fee2e2;
    color: #991b1b;
}

.chat-message.pinned {
    border: 1px solid color-mix(in srgb, var(--club-secondary) 54%, var(--line));
    box-shadow: 0 10px 24px rgba(15, 23, 42, .1);
}

.chat-message.pinned > span::before {
    content: "Fijado · ";
    color: var(--club-primary);
}

.chat-context-cards {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.chat-context-card {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    width: min(100%, 360px);
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--club-primary) 22%, var(--line));
    border-radius: 16px;
    background: rgba(255,255,255,.9);
    color: var(--text);
    cursor: pointer;
}

.chat-message.own .chat-context-card {
    background: rgba(255,255,255,.72);
}

.chat-context-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--club-primary) 12%, #fff);
    font-size: 18px;
}

.chat-context-body {
    min-width: 0;
}

.chat-context-body small {
    margin: 0 0 2px;
    color: var(--club-primary);
    font-size: 10px;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.chat-context-body strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    line-height: 1.25;
}

.chat-context-body p {
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.35;
}

.chat-context-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.chat-context-actions button {
    min-height: 32px;
    padding: 7px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--club-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.chat-attachments {
    display: grid;
    gap: 8px;
    margin-top: 10px;
}

.chat-attachment-card {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 10px;
    width: min(100%, 360px);
    padding: 11px;
    border: 1px solid color-mix(in srgb, var(--club-primary) 18%, var(--line));
    border-radius: 16px;
    background: rgba(255,255,255,.9);
    color: var(--text);
}

.chat-message.own .chat-attachment-card {
    background: rgba(255,255,255,.72);
}

.chat-attachment-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    background: color-mix(in srgb, var(--club-primary) 12%, #fff);
    font-size: 18px;
}

.chat-attachment-body {
    min-width: 0;
}

.chat-attachment-body strong,
.chat-attachment-body small {
    display: block;
}

.chat-attachment-body strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 13px;
}

.chat-attachment-body small {
    color: var(--muted);
    font-size: 11px;
}

.chat-attachment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 9px;
}

.chat-attachment-actions button {
    min-height: 32px;
    padding: 7px 10px;
    border: 0;
    border-radius: 999px;
    background: var(--club-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 900;
}

.chat-form {
    padding: 10px 12px 12px;
    border-top: 1px solid #d7e0ec;
    background: #fff;
}

.chat-composer {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 4px;
    min-height: 52px;
    padding: 5px;
    border: 1px solid color-mix(in srgb, var(--club-primary) 12%, var(--line));
    border-radius: 24px;
    background: var(--surface);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 24px rgba(15, 23, 42, .06);
}

.chat-form textarea {
    width: 100%;
    min-height: 38px;
    max-height: 92px;
    resize: none;
    border: 0;
    border-radius: 18px;
    padding: 10px 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    line-height: 1.25;
    outline: none;
}

.chat-form textarea::placeholder {
    color: color-mix(in srgb, var(--muted) 84%, #fff);
}

.chat-icon-button,
.chat-send-button {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 20px;
    background: transparent;
    color: var(--club-primary);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: transform .16s ease, background .16s ease, opacity .16s ease;
}

.chat-icon-button:hover {
    background: color-mix(in srgb, var(--club-primary) 9%, #fff);
    transform: translateY(-1px);
}

.chat-send-button:not(:disabled):hover {
    transform: translateY(-1px);
}

.chat-send-button {
    background: transparent;
    color: var(--club-primary);
    box-shadow: none;
}

.chat-send-button:disabled {
    background: transparent;
    color: color-mix(in srgb, var(--club-primary) 28%, var(--muted));
    box-shadow: none;
    cursor: default;
    opacity: .82;
}

.chat-send-icon {
    width: 20px;
    height: 20px;
    transform: translateX(1px);
}

.chat-send-button.sending .chat-send-icon {
    animation: tc-send-pulse .75s ease-in-out infinite;
}

.chat-file-input {
    display: none;
}

.chat-retry-button {
    margin-top: 8px;
    padding: 7px 10px;
    border: 0;
    border-radius: 999px;
    background: #fff;
    color: #991b1b;
    font-size: 11px;
    font-weight: 900;
}

.chat-attachment-sheet {
    position: fixed;
    inset: 0;
    z-index: 40;
    pointer-events: none;
    visibility: hidden;
}

.chat-attachment-sheet.open {
    pointer-events: auto;
    visibility: visible;
}

.chat-attachment-backdrop {
    position: absolute;
    inset: 0;
    border: 0;
    background: rgba(15, 23, 42, .32);
    opacity: 0;
    transition: opacity .18s ease;
}

.chat-attachment-sheet.open .chat-attachment-backdrop {
    opacity: 1;
}

.chat-attachment-menu {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(100%, 520px);
    padding: 10px 16px max(18px, env(safe-area-inset-bottom));
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
    background: #fff;
    box-shadow: 0 -22px 56px rgba(15, 23, 42, .2);
    transform: translate(-50%, 100%);
    transition: transform .22s ease;
}

.chat-attachment-sheet.open .chat-attachment-menu {
    transform: translate(-50%, 0);
}

.chat-attachment-handle {
    width: 44px;
    height: 5px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: #d7e0ec;
}

.chat-attachment-menu header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.chat-attachment-menu header strong {
    color: var(--text);
    font-size: 16px;
}

.chat-attachment-menu header button {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 17px;
    background: var(--surface-soft);
    color: var(--text);
    font-size: 22px;
}

.chat-attachment-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.chat-attachment-options button {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-height: 96px;
    padding: 12px 8px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface-soft);
    color: var(--text);
}

.chat-attachment-options button span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: #fff;
    font-size: 22px;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .08);
}

.chat-attachment-options button strong {
    font-size: 12px;
}

.chat-attachment-options button small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
}

@media (max-width: 430px) {
    .chat-attachment-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@keyframes tc-send-pulse {
    0% { transform: translateX(1px) translateY(0) scale(1); }
    50% { transform: translateX(4px) translateY(-2px) scale(.92); }
    100% { transform: translateX(1px) translateY(0) scale(1); }
}

@media (min-width: 780px) {
    .app-shell {
        max-width: 860px;
        margin: 0 auto;
        background: #f8fbff;
    }

    .quick-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .summary-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .chat-layout {
        grid-template-columns: 300px 1fr;
    }

    .chat-create-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .chat-create-form .wide {
        grid-column: 1 / -1;
    }
}

/* TeamCore mobile visual system */
:root {
    --club-primary: #082f66;
    --club-secondary: #f5b82e;
    --app-bg: #f5f7fb;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #0f172a;
    --muted: #64748b;
    --line: #e2e8f0;
    --danger: #ef4444;
    --success: #16a34a;
    --warning: #f59e0b;
    --shadow-soft: 0 18px 45px rgba(15, 23, 42, .08);
    --radius-lg: 20px;
    --radius-md: 16px;
    --radius-sm: 12px;
}

[data-theme="dark"] {
    --app-bg: #08111f;
    --surface: #101b2d;
    --surface-soft: #0b1627;
    --text: #f8fafc;
    --muted: #94a3b8;
    --line: rgba(148, 163, 184, .22);
    --shadow-soft: 0 20px 55px rgba(0, 0, 0, .38);
}

html {
    background: var(--app-bg);
}

body {
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--club-secondary) 18%, transparent), transparent 34rem),
        linear-gradient(180deg, color-mix(in srgb, var(--club-primary) 7%, #f8fbff), var(--app-bg) 24rem);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

button,
input,
select,
textarea {
    font-family: inherit;
}

button {
    border-radius: 16px;
    background: var(--club-primary);
}

.app-shell {
    max-width: 520px;
    margin: 0 auto;
    background: transparent;
}

.app-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 10px;
    padding: max(12px, env(safe-area-inset-top)) 14px 12px;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--club-primary) 96%, #000), color-mix(in srgb, var(--club-primary) 76%, #020617));
    color: #fff;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    box-shadow: 0 14px 35px rgba(2, 6, 23, .18);
}

.brand-block {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0;
    background: transparent;
    color: #fff;
    text-align: left;
}

.brand-block img,
.brand-avatar {
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.18);
}

.brand-block img {
    object-fit: cover;
}

.brand-avatar {
    display: inline-grid;
    flex: 0 0 42px;
    place-items: center;
    background:
        radial-gradient(circle at 70% 25%, color-mix(in srgb, var(--club-secondary) 74%, #fff), transparent 34%),
        linear-gradient(135deg, color-mix(in srgb, var(--club-primary) 72%, #fff), color-mix(in srgb, var(--club-secondary) 78%, #fff));
    color: #fff;
    font-size: 14px;
    font-weight: 950;
    line-height: 1;
}

.brand-block span,
.app-header-user {
    display: grid;
    gap: 2px;
}

.brand-block strong,
.app-header-user strong {
    display: block;
    max-width: min(68vw, 320px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
}

.brand-block small,
.app-header-user span {
    color: rgba(255,255,255,.74);
    font-size: 12px;
    font-weight: 700;
}

.app-header-user {
    grid-column: 1 / -1;
    padding-left: 2px;
}

.app-header-actions {
    grid-column: 2;
    grid-row: 1;
}

.notification-button {
    border: 0;
    background: rgba(255,255,255,.14);
    backdrop-filter: blur(10px);
}

.notification-button.success {
    background: var(--success);
}

.notification-button.warning {
    background: var(--warning);
}

.notification-button.danger {
    background: var(--danger);
}

.app-content {
    padding: 14px 14px 96px;
}

.home-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    min-height: 142px;
    padding: 22px;
    border-radius: 28px;
    color: #fff;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--club-primary) 92%, #020617), color-mix(in srgb, var(--club-primary) 55%, var(--club-secondary))),
        var(--club-primary);
    box-shadow: var(--shadow-soft);
    overflow: hidden;
}

.home-hero span {
    display: block;
    margin-bottom: 10px;
    color: color-mix(in srgb, var(--club-secondary) 84%, #fff);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.home-hero h2 {
    margin: 0;
    font-size: 28px;
    line-height: 1.08;
}

.home-hero p {
    margin: 8px 0 0;
    color: rgba(255,255,255,.78);
    font-weight: 700;
}

.home-hero button {
    min-width: 86px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.2);
    backdrop-filter: blur(10px);
}

.banner-stack,
.quick-actions,
.summary-row,
.news-preview,
.news-list,
.entity-list,
.order-list,
.notification-list,
.preference-list {
    display: grid;
    gap: 12px;
}

.banner-stack {
    margin: 14px 0;
}

.app-banner {
    display: grid;
    gap: 4px;
    width: 100%;
    padding: 15px 16px;
    border: 1px solid color-mix(in srgb, var(--club-primary) 14%, var(--line));
    border-radius: var(--radius-lg);
    background: var(--surface);
    color: var(--text);
    text-align: left;
    box-shadow: var(--shadow-soft);
}

.app-banner strong {
    font-size: 15px;
}

.app-banner span {
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
}

.app-banner.finance {
    border-color: color-mix(in srgb, var(--warning) 42%, var(--line));
}

.app-banner.alert {
    border-color: color-mix(in srgb, var(--danger) 34%, var(--line));
}

.quick-actions {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 16px 0 4px;
}

.quick-actions button {
    display: grid;
    place-items: center;
    gap: 7px;
    min-height: 82px;
    padding: 10px 6px;
    border: 1px solid var(--line);
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
}

.quick-actions svg,
.profile-row svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.quick-actions button:first-child {
    color: #fff;
    background: linear-gradient(135deg, var(--club-primary), color-mix(in srgb, var(--club-primary) 72%, var(--club-secondary)));
}

.quick-actions span {
    font-size: 12px;
    font-weight: 900;
}

.section-title {
    margin: 24px 0 11px;
    color: var(--text);
    font-size: 18px;
    letter-spacing: 0;
    text-transform: none;
}

.summary-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.summary-card,
.notice-card,
.news-card,
.news-detail,
.shop-card,
.empty-panel,
.notification-item,
.preference-row,
.chat-thread,
.chat-panel,
.chat-create,
.profile-card,
.profile-menu,
.entity-card,
.settings-card {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: 0 10px 28px rgba(15, 23, 42, .055);
}

.summary-card {
    padding: 16px;
}

.summary-card span,
.notice-card p,
.news-card p,
.shop-card p,
.empty-panel {
    color: var(--muted);
}

.summary-card strong {
    color: var(--club-primary);
    font-size: 24px;
}

.news-card {
    overflow: hidden;
}

.news-card button {
    gap: 8px;
    padding: 16px;
    background: transparent;
    color: var(--text);
}

.news-card.unread {
    border-color: color-mix(in srgb, var(--club-primary) 55%, var(--line));
    box-shadow: inset 4px 0 0 var(--club-primary), 0 10px 28px rgba(15, 23, 42, .055);
}

.news-card.featured {
    border-color: color-mix(in srgb, var(--club-secondary) 72%, var(--line));
}

.news-card h3,
.notice-card h3,
.shop-card h3,
.entity-card h3,
.profile-card h3 {
    color: var(--text);
}

.news-card img,
.news-cover {
    max-height: 260px;
    border-radius: var(--radius-md);
}

.news-detail {
    padding: 18px;
}

.news-content {
    color: var(--text);
    white-space: pre-wrap;
}

.button-link,
.link-button,
.news-actions button,
.shop-order-form button {
    border-radius: 15px;
    background: var(--club-primary);
    color: #fff;
}

.link-button {
    margin: 0 0 12px;
}

.shop-card {
    border-radius: 24px;
}

.shop-card img {
    aspect-ratio: 16 / 10;
}

.shop-order-form select,
.shop-order-form input,
.shop-order-form textarea,
.chat-create-form input[type="text"],
.chat-create-form select,
.settings-card select {
    border-color: var(--line);
    border-radius: 15px;
    background: var(--surface-soft);
    color: var(--text);
}

.chat-layout {
    gap: 14px;
}

.chat-thread.active {
    border-color: color-mix(in srgb, var(--club-primary) 55%, var(--line));
    background: color-mix(in srgb, var(--club-primary) 9%, #fff);
}

.chat-panel {
    overflow: hidden;
}

.chat-title {
    background: linear-gradient(135deg, var(--club-primary), color-mix(in srgb, var(--club-primary) 80%, #020617));
    color: #fff;
}

.chat-title p {
    color: rgba(255,255,255,.72);
}

.chat-messages {
    background:
        linear-gradient(0deg, rgba(255,255,255,.76), rgba(255,255,255,.76)),
        repeating-linear-gradient(45deg, #eef2f7 0 8px, #f8fafc 8px 16px);
}

.chat-message {
    border-radius: 18px 18px 18px 6px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(15, 23, 42, .06);
}

.chat-message.own {
    border-radius: 18px 18px 6px 18px;
    background: #dcfce7;
    color: #064e3b;
}

.calendar-head {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 14px;
    border-radius: 22px;
    background: linear-gradient(135deg, var(--club-primary), color-mix(in srgb, var(--club-primary) 78%, #020617));
    color: #fff;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
}

.calendar-head button {
    width: 44px;
    height: 44px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.22);
    background: rgba(255,255,255,.12);
    color: #fff;
    font-size: 28px;
    line-height: 1;
}

.calendar-head h2,
.calendar-head p {
    margin: 0;
}

.calendar-head h2 {
    text-transform: capitalize;
}

.calendar-head p {
    margin-top: 3px;
    color: rgba(255,255,255,.72);
    font-weight: 750;
}

.calendar-strip {
    display: flex;
    gap: 8px;
    margin: 0 -4px 16px;
    padding: 2px 4px 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.calendar-strip::-webkit-scrollbar {
    display: none;
}

.calendar-strip button {
    display: grid;
    justify-items: center;
    gap: 3px;
    min-width: 46px;
    min-height: 58px;
    padding: 8px 6px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    color: var(--muted);
}

.calendar-strip strong {
    color: var(--text);
    font-size: 16px;
}

.calendar-strip button.today {
    border-color: var(--club-primary);
    background: color-mix(in srgb, var(--club-primary) 9%, #fff);
}

.calendar-strip button.selected {
    border-color: var(--club-primary);
    background: var(--club-primary);
    color: #fff;
    box-shadow: 0 10px 24px color-mix(in srgb, var(--club-primary) 24%, transparent);
}

.calendar-strip button.selected strong {
    color: #fff;
}

.calendar-strip button.has-items::after {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 999px;
    background: var(--club-secondary);
}

.calendar-strip button.selected.has-items::after {
    background: #fff;
}

.calendar-filter-pill {
    width: 100%;
    margin: -4px 0 14px;
    padding: 11px 14px;
    border: 1px solid color-mix(in srgb, var(--club-primary) 24%, var(--line));
    border-radius: 999px;
    background: color-mix(in srgb, var(--club-primary) 8%, #fff);
    color: var(--club-primary);
    font-weight: 900;
}

.calendar-list {
    display: grid;
    gap: 11px;
}

.calendar-list h3 {
    margin: 12px 2px 2px;
    color: #475569;
    font-size: 13px;
    text-transform: capitalize;
}

.calendar-event {
    display: grid;
    grid-template-columns: auto 54px 1fr auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    min-height: 86px;
    padding: 14px;
    border: 1px solid var(--line);
    border-left: 5px solid var(--club-primary);
    border-radius: 20px;
    background: #fff;
    color: var(--text);
    text-align: left;
    box-shadow: 0 10px 28px rgba(15, 23, 42, .06);
}

.event-kind-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--club-primary) 10%, #fff);
    color: var(--club-primary);
}

.calendar-event.training .event-kind-icon {
    background: #dcfce7;
    color: #16a34a;
}

.calendar-event.match .event-kind-icon {
    background: #dbeafe;
    color: #2563eb;
}

.calendar-event.task .event-kind-icon {
    background: #ffedd5;
    color: #ea580c;
}

.event-kind-icon svg {
    width: 24px;
    height: 24px;
}

.event-shoe,
.event-ball {
    display: grid;
    place-items: center;
    font-size: 24px;
    font-weight: 950;
}

.calendar-event.match {
    border-left-color: #ef4444;
}

.calendar-event.task {
    border-left-color: #f59e0b;
}

.calendar-event.training {
    border-left-color: #10b981;
}

.event-time {
    display: grid;
    place-items: center;
    min-height: 50px;
    border-radius: 16px;
    background: #f8fafc;
    color: var(--club-primary);
    font-weight: 950;
}

.event-body {
    display: grid;
    gap: 4px;
}

.event-body strong {
    font-size: 15px;
}

.event-body small {
    color: var(--muted);
    font-weight: 750;
}

.calendar-event em {
    align-self: start;
    padding: 5px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--club-secondary) 22%, #fff);
    color: #7c2d12;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
}

.event-plan-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 8px;
}

.event-plan-meta em {
    align-self: auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
}

.event-plan-meta svg {
    width: 14px;
    height: 14px;
}

.event-open-plan {
    align-self: end;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--club-primary);
    color: #fff;
    font-size: 12px;
    white-space: nowrap;
}

.calendar-detail {
    display: grid;
    gap: 16px;
    padding: 18px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .08);
}

.calendar-detail h2,
.calendar-detail p,
.calendar-detail h3 {
    margin: 0;
}

.detail-kind {
    width: fit-content;
    padding: 6px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--club-primary) 11%, #fff);
    color: var(--club-primary);
    font-size: 12px;
    font-weight: 950;
    text-transform: uppercase;
}

.detail-player {
    color: var(--club-primary);
    font-weight: 950;
}

.detail-meta,
.detail-info {
    display: grid;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-weight: 760;
}

.detail-meta svg {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
}

.detail-info strong {
    color: var(--text);
}

.detail-info p {
    color: #475569;
    line-height: 1.45;
    white-space: pre-wrap;
}

.attendance-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.attendance-actions button {
    display: grid;
    justify-items: center;
    gap: 8px;
    min-height: 92px;
    padding: 12px 8px;
    border: 0;
    border-radius: 20px;
    color: #fff;
    font-weight: 950;
}

.attendance-actions strong {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    font-size: 22px;
}

.attendance-actions span {
    font-size: 12px;
}

.attendance-actions .yes {
    background: linear-gradient(135deg, #16a34a, #22c55e);
}

.attendance-actions .maybe {
    background: linear-gradient(135deg, #f59e0b, #fbbf24);
}

.attendance-actions .no {
    background: linear-gradient(135deg, #ef4444, #f87171);
}

.attendance-state {
    color: var(--muted);
    font-size: 13px;
    font-weight: 800;
}

.training-manager-panel {
    display: grid;
    gap: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.training-manager-panel .actions-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.training-attendance-list {
    display: grid;
    gap: 10px;
}

.training-attendance-row {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f8fafc;
}

.training-attendance-row strong,
.training-attendance-row small {
    display: block;
}

.training-attendance-row small {
    margin-top: 3px;
    color: var(--muted);
    font-weight: 800;
}

.attendance-mini-actions {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.attendance-mini-actions button {
    min-height: 42px;
    border: 0;
    border-radius: 14px;
    color: #fff;
    font-weight: 950;
}

.attendance-mini-actions .yes {
    background: #16a34a;
}

.attendance-mini-actions .maybe {
    background: #f59e0b;
}

.attendance-mini-actions .no {
    background: #ef4444;
}

.mobile-training-detail-shell {
    display: grid;
    gap: 14px;
}

.mobile-subpage-header {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    align-items: center;
    gap: 10px;
    margin: -4px -4px 6px;
    padding: 10px 0;
}

.mobile-subpage-header button,
.mobile-subpage-header a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    border: 0;
    border-radius: 14px;
    background: color-mix(in srgb, var(--club-primary) 9%, #fff);
    color: var(--club-primary);
    font-weight: 950;
    text-decoration: none;
}

.mobile-subpage-header button {
    font-size: 30px;
    line-height: 1;
}

.mobile-subpage-header strong {
    justify-self: center;
    color: var(--text);
    font-size: 18px;
}

.mobile-subpage-header a {
    gap: 6px;
    padding: 0 12px;
    background: var(--club-primary);
    color: #fff;
    font-size: 12px;
}

.mobile-subpage-header a svg {
    width: 15px;
    height: 15px;
}

.training-session-hero {
    display: grid;
    grid-template-columns: 58px 1fr;
    gap: 14px;
    align-items: center;
}

.training-session-hero h2,
.training-session-hero p {
    margin: 0;
}

.training-session-hero h2 {
    font-size: 24px;
    line-height: 1.05;
}

.training-session-hero p {
    margin-top: 5px;
    color: var(--muted);
    font-weight: 850;
}

.training-session-icon {
    display: grid;
    place-items: center;
    width: 58px;
    height: 58px;
    border-radius: 999px;
    background: #dcfce7;
    color: #16a34a;
}

.training-plan-summary-card {
    display: grid;
    grid-template-columns: 52px 1fr;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.training-plan-summary-card > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    background: #dcfce7;
    color: #16a34a;
}

.training-plan-summary-card svg {
    width: 22px;
    height: 22px;
}

.training-plan-summary-card strong,
.training-plan-summary-card p {
    margin: 0;
}

.training-plan-summary-card p {
    margin-top: 4px;
    color: var(--muted);
    font-weight: 800;
}

.mobile-training-plan-card {
    display: grid;
    gap: 14px;
    padding: 14px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background:
        radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--club-primary) 10%, transparent), transparent 32%),
        #fff;
}

.mobile-training-plan-head,
.mobile-training-exercise-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mobile-training-plan-head span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.mobile-training-plan-head em,
.mobile-training-exercise-top em {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--club-primary) 11%, #fff);
    color: var(--club-primary);
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
}

.mobile-training-exercise-top em.done {
    background: #dcfce7;
    color: #15803d;
}

.mobile-training-summary {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.mobile-training-summary article {
    min-height: 70px;
    padding: 11px 8px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f8fafc;
}

.mobile-training-summary strong,
.mobile-training-summary span {
    display: block;
}

.mobile-training-progress {
    margin: -4px 2px 0;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.mobile-training-summary strong {
    color: var(--text);
    font-size: 18px;
}

.mobile-training-summary span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.mobile-training-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #f8fafc;
}

.mobile-training-tabs span {
    display: grid;
    place-items: center;
    min-height: 34px;
    border-radius: 999px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 950;
}

.mobile-training-tabs .active {
    background: var(--club-primary);
    color: #fff;
    box-shadow: 0 10px 22px color-mix(in srgb, var(--club-primary) 22%, transparent);
}

.mobile-training-block-list,
.mobile-training-block {
    display: grid;
    gap: 12px;
}

.mobile-training-block {
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
}

.mobile-training-block > header {
    display: flex;
    gap: 10px;
    align-items: center;
}

.mobile-training-block > header > span,
.mobile-training-exercise-top > span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: var(--club-primary);
    color: #fff;
    font-size: 13px;
    font-weight: 950;
}

.mobile-training-block small,
.mobile-training-exercise-top small,
.mobile-training-exercise-card p {
    display: block;
    margin-top: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 780;
    line-height: 1.35;
}

.mobile-training-exercise-card {
    display: grid;
    gap: 11px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #f8fafc;
}

.mobile-training-exercise-open {
    display: grid;
    grid-template-columns: 112px 1fr auto;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    text-align: left;
}

.mobile-training-exercise-open strong,
.mobile-training-exercise-open small {
    display: block;
}

.mobile-training-exercise-open strong {
    font-size: 15px;
}

.mobile-training-exercise-open small {
    margin-top: 5px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
}

.mobile-court-thumb {
    display: block;
    overflow: hidden;
    width: 112px;
    aspect-ratio: 120 / 70;
    border-radius: 12px;
    background: #f5c26d;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}

.mobile-court-thumb svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mobile-court-thumb rect {
    fill: #f5c26d;
}

.mobile-court-thumb path {
    fill: none;
    stroke: rgba(255,255,255,.85);
    stroke-width: 2;
}

.mobile-court-thumb .play {
    stroke: #0f5cff;
    stroke-width: 4;
    stroke-linecap: round;
}

.mobile-court-thumb .p1 {
    fill: #0f5cff;
}

.mobile-court-thumb .p2 {
    fill: #ef4444;
}

.mobile-chevron {
    color: var(--club-primary);
    font-size: 24px;
    font-weight: 950;
}

.intensity-pill {
    display: inline-flex;
    width: fit-content;
    margin-top: 8px;
    padding: 6px 9px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
}

.intensity-pill.medium {
    background: #ffedd5;
    color: #ea580c;
}

.intensity-pill.high {
    background: #fee2e2;
    color: #dc2626;
}

.mobile-training-indicators,
.mobile-training-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mobile-training-indicators span,
.mobile-training-metrics span {
    --indicator-color: var(--club-primary);
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border-radius: 999px;
    border: 1px solid var(--line);
    border-left: 4px solid var(--indicator-color);
    background: #fff;
    color: var(--text);
    font-size: 11px;
    font-weight: 950;
}

.mobile-training-metrics span {
    border-left-width: 1px;
    color: var(--muted);
}

.mobile-training-indicators small {
    color: var(--muted);
    font-size: 10px;
    font-weight: 850;
}

.mobile-training-progression,
.mobile-training-readonly-note {
    padding: 10px;
    border-radius: 15px;
    background: #fff;
}

.mobile-training-exercise-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mobile-training-exercise-actions a,
.mobile-training-exercise-actions span {
    padding: 7px 10px;
    border-radius: 999px;
    background: #fff;
    color: var(--club-primary);
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
}

.mobile-training-exercise-controls {
    display: grid;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--line);
}

.mobile-training-exercise-controls label {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
}

.mobile-training-check {
    display: flex !important;
    align-items: center;
    gap: 8px;
    color: var(--text) !important;
}

.mobile-training-exercise-controls input[type="number"],
.mobile-training-exercise-controls textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-weight: 800;
    padding: 10px 12px;
}

.mobile-training-exercise-controls textarea {
    resize: vertical;
    min-height: 68px;
}

.mobile-training-exercise-controls output {
    justify-self: end;
    margin-top: -26px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--club-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 950;
}

.mobile-training-exercise-controls button {
    min-height: 46px;
    border: 0;
    border-radius: 16px;
    background: var(--club-primary);
    color: #fff;
    font-weight: 950;
}

.mobile-exercise-detail {
    display: grid;
    gap: 18px;
}

.mobile-exercise-detail h2 {
    margin: 0;
    color: var(--text);
    font-size: 25px;
    line-height: 1.08;
}

.exercise-objective-card {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: start;
    padding: 16px;
    border: 1px solid color-mix(in srgb, var(--club-primary) 25%, var(--line));
    border-radius: 18px;
    background: color-mix(in srgb, var(--club-primary) 7%, #fff);
}

.exercise-objective-card > span {
    color: var(--club-primary);
}

.exercise-objective-card svg {
    width: 28px;
    height: 28px;
}

.exercise-objective-card p {
    margin: 0;
    color: #1e293b;
    line-height: 1.45;
}

.exercise-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
}

.exercise-kpi-grid article {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-height: 78px;
    padding: 12px 6px;
    border-right: 1px solid var(--line);
    color: var(--muted);
    text-align: center;
}

.exercise-kpi-grid article:last-child {
    border-right: 0;
}

.exercise-kpi-grid svg {
    width: 18px;
    height: 18px;
}

.exercise-kpi-grid strong {
    color: var(--text);
    font-size: 13px;
}

.exercise-kpi-grid span {
    font-size: 11px;
    font-weight: 850;
}

.exercise-detail-tags,
.exercise-detail-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.exercise-detail-tags span {
    --indicator-color: var(--club-primary);
    padding: 7px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--indicator-color) 12%, #fff);
    color: var(--indicator-color);
    font-size: 12px;
    font-weight: 950;
}

.exercise-detail-metrics article {
    flex: 1 1 140px;
    padding: 11px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: #fff;
}

.exercise-detail-metrics strong,
.exercise-detail-metrics span {
    display: block;
}

.exercise-detail-metrics span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
}

.exercise-detail-controls {
    padding-top: 0;
    border-top: 0;
}

.exercise-detail-controls button {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 16px 32px color-mix(in srgb, var(--club-primary) 24%, transparent);
}

.exercise-detail-controls button svg {
    width: 18px;
    height: 18px;
}

.empty-panel.compact {
    min-height: auto;
    padding: 16px;
    border-radius: 18px;
}

.primary-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 50px;
    padding: 12px 16px;
    border-radius: 16px;
    background: var(--club-primary);
    color: #fff;
    text-decoration: none;
    font-weight: 950;
}

.payments-balance {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 122px;
    margin-bottom: 18px;
    padding: 20px;
    border-radius: 22px;
    background:
        radial-gradient(circle at 18% 0%, rgba(34, 211, 238, .34), transparent 38%),
        linear-gradient(135deg, #0891b2, #082f66 78%);
    color: #fff;
    box-shadow: 0 18px 40px rgba(8, 47, 102, .22);
}

.payments-balance.pending {
    background:
        radial-gradient(circle at 18% 0%, rgba(251, 191, 36, .34), transparent 38%),
        linear-gradient(135deg, #0f766e, #082f66 78%);
}

.payments-balance span,
.payments-balance small {
    display: block;
    color: rgba(255,255,255,.78);
    font-weight: 850;
}

.payments-balance strong {
    display: block;
    margin: 5px 0 2px;
    font-size: 32px;
    line-height: 1;
}

.payments-balance em {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 auto;
    border-radius: 999px;
    background: rgba(255,255,255,.13);
    color: #22c55e;
    font-size: 28px;
    font-style: normal;
    font-weight: 950;
}

.payments-balance.pending em {
    color: #fbbf24;
}

.subsection-title {
    margin: 4px 2px 10px;
    color: var(--text);
    font-size: 16px;
}

.payments-list {
    display: grid;
    gap: 10px;
}

.payment-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;
    min-height: 86px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .06);
}

.payment-card div {
    display: grid;
    gap: 4px;
    min-width: 0;
}

.payment-card strong,
.payment-card span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.payment-card strong {
    color: var(--text);
    font-size: 14px;
}

.payment-card span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.payment-card b {
    color: var(--text);
    font-size: 14px;
}

.payment-card aside {
    display: grid;
    justify-items: end;
    gap: 8px;
}

.payment-card em {
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-style: normal;
    font-weight: 950;
}

.payment-card em.paid {
    background: #dcfce7;
    color: #16a34a;
}

.payment-card em.pending {
    background: #ffedd5;
    color: #ea580c;
}

.payment-card button,
.payments-more {
    min-height: 38px;
    padding: 8px 12px;
    border: 0;
    border-radius: 13px;
    background: var(--club-primary);
    color: #fff;
    font-weight: 950;
}

.payment-card.empty {
    grid-template-columns: 1fr;
}

.payments-more {
    width: 100%;
    min-height: 52px;
    margin-top: 14px;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--club-primary);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.profile-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
}

.profile-card h3,
.profile-card p {
    margin: 0;
}

.profile-card p {
    margin-top: 4px;
    color: var(--muted);
    font-weight: 750;
}

.avatar,
.team-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex: 0 0 auto;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--club-primary), var(--club-secondary));
    font-weight: 950;
}

.avatar.photo {
    overflow: hidden;
    padding: 0;
    background: #eef4ff;
}

.avatar.photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

.avatar.small,
.team-badge {
    width: 48px;
    height: 48px;
    border-radius: 16px;
}

.profile-menu {
    margin-top: 14px;
    overflow: hidden;
}

.profile-row {
    display: grid;
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 68px;
    padding: 14px 16px;
    border-radius: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    color: var(--text);
    text-align: left;
}

.profile-row:last-child {
    border-bottom: 0;
}

.profile-row span {
    display: grid;
    gap: 3px;
}

.profile-row small {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.profile-row em {
    color: var(--muted);
    font-size: 24px;
    font-style: normal;
}

.entity-card {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 14px;
}

.entity-card h3,
.entity-card p {
    margin: 0;
}

.entity-card p {
    margin-top: 4px;
    color: var(--muted);
    font-weight: 700;
}

.settings-card {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.settings-card label {
    display: grid;
    gap: 7px;
    color: var(--text);
    font-weight: 900;
}

.settings-card select {
    min-height: 50px;
    padding: 10px 12px;
    font-size: 15px;
}

.logout-button {
    width: 100%;
    margin-top: 16px;
    border: 1px solid color-mix(in srgb, var(--danger) 26%, var(--line));
    background: #fff;
    color: var(--danger);
}

.app-nav {
    left: 50%;
    right: auto;
    bottom: 10px;
    width: min(492px, calc(100% - 22px));
    transform: translateX(-50%);
    gap: 0;
    padding: 7px;
    border: 1px solid rgba(226, 232, 240, .92);
    border-radius: 24px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 18px 50px rgba(15, 23, 42, .16);
    backdrop-filter: blur(18px);
}

.app-nav button {
    min-height: 58px;
    border-radius: 18px;
    color: #64748b;
}

.app-nav button.active {
    color: var(--club-primary);
    background: color-mix(in srgb, var(--club-primary) 10%, #fff);
}

.app-nav button.active span {
    color: var(--club-primary);
}

.app-nav span {
    font-size: 11px;
    font-weight: 900;
}

.app-header {
    grid-template-columns: 1fr auto;
    padding: max(10px, env(safe-area-inset-top)) 14px 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.brand-block {
    min-height: 46px;
}

.brand-block img {
    width: 40px;
    height: 40px;
    border-radius: 13px;
}

.brand-block strong {
    max-width: 220px;
    font-size: 13px;
}

.brand-block small {
    font-size: 11px;
}

.app-header-user {
    display: none;
}

.notification-button {
    width: 42px;
    min-height: 42px;
    border-radius: 15px;
}

.mobile-home-hero {
    min-height: 124px;
    padding: 20px;
    border-radius: 24px;
}

.mobile-home-hero h2 {
    font-size: 25px;
}

.today-panel {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: var(--surface);
    box-shadow: 0 12px 30px rgba(15, 23, 42, .06);
}

.today-panel-head,
.mobile-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.today-panel-head span,
.mobile-section-head span,
.profile-context-card span {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
}

.today-panel-head h2,
.mobile-section-head h2 {
    margin: 0;
    font-size: 22px;
    line-height: 1.1;
}

.today-panel-head button,
.mobile-section-head button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 12px;
    border: 1px solid color-mix(in srgb, var(--club-primary) 18%, var(--line));
    background: color-mix(in srgb, var(--club-primary) 8%, #fff);
    color: var(--club-primary);
}

.today-next-card,
.today-timeline-item {
    display: grid;
    grid-template-columns: 58px 1fr auto;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #f8fafc;
    color: var(--text);
    text-align: left;
}

.today-next-card > span,
.today-timeline-item time {
    display: grid;
    place-items: center;
    min-height: 48px;
    border-radius: 15px;
    background: #fff;
    color: var(--club-primary);
    font-weight: 950;
}

.today-next-card strong,
.today-timeline-item strong {
    display: block;
    font-size: 15px;
}

.today-next-card small,
.today-timeline-item small {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.today-next-card em,
.today-timeline-item em {
    padding: 5px 8px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--club-secondary) 20%, #fff);
    color: #7c2d12;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
}

.mobile-action-rail {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin: 14px 0 4px;
}

.mobile-action-rail button {
    display: grid;
    justify-items: center;
    gap: 5px;
    min-height: 78px;
    padding: 10px 6px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    color: var(--text);
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.mobile-action-rail svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-action-rail span {
    font-size: 12px;
    font-weight: 950;
}

.mobile-action-rail small {
    max-width: 100%;
    overflow: hidden;
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mobile-action-rail button.is-warning {
    border-color: color-mix(in srgb, var(--warning) 44%, var(--line));
    background: #fffbeb;
}

.mobile-action-rail button.is-ok {
    border-color: color-mix(in srgb, var(--success) 34%, var(--line));
    background: #f0fdf4;
}

.today-timeline {
    display: grid;
    gap: 10px;
}

.mobile-section-head {
    margin: 2px 0 12px;
}

.calendar-filter-tabs {
    display: flex;
    gap: 8px;
    margin: 0 -2px 12px;
    padding: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.calendar-filter-tabs::-webkit-scrollbar {
    display: none;
}

.calendar-filter-tabs button {
    flex: 0 0 auto;
    min-height: 40px;
    padding: 9px 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--muted);
    font-size: 13px;
}

.calendar-filter-tabs button.active {
    border-color: var(--club-primary);
    background: var(--club-primary);
    color: #fff;
}

.calendar-head {
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 20px;
}

.calendar-event {
    min-height: 78px;
    border-radius: 18px;
}

.profile-head {
    margin-bottom: 12px;
}

.profile-card {
    padding: 16px;
    border-radius: 22px;
}

.profile-context-card {
    display: grid;
    gap: 4px;
    margin-top: 12px;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
}

.profile-context-card strong {
    font-size: 15px;
}

.compact-title {
    margin-top: 18px;
    font-size: 16px;
}

.profile-menu {
    border-radius: 22px;
}

.profile-row {
    min-height: 62px;
    padding: 13px 15px;
}

.app-content {
    padding: 18px 18px 118px;
}

.app-header {
    min-height: 178px;
    align-content: start;
    padding: max(26px, env(safe-area-inset-top)) 22px 24px;
    border-bottom-left-radius: 34px;
    border-bottom-right-radius: 34px;
    box-shadow: 0 24px 54px rgba(2, 6, 23, .22);
}

.brand-block {
    min-height: 66px;
    gap: 16px;
}

.brand-block img {
    width: 58px;
    height: 58px;
    border-radius: 20px;
}

.brand-block strong {
    max-width: 270px;
    font-size: 20px;
    line-height: 1.08;
}

.brand-block small {
    margin-top: 4px;
    font-size: 15px;
}

.notification-button {
    width: 62px;
    min-height: 62px;
    border-radius: 22px;
}

.notification-button svg {
    width: 30px;
    height: 30px;
}

.notification-button span {
    top: -8px;
    right: -8px;
    min-width: 26px;
    height: 26px;
    font-size: 13px;
    line-height: 26px;
}

.mobile-home-hero {
    min-height: 176px;
    padding: 28px;
    border-radius: 30px;
    box-shadow: 0 28px 58px rgba(15, 23, 42, .16);
}

.mobile-home-hero span {
    margin-bottom: 12px;
    color: color-mix(in srgb, var(--club-secondary) 88%, #fff);
    font-size: 13px;
}

.mobile-home-hero h2 {
    font-size: 34px;
    line-height: 1.04;
}

.mobile-home-hero p {
    margin-top: 10px;
    font-size: 18px;
}

.mobile-home-hero button {
    min-width: 120px;
    min-height: 58px;
    padding: 12px 18px;
    border-radius: 22px;
    font-size: 18px;
}

.today-panel {
    margin-top: 20px;
    padding: 22px;
    border-radius: 28px;
    box-shadow: 0 22px 46px rgba(15, 23, 42, .10);
}

.today-panel-head h2,
.mobile-section-head h2 {
    font-size: 30px;
}

.today-panel-head span,
.mobile-section-head span {
    font-size: 14px;
}

.today-panel-head button,
.mobile-section-head button {
    min-height: 58px;
    padding: 12px 18px;
    border-radius: 24px;
    font-size: 18px;
}

.today-next-card,
.today-timeline-item {
    grid-template-columns: 72px 1fr auto;
    min-height: 86px;
    padding: 18px;
    border-radius: 24px;
}

.mobile-action-rail {
    gap: 14px;
    margin-top: 20px;
}

.mobile-action-rail button {
    min-height: 108px;
    border-radius: 26px;
}

.mobile-action-rail svg {
    width: 28px;
    height: 28px;
}

.mobile-action-rail span {
    font-size: 17px;
}

.mobile-action-rail small {
    font-size: 13px;
}

.section-title {
    margin-top: 34px;
    font-size: 28px;
}

.chat-head {
    margin: 8px 0 18px;
}

.chat-layout {
    gap: 16px;
}

.chat-thread {
    min-height: 92px;
    padding: 20px 68px 20px 22px;
    border-radius: 28px;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .08);
}

.chat-thread strong {
    font-size: 22px;
}

.chat-thread span {
    margin-top: 4px;
    font-size: 18px;
}

.chat-thread em {
    top: 20px;
    right: 22px;
    min-width: 36px;
    height: 36px;
    font-size: 17px;
}

.chat-empty-state {
    display: grid;
    gap: 10px;
    padding: 30px 28px;
    border: 1px dashed color-mix(in srgb, var(--club-primary) 24%, var(--line));
    border-radius: 28px;
    background: color-mix(in srgb, var(--club-primary) 5%, #fff);
    color: var(--text);
}

.chat-empty-state strong {
    font-size: 24px;
}

.chat-empty-state span {
    color: var(--muted);
    font-size: 18px;
    font-weight: 750;
}

.chat-panel {
    border-radius: 28px;
}

.chat-title {
    padding: 24px 26px;
}

.chat-title h3 {
    font-size: 22px;
}

.chat-title p {
    margin-top: 6px;
    font-size: 16px;
}

.chat-messages {
    max-height: min(52vh, 520px);
}

.chat-create-sheet {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    align-items: end;
}

.chat-create-backdrop {
    position: absolute;
    inset: 0;
    min-height: 0;
    border-radius: 0;
    background: rgba(15, 23, 42, .48);
}

.chat-create-sheet .chat-create-form {
    position: relative;
    z-index: 1;
    width: min(520px, calc(100% - 18px));
    max-height: min(82vh, 720px);
    margin: 0 auto max(10px, env(safe-area-inset-bottom));
    padding: 14px;
    overflow-y: auto;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 26px 60px rgba(15, 23, 42, .28);
}

.chat-create-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
}

.chat-create-head strong,
.chat-create-head span {
    display: block;
}

.chat-create-head strong {
    font-size: 18px;
}

.chat-create-head span {
    margin-top: 3px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
}

.chat-create-head button {
    width: 38px;
    min-height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    font-size: 22px;
}

/* Native mobile visual direction, aligned with the approved reference. */
body {
    background: #f5f7fb;
}

.app-shell {
    max-width: 430px;
    min-height: 100vh;
    padding: 0;
    background: #f7f9fd;
}

.app-header {
    min-height: 64px;
    padding: max(8px, env(safe-area-inset-top)) 12px 8px;
    border-radius: 0;
    background: linear-gradient(135deg, #061b3f 0%, #082f66 100%);
    box-shadow: 0 10px 26px rgba(6, 27, 63, .12);
}

.brand-block {
    min-height: 34px;
    gap: 8px;
}

.brand-block img {
    width: 28px;
    height: 28px;
    border-radius: 9px;
}

.brand-block strong {
    max-width: 240px;
    font-size: 12px;
    line-height: 1.15;
}

.brand-block small {
    margin-top: 1px;
    font-size: 10px;
}

.notification-button {
    width: 30px;
    min-height: 30px;
    border-radius: 10px;
}

.notification-button svg {
    width: 17px;
    height: 17px;
}

.notification-button span {
    top: -4px;
    right: -4px;
    min-width: 16px;
    height: 16px;
    font-size: 9px;
    line-height: 16px;
}

.app-content {
    padding: 14px 14px 88px;
}

.mobile-greeting {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.mobile-greeting h2 {
    margin: 0;
    color: #08122b;
    font-size: 22px;
    line-height: 1.1;
}

.mobile-greeting p {
    margin: 0;
    color: #66758f;
    font-size: 13px;
    font-weight: 650;
    text-transform: capitalize;
}

.today-panel {
    margin-top: 0;
    padding: 13px 14px;
    border-color: #f4c77e;
    border-radius: 10px;
    background: #fff8ed;
    box-shadow: none;
}

.today-panel-head {
    align-items: center;
}

.today-panel-head span {
    display: none;
}

.today-panel-head h2 {
    font-size: 14px;
}

.today-panel-head h2::before {
    content: "⚠";
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin-right: 8px;
    border-radius: 999px;
    background: #f59e0b;
    color: #fff;
    font-size: 13px;
}

.today-panel-head button {
    min-width: 34px;
    min-height: 34px;
    padding: 0;
    overflow: hidden;
    border: 0;
    background: transparent;
    color: #082f66;
    text-indent: -999px;
}

.today-panel-head button::after {
    content: "›";
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    text-indent: 0;
    font-size: 28px;
    line-height: 1;
}

.today-next-card,
.today-timeline-item,
.news-card,
.profile-card,
.profile-context-card,
.profile-menu,
.entity-card,
.settings-card,
.chat-thread,
.chat-panel {
    border-color: #e5ebf4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.mobile-action-rail {
    gap: 0;
    margin: 18px 0 14px;
    overflow: hidden;
    border: 1px solid #e5ebf4;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.mobile-action-rail button {
    min-height: 76px;
    border: 0;
    border-right: 1px solid #e5ebf4;
    border-radius: 0;
    box-shadow: none;
}

.mobile-action-rail button:last-child {
    border-right: 0;
}

.mobile-action-rail svg {
    width: 24px;
    height: 24px;
}

.mobile-action-rail span {
    font-size: 12px;
}

.mobile-action-rail small {
    font-size: 11px;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 18px 0 10px;
    color: #08122b;
    font-size: 17px;
    line-height: 1.15;
}

.summary-row {
    gap: 10px;
}

.summary-card {
    padding: 14px;
    border-radius: 12px;
}

.summary-card strong {
    font-size: 24px;
}

.news-card button {
    grid-template-columns: 1fr auto;
    padding: 12px;
}

.news-card span,
.news-card small {
    font-size: 11px;
}

.news-card h3 {
    font-size: 14px;
}

.news-card p {
    font-size: 13px;
}

.mobile-section-head {
    margin: 0 0 12px;
}

.mobile-section-head span {
    display: none;
}

.mobile-section-head h2 {
    font-size: 22px;
}

.mobile-section-head button {
    min-height: 38px;
    padding: 8px 14px;
    border-radius: 14px;
    font-size: 14px;
}

.calendar-filter-tabs {
    gap: 8px;
    margin-bottom: 12px;
}

.calendar-filter-tabs button {
    min-height: 32px;
    padding: 6px 12px;
    font-size: 12px;
}

.calendar-head {
    grid-template-columns: 34px 1fr 34px;
    margin-bottom: 12px;
    padding: 12px;
    border-radius: 12px;
    background: #fff;
    color: #08122b;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.calendar-head button {
    width: 34px;
    height: 34px;
    border-color: transparent;
    background: transparent;
    color: #082f66;
}

.calendar-head p {
    color: #66758f;
}

.calendar-strip {
    gap: 6px;
}

.calendar-strip button {
    min-width: 45px;
    min-height: 52px;
    border-radius: 14px;
}

.calendar-event {
    grid-template-columns: 58px 1fr auto;
    min-height: 72px;
    padding: 12px;
    border-left-width: 0;
    border-radius: 12px;
    box-shadow: none;
}

.mobile-board-card {
    display: grid;
    gap: 12px;
    border: 1px solid #e5ebf4;
    border-radius: 14px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.mobile-board-card p {
    margin: 0;
    color: #4b5f7a;
    font-size: 13px;
    line-height: 1.45;
}

.mobile-board-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mobile-board-meta span,
.mobile-board-meta strong,
.mobile-board-meta em {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    border-radius: 999px;
    padding: 4px 9px;
    font-size: 11px;
    font-style: normal;
    font-weight: 850;
}

.mobile-board-meta span {
    background: #eaf1ff;
    color: #0b5fff;
}

.mobile-board-meta strong {
    background: #f1f5f9;
    color: #172033;
}

.mobile-board-meta em {
    background: #ecfdf3;
    color: #15803d;
}

.mobile-board-viewer {
    overflow: hidden;
    border: 1px solid #dbe7f5;
    border-radius: 12px;
    background: #f8fbff;
    aspect-ratio: 16 / 9;
}

.mobile-tactical-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.mobile-wood-line {
    stroke: rgba(185, 119, 37, .18);
    stroke-width: 1;
}

.mobile-court-lines {
    fill: none;
    stroke: #fff;
    stroke-width: 4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.mobile-board-arrow {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.mobile-pass-head {
    stroke: none;
}

.mobile-board-label {
    fill: #fff;
    font-size: 16px;
    font-weight: 900;
}

.mobile-board-links {
    display: grid;
    gap: 10px;
}

.mobile-board-links article {
    display: grid;
    gap: 4px;
    border: 1px solid #e5ebf4;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.mobile-board-links strong {
    color: #172033;
    font-size: 14px;
}

.mobile-board-links small {
    color: #66758f;
    font-size: 12px;
    line-height: 1.35;
}

.mobile-board-steps {
    display: grid;
    gap: 10px;
}

.mobile-board-steps article {
    display: grid;
    grid-template-columns: 34px 1fr auto;
    align-items: center;
    gap: 10px;
    border: 1px solid #e5ebf4;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .05);
}

.mobile-board-steps span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #0b5fff;
    color: #fff;
    font-weight: 900;
}

.mobile-board-steps strong,
.mobile-board-steps small {
    display: block;
}

.mobile-board-steps small {
    margin-top: 3px;
    color: #66758f;
    font-size: 12px;
}

.mobile-board-steps em {
    color: #0b5fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 900;
}

.event-time {
    min-height: 34px;
    border-radius: 7px;
    font-size: 12px;
}

.profile-head {
    margin-bottom: 12px;
}

.profile-card {
    padding: 14px;
}

.profile-context-card {
    margin-top: 12px;
    padding: 14px;
}

.profile-row {
    min-height: 66px;
    padding: 14px;
    border-bottom-color: #eef2f7;
}

.profile-row small {
    font-size: 12px;
}

.compact-title {
    margin-top: 18px;
    font-size: 14px;
}

.chat-head {
    margin: 0 0 12px;
}

.chat-layout {
    gap: 12px;
}

.chat-thread {
    min-height: 74px;
    padding: 14px 48px 14px 14px;
}

.chat-thread strong {
    font-size: 15px;
}

.chat-thread span {
    font-size: 13px;
}

.chat-thread em {
    top: 18px;
    right: 14px;
    min-width: 28px;
    height: 28px;
    font-size: 13px;
}

.chat-empty-state {
    padding: 18px;
    border-radius: 12px;
}

.chat-empty-state strong {
    font-size: 17px;
}

.chat-empty-state span {
    font-size: 13px;
}

.chat-title {
    padding: 14px;
    background: #fff;
    color: #08122b;
    border-bottom: 1px solid #eef2f7;
}

.chat-title h3 {
    font-size: 16px;
}

.chat-title p {
    color: #66758f;
    font-size: 12px;
}

.chat-messages {
    max-height: min(56vh, 520px);
    background: #f8fafc;
}

.chat-message {
    border-radius: 14px 14px 14px 4px;
}

.chat-message.own {
    border-radius: 14px 14px 4px 14px;
}

.chat-create-sheet .chat-create-form {
    width: min(430px, calc(100% - 20px));
    border-radius: 18px;
}

.app-nav {
    width: min(430px, 100%);
    bottom: 0;
    padding: 8px 14px max(8px, env(safe-area-inset-bottom));
    border: 0;
    border-top: 1px solid #e5ebf4;
    border-radius: 0;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .06);
}

.app-nav button {
    min-height: 50px;
    border-radius: 12px;
}

.app-nav svg {
    width: 22px;
    height: 22px;
}

.app-nav span {
    font-size: 10px;
}

@media (min-width: 780px) {
    .app-shell {
        max-width: 760px;
    }

    .app-content {
        padding-left: 18px;
        padding-right: 18px;
    }

    .app-header {
        grid-template-columns: 1fr auto auto;
    }

    .app-header-user {
        display: grid;
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    .quick-actions {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .chat-layout {
        grid-template-columns: minmax(220px, 280px) 1fr;
    }
}

.chat-load-more {
    justify-self: center;
    min-height: 36px;
    border: 1px solid rgba(15, 98, 254, .2);
    border-radius: 999px;
    padding: 0 14px;
    background: #eef4ff;
    color: #0f62fe;
    font-weight: 800;
}

.evolution-mobile-hero,
.evolution-privacy-card {
    display: grid;
    gap: 8px;
    border: 1px solid rgba(15, 98, 254, .14);
    border-radius: 8px;
    padding: 16px;
    background: linear-gradient(135deg, #071b3a, #114d83);
    color: #ffffff;
    box-shadow: 0 16px 36px rgba(7, 27, 58, .12);
}

.evolution-mobile-hero span,
.evolution-mobile-hero small {
    color: rgba(255, 255, 255, .76);
    font-weight: 800;
}

.evolution-mobile-hero h3 {
    margin: 2px 0;
    font-size: 1.25rem;
}

.evolution-mobile-hero p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
}

.evolution-mobile-hero > strong {
    font-size: 2rem;
    line-height: 1;
}

.evolution-alerts,
.evolution-action-card,
.evolution-mobile-grid,
.evolution-mobile-list,
.evolution-mobile-timeline {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.evolution-alerts article,
.evolution-action-card,
.evolution-mobile-card,
.evolution-mobile-metric,
.evolution-mobile-timeline article {
    border: 1px solid #e4ebf5;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 10px 24px rgba(7, 27, 58, .06);
}

.evolution-action-card {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding: 14px;
    border-color: #bfdbfe;
    background: #eff6ff;
}

.evolution-action-card span,
.evolution-action-card small {
    display: block;
    margin-top: 4px;
    color: #315174;
    font-weight: 700;
    line-height: 1.35;
}

.evolution-action-card small {
    border-radius: 999px;
    padding: 5px 9px;
    background: #ffffff;
    color: #0f62fe;
    white-space: nowrap;
}

.evolution-alerts article {
    display: grid;
    gap: 4px;
    padding: 12px 14px;
}

.evolution-alerts article.warning {
    border-color: #ffd58a;
    background: #fff8e8;
}

.evolution-alerts article.info {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.evolution-alerts article.sensitive {
    border-color: #fecdd3;
    background: #fff1f2;
}

.evolution-alerts article.ok {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.evolution-alerts span,
.evolution-mobile-card span,
.evolution-mobile-card small,
.evolution-mobile-metric small,
.evolution-mobile-timeline p,
.evolution-mobile-timeline small,
.evolution-privacy-card p {
    color: #667085;
}

.evolution-mobile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.evolution-mobile-metric {
    display: grid;
    gap: 4px;
    padding: 14px;
}

.evolution-mobile-metric svg {
    width: 22px;
    height: 22px;
    color: #0f62fe;
}

.evolution-mobile-metric span {
    color: #667085;
    font-size: .78rem;
    font-weight: 800;
}

.evolution-mobile-metric strong {
    color: #101828;
    font-size: 1.35rem;
}

.evolution-mobile-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    align-items: center;
    padding: 14px;
}

.evolution-mobile-card small {
    grid-column: 1 / -1;
}

.evolution-mobile-card em {
    border-radius: 999px;
    padding: 4px 8px;
    background: #eef4ff;
    color: #0f62fe;
    font-size: .75rem;
    font-style: normal;
    font-weight: 900;
}

.evolution-mobile-card em.down {
    background: #fff1f2;
    color: #be123c;
}

.evolution-mobile-card em.up {
    background: #ecfdf3;
    color: #087443;
}

.evolution-mobile-card em.pending {
    background: #fff8e8;
    color: #9a5b00;
}

.evolution-mobile-timeline article {
    display: grid;
    grid-template-columns: 12px minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
}

.evolution-mobile-timeline article > span {
    width: 10px;
    height: 10px;
    margin-top: 4px;
    border-radius: 50%;
    background: #0f62fe;
}

.evolution-mobile-timeline p {
    margin: 3px 0;
}

.evolution-privacy-card {
    margin-top: 14px;
    background: #101828;
}

.evolution-privacy-card h3,
.evolution-privacy-card p {
    margin: 0;
}

.inline-action {
    display: inline-flex;
    justify-content: center;
    margin-top: 10px;
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    padding: 0 12px;
    background: #0f62fe;
    color: #ffffff;
    font-weight: 900;
}

/* Final calendar card override: must stay last to beat older calendar/mobile rules. */
.app-content .calendar-list {
    gap: 12px;
}

.app-content .calendar-list h3 {
    margin: 22px 4px 8px;
    color: #172033;
    font-size: 16px;
    font-weight: 950;
    text-transform: capitalize;
}

.app-content .calendar-event {
    display: grid;
    grid-template-columns: 56px 54px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 112px;
    padding: 13px 12px;
    border: 1px solid #dfe7f1;
    border-left-width: 0;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .04);
}

.app-content .calendar-event .event-time {
    width: 56px;
    min-height: 36px;
    padding: 0;
    border-radius: 10px;
    background: #f8fafc;
    color: #082f66;
    font-size: 13px;
    font-weight: 950;
}

.app-content .calendar-event .event-kind-icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 999px;
}

.app-content .calendar-event .event-kind-icon svg {
    width: 32px;
    height: 32px;
    fill: none;
    stroke: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.app-content .calendar-event .event-kind-icon img {
    display: block;
    width: 54px;
    height: 54px;
    object-fit: contain;
}

.app-content .calendar-event .event-icon-training .icon-fill {
    fill: #16a34a;
}

.app-content .calendar-event .event-icon-training .icon-cut {
    stroke: #ffffff;
    stroke-width: 3.2;
}

.app-content .calendar-event .event-icon-training .icon-outline {
    fill: none;
    stroke: #15803d;
    stroke-width: 2.8;
}

.app-content .calendar-event .event-icon-match .icon-fill {
    fill: #f97316;
}

.app-content .calendar-event .event-icon-match .icon-cut {
    fill: none;
    stroke: #7c2d12;
    stroke-width: 3.2;
}

.app-content .calendar-event .event-icon-task .icon-fill {
    fill: #fb923c;
}

.app-content .calendar-event .event-icon-task .icon-paper {
    fill: #fff7ed;
}

.app-content .calendar-event .event-icon-task .icon-check,
.app-content .calendar-event .event-icon-task .icon-line {
    fill: none;
    stroke: #7c2d12;
    stroke-width: 3.4;
}

.app-content .calendar-event .event-body {
    min-width: 0;
    gap: 3px;
}

.app-content .calendar-event .event-body strong {
    overflow: hidden;
    display: -webkit-box;
    color: #08122b;
    font-size: 16px;
    line-height: 1.12;
    font-weight: 950;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.app-content .calendar-event .event-body small {
    overflow: hidden;
    display: -webkit-box;
    color: #66758f;
    font-size: 13px;
    line-height: 1.18;
    font-weight: 850;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.app-content .calendar-event .event-body small:nth-of-type(n+3) {
    display: none;
}

.app-content .calendar-event .event-plan-meta {
    gap: 6px;
    margin-top: 8px;
}

.app-content .calendar-event .event-plan-meta em {
    min-height: 28px;
    padding: 5px 8px;
    border-radius: 10px;
    background: #f8fafc;
    color: #475569;
    font-size: 11px;
}

.app-content .calendar-event .event-plan-meta em:nth-child(n+3) {
    display: none;
}

.app-content .calendar-event .event-open-plan {
    align-self: end;
    justify-self: end;
    min-width: 74px;
    padding: 9px 10px;
    border-radius: 11px;
    background: #0b5fff;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

.app-content .calendar-event:not(.training) {
    min-height: 96px;
}

.app-content .calendar-event:not(.training) > em {
    align-self: end;
    justify-self: start;
    grid-column: 1 / 3;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
}

/* Final mobile density pass. This is intentionally after older calendar rules. */
.app-content .calendar-event {
    grid-template-columns: 52px 50px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    min-height: 104px;
}

.app-content .calendar-event .event-status-stack {
    grid-column: 3;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
    margin-top: 8px;
}

.app-content .calendar-event .event-status-stack > em,
.app-content .calendar-event .event-open-plan {
    min-height: 30px;
    padding: 7px 10px;
    font-size: 11px;
}

.app-content .calendar-event .event-body strong {
    font-size: 15px;
    line-height: 1.14;
    -webkit-line-clamp: 2;
}

.app-content .calendar-event .event-body small {
    font-size: 12px;
    line-height: 1.2;
}

.app-content .calendar-event .event-plan-meta {
    margin-top: 7px;
}

.app-content .calendar-event .event-plan-meta em {
    min-height: 26px;
    font-size: 10px;
}

@media (max-width: 390px) {
    .app-content .calendar-event {
        grid-template-columns: 50px 46px minmax(0, 1fr);
        gap: 8px;
        padding: 12px 10px;
    }

    .app-content .calendar-event .event-kind-icon {
        width: 48px;
        height: 48px;
    }

    .app-content .calendar-event .event-kind-icon img {
        width: 48px;
        height: 48px;
    }

    .app-content .calendar-event .event-body strong {
        font-size: 15px;
    }

    .app-content .calendar-event .event-body small {
        font-size: 12px;
    }

    .app-content .calendar-event .event-status-stack {
        grid-column: 3;
        justify-self: start;
        grid-auto-flow: row;
    }
}

/* Mobile mockup fidelity pass 2026-08-23.
   Keep this block last: it normalizes calendar, training and exercise screens to
   the approved mobile mockup after several historical mobile iterations. */
@media (max-width: 779px) {
    .app-content {
        overflow-x: hidden !important;
    }

    .app-content .calendar-page-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 14px !important;
        margin: 0 0 18px !important;
    }

    .app-content .calendar-page-head h2 {
        margin: 0 !important;
        color: #07142d !important;
        font-size: clamp(34px, 10vw, 46px) !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: 0 !important;
    }

    .app-content .calendar-page-head button {
        flex: 0 0 auto !important;
        min-width: 72px !important;
        min-height: 48px !important;
        border: 1px solid #bfdbfe !important;
        border-radius: 22px !important;
        background: #f8fbff !important;
        color: #0b5fff !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .app-content .calendar-view-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        align-items: center !important;
        min-height: 46px !important;
        margin: 0 0 18px !important;
        padding: 3px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 24px !important;
        background: #fff !important;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7) !important;
    }

    .app-content .calendar-view-tabs span {
        display: grid !important;
        place-items: center !important;
        min-height: 38px !important;
        border-radius: 20px !important;
        color: #64748b !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    .app-content .calendar-view-tabs .active {
        background: #0b5fff !important;
        color: #fff !important;
        box-shadow: 0 10px 20px rgba(11, 95, 255, .2) !important;
    }

    .app-content .calendar-head {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        align-items: center !important;
        min-height: 112px !important;
        margin: 0 0 18px !important;
        padding: 18px 12px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 28px !important;
        background: #fff !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .06) !important;
    }

    .app-content .calendar-head button {
        display: grid !important;
        place-items: center !important;
        width: 42px !important;
        height: 42px !important;
        border: 0 !important;
        background: transparent !important;
        color: #073a78 !important;
        font-size: 42px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
    }

    .app-content .calendar-head h2 {
        margin: 0 !important;
        color: #07142d !important;
        font-size: clamp(24px, 7vw, 34px) !important;
        line-height: 1.05 !important;
        font-weight: 950 !important;
        text-align: center !important;
        letter-spacing: 0 !important;
    }

    .app-content .calendar-head p {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 1 !important;
        overflow: hidden !important;
        margin: 6px 0 0 !important;
        color: #64748b !important;
        font-size: 17px !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }

    .app-content .calendar-strip {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 0 18px !important;
        overflow: visible !important;
    }

    .app-content .calendar-strip button {
        display: grid !important;
        place-items: center !important;
        min-width: 0 !important;
        min-height: 74px !important;
        padding: 8px 2px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 20px !important;
        background: #fff !important;
        color: #07142d !important;
        box-shadow: 0 8px 18px rgba(15, 23, 42, .04) !important;
    }

    .app-content .calendar-strip button span {
        color: #64748b !important;
        font-size: 15px !important;
        font-weight: 950 !important;
        text-transform: uppercase !important;
    }

    .app-content .calendar-strip button strong {
        color: #07142d !important;
        font-size: 22px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
    }

    .app-content .calendar-strip button.has-items::after {
        content: "" !important;
        width: 7px !important;
        height: 7px !important;
        margin-top: 4px !important;
        border-radius: 50% !important;
        background: #f7b928 !important;
    }

    .app-content .calendar-strip button.selected,
    .app-content .calendar-strip button.today {
        border-color: #0b5fff !important;
        background: #0b5fff !important;
        color: #fff !important;
    }

    .app-content .calendar-strip button.selected span,
    .app-content .calendar-strip button.selected strong,
    .app-content .calendar-strip button.today span,
    .app-content .calendar-strip button.today strong {
        color: #fff !important;
    }

    .app-content .calendar-filter-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin: 0 0 18px !important;
        overflow-x: auto !important;
        padding-bottom: 2px !important;
        scrollbar-width: none !important;
    }

    .app-content .calendar-filter-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .app-content .calendar-filter-tabs button {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 0 14px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 16px !important;
        background: #fff !important;
        color: #07142d !important;
        font-size: 13px !important;
        font-weight: 900 !important;
    }

    .app-content .calendar-filter-tabs button.active {
        border-color: #0b5fff !important;
        background: #0b5fff !important;
        color: #fff !important;
    }

    .app-content .calendar-mobile-summary {
        display: none !important;
    }

    .app-content .calendar-list {
        display: grid !important;
        gap: 14px !important;
    }

    .app-content .calendar-list h3 {
        margin: 18px 6px 4px !important;
        color: #07142d !important;
        font-size: 24px !important;
        line-height: 1.08 !important;
        font-weight: 950 !important;
        letter-spacing: 0 !important;
    }

    .app-content .calendar-filter-tabs button.active {
        font-size: 12.5px !important;
    }

    .app-content .calendar-event,
    .app-content .calendar-event.training,
    .app-content .calendar-event:not(.training) {
        display: grid !important;
        grid-template-columns: 64px 58px minmax(0, 1fr) !important;
        grid-template-areas:
            "time icon body"
            ". icon actions" !important;
        gap: 10px 12px !important;
        align-items: center !important;
        width: 100% !important;
        min-height: 128px !important;
        padding: 15px 12px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 24px !important;
        background: #fff !important;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .06) !important;
        text-align: left !important;
    }

    .app-content .calendar-event .event-time,
    .app-content .calendar-event:not(.training) .event-time {
        grid-area: time !important;
        display: grid !important;
        place-items: center !important;
        width: 64px !important;
        min-width: 64px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 13px !important;
        background: #f8fbff !important;
        color: #073a78 !important;
        font-size: 15px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
    }

    .app-content .calendar-event .event-kind-icon {
        grid-area: icon !important;
        display: grid !important;
        place-items: center !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        border-radius: 50% !important;
    }

    .app-content .calendar-event.training .event-kind-icon {
        background: #dcfce7 !important;
    }

    .app-content .calendar-event.match .event-kind-icon,
    .app-content .calendar-event.partido .event-kind-icon {
        background: #dbeafe !important;
    }

    .app-content .calendar-event.task .event-kind-icon,
    .app-content .calendar-event.tarea .event-kind-icon {
        background: #ffedd5 !important;
    }

    .app-content .calendar-event .event-kind-icon img,
    .app-content .calendar-event .event-kind-icon svg,
    .app-content .calendar-event .event-kind-icon .iconify {
        width: 36px !important;
        height: 36px !important;
        object-fit: contain !important;
    }

    .app-content .calendar-event .event-body {
        grid-area: body !important;
        display: grid !important;
        gap: 3px !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .app-content .calendar-event .event-body strong {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        color: #07142d !important;
        font-size: 17px !important;
        line-height: 1.14 !important;
        font-weight: 950 !important;
        letter-spacing: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .calendar-event .event-body small {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        color: #64748b !important;
        font-size: 13px !important;
        line-height: 1.18 !important;
        font-weight: 800 !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .calendar-event .event-plan-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 7px !important;
    }

    .app-content .calendar-event .event-plan-meta em {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        min-height: 26px !important;
        padding: 5px 9px !important;
        border-radius: 12px !important;
        background: #f8fbff !important;
        color: #64748b !important;
        font-size: 11px !important;
        font-style: normal !important;
        font-weight: 900 !important;
    }

    .app-content .calendar-event .event-status-stack,
    .app-content .calendar-event:not(.training) .event-status-stack,
    .app-content .calendar-event.training .event-status-stack {
        grid-area: actions !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
    }

    .app-content .calendar-event .event-status-stack > em {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 32px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #fff7ed !important;
        color: #9a3412 !important;
        font-size: 12px !important;
        font-style: normal !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-event .event-open-plan {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 108px !important;
        min-height: 38px !important;
        padding: 0 14px !important;
        border-radius: 15px !important;
        background: #0b5fff !important;
        color: #fff !important;
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-detail.training-detail {
        display: grid !important;
        gap: 16px !important;
        padding: 16px 14px calc(100px + env(safe-area-inset-bottom)) !important;
        background: #fff !important;
    }

    .app-content .training-detail-hero {
        display: grid !important;
        grid-template-columns: 58px minmax(0, 1fr) !important;
        gap: 14px !important;
        align-items: center !important;
    }

    .app-content .training-detail-icon {
        display: grid !important;
        place-items: center !important;
        width: 58px !important;
        height: 58px !important;
        border-radius: 50% !important;
        background: #dcfce7 !important;
    }

    .app-content .training-detail-icon img,
    .app-content .training-detail-icon svg {
        width: 36px !important;
        height: 36px !important;
    }

    .app-content .training-detail-hero h2 {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        margin: 0 !important;
        color: #07142d !important;
        font-size: 24px !important;
        line-height: 1.05 !important;
        font-weight: 950 !important;
        letter-spacing: 0 !important;
    }

    .app-content .training-detail-hero p {
        margin: 5px 0 0 !important;
        color: #334155 !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
    }

    .app-content .mobile-training-plan-card {
        display: grid !important;
        gap: 14px !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .app-content .mobile-training-plan-head {
        display: grid !important;
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
        min-height: 78px !important;
        padding: 14px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 18px !important;
        background: #fff !important;
    }

    .app-content .mobile-training-plan-icon {
        display: grid !important;
        place-items: center !important;
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
        color: #16a34a !important;
    }

    .app-content .mobile-training-plan-head strong {
        display: block !important;
        color: #07142d !important;
        font-size: 17px !important;
        line-height: 1.1 !important;
        font-weight: 950 !important;
    }

    .app-content .mobile-training-plan-head span:not(.mobile-training-plan-icon) {
        display: block !important;
        margin-top: 5px !important;
        color: #334155 !important;
        font-size: 14px !important;
        font-weight: 800 !important;
    }

    .app-content .mobile-training-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        border-bottom: 1px solid #dfe7f2 !important;
    }

    .app-content .mobile-training-tabs span {
        display: grid !important;
        place-items: center !important;
        min-height: 42px !important;
        color: #334155 !important;
        font-size: 14px !important;
        font-weight: 850 !important;
    }

    .app-content .mobile-training-tabs .active {
        color: #0b5fff !important;
        border-bottom: 2px solid #0b5fff !important;
    }

    .app-content .mobile-training-block-title {
        margin: 2px 6px 0 !important;
        color: #334155 !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        font-weight: 850 !important;
    }

    .app-content .mobile-training-block-list {
        display: grid !important;
        gap: 14px !important;
    }

    .app-content .mobile-training-block {
        display: grid !important;
        gap: 12px !important;
        padding: 14px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 20px !important;
        background: #fff !important;
        box-shadow: 0 16px 34px rgba(15, 23, 42, .06) !important;
    }

    .app-content .mobile-training-block > header {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .app-content .mobile-training-block > header > span {
        display: grid !important;
        place-items: center !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 50% !important;
        background: #16a34a !important;
        color: #fff !important;
        font-size: 16px !important;
        font-weight: 950 !important;
    }

    .app-content .mobile-training-block > header strong {
        display: block !important;
        color: #07142d !important;
        font-size: 17px !important;
        line-height: 1.15 !important;
        font-weight: 950 !important;
    }

    .app-content .mobile-training-block > header small {
        display: block !important;
        margin-top: 3px !important;
        color: #64748b !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
    }

    .app-content .mobile-training-exercise-card {
        display: grid !important;
        gap: 8px !important;
        padding: 0 !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 14px !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    .app-content .mobile-training-exercise-open {
        display: grid !important;
        grid-template-columns: 92px minmax(0, 1fr) 18px !important;
        gap: 12px !important;
        align-items: center !important;
        width: 100% !important;
        padding: 10px !important;
        border: 0 !important;
        background: transparent !important;
        text-align: left !important;
    }

    .app-content .mobile-court-thumb {
        display: block !important;
        width: 92px !important;
        height: 64px !important;
        border-radius: 10px !important;
        overflow: hidden !important;
    }

    .app-content .mobile-training-exercise-open strong {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        color: #07142d !important;
        font-size: 15px !important;
        line-height: 1.12 !important;
        font-weight: 950 !important;
    }

    .app-content .mobile-training-exercise-open small {
        display: block !important;
        margin-top: 6px !important;
        color: #475569 !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
    }

    .app-content .intensity-pill {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 26px !important;
        margin-top: 7px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        font-size: 11px !important;
        font-style: normal !important;
        font-weight: 900 !important;
    }

    .app-content .intensity-pill.low {
        background: #dcfce7 !important;
        color: #15803d !important;
    }

    .app-content .intensity-pill.medium {
        background: #fff7ed !important;
        color: #ea580c !important;
    }

    .app-content .intensity-pill.high {
        background: #fee2e2 !important;
        color: #dc2626 !important;
    }

    .app-content .mobile-training-exercise-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        min-height: 42px !important;
        padding: 0 12px 10px !important;
        border-top: 1px solid #eff6ff !important;
    }

    .app-content .mobile-training-exercise-actions a,
    .app-content .mobile-training-exercise-actions span {
        color: #0b5fff !important;
        font-size: 13px !important;
        font-weight: 950 !important;
        text-decoration: none !important;
    }

    .app-content .mobile-exercise-detail {
        display: grid !important;
        gap: 18px !important;
        padding: 0 16px calc(96px + env(safe-area-inset-bottom)) !important;
        background: #fff !important;
    }

    .app-content .mobile-exercise-detail > h2 {
        margin: 4px 0 0 !important;
        color: #07142d !important;
        font-size: 27px !important;
        line-height: 1.08 !important;
        font-weight: 950 !important;
        letter-spacing: 0 !important;
    }

    .app-content .exercise-objective-card {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) !important;
        gap: 12px !important;
        align-items: start !important;
        min-height: 92px !important;
        padding: 16px !important;
        border: 1px solid #bfdbfe !important;
        border-radius: 16px !important;
        background: #f8fbff !important;
    }

    .app-content .exercise-objective-card span {
        display: grid !important;
        place-items: center !important;
        color: #0b5fff !important;
    }

    .app-content .exercise-objective-card p {
        margin: 0 !important;
        color: #073a78 !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
        font-weight: 750 !important;
    }

    .app-content .exercise-kpi-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 16px !important;
        background: #fff !important;
        overflow: hidden !important;
    }

    .app-content .exercise-kpi-grid article {
        display: grid !important;
        place-items: center !important;
        gap: 4px !important;
        min-height: 74px !important;
        padding: 8px 4px !important;
        border-right: 1px solid #dfe7f2 !important;
        color: #07142d !important;
        text-align: center !important;
    }

    .app-content .exercise-kpi-grid article:last-child {
        border-right: 0 !important;
    }

    .app-content .exercise-kpi-grid strong {
        font-size: 13px !important;
        line-height: 1.05 !important;
        font-weight: 950 !important;
    }

    .app-content .exercise-kpi-grid span {
        color: #64748b !important;
        font-size: 11px !important;
        font-weight: 800 !important;
    }

    .app-content .exercise-detail-controls {
        display: grid !important;
        gap: 16px !important;
        margin: 0 !important;
    }

    .app-content .exercise-detail-controls .mobile-training-check {
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 52px !important;
        padding: 0 14px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 14px !important;
        background: #fff !important;
        color: #07142d !important;
        font-size: 15px !important;
        font-weight: 900 !important;
    }

    .app-content .exercise-rating-row {
        display: grid !important;
        gap: 12px !important;
    }

    .app-content .exercise-rating-row header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin: 0 !important;
    }

    .app-content .exercise-rating-row strong,
    .app-content .exercise-rating-row output {
        color: #07142d !important;
        font-size: 16px !important;
        font-weight: 950 !important;
    }

    .app-content .exercise-rating-options {
        display: grid !important;
        grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }

    .app-content .exercise-rating-options button {
        display: grid !important;
        place-items: center !important;
        aspect-ratio: 1 !important;
        min-width: 0 !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 50% !important;
        background: #fff !important;
        color: #334155 !important;
        font-size: 12px !important;
        font-weight: 850 !important;
    }

    .app-content .exercise-rating-options button.active {
        border-color: #0b5fff !important;
        background: #0b5fff !important;
        color: #fff !important;
    }

    .app-content .exercise-detail-controls label:not(.mobile-training-check) {
        display: grid !important;
        gap: 10px !important;
        color: #07142d !important;
        font-size: 16px !important;
        font-weight: 950 !important;
    }

    .app-content .exercise-detail-controls textarea {
        min-height: 180px !important;
        padding: 16px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 16px !important;
        background: #fff !important;
        color: #07142d !important;
        font-size: 15px !important;
        line-height: 1.45 !important;
        resize: vertical !important;
    }

    .app-content .exercise-detail-controls button[data-mobile-exercise-save] {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: 100% !important;
        min-height: 52px !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: #0b5fff !important;
        color: #fff !important;
        font-size: 17px !important;
        font-weight: 950 !important;
        box-shadow: 0 14px 28px rgba(11, 95, 255, .22) !important;
    }
}

@media (max-width: 390px) {
    .app-content .calendar-event,
    .app-content .calendar-event.training,
    .app-content .calendar-event:not(.training) {
        grid-template-columns: 58px 52px minmax(0, 1fr) !important;
        min-height: 122px !important;
        padding: 13px 10px !important;
        gap: 9px 10px !important;
    }

    .app-content .calendar-event .event-time,
    .app-content .calendar-event:not(.training) .event-time {
        width: 58px !important;
        min-width: 58px !important;
        font-size: 13px !important;
    }

    .app-content .calendar-event .event-kind-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }

    .app-content .calendar-event .event-body strong {
        font-size: 15px !important;
    }

    .app-content .calendar-event .event-body small {
        font-size: 12px !important;
    }

    .app-content .calendar-event .event-open-plan {
        min-width: 96px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }

    .app-content .calendar-strip {
        gap: 7px !important;
    }

    .app-content .calendar-strip button {
        min-height: 68px !important;
        border-radius: 17px !important;
    }

    .app-content .mobile-training-exercise-open {
        grid-template-columns: 82px minmax(0, 1fr) 16px !important;
        gap: 10px !important;
        padding: 9px !important;
    }

    .app-content .mobile-court-thumb {
        width: 82px !important;
        height: 58px !important;
    }

    .app-content .exercise-rating-options {
        gap: 4px !important;
    }

    .app-content .exercise-rating-options button {
        font-size: 11px !important;
    }
}

/* Mobile operational polish. Keep after calendar overrides. */
.app-content .mobile-pending-center {
    display: grid;
    gap: 12px;
    margin: 12px 0 18px;
    padding: 14px;
    border: 1px solid #dfe7f1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .06);
}

.app-content .mobile-pending-center.is-clear {
    border-color: #bbf7d0;
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
}

.app-content .mobile-pending-head {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-content .mobile-pending-head > span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 14px;
    background: #eff6ff;
    color: #0b5fff;
}

.app-content .mobile-pending-head svg {
    width: 20px;
    height: 20px;
}

.app-content .mobile-pending-head strong {
    display: block;
    color: #08122b;
    font-size: 16px;
    font-weight: 950;
}

.app-content .mobile-pending-head small {
    display: block;
    margin-top: 2px;
    color: #66758f;
    font-size: 12px;
    font-weight: 800;
}

.app-content .mobile-pending-grid {
    display: grid;
    gap: 9px;
}

.app-content .mobile-pending-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    min-height: 66px;
    padding: 10px;
    border: 1px solid #e5ebf4;
    border-radius: 16px;
    background: #f8fafc;
    text-align: left;
}

.app-content .mobile-pending-card.finance {
    border-color: #bbf7d0;
    background: #f0fdf4;
}

.app-content .mobile-pending-card.partido,
.app-content .mobile-pending-card.match {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.app-content .mobile-pending-card.tarea,
.app-content .mobile-pending-card.notice {
    border-color: #fed7aa;
    background: #fff7ed;
}

.app-content .mobile-pending-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
}

.app-content .mobile-pending-icon img {
    width: 44px;
    height: 44px;
    object-fit: contain;
}

.app-content .mobile-pending-card strong {
    overflow: hidden;
    display: -webkit-box;
    color: #08122b;
    font-size: 13px;
    line-height: 1.15;
    font-weight: 950;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.app-content .mobile-pending-card small {
    overflow: hidden;
    display: block;
    margin-top: 3px;
    color: #66758f;
    font-size: 11px;
    line-height: 1.2;
    font-weight: 800;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.app-content .mobile-pending-card em {
    padding: 7px 9px;
    border-radius: 999px;
    background: #ffffff;
    color: #0b5fff;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

.app-content .mobile-news-entry {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 18px;
    padding: 14px;
    border: 1px solid #dfe7f1;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .055);
}

.app-content .mobile-news-entry strong,
.app-content .mobile-news-entry small {
    display: block;
}

.app-content .mobile-news-entry strong {
    color: #08122b;
    font-size: 15px;
    line-height: 1.15;
    font-weight: 950;
}

.app-content .mobile-news-entry small {
    margin-top: 3px;
    color: #66758f;
    font-size: 12px;
    font-weight: 800;
}

.app-content .mobile-news-entry button {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 8px 12px;
    border: 0;
    border-radius: 14px;
    background: #0b5fff;
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
}

.app-content .mobile-action-rail button.is-primary {
    border-color: #bfdbfe;
    background: #eff6ff;
}

.app-content .mobile-action-rail button.is-primary svg {
    color: #0b5fff;
}

.app-content .calendar-event .event-status-stack {
    display: grid;
    gap: 7px;
    align-self: stretch;
    justify-items: end;
    align-content: end;
}

.app-content .calendar-event .event-status-stack > em {
    padding: 6px 10px;
    border-radius: 999px;
    background: #fff7ed;
    color: #9a3412;
    font-size: 11px;
    font-style: normal;
    font-weight: 950;
    white-space: nowrap;
}

.app-content .calendar-event:not(.training) .event-status-stack {
    grid-column: 4;
}

.app-content .calendar-event:not(.training) > em {
    display: none;
}

.app-content .calendar-mobile-summary {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0 4px;
}

.app-content .calendar-mobile-summary article {
    min-height: 62px;
    padding: 10px;
    border: 1px solid #dfe7f1;
    border-radius: 16px;
    background: #ffffff;
}

.app-content .calendar-mobile-summary article.wide {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.app-content .calendar-mobile-summary strong {
    display: block;
    color: #08122b;
    font-size: 18px;
    font-weight: 950;
}

.app-content .calendar-mobile-summary span {
    display: block;
    overflow: hidden;
    margin-top: 3px;
    color: #66758f;
    font-size: 12px;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-content .mobile-training-plan-card {
    overflow: hidden;
    border-radius: 18px;
}

.app-content .mobile-training-plan-head {
    border-bottom: 1px solid #e5ebf4;
    padding-bottom: 12px;
}

.app-content .mobile-training-block {
    border-radius: 18px;
    background: #ffffff;
}

.app-content .mobile-training-exercise-card {
    border-radius: 16px;
}

.app-content .mobile-training-exercise-open {
    grid-template-columns: 88px minmax(0, 1fr) 20px;
}

.app-content .mobile-training-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.app-content .mobile-training-summary-grid article {
    min-height: 70px;
    padding: 10px;
    border: 1px solid #e5ebf4;
    border-radius: 14px;
    background: #ffffff;
}

.app-content .mobile-training-summary-grid article.wide {
    grid-column: 1 / -1;
}

.app-content .mobile-training-summary-grid svg {
    width: 18px;
    height: 18px;
    color: #0b5fff;
}

.app-content .mobile-training-summary-grid strong,
.app-content .mobile-training-summary-grid span {
    display: block;
}

.app-content .mobile-training-summary-grid strong {
    margin-top: 5px;
    color: #08122b;
    font-size: 14px;
    font-weight: 950;
}

.app-content .mobile-training-summary-grid span {
    margin-top: 2px;
    color: #66758f;
    font-size: 11px;
    font-weight: 800;
}

.app-content .mobile-court-thumb {
    width: 88px;
    height: 54px;
    border-radius: 12px;
}

@media (max-width: 390px) {
    .app-content .mobile-pending-card {
        grid-template-columns: 40px minmax(0, 1fr);
    }

    .app-content .mobile-pending-card em {
        grid-column: 2;
        justify-self: start;
        padding: 5px 8px;
    }

    .app-content .calendar-event .event-status-stack {
        grid-column: 3 / 5;
        justify-self: start;
        grid-auto-flow: column;
        align-items: center;
    }
}

.app-content .settings-context-card {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    margin-bottom: 12px;
    padding: 14px;
    border: 1px solid #dfe7f1;
    border-radius: 18px;
    background: linear-gradient(135deg, #082f66, #0f4f73);
    color: #ffffff;
}

.app-content .settings-context-card .brand-logo,
.app-content .settings-context-card .brand-avatar {
    width: 50px;
    height: 50px;
    border-radius: 16px;
}

.app-content .settings-context-card strong,
.app-content .settings-context-card small {
    overflow: hidden;
    display: block;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-content .settings-context-card strong {
    font-size: 16px;
    font-weight: 950;
}

.app-content .settings-context-card small {
    margin-top: 3px;
    color: rgba(255, 255, 255, .76);
    font-weight: 850;
}

.app-content .settings-card label small {
    margin-top: 4px;
    color: #66758f;
    font-size: 11px;
    font-weight: 750;
}

.app-content .settings-context-overview {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 12px 0;
}

.app-content .settings-context-overview article {
    min-height: 58px;
    padding: 9px;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    background: #ffffff;
}

.app-content .settings-context-overview strong,
.app-content .settings-context-overview span {
    display: block;
}

.app-content .settings-context-overview strong {
    color: #08122b;
    font-size: 18px;
    font-weight: 950;
}

.app-content .settings-context-overview span {
    color: #66758f;
    font-size: 11px;
    font-weight: 850;
}

.app-content .mobile-match360-card {
    display: grid;
    gap: 12px;
    padding: 14px;
    border: 1px solid #bfdbfe;
    border-radius: 20px;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
}

.app-content .mobile-match360-card header {
    display: flex;
    align-items: center;
    gap: 10px;
}

.app-content .mobile-match360-card header > span,
.app-content .mobile-match360-card header img {
    width: 48px;
    height: 48px;
}

.app-content .mobile-match360-card header strong,
.app-content .mobile-match360-grid strong {
    display: block;
    color: #08122b;
    font-weight: 950;
}

.app-content .mobile-match360-card header small,
.app-content .mobile-match360-grid small {
    color: #66758f;
    font-size: 12px;
    font-weight: 800;
}

.app-content .mobile-match360-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.app-content .mobile-match360-grid article {
    min-height: 66px;
    padding: 10px;
    border: 1px solid #dbeafe;
    border-radius: 14px;
    background: #ffffff;
}

.app-content .mobile-match360-grid strong {
    overflow: hidden;
    margin-top: 4px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-content .mobile-match360-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.app-content .mobile-match360-actions span,
.app-content .mobile-match360-actions a,
.app-content .mobile-match360-actions button {
    min-height: 34px;
    padding: 8px 10px;
    border: 0;
    border-radius: 999px;
    background: #0b5fff;
    color: #ffffff;
    font-size: 12px;
    font-weight: 950;
    text-decoration: none;
}

.app-content .mobile-match360-actions span {
    background: #ffffff;
    color: #0b5fff;
}

.app-content .mobile-match360-timeline {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-content .mobile-match360-timeline li {
    display: grid;
    grid-template-columns: 10px minmax(0, 1fr) auto;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid #dbeafe;
    border-radius: 12px;
    background: #ffffff;
}

.app-content .mobile-match360-timeline li > span {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #0b5fff;
}

.app-content .mobile-match360-timeline strong {
    overflow: hidden;
    color: #08122b;
    font-size: 12px;
    font-weight: 950;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-content .mobile-match360-timeline small {
    color: #66758f;
    font-size: 11px;
    font-weight: 850;
    text-align: right;
}

.app-content .chat-mobile-summary {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #dfe7f1;
    border-radius: 18px;
    background: linear-gradient(135deg, #f8fafc, #ffffff);
}

.app-content .chat-mobile-summary span,
.app-content .chat-mobile-summary small {
    display: block;
    color: #66758f;
    font-size: 12px;
    font-weight: 800;
}

.app-content .chat-mobile-summary strong {
    display: block;
    margin: 3px 0;
    color: #08122b;
    font-size: 16px;
    font-weight: 950;
}

.app-content .chat-mobile-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding-bottom: 2px;
}

.app-content .chat-mobile-chips button {
    flex: 0 0 auto;
    max-width: 190px;
    min-height: 34px;
    padding: 8px 10px;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    background: #eff6ff;
    color: #0b5fff;
    font-size: 12px;
    font-weight: 950;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-content .chat-floating-create {
    position: fixed;
    right: max(16px, calc((100vw - 520px) / 2 + 16px));
    bottom: calc(74px + env(safe-area-inset-bottom));
    z-index: 28;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 46px;
    padding: 0 14px;
    border: 0;
    border-radius: 999px;
    background: #0b5fff;
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(11, 95, 255, .32);
    font-size: 13px;
    font-weight: 950;
}

.app-content .chat-floating-create svg {
    width: 18px;
    height: 18px;
}

@media (min-width: 780px) {
    .app-content .chat-floating-create {
        display: none;
    }
}

@media (min-width: 780px) {
    .app-content .chat-layout {
        align-items: stretch;
        grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
        max-height: calc(100dvh - 230px);
        overflow: hidden;
    }

    .app-content .chat-list {
        max-height: calc(100dvh - 230px);
        overflow: auto;
        padding-right: 4px;
    }

    .app-content .chat-panel {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        height: clamp(360px, calc(100dvh - 230px), 620px);
        min-height: min(420px, calc(100dvh - 230px));
        max-height: calc(100dvh - 230px);
    }

    .app-content .chat-title {
        min-height: 68px;
        padding: 14px 16px;
    }

    .app-content .chat-messages {
        min-height: 0;
        max-height: none;
        overflow: auto;
        align-content: start;
    }

    .app-content .chat-form {
        position: relative;
        z-index: 2;
        flex: 0 0 auto;
    }
}

/* Final mobile app proposal implementation. Keep last: it normalizes the mobile shell
   after the historical responsive layers above. */
@media (max-width: 779px) {
    body {
        background: #f3f7fc;
        color: #08122b;
        font-family: Inter, Arial, Helvetica, sans-serif;
    }

    .app-header {
        min-height: 116px;
        padding: max(18px, env(safe-area-inset-top)) 20px 16px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        background: #082f66;
        box-shadow: none;
    }

    .brand-block {
        min-height: 58px;
        gap: 12px;
        min-width: 0;
    }

    .brand-block .brand-logo,
    .brand-block .brand-avatar,
    .brand-block img {
        width: 48px;
        height: 48px;
        border-radius: 16px;
        background: #ffffff;
    }

    .brand-block strong {
        max-width: min(260px, calc(100vw - 150px));
        color: #ffffff;
        font-size: 17px;
        line-height: 1.08;
        letter-spacing: 0;
        white-space: normal;
    }

    .brand-block small {
        margin-top: 4px;
        color: #c9d8ee;
        font-size: 13px;
        line-height: 1.1;
        text-transform: uppercase;
    }

    .notification-button {
        width: 48px;
        min-height: 48px;
        border: 0;
        border-radius: 16px;
        background: #16a34a;
        color: #ffffff;
    }

    .notification-button svg {
        width: 25px;
        height: 25px;
    }

    .notification-button span {
        top: -7px;
        right: -7px;
        min-width: 25px;
        height: 23px;
        line-height: 23px;
        font-size: 12px;
        font-weight: 950;
    }

    .app-content {
        padding: 24px 20px 98px;
        background: #f3f7fc;
    }

    .mobile-greeting {
        margin: 0 0 18px;
    }

    .mobile-greeting h2 {
        margin: 0;
        color: #08122b;
        font-size: clamp(30px, 8.6vw, 40px);
        line-height: 1.02;
        font-weight: 950;
        letter-spacing: 0;
    }

    .mobile-greeting p {
        margin-top: 8px;
        color: #66758f;
        font-size: 17px;
        font-weight: 850;
        text-transform: capitalize;
    }

    .app-content .mobile-action-rail {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
        overflow: hidden;
        margin: 18px 0;
        border: 1px solid #dfe7f1;
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .app-content .mobile-action-rail button {
        min-width: 0;
        min-height: 94px;
        padding: 11px 5px;
        border: 0;
        border-right: 1px solid #e5ebf4;
        border-radius: 0;
        background: #ffffff;
        color: #08122b;
        box-shadow: none;
    }

    .app-content .mobile-action-rail button:last-child {
        border-right: 0;
    }

    .app-content .mobile-action-rail button.is-ok {
        background: #f0fdf4;
    }

    .app-content .mobile-action-rail button.is-primary {
        background: #eff6ff;
        color: #0b5fff;
    }

    .app-content .mobile-action-rail button.is-warning {
        background: #fff7ed;
        color: #c2410c;
    }

    .app-content .mobile-action-rail svg {
        width: 28px;
        height: 28px;
        margin: 0 auto 7px;
    }

    .app-content .mobile-action-rail span {
        display: block;
        overflow: hidden;
        color: inherit;
        font-size: 13px;
        line-height: 1.05;
        font-weight: 950;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .app-content .mobile-action-rail small {
        display: block;
        overflow: hidden;
        margin-top: 4px;
        color: #66758f;
        font-size: 10px;
        line-height: 1.1;
        font-weight: 850;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .today-panel.compact-next {
        margin: 18px 0;
        padding: 14px;
        border: 1px solid #bfdbfe;
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .today-panel-head h2 {
        font-size: 18px;
        line-height: 1.12;
    }

    .today-panel-head span,
    .mobile-section-head span {
        margin-bottom: 4px;
        color: #66758f;
        font-size: 11px;
        text-transform: uppercase;
    }

    .today-panel-head button,
    .mobile-section-head button {
        min-height: 38px;
        padding: 8px 12px;
        border: 1px solid #bfdbfe;
        border-radius: 14px;
        background: #eff6ff;
        color: #0b5fff;
        font-size: 13px;
    }

    .today-next-card,
    .today-timeline-item {
        grid-template-columns: 58px minmax(0, 1fr) auto;
        min-height: 78px;
        padding: 12px;
        border-radius: 18px;
        background: #f8fafc;
        box-shadow: none;
    }

    .today-next-card strong,
    .today-timeline-item strong {
        overflow: hidden;
        color: #08122b;
        font-size: 15px;
        line-height: 1.12;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .today-next-card small,
    .today-timeline-item small {
        color: #66758f;
        font-size: 12px;
        font-weight: 800;
    }

    .mobile-section-head {
        margin: 0 0 16px;
    }

    .mobile-section-head h2 {
        color: #08122b;
        font-size: clamp(30px, 8.8vw, 40px);
        line-height: 1;
        letter-spacing: 0;
    }

    .calendar-filter-tabs {
        display: flex;
        gap: 8px;
        overflow-x: auto;
        margin: 0 0 16px;
        padding-bottom: 2px;
    }

    .calendar-filter-tabs button {
        flex: 0 0 auto;
        min-height: 40px;
        padding: 0 16px;
        border: 1px solid #dfe7f1;
        border-radius: 999px;
        background: #ffffff;
        color: #66758f;
        font-size: 14px;
        font-weight: 950;
        white-space: nowrap;
    }

    .calendar-filter-tabs button.active {
        border-color: #0b5fff;
        background: #0b5fff;
        color: #ffffff;
    }

    .calendar-head {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        margin: 0 0 14px;
        padding: 18px 12px;
        border: 1px solid #dfe7f1;
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .calendar-head h2 {
        color: #08122b;
        font-size: 25px;
        line-height: 1.05;
        font-weight: 950;
    }

    .calendar-head p {
        color: #66758f;
        font-size: 14px;
        font-weight: 900;
    }

    .calendar-head button {
        width: 40px;
        height: 40px;
        color: #082f66;
        font-size: 28px;
        line-height: 1;
    }

    .calendar-strip {
        display: grid;
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: 8px;
        overflow: visible;
        margin-bottom: 18px;
    }

    .calendar-strip button {
        min-width: 0;
        min-height: 62px;
        border-radius: 16px;
        background: #ffffff;
    }

    .calendar-strip button.selected,
    .calendar-strip button.today.selected {
        background: #0b5fff;
        color: #ffffff;
    }

    .app-content .calendar-mobile-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        margin: 10px 0 18px;
    }

    .app-content .calendar-mobile-summary article {
        border-radius: 16px;
        background: #ffffff;
    }

    .app-content .calendar-list h3 {
        margin: 24px 4px 12px;
        color: #172033;
        font-size: 18px;
        font-weight: 950;
    }

    .app-content .calendar-event {
        grid-template-columns: 58px 56px minmax(0, 1fr);
        min-height: 116px;
        gap: 12px;
        padding: 13px;
        border: 1px solid #dfe7f1;
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .app-content .calendar-event .event-time {
        width: 58px;
        min-height: 40px;
        border-radius: 12px;
        background: #f8fafc;
        color: #082f66;
    }

    .app-content .calendar-event .event-kind-icon,
    .app-content .calendar-event .event-kind-icon img {
        width: 56px;
        height: 56px;
    }

    .app-content .calendar-event .event-body strong {
        font-size: 17px;
        line-height: 1.12;
    }

    .app-content .calendar-event .event-body small {
        font-size: 13px;
    }

    .app-content .calendar-event .event-status-stack {
        grid-column: 2 / 4;
        justify-self: start;
        grid-auto-flow: column;
        gap: 8px;
    }

    .app-content .calendar-event .event-open-plan {
        min-width: 82px;
        padding: 9px 11px;
        border-radius: 13px;
        font-size: 12px;
    }

    .calendar-subpage-head,
    .mobile-subpage-header {
        position: sticky;
        top: 0;
        z-index: 2;
        display: grid;
        grid-template-columns: 42px minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        margin: -24px -20px 18px;
        padding: 14px 18px;
        background: #082f66;
        color: #ffffff;
    }

    .mobile-subpage-header button,
    .mobile-subpage-header a {
        min-height: 38px;
        padding: 8px 12px;
        border-radius: 12px;
        background: rgba(255,255,255,.12);
        color: #ffffff;
        text-decoration: none;
    }

    .mobile-subpage-header strong {
        overflow: hidden;
        text-align: center;
        font-size: 18px;
        font-weight: 950;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calendar-detail {
        border-radius: 22px;
        background: transparent;
        box-shadow: none;
        padding: 0;
    }

    .calendar-detail > h2 {
        color: #08122b;
        font-size: 27px;
        line-height: 1.1;
        font-weight: 950;
    }

    .mobile-training-plan-card,
    .app-content .mobile-match360-card {
        border-radius: 22px;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .app-content .mobile-training-plan-head {
        align-items: center;
    }

    .app-content .mobile-training-plan-head h3 {
        font-size: 16px;
    }

    .app-content .mobile-training-tabs {
        grid-template-columns: repeat(3, 1fr);
        margin: 14px 0;
    }

    .app-content .mobile-training-tabs span {
        min-height: 38px;
        font-size: 13px;
    }

    .app-content .mobile-training-block {
        padding: 14px;
        border-radius: 20px;
    }

    .app-content .mobile-training-exercise-open {
        grid-template-columns: 90px minmax(0, 1fr) 18px;
    }

    .app-content .mobile-training-exercise-open strong {
        font-size: 15px;
    }

    .app-content .mobile-court-thumb {
        width: 90px;
        height: 58px;
        border-radius: 14px;
    }

    .app-content .profile-head {
        margin-bottom: 16px;
    }

    .profile-card {
        grid-template-columns: 62px minmax(0, 1fr);
        gap: 13px;
        padding: 15px;
        border-radius: 22px;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .profile-card .avatar,
    .profile-card .avatar.photo,
    .profile-card .avatar.photo img {
        width: 62px;
        height: 62px;
        border-radius: 50%;
    }

    .profile-card h3 {
        color: #08122b;
        font-size: 19px;
        font-weight: 950;
    }

    .profile-card p {
        color: #66758f;
        font-size: 13px;
        font-weight: 850;
    }

    .profile-context-card {
        margin-top: 14px;
        padding: 15px;
        border: 1px solid #dfe7f1;
        border-radius: 20px;
        background: #ffffff;
    }

    .profile-context-card strong {
        display: block;
        color: #08122b;
        font-size: 16px;
        line-height: 1.2;
    }

    .profile-menu {
        border-radius: 20px;
        background: #ffffff;
        box-shadow: 0 10px 24px rgba(15, 23, 42, .05);
    }

    .profile-row {
        min-height: 70px;
        padding: 13px 14px;
    }

    .profile-row svg {
        width: 24px;
        height: 24px;
        color: #082f66;
    }

    .profile-row strong {
        color: #08122b;
        font-size: 15px;
        font-weight: 950;
    }

    .profile-row small {
        margin-top: 2px;
        color: #66758f;
        font-size: 12px;
        font-weight: 800;
    }

    .app-nav {
        height: 78px;
        padding: 8px 10px max(10px, env(safe-area-inset-bottom));
        border-top: 1px solid #dfe7f1;
        background: rgba(255, 255, 255, .96);
        box-shadow: 0 -10px 26px rgba(15, 23, 42, .06);
    }

    .app-nav button {
        min-height: 58px;
        border-radius: 18px;
        color: #66758f;
        font-size: 11px;
    }

    .app-nav button.active {
        background: #e8f1ff;
        color: #0b5fff;
    }

    .app-nav svg {
        width: 24px;
        height: 24px;
    }

    .app-content .news-preview,
    .app-content .news-list {
        gap: 10px;
    }

    .app-content .news-card {
        min-height: 0;
        border-radius: 18px;
        background: #ffffff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, .045);
    }

    .app-content .news-card.unread {
        box-shadow: inset 4px 0 0 #082f66, 0 8px 20px rgba(15, 23, 42, .045);
    }

    .app-content .news-card button {
        display: grid;
        grid-template-columns: 120px minmax(0, 1fr);
        gap: 12px;
        align-items: start;
        min-height: 104px;
        padding: 12px 14px;
        text-align: left;
    }

    .app-content .news-card span,
    .app-content .news-card small,
    .app-content .news-card h3,
    .app-content .news-card p,
    .app-content .calendar-event .event-body strong,
    .app-content .calendar-event .event-body small {
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
    }

    .app-content .news-card span,
    .app-content .news-card small {
        -webkit-line-clamp: 2;
        color: #66758f;
        font-size: 11px;
        line-height: 1.18;
        font-weight: 850;
    }

    .app-content .news-card h3 {
        -webkit-line-clamp: 2;
        margin: 0;
        color: #08122b;
        font-size: 15px;
        line-height: 1.16;
        font-weight: 950;
    }

    .app-content .news-card p {
        -webkit-line-clamp: 2;
        margin: 5px 0 0;
        color: #66758f;
        font-size: 12px;
        line-height: 1.25;
        font-weight: 800;
    }

    .app-content .calendar-event .event-body strong {
        -webkit-line-clamp: 2;
    }

    .app-content .calendar-event .event-body small {
        -webkit-line-clamp: 1;
    }

    .app-content .calendar-list .empty-panel {
        padding: 18px;
        border-radius: 20px;
        color: #66758f;
        font-size: 15px;
        line-height: 1.35;
    }

    .app-content .calendar-mobile-summary article.wide {
        display: none;
    }

    /* Mobile QA hardening: keep the header in normal flow and give calendar cards
       enough text width on real phones with long club/team names. */
    .app-header {
        position: relative;
        top: auto;
        z-index: 1;
        min-height: 108px;
        padding: max(16px, env(safe-area-inset-top)) 20px 15px;
    }

    .app-content .calendar-event,
    .app-content .calendar-event:not(.training) {
        grid-template-columns: 56px 56px minmax(0, 1fr);
        grid-template-rows: auto auto;
        align-items: center;
        min-height: 126px;
        gap: 10px 12px;
        padding: 14px;
    }

    .app-content .calendar-event .event-time {
        grid-column: 1;
        grid-row: 1;
    }

    .app-content .calendar-event .event-kind-icon {
        grid-column: 2;
        grid-row: 1;
    }

    .app-content .calendar-event .event-body {
        grid-column: 3;
        grid-row: 1;
        min-width: 0;
        align-self: center;
    }

    .app-content .calendar-event .event-body strong {
        -webkit-line-clamp: 2;
        min-height: auto;
        font-size: 17px;
        line-height: 1.12;
    }

    .app-content .calendar-event .event-body small {
        -webkit-line-clamp: 2;
        font-size: 13px;
        line-height: 1.18;
    }

    .app-content .calendar-event .event-status-stack,
    .app-content .calendar-event:not(.training) .event-status-stack {
        grid-column: 3;
        grid-row: 2;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        justify-self: start;
        align-items: center;
        align-self: start;
        gap: 8px;
    }

    .app-content .calendar-event .event-status-stack > em {
        min-height: 34px;
        padding: 8px 12px;
        font-size: 12px;
    }

    .app-content .calendar-event .event-open-plan {
        min-width: 0;
        min-height: 38px;
        padding: 10px 14px;
        border-radius: 14px;
        font-size: 13px;
    }

    .app-content .calendar-event .event-plan-meta {
        grid-column: 3;
        margin-top: 8px;
    }

    .calendar-head h2 {
        font-size: clamp(24px, 7vw, 32px);
    }
}

@media (max-width: 390px) {
    .app-header {
        min-height: 100px;
        padding-inline: 16px;
    }

    .brand-block strong {
        max-width: calc(100vw - 142px);
        font-size: 15px;
    }

    .brand-block small {
        font-size: 12px;
    }

    .app-content {
        padding-inline: 16px;
    }

    .app-content .calendar-event,
    .app-content .calendar-event:not(.training) {
        grid-template-columns: 52px 50px minmax(0, 1fr);
        gap: 9px 10px;
        padding: 12px;
    }

    .app-content .calendar-event .event-time {
        width: 52px;
        font-size: 12px;
    }

    .app-content .calendar-event .event-kind-icon,
    .app-content .calendar-event .event-kind-icon img {
        width: 50px;
        height: 50px;
    }

    .app-content .calendar-event .event-body strong {
        font-size: 15px;
    }

    .app-content .calendar-event .event-body small {
        font-size: 12px;
    }
}

@media (max-width: 779px) {
    .mobile-app {
        --mobile-page-pad: 16px;
    }

    .app-header {
        position: relative !important;
        top: auto !important;
        min-height: 92px !important;
        padding: max(12px, env(safe-area-inset-top)) var(--mobile-page-pad) 12px !important;
        border-radius: 0 !important;
    }

    .brand-block {
        grid-template-columns: 52px minmax(0, 1fr) !important;
        gap: 12px !important;
        min-width: 0 !important;
        min-height: 52px !important;
    }

    .brand-block .brand-logo,
    .brand-block .brand-avatar,
    .brand-block img {
        width: 52px !important;
        height: 52px !important;
        border-radius: 18px !important;
    }

    .brand-block strong {
        max-width: calc(100vw - 150px) !important;
        font-size: 17px !important;
        line-height: 1.08 !important;
        display: -webkit-box !important;
        overflow: hidden !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .brand-block small {
        margin-top: 3px !important;
        font-size: 12px !important;
        line-height: 1.15 !important;
    }

    .notification-button {
        width: 52px !important;
        min-height: 52px !important;
        border-radius: 17px !important;
    }

    .notification-button svg {
        width: 25px !important;
        height: 25px !important;
    }

    .app-content {
        padding: 20px var(--mobile-page-pad) 104px !important;
        gap: 16px !important;
    }

    .mobile-section-head {
        align-items: center !important;
        margin: 0 !important;
    }

    .mobile-section-head span {
        display: none !important;
    }

    .mobile-section-head h2 {
        font-size: clamp(30px, 9vw, 38px) !important;
        line-height: 1 !important;
        letter-spacing: 0 !important;
    }

    .mobile-section-head button {
        min-height: 44px !important;
        padding: 9px 16px !important;
        border-radius: 17px !important;
        font-size: 15px !important;
    }

    .calendar-filter-tabs {
        display: flex !important;
        gap: 8px !important;
        overflow-x: auto !important;
        padding: 0 0 2px !important;
        scroll-snap-type: x proximity !important;
    }

    .calendar-filter-tabs button {
        flex: 0 0 auto !important;
        min-width: 0 !important;
        min-height: 42px !important;
        padding: 9px 16px !important;
        border-radius: 999px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
        scroll-snap-align: start !important;
    }

    .calendar-head {
        display: grid !important;
        grid-template-columns: 38px minmax(0, 1fr) 38px !important;
        min-height: 104px !important;
        padding: 14px 12px !important;
        border-radius: 22px !important;
        align-items: center !important;
    }

    .calendar-head h2 {
        font-size: clamp(24px, 7vw, 31px) !important;
        line-height: 1.05 !important;
        white-space: normal !important;
    }

    .calendar-head p {
        margin-top: 4px !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
        white-space: normal !important;
    }

    .calendar-head button {
        width: 38px !important;
        min-height: 38px !important;
        border-radius: 14px !important;
        font-size: 28px !important;
    }

    .calendar-strip {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 8px !important;
        overflow: visible !important;
    }

    .calendar-strip button {
        width: auto !important;
        min-width: 0 !important;
        min-height: 70px !important;
        border-radius: 18px !important;
        padding: 8px 4px !important;
    }

    .calendar-strip span {
        font-size: 14px !important;
    }

    .calendar-strip strong {
        font-size: 21px !important;
    }

    .app-content .calendar-mobile-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .app-content .calendar-mobile-summary article {
        min-height: 66px !important;
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .app-content .calendar-mobile-summary strong {
        font-size: 23px !important;
        line-height: 1 !important;
    }

    .app-content .calendar-mobile-summary span {
        margin-top: 4px !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
    }

    .calendar-list {
        gap: 14px !important;
    }

    .calendar-list > h3 {
        margin: 8px 4px 0 !important;
        font-size: 22px !important;
        line-height: 1.12 !important;
    }

    .app-content .calendar-event,
    .app-content .calendar-event:not(.training) {
        grid-template-columns: 54px 54px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        min-height: 118px !important;
        padding: 13px !important;
        gap: 8px 11px !important;
        align-items: center !important;
        border-radius: 21px !important;
    }

    .app-content .calendar-event .event-time {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 54px !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        font-size: 13px !important;
    }

    .app-content .calendar-event .event-kind-icon,
    .app-content .calendar-event .event-kind-icon img {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 54px !important;
        height: 54px !important;
    }

    .app-content .calendar-event .event-body {
        grid-column: 3 !important;
        grid-row: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        gap: 3px !important;
        width: 100% !important;
        min-width: 0 !important;
        align-self: center !important;
    }

    .app-content .calendar-event .event-body strong {
        display: -webkit-box !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 0 !important;
        font-size: 17px !important;
        line-height: 1.12 !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .app-content .calendar-event .event-body small {
        display: -webkit-box !important;
        overflow: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        font-size: 12px !important;
        line-height: 1.18 !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .app-content .calendar-event .event-body small:nth-of-type(n+3) {
        display: none !important;
    }

    .app-content .calendar-event .event-plan-meta {
        grid-column: 3 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        margin-top: 7px !important;
        gap: 6px !important;
    }

    .app-content .calendar-event .event-plan-meta em {
        min-height: 26px !important;
        padding: 5px 8px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-event .event-status-stack,
    .app-content .calendar-event:not(.training) .event-status-stack {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: flex !important;
        grid-auto-flow: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 8px !important;
        min-width: 0 !important;
    }

    .app-content .calendar-event .event-status-stack > em {
        min-height: 32px !important;
        padding: 7px 11px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-event .event-open-plan {
        min-height: 36px !important;
        min-width: 112px !important;
        padding: 9px 12px !important;
        border-radius: 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 779px) {
    html,
    body,
    .mobile-app {
        overflow-x: hidden !important;
    }

    .notification-button .badge,
    .notification-button span {
        right: 0 !important;
        max-width: 30px !important;
    }

    .app-nav {
        width: calc(100% - 18px) !important;
        max-width: calc(100vw - 18px) !important;
        box-sizing: border-box !important;
    }

    .calendar-strip {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .app-content .calendar-event {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 390px) {
    .mobile-app {
        --mobile-page-pad: 14px;
    }

    .brand-block strong {
        font-size: 15px !important;
    }

    .app-content .calendar-event,
    .app-content .calendar-event:not(.training) {
        grid-template-columns: 50px 48px minmax(0, 1fr) !important;
        gap: 8px 9px !important;
        padding: 12px !important;
    }

    .app-content .calendar-event .event-time {
        width: 50px !important;
        font-size: 12px !important;
    }

    .app-content .calendar-event .event-kind-icon,
    .app-content .calendar-event .event-kind-icon img {
        width: 48px !important;
        height: 48px !important;
    }

    .app-content .calendar-event .event-body strong {
        font-size: 15px !important;
    }

    .app-content .calendar-event .event-open-plan {
        min-width: 102px !important;
        padding-inline: 10px !important;
    }
}

/* QA visual movil real: tarjetas de calendario compactas y sin texto cortado por columnas estrechas. */
@media (max-width: 779px) {
    .app-content .calendar-section,
    .app-content .calendar-list {
        width: 100% !important;
        max-width: 100% !important;
    }

    .app-content .calendar-event,
    .app-content .calendar-event:not(.training) {
        display: grid !important;
        grid-template-columns: 52px 50px minmax(0, 1fr) !important;
        grid-template-rows: minmax(58px, auto) auto !important;
        min-height: 112px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 12px !important;
        gap: 8px 10px !important;
        align-items: center !important;
        overflow: hidden !important;
    }

    .app-content .calendar-event .event-time {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 52px !important;
        min-width: 52px !important;
        min-height: 42px !important;
        align-self: center !important;
        font-size: 13px !important;
    }

    .app-content .calendar-event .event-kind-icon {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        align-self: center !important;
    }

    .app-content .calendar-event .event-kind-icon img,
    .app-content .calendar-event .event-kind-icon svg,
    .app-content .calendar-event .event-kind-icon .iconify {
        width: 30px !important;
        height: 30px !important;
        max-width: 30px !important;
        max-height: 30px !important;
    }

    .app-content .calendar-event .event-body {
        grid-column: 3 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .app-content .calendar-event .event-body strong,
    .app-content .calendar-event .event-body small {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        hyphens: none !important;
    }

    .app-content .calendar-event .event-body strong {
        display: -webkit-box !important;
        font-size: 16px !important;
        line-height: 1.12 !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .app-content .calendar-event .event-body small {
        display: -webkit-box !important;
        font-size: 12px !important;
        line-height: 1.16 !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
    }

    .app-content .calendar-event .event-plan-meta {
        grid-column: 3 !important;
        grid-row: 2 !important;
        margin: 0 !important;
        align-self: center !important;
    }

    .app-content .calendar-event .event-status-stack,
    .app-content .calendar-event:not(.training) .event-status-stack {
        grid-column: 2 / -1 !important;
        grid-row: 2 !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        min-width: 0 !important;
        gap: 8px !important;
        margin-top: 2px !important;
    }

    .app-content .calendar-event .event-status-stack > em {
        max-width: 128px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .app-content .calendar-event .event-open-plan {
        min-width: 104px !important;
        max-width: 132px !important;
        min-height: 34px !important;
        padding: 8px 11px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
}

@media (max-width: 390px) {
    .app-content .calendar-event,
    .app-content .calendar-event:not(.training) {
        grid-template-columns: 48px 46px minmax(0, 1fr) !important;
        padding: 11px !important;
        gap: 7px 8px !important;
    }

    .app-content .calendar-event .event-time {
        width: 48px !important;
        min-width: 48px !important;
    }

    .app-content .calendar-event .event-kind-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
    }

    .app-content .calendar-event .event-body strong {
        font-size: 15px !important;
    }

    .app-content .calendar-event .event-status-stack > em {
        max-width: 112px !important;
    }

    .app-content .calendar-event .event-open-plan {
        min-width: 96px !important;
        max-width: 116px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 779px) {
    .chat-list,
    .chat-layout {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .chat-thread {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        padding-right: 48px !important;
    }

    .chat-thread strong,
    .chat-thread span {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .app-content .chat-mobile-chips {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .app-content .chat-mobile-chips button {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-subpage-head,
    .app-content .mobile-subpage-header {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .app-content .calendar-event {
        scroll-margin-bottom: 132px !important;
    }

    .app-content .calendar-subpage-head strong,
    .app-content .mobile-subpage-header strong {
        color: #ffffff !important;
    }

    .app-content .calendar-filter-tabs {
        display: grid !important;
        grid-template-columns: .82fr .95fr .95fr 1.25fr !important;
        gap: 6px !important;
        overflow: hidden !important;
        width: 100% !important;
    }

    .app-content .calendar-filter-tabs button {
        min-width: 0 !important;
        width: 100% !important;
        padding: 9px 6px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-detail > h2 {
        padding: 0 14px !important;
        font-size: 24px !important;
        line-height: 1.12 !important;
    }

    .app-content .calendar-detail > p,
    .app-content .calendar-detail .detail-player,
    .app-content .calendar-detail .detail-meta {
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 779px) {
    .app-content .calendar-event,
    .app-content .calendar-event:not(.training) {
        grid-template-columns: 52px 48px minmax(0, 1fr) !important;
        grid-template-rows: auto auto !important;
        align-items: center !important;
        min-height: 0 !important;
        padding: 12px !important;
        gap: 8px 10px !important;
    }

    .app-content .calendar-event .event-time {
        grid-column: 1 !important;
        grid-row: 1 !important;
        width: 52px !important;
        min-width: 52px !important;
        height: 44px !important;
        min-height: 44px !important;
        font-size: 13px !important;
    }

    .app-content .calendar-event .event-kind-icon {
        grid-column: 2 !important;
        grid-row: 1 !important;
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    .app-content .calendar-event .event-body {
        grid-column: 3 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .app-content .calendar-event .event-body strong {
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        font-size: 16px !important;
        line-height: 1.14 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .calendar-event .event-body small {
        display: -webkit-box !important;
        -webkit-line-clamp: 1 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        font-size: 12px !important;
        line-height: 1.22 !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .calendar-event .event-plan-meta {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        width: 100% !important;
        justify-content: flex-start !important;
        margin-top: 2px !important;
    }

    .app-content .calendar-event .event-status-stack,
    .app-content .calendar-event:not(.training) .event-status-stack {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .app-content .calendar-event.training .event-status-stack {
        grid-column: 1 / -1 !important;
        grid-row: 3 !important;
    }

    .app-content .calendar-event .event-status-stack > em {
        max-width: 130px !important;
        min-width: 0 !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    .app-content .calendar-event .event-open-plan {
        flex: 0 1 auto !important;
        min-width: 104px !important;
        max-width: 136px !important;
        padding: 9px 12px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 390px) {
    .app-content .calendar-event,
    .app-content .calendar-event:not(.training) {
        grid-template-columns: 48px 44px minmax(0, 1fr) !important;
        gap: 7px 8px !important;
    }

    .app-content .calendar-event .event-time {
        width: 48px !important;
        min-width: 48px !important;
        font-size: 12px !important;
    }

    .app-content .calendar-event .event-kind-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .app-content .calendar-event .event-open-plan {
        min-width: 98px !important;
        max-width: 126px !important;
        font-size: 12px !important;
    }
}

/* Final compact mobile QA layer: keeps the real app close to the approved mobile mockup. */
@media (max-width: 779px) {
    .app-header {
        min-height: 76px !important;
        padding: max(10px, env(safe-area-inset-top)) 14px 10px !important;
        border-radius: 0 !important;
        background: #082f66 !important;
    }

    .brand-block {
        min-height: 44px !important;
        gap: 9px !important;
    }

    .brand-block .brand-logo,
    .brand-block .brand-avatar,
    .brand-block img {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 12px !important;
    }

    .brand-block strong {
        max-width: calc(100vw - 126px) !important;
        font-size: 14px !important;
        line-height: 1.12 !important;
        white-space: normal !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
    }

    .brand-block small {
        margin-top: 2px !important;
        font-size: 11px !important;
        line-height: 1.05 !important;
    }

    .notification-button {
        width: 42px !important;
        height: 42px !important;
        min-height: 42px !important;
        border-radius: 14px !important;
    }

    .notification-button svg {
        width: 22px !important;
        height: 22px !important;
    }

    .notification-button span {
        top: -6px !important;
        right: -6px !important;
        min-width: 22px !important;
        height: 20px !important;
        line-height: 20px !important;
        font-size: 11px !important;
    }

    .app-content {
        padding: 16px 14px 92px !important;
    }

    .mobile-greeting h2,
    .mobile-section-head h2 {
        font-size: 26px !important;
        line-height: 1.08 !important;
    }

    .mobile-greeting p {
        font-size: 13px !important;
    }

    .mobile-section-head {
        margin-bottom: 12px !important;
        gap: 10px !important;
    }

    .mobile-section-head button {
        min-height: 36px !important;
        padding: 8px 12px !important;
        border-radius: 14px !important;
        font-size: 13px !important;
    }

    .calendar-filter-tabs {
        display: grid !important;
        grid-template-columns: .75fr .95fr .95fr 1.25fr !important;
        gap: 7px !important;
        margin-bottom: 14px !important;
        overflow: hidden !important;
    }

    .calendar-filter-tabs button {
        min-width: 0 !important;
        width: 100% !important;
        min-height: 34px !important;
        padding: 0 6px !important;
        font-size: 12px !important;
    }

    .calendar-head {
        grid-template-columns: 34px minmax(0, 1fr) 34px !important;
        padding: 14px 10px !important;
        border-radius: 18px !important;
    }

    .calendar-head h2 {
        font-size: 22px !important;
        line-height: 1.08 !important;
    }

    .calendar-head p {
        font-size: 12px !important;
        line-height: 1.1 !important;
    }

    .calendar-week {
        gap: 6px !important;
    }

    .calendar-week button {
        min-height: 62px !important;
        padding: 7px 4px !important;
        border-radius: 15px !important;
    }

    .calendar-week button strong {
        font-size: 20px !important;
    }

    .calendar-week button span {
        font-size: 12px !important;
    }

    .calendar-mobile-summary {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 14px 0 18px !important;
    }

    .calendar-mobile-summary article {
        min-height: 58px !important;
        padding: 10px 12px !important;
        border-radius: 14px !important;
    }

    .calendar-mobile-summary article.wide {
        display: none !important;
    }

    .calendar-mobile-summary strong {
        font-size: 18px !important;
    }

    .calendar-mobile-summary span {
        font-size: 12px !important;
    }

    .app-content .calendar-list h3 {
        margin: 20px 2px 10px !important;
        font-size: 18px !important;
        line-height: 1.15 !important;
    }
}

/* Final mobile calendar QA override. This must stay last because the module has
   several historical calendar-card layers from previous iterations. */
@media (max-width: 779px) {
    .app-shell {
        padding: 0 !important;
    }

    .app-content .calendar-event,
    .app-content .calendar-event.training,
    .app-content .calendar-event:not(.training) {
        display: grid !important;
        grid-template-columns: 52px 50px minmax(0, 1fr) !important;
        grid-template-areas:
            "time icon body"
            ". icon actions" !important;
        gap: 8px 10px !important;
        align-items: center !important;
        min-height: 104px !important;
        padding: 12px !important;
        border-radius: 18px !important;
    }

    .app-content .calendar-event .event-time,
    .app-content .calendar-event:not(.training) .event-time {
        grid-area: time !important;
        width: 52px !important;
        min-width: 52px !important;
        min-height: 40px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 12px !important;
        font-size: 14px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .app-content .calendar-event .event-kind-icon {
        grid-area: icon !important;
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        border-radius: 50% !important;
    }

    .app-content .calendar-event .event-kind-icon svg,
    .app-content .calendar-event .event-kind-icon img,
    .app-content .calendar-event .event-kind-icon .iconify {
        width: 30px !important;
        height: 30px !important;
    }

    .app-content .calendar-event .event-body {
        grid-area: body !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    .app-content .calendar-event .event-body strong {
        max-width: 100% !important;
        font-size: 16px !important;
        line-height: 1.14 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .calendar-event .event-body small {
        max-width: 100% !important;
        margin-top: 3px !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .calendar-event .event-plan-meta {
        margin-top: 7px !important;
        gap: 6px !important;
    }

    .app-content .calendar-event .event-plan-meta em {
        min-height: 24px !important;
        padding: 5px 8px !important;
        font-size: 10px !important;
    }

    .app-content .calendar-event .event-status-stack,
    .app-content .calendar-event:not(.training) .event-status-stack {
        grid-area: actions !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        margin: 0 !important;
        min-width: 0 !important;
    }

    .app-content .calendar-event .event-status-stack > em,
    .app-content .calendar-event .event-open-plan {
        width: auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: 30px !important;
        padding: 7px 10px !important;
        border-radius: 13px !important;
        font-size: 11px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-event .event-open-plan {
        padding-inline: 12px !important;
    }
}

@media (max-width: 390px) {
    .app-content .calendar-event,
    .app-content .calendar-event.training,
    .app-content .calendar-event:not(.training) {
        grid-template-columns: 48px 44px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 11px 10px !important;
    }

    .app-content .calendar-event .event-time,
    .app-content .calendar-event:not(.training) .event-time {
        width: 48px !important;
        min-width: 48px !important;
        font-size: 13px !important;
    }

    .app-content .calendar-event .event-kind-icon {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }

    .app-content .calendar-event .event-kind-icon svg,
    .app-content .calendar-event .event-kind-icon img,
    .app-content .calendar-event .event-kind-icon .iconify {
        width: 27px !important;
        height: 27px !important;
    }

    .app-content .calendar-event .event-body strong {
        font-size: 14px !important;
    }

    .app-content .calendar-event .event-status-stack > em,
    .app-content .calendar-event .event-open-plan {
        min-height: 28px !important;
        padding: 6px 8px !important;
        font-size: 10px !important;
    }
}

/* Mobile app closure 2026-08-23: final layout pass for real phone screens. */
@media (max-width: 779px) {
    .app-content .calendar-event,
    .app-content .calendar-event.training,
    .app-content .calendar-event:not(.training) {
        grid-template-columns: 54px 54px minmax(0, 1fr) !important;
        grid-template-areas:
            "time icon body"
            "actions actions actions" !important;
        min-height: 0 !important;
        padding: 14px !important;
        gap: 12px !important;
        align-items: center !important;
        text-align: left !important;
    }

    .app-content .calendar-event .event-time,
    .app-content .calendar-event:not(.training) .event-time {
        grid-area: time !important;
        width: 54px !important;
        min-width: 54px !important;
        min-height: 42px !important;
        font-size: 14px !important;
    }

    .app-content .calendar-event .event-kind-icon {
        grid-area: icon !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
    }

    .app-content .calendar-event .event-kind-icon svg,
    .app-content .calendar-event .event-kind-icon img,
    .app-content .calendar-event .event-kind-icon .iconify {
        width: 32px !important;
        height: 32px !important;
        object-fit: contain !important;
    }

    .app-content .calendar-event .event-body {
        grid-area: body !important;
        min-width: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .app-content .calendar-event .event-body strong {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        font-size: 17px !important;
        line-height: 1.18 !important;
        letter-spacing: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .calendar-event .event-body small {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        margin-top: 4px !important;
        font-size: 13px !important;
        line-height: 1.22 !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .calendar-event .event-plan-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        grid-column: auto !important;
        margin-top: 9px !important;
        gap: 7px !important;
    }

    .app-content .calendar-event .event-status-stack,
    .app-content .calendar-event:not(.training) .event-status-stack,
    .app-content .calendar-event.training .event-status-stack {
        grid-area: actions !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 0 !important;
    }

    .app-content .calendar-event .event-status-stack > em {
        min-height: 32px !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-event .event-open-plan {
        min-width: 110px !important;
        max-width: none !important;
        min-height: 36px !important;
        padding: 9px 14px !important;
        border-radius: 14px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    .chat-search-card {
        display: grid;
        gap: 8px;
        padding: 12px;
        border: 1px solid #dfe7f2;
        border-radius: 18px;
        background: #fff;
        box-shadow: 0 12px 26px rgba(15, 23, 42, .05);
    }

    .chat-search-card label {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding: 0 12px;
        border: 1px solid #dfe7f2;
        border-radius: 14px;
        background: #f8fbff;
    }

    .chat-search-card svg {
        width: 18px;
        height: 18px;
        color: #64748b;
    }

    .chat-search-card input {
        width: 100%;
        min-width: 0;
        border: 0;
        outline: 0;
        background: transparent;
        color: #0f172a;
        font: inherit;
        font-size: 14px;
    }

    .chat-search-card small {
        color: #64748b;
        font-size: 12px;
    }

    .app-content .chat-mobile-summary {
        padding: 14px !important;
        border-radius: 20px !important;
    }

    .app-content .chat-mobile-summary strong {
        font-size: 16px !important;
        line-height: 1.18 !important;
    }

    .app-content .chat-mobile-summary small {
        font-size: 12px !important;
        line-height: 1.25 !important;
    }

    .chat-list {
        display: grid !important;
        gap: 10px !important;
    }

    .chat-thread,
    .app-content .chat-thread {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) auto !important;
        align-items: center !important;
        gap: 10px !important;
        min-height: 76px !important;
        padding: 12px !important;
        border-radius: 18px !important;
        text-align: left !important;
    }

    .chat-thread-avatar {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border-radius: 15px;
        background: linear-gradient(135deg, #0b5fff, #10b981);
        color: #fff;
        font-weight: 900;
        font-size: 13px;
    }

    .chat-thread-main {
        min-width: 0;
    }

    .chat-thread strong,
    .app-content .chat-thread strong {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 1 !important;
        overflow: hidden !important;
        max-width: 100% !important;
        font-size: 15px !important;
        line-height: 1.16 !important;
    }

    .chat-thread small,
    .chat-thread span,
    .app-content .chat-thread span {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 1 !important;
        overflow: hidden !important;
        max-width: 100% !important;
        margin: 4px 0 0 !important;
        color: #64748b !important;
        font-size: 12px !important;
        line-height: 1.2 !important;
    }

    .chat-thread-meta {
        display: grid;
        justify-items: end;
        gap: 5px;
        min-width: 34px;
    }

    .chat-thread-meta small {
        display: block !important;
        margin: 0 !important;
        color: #94a3b8 !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }

    .chat-thread em,
    .app-content .chat-thread em {
        position: static !important;
        display: grid !important;
        place-items: center !important;
        min-width: 22px !important;
        height: 22px !important;
        padding: 0 6px !important;
        border-radius: 999px !important;
        background: #ef4444 !important;
        color: #fff !important;
        font-size: 11px !important;
        font-style: normal !important;
        font-weight: 900 !important;
    }

    .app-content .chat-panel {
        min-height: calc(100dvh - 190px) !important;
        border-radius: 20px !important;
    }

    .app-content .chat-messages {
        max-height: none !important;
        padding-bottom: 10px !important;
    }

    .app-content .chat-form {
        position: sticky !important;
        bottom: 78px !important;
        padding: 10px !important;
        background: #fff !important;
    }

    .app-content .chat-floating-create {
        right: max(16px, calc((100vw - 520px) / 2 + 16px)) !important;
        bottom: calc(86px + env(safe-area-inset-bottom)) !important;
        min-height: 48px !important;
        padding: 0 16px !important;
        border-radius: 999px !important;
        box-shadow: 0 18px 36px rgba(11, 95, 255, .28) !important;
    }
}

@media (max-width: 390px) {
    .app-content .calendar-event,
    .app-content .calendar-event.training,
    .app-content .calendar-event:not(.training) {
        grid-template-columns: 48px 46px minmax(0, 1fr) !important;
        padding: 12px !important;
        gap: 10px !important;
    }

    .app-content .calendar-event .event-time,
    .app-content .calendar-event:not(.training) .event-time {
        width: 48px !important;
        min-width: 48px !important;
        font-size: 13px !important;
    }

    .app-content .calendar-event .event-kind-icon {
        width: 46px !important;
        height: 46px !important;
        min-width: 46px !important;
        min-height: 46px !important;
    }

    .app-content .calendar-event .event-body strong {
        font-size: 15px !important;
    }

    .app-content .calendar-event .event-body small {
        font-size: 12px !important;
    }
}

/* Absolute final mobile calendar mockup lock 2026-08-24. */
@media (max-width: 779px) {
    .app-content .calendar-view-tabs {
        display: none !important;
    }

    .app-content .calendar-filter-tabs {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 0 18px !important;
        overflow: visible !important;
    }

    .app-content .calendar-filter-tabs button,
    .app-content .calendar-filter-tabs button.active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        padding: 0 8px !important;
        border-radius: 22px !important;
        font-size: 15px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-filter-tabs button img {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
    }

    .app-content .calendar-filter-tabs button.active img {
        filter: brightness(0) invert(1) !important;
    }

    .app-content .calendar-mobile-summary {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 28px !important;
        visibility: visible !important;
    }

    .app-content .calendar-mobile-summary article,
    .app-content .calendar-mobile-summary article.wide {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        grid-template-areas:
            "icon value"
            "icon label" !important;
        align-items: center !important;
        column-gap: 8px !important;
        min-height: 78px !important;
        padding: 12px 10px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .05) !important;
    }

    .app-content .calendar-mobile-summary article > span {
        grid-area: icon !important;
        display: grid !important;
        place-items: center !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 14px !important;
        background: #eff6ff !important;
    }

    .app-content .calendar-mobile-summary article.training > span {
        background: #dcfce7 !important;
    }

    .app-content .calendar-mobile-summary article.match > span {
        background: #dbeafe !important;
    }

    .app-content .calendar-mobile-summary article.task > span {
        background: #ffedd5 !important;
    }

    .app-content .calendar-mobile-summary img {
        width: 22px !important;
        height: 22px !important;
        object-fit: contain !important;
    }

    .app-content .calendar-mobile-summary strong {
        grid-area: value !important;
        color: #07142d !important;
        font-size: 25px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
    }

    .app-content .calendar-mobile-summary small {
        grid-area: label !important;
        color: #64748b !important;
        font-size: 13px !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
    }

    .app-content .calendar-event,
    .app-content .calendar-event.training,
    .app-content .calendar-event:not(.training) {
        display: grid !important;
        grid-template-columns: 58px 54px minmax(0, 1fr) !important;
        grid-template-areas:
            "time icon body"
            "time icon actions" !important;
        gap: 10px !important;
        align-items: center !important;
        min-height: 126px !important;
        padding: 14px 12px !important;
        overflow: hidden !important;
    }

    .app-content .calendar-event .event-body {
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .app-content .calendar-event .event-body strong {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        max-width: 100% !important;
        font-size: 17px !important;
        line-height: 1.12 !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .calendar-event .event-body small {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 1 !important;
        overflow: hidden !important;
        max-width: 100% !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .calendar-event .event-body small:nth-of-type(n+3) {
        display: none !important;
    }

    .app-content .calendar-event .event-status-stack,
    .app-content .calendar-event:not(.training) .event-status-stack,
    .app-content .calendar-event.training .event-status-stack {
        grid-area: actions !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        min-width: 0 !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .app-content .calendar-event .event-status-stack > em {
        display: inline-grid !important;
        place-items: center !important;
        min-height: 32px !important;
        max-width: 108px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-event .event-open-plan {
        display: inline-grid !important;
        place-items: center !important;
        min-width: 104px !important;
        min-height: 40px !important;
        padding: 0 12px !important;
        border-radius: 16px !important;
        font-size: 13px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }
}

/* Mobile calendar final fidelity pass 2026-08-24.
   Keep this block at the end: older mobile calendar rules are intentionally overridden here. */
@media (max-width: 779px) {
    .app-content .calendar-page-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        margin: 0 0 18px !important;
        padding: 0 2px !important;
    }

    .app-content .calendar-page-head h2 {
        margin: 0 !important;
        color: #07142d !important;
        font-size: clamp(38px, 11vw, 48px) !important;
        line-height: .98 !important;
        font-weight: 950 !important;
        letter-spacing: 0 !important;
    }

    .app-content .calendar-page-head button {
        flex: 0 0 auto !important;
        min-width: 72px !important;
        min-height: 48px !important;
        padding: 0 16px !important;
        border: 1px solid #bfdbfe !important;
        border-radius: 22px !important;
        background: #f8fbff !important;
        color: #0b5fff !important;
        font-size: 17px !important;
        font-weight: 950 !important;
        box-shadow: none !important;
    }

    .app-content .calendar-view-tabs {
        display: none !important;
    }

    .app-content .calendar-filter-tabs {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 0 18px !important;
        overflow: visible !important;
    }

    .app-content .calendar-filter-tabs button,
    .app-content .calendar-filter-tabs button.active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        padding: 0 8px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 22px !important;
        background: #fff !important;
        color: #64748b !important;
        font-size: 15px !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
        box-shadow: none !important;
    }

    .app-content .calendar-filter-tabs button img {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
    }

    .app-content .calendar-filter-tabs button.active {
        border-color: #0b5fff !important;
        background: #0b5fff !important;
        color: #fff !important;
    }

    .app-content .calendar-filter-tabs button.active img {
        filter: brightness(0) invert(1) !important;
    }

    .app-content .calendar-head {
        display: grid !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        align-items: center !important;
        min-height: 118px !important;
        margin: 0 0 18px !important;
        padding: 18px 12px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 28px !important;
        background: #fff !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .06) !important;
    }

    .app-content .calendar-head button {
        display: grid !important;
        place-items: center !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 16px !important;
        background: transparent !important;
        color: #073a78 !important;
        font-size: 40px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        box-shadow: none !important;
    }

    .app-content .calendar-head h2 {
        display: block !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        color: #07142d !important;
        font-size: clamp(25px, 7.2vw, 34px) !important;
        line-height: 1.05 !important;
        font-weight: 950 !important;
        text-align: center !important;
        letter-spacing: 0 !important;
        white-space: normal !important;
    }

    .app-content .calendar-head p {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 1 !important;
        overflow: hidden !important;
        margin: 7px auto 0 !important;
        max-width: 100% !important;
        color: #64748b !important;
        font-size: 16px !important;
        font-weight: 950 !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }

    .app-content .calendar-strip {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 0 18px !important;
        overflow: visible !important;
    }

    .app-content .calendar-strip button {
        display: grid !important;
        place-items: center !important;
        min-width: 0 !important;
        min-height: 74px !important;
        padding: 8px 2px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 20px !important;
        background: #fff !important;
        color: #07142d !important;
        box-shadow: none !important;
    }

    .app-content .calendar-strip button span {
        color: #64748b !important;
        font-size: 15px !important;
        font-weight: 950 !important;
    }

    .app-content .calendar-strip button strong {
        color: #07142d !important;
        font-size: 23px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
    }

    .app-content .calendar-strip button.has-items::after {
        content: "" !important;
        display: block !important;
        width: 7px !important;
        height: 7px !important;
        margin-top: 4px !important;
        border-radius: 50% !important;
        background: #f7b928 !important;
    }

    .app-content .calendar-strip button.selected,
    .app-content .calendar-strip button.today {
        border-color: #0b5fff !important;
        background: #0b5fff !important;
    }

    .app-content .calendar-strip button.selected span,
    .app-content .calendar-strip button.selected strong,
    .app-content .calendar-strip button.today span,
    .app-content .calendar-strip button.today strong {
        color: #fff !important;
    }

    .app-content .calendar-mobile-summary {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 0 28px !important;
    }

    .app-content .calendar-mobile-summary article,
    .app-content .calendar-mobile-summary article.wide {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        grid-template-areas:
            "icon value"
            "icon label" !important;
        align-items: center !important;
        column-gap: 8px !important;
        min-height: 78px !important;
        padding: 12px 10px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .05) !important;
    }

    .app-content .calendar-mobile-summary article > span {
        grid-area: icon !important;
        display: grid !important;
        place-items: center !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 14px !important;
        background: #eff6ff !important;
    }

    .app-content .calendar-mobile-summary article.training > span {
        background: #dcfce7 !important;
    }

    .app-content .calendar-mobile-summary article.match > span {
        background: #dbeafe !important;
    }

    .app-content .calendar-mobile-summary article.task > span {
        background: #ffedd5 !important;
    }

    .app-content .calendar-mobile-summary img {
        width: 22px !important;
        height: 22px !important;
        object-fit: contain !important;
    }

    .app-content .calendar-mobile-summary strong {
        grid-area: value !important;
        color: #07142d !important;
        font-size: 25px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
    }

    .app-content .calendar-mobile-summary small {
        grid-area: label !important;
        color: #64748b !important;
        font-size: 13px !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
    }

    .app-content .calendar-list h3 {
        margin: 0 6px 16px !important;
        color: #07142d !important;
        font-size: 25px !important;
        line-height: 1.1 !important;
        font-weight: 950 !important;
        letter-spacing: 0 !important;
    }

    .app-content .calendar-event,
    .app-content .calendar-event.training,
    .app-content .calendar-event:not(.training) {
        display: grid !important;
        grid-template-columns: 64px 62px minmax(0, 1fr) auto !important;
        grid-template-areas: "time icon body actions" !important;
        gap: 12px !important;
        align-items: center !important;
        min-height: 112px !important;
        margin: 0 0 14px !important;
        padding: 16px 14px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 24px !important;
        background: #fff !important;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .06) !important;
        text-align: left !important;
        overflow: hidden !important;
    }

    .app-content .calendar-event .event-time,
    .app-content .calendar-event:not(.training) .event-time {
        grid-area: time !important;
        display: grid !important;
        place-items: center !important;
        width: 64px !important;
        min-width: 64px !important;
        min-height: 44px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        background: #f8fbff !important;
        color: #073a78 !important;
        font-size: 15px !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-event .event-kind-icon {
        grid-area: icon !important;
        display: grid !important;
        place-items: center !important;
        width: 62px !important;
        height: 62px !important;
        min-width: 62px !important;
        min-height: 62px !important;
        border-radius: 50% !important;
    }

    .app-content .calendar-event.training .event-kind-icon {
        background: #dcfce7 !important;
    }

    .app-content .calendar-event.match .event-kind-icon {
        background: #dbeafe !important;
    }

    .app-content .calendar-event.task .event-kind-icon {
        background: #ffedd5 !important;
    }

    .app-content .calendar-event .event-kind-icon img,
    .app-content .calendar-event .event-kind-icon svg,
    .app-content .calendar-event .event-kind-icon .iconify {
        width: 40px !important;
        height: 40px !important;
        object-fit: contain !important;
    }

    .app-content .calendar-event .event-body {
        grid-area: body !important;
        display: grid !important;
        gap: 4px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .app-content .calendar-event .event-body strong {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        max-width: 100% !important;
        color: #07142d !important;
        font-size: 18px !important;
        line-height: 1.12 !important;
        font-weight: 950 !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .calendar-event .event-body small {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 1 !important;
        overflow: hidden !important;
        max-width: 100% !important;
        color: #64748b !important;
        font-size: 13px !important;
        line-height: 1.2 !important;
        font-weight: 850 !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .calendar-event .event-body small:nth-of-type(n+3) {
        display: none !important;
    }

    .app-content .calendar-event .event-plan-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 4px !important;
    }

    .app-content .calendar-event .event-plan-meta em {
        display: inline-flex !important;
        align-items: center !important;
        gap: 5px !important;
        min-height: 28px !important;
        padding: 0 10px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 999px !important;
        background: #f8fbff !important;
        color: #64748b !important;
        font-size: 12px !important;
        font-style: normal !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-event .event-plan-meta svg {
        width: 13px !important;
        height: 13px !important;
    }

    .app-content .calendar-event .event-status-stack,
    .app-content .calendar-event:not(.training) .event-status-stack,
    .app-content .calendar-event.training .event-status-stack {
        grid-area: actions !important;
        display: grid !important;
        justify-items: end !important;
        align-content: center !important;
        gap: 8px !important;
        width: auto !important;
        min-width: 104px !important;
        margin: 0 !important;
    }

    .app-content .calendar-event .event-status-stack > em {
        display: inline-grid !important;
        place-items: center !important;
        min-height: 32px !important;
        max-width: 108px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #fff7ed !important;
        color: #9a3412 !important;
        font-size: 12px !important;
        line-height: 1 !important;
        font-style: normal !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-event .event-open-plan {
        display: inline-grid !important;
        place-items: center !important;
        min-width: 104px !important;
        min-height: 40px !important;
        padding: 0 12px !important;
        border-radius: 16px !important;
        background: #0b5fff !important;
        color: #fff !important;
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 430px) {
    .app-content .calendar-filter-tabs {
        gap: 8px !important;
    }

    .app-content .calendar-filter-tabs button,
    .app-content .calendar-filter-tabs button.active {
        min-height: 42px !important;
        padding: 0 6px !important;
        font-size: 13px !important;
    }

    .app-content .calendar-filter-tabs button img {
        width: 18px !important;
        height: 18px !important;
    }

    .app-content .calendar-event,
    .app-content .calendar-event.training,
    .app-content .calendar-event:not(.training) {
        grid-template-columns: 58px 54px minmax(0, 1fr) !important;
        grid-template-areas:
            "time icon body"
            "time icon actions" !important;
        min-height: 126px !important;
        padding: 14px 12px !important;
        gap: 10px !important;
    }

    .app-content .calendar-event .event-time,
    .app-content .calendar-event:not(.training) .event-time {
        width: 58px !important;
        min-width: 58px !important;
        min-height: 42px !important;
        font-size: 14px !important;
    }

    .app-content .calendar-event .event-kind-icon {
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
    }

    .app-content .calendar-event .event-kind-icon img,
    .app-content .calendar-event .event-kind-icon svg,
    .app-content .calendar-event .event-kind-icon .iconify {
        width: 35px !important;
        height: 35px !important;
    }

    .app-content .calendar-event .event-body strong {
        font-size: 17px !important;
    }

    .app-content .calendar-event .event-status-stack,
    .app-content .calendar-event:not(.training) .event-status-stack,
    .app-content .calendar-event.training .event-status-stack {
        display: flex !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        min-width: 0 !important;
    }
}

@media (max-width: 380px) {
    .app-content .calendar-page-head h2 {
        font-size: 36px !important;
    }

    .app-content .calendar-head h2 {
        font-size: 24px !important;
    }

    .app-content .calendar-strip {
        gap: 7px !important;
    }

    .app-content .calendar-strip button {
        min-height: 68px !important;
        border-radius: 18px !important;
    }

    .app-content .calendar-mobile-summary {
        gap: 8px !important;
    }

    .app-content .calendar-mobile-summary article {
        grid-template-columns: 28px minmax(0, 1fr) !important;
        column-gap: 6px !important;
        min-height: 72px !important;
        padding: 10px 8px !important;
    }

    .app-content .calendar-mobile-summary article > span {
        width: 28px !important;
        height: 28px !important;
    }

    .app-content .calendar-mobile-summary img {
        width: 19px !important;
        height: 19px !important;
    }

    .app-content .calendar-mobile-summary strong {
        font-size: 21px !important;
    }

    .app-content .calendar-mobile-summary small {
        font-size: 12px !important;
    }
}

/* Last-mile mobile fidelity fixes. */
@media (max-width: 779px) {
    .app-content .calendar-filter-tabs button,
    .app-content .calendar-filter-tabs button.active {
        flex: 0 0 auto !important;
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        min-height: 40px !important;
        padding: 0 14px !important;
        border-radius: 16px !important;
    }

    .app-content .exercise-rating-options {
        display: grid !important;
        grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
        gap: 3px !important;
    }

    .app-content .exercise-rating-options button {
        justify-self: center !important;
        width: 30px !important;
        height: 30px !important;
        min-width: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        font-size: 12px !important;
        line-height: 1 !important;
    }
}

@media (max-width: 390px) {
    .app-content .exercise-rating-options {
        gap: 2px !important;
    }

    .app-content .exercise-rating-options button {
        width: 28px !important;
        height: 28px !important;
        font-size: 11px !important;
    }
}

/* Absolute final mobile mockup override 2026-08-23. */
@media (max-width: 779px) {
    .app-content .calendar-page-head {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        margin: 0 0 18px !important;
    }

    .app-content .calendar-page-head h2 {
        margin: 0 !important;
        color: #07142d !important;
        font-size: clamp(34px, 10vw, 46px) !important;
        line-height: 1 !important;
        font-weight: 950 !important;
        letter-spacing: 0 !important;
    }

    .app-content .calendar-page-head button {
        min-width: 72px !important;
        min-height: 48px !important;
        border: 1px solid #bfdbfe !important;
        border-radius: 22px !important;
        background: #f8fbff !important;
        color: #0b5fff !important;
        font-size: 16px !important;
        font-weight: 900 !important;
    }

    .app-content .calendar-view-tabs {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        min-height: 46px !important;
        margin: 0 0 18px !important;
        padding: 3px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 24px !important;
        background: #fff !important;
    }

    .app-content .calendar-view-tabs span {
        display: grid !important;
        place-items: center !important;
        min-height: 38px !important;
        border-radius: 20px !important;
        color: #64748b !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    .app-content .calendar-view-tabs .active {
        background: #0b5fff !important;
        color: #fff !important;
    }

    .app-content .calendar-head {
        display: grid !important;
        grid-template-columns: 42px minmax(0, 1fr) 42px !important;
        align-items: center !important;
        min-height: 112px !important;
        margin: 0 0 18px !important;
        padding: 18px 12px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 28px !important;
        background: #fff !important;
        box-shadow: 0 14px 34px rgba(15, 23, 42, .06) !important;
    }

    .app-content .calendar-head button {
        width: 42px !important;
        height: 42px !important;
        border: 0 !important;
        background: transparent !important;
        color: #073a78 !important;
        font-size: 42px !important;
        font-weight: 950 !important;
    }

    .app-content .calendar-head h2 {
        margin: 0 !important;
        color: #07142d !important;
        font-size: clamp(24px, 7vw, 34px) !important;
        line-height: 1.05 !important;
        font-weight: 950 !important;
        text-align: center !important;
        letter-spacing: 0 !important;
    }

    .app-content .calendar-head p {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 1 !important;
        overflow: hidden !important;
        margin: 6px 0 0 !important;
        color: #64748b !important;
        font-size: 17px !important;
        font-weight: 900 !important;
        text-align: center !important;
        text-transform: uppercase !important;
    }

    .app-content .calendar-strip {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 0 18px !important;
        overflow: visible !important;
    }

    .app-content .calendar-strip button {
        min-width: 0 !important;
        min-height: 74px !important;
        padding: 8px 2px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 20px !important;
        background: #fff !important;
        color: #07142d !important;
    }

    .app-content .calendar-strip button span {
        color: #64748b !important;
        font-size: 15px !important;
        font-weight: 950 !important;
    }

    .app-content .calendar-strip button strong {
        color: #07142d !important;
        font-size: 22px !important;
        font-weight: 950 !important;
    }

    .app-content .calendar-strip button.has-items::after {
        content: "" !important;
        width: 7px !important;
        height: 7px !important;
        margin-top: 4px !important;
        border-radius: 50% !important;
        background: #f7b928 !important;
    }

    .app-content .calendar-strip button.selected,
    .app-content .calendar-strip button.today {
        border-color: #0b5fff !important;
        background: #0b5fff !important;
    }

    .app-content .calendar-strip button.selected span,
    .app-content .calendar-strip button.selected strong,
    .app-content .calendar-strip button.today span,
    .app-content .calendar-strip button.today strong {
        color: #fff !important;
    }

    .app-content .calendar-filter-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        margin: 0 0 18px !important;
        overflow-x: auto !important;
        scrollbar-width: none !important;
    }

    .app-content .calendar-filter-tabs::-webkit-scrollbar {
        display: none !important;
    }

    .app-content .calendar-filter-tabs button {
        flex: 0 0 auto !important;
        min-height: 40px !important;
        padding: 0 14px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 16px !important;
        background: #fff !important;
        color: #07142d !important;
        font-size: 13px !important;
        font-weight: 900 !important;
    }

    .app-content .calendar-filter-tabs button.active {
        border-color: #0b5fff !important;
        background: #0b5fff !important;
        color: #fff !important;
    }

    .app-content .calendar-mobile-summary {
        display: none !important;
    }

    .app-content .calendar-list h3 {
        margin: 18px 6px 4px !important;
        color: #07142d !important;
        font-size: 24px !important;
        line-height: 1.08 !important;
        font-weight: 950 !important;
    }

    .app-content .calendar-event,
    .app-content .calendar-event.training,
    .app-content .calendar-event:not(.training) {
        display: grid !important;
        grid-template-columns: 64px 58px minmax(0, 1fr) !important;
        grid-template-areas:
            "time icon body"
            ". icon actions" !important;
        gap: 10px 12px !important;
        align-items: center !important;
        min-height: 128px !important;
        padding: 15px 12px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 24px !important;
        background: #fff !important;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .06) !important;
        text-align: left !important;
    }

    .app-content .calendar-event .event-time,
    .app-content .calendar-event:not(.training) .event-time {
        grid-area: time !important;
        display: grid !important;
        place-items: center !important;
        width: 64px !important;
        min-width: 64px !important;
        min-height: 42px !important;
        padding: 0 !important;
        border-radius: 13px !important;
        background: #f8fbff !important;
        color: #073a78 !important;
        font-size: 15px !important;
        font-weight: 950 !important;
    }

    .app-content .calendar-event .event-kind-icon {
        grid-area: icon !important;
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
        min-height: 58px !important;
        border-radius: 50% !important;
    }

    .app-content .calendar-event.training .event-kind-icon {
        background: #dcfce7 !important;
    }

    .app-content .calendar-event.match .event-kind-icon {
        background: #dbeafe !important;
    }

    .app-content .calendar-event.task .event-kind-icon {
        background: #ffedd5 !important;
    }

    .app-content .calendar-event .event-kind-icon img,
    .app-content .calendar-event .event-kind-icon svg {
        width: 36px !important;
        height: 36px !important;
        object-fit: contain !important;
    }

    .app-content .calendar-event .event-body {
        grid-area: body !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .app-content .calendar-event .event-body strong {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        color: #07142d !important;
        font-size: 17px !important;
        line-height: 1.14 !important;
        font-weight: 950 !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .calendar-event .event-body small {
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        color: #64748b !important;
        font-size: 13px !important;
        line-height: 1.18 !important;
        font-weight: 800 !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .calendar-event .event-status-stack,
    .app-content .calendar-event:not(.training) .event-status-stack,
    .app-content .calendar-event.training .event-status-stack {
        grid-area: actions !important;
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        width: 100% !important;
        margin: 0 !important;
    }

    .app-content .calendar-event .event-status-stack > em {
        min-height: 32px !important;
        padding: 8px 12px !important;
        border-radius: 999px !important;
        background: #fff7ed !important;
        color: #9a3412 !important;
        font-size: 12px !important;
        font-style: normal !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-event .event-open-plan {
        min-width: 108px !important;
        min-height: 38px !important;
        padding: 0 14px !important;
        border-radius: 15px !important;
        background: #0b5fff !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
    }
}

@media (max-width: 390px) {
    .app-content .calendar-event,
    .app-content .calendar-event.training,
    .app-content .calendar-event:not(.training) {
        grid-template-columns: 58px 52px minmax(0, 1fr) !important;
        min-height: 122px !important;
        padding: 13px 10px !important;
        gap: 9px 10px !important;
    }

    .app-content .calendar-event .event-time,
    .app-content .calendar-event:not(.training) .event-time {
        width: 58px !important;
        min-width: 58px !important;
        font-size: 13px !important;
    }

    .app-content .calendar-event .event-kind-icon {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        min-height: 52px !important;
    }

    .app-content .calendar-event .event-body strong {
        font-size: 15px !important;
    }

    .app-content .calendar-event .event-body small {
        font-size: 12px !important;
    }
}

/* Absolute final mobile calendar mockup lock 2026-08-24. */
@media (max-width: 779px) {
    .app-content .calendar-view-tabs {
        display: none !important;
    }

    .app-content .calendar-filter-tabs {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 0 0 18px !important;
        overflow: visible !important;
    }

    .app-content .calendar-filter-tabs button,
    .app-content .calendar-filter-tabs button.active {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 7px !important;
        width: 100% !important;
        min-width: 0 !important;
        min-height: 46px !important;
        padding: 0 8px !important;
        border-radius: 22px !important;
        font-size: 15px !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-filter-tabs button img {
        width: 20px !important;
        height: 20px !important;
        object-fit: contain !important;
    }

    .app-content .calendar-filter-tabs button.active img {
        filter: brightness(0) invert(1) !important;
    }

    .app-content .calendar-mobile-summary {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 10px !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 0 28px !important;
        visibility: visible !important;
    }

    .app-content .calendar-mobile-summary article,
    .app-content .calendar-mobile-summary article.wide {
        display: grid !important;
        grid-template-columns: 34px minmax(0, 1fr) !important;
        grid-template-areas:
            "icon value"
            "icon label" !important;
        align-items: center !important;
        column-gap: 8px !important;
        min-height: 78px !important;
        padding: 12px 10px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 12px 28px rgba(15, 23, 42, .05) !important;
    }

    .app-content .calendar-mobile-summary article > span {
        grid-area: icon !important;
        display: grid !important;
        place-items: center !important;
        width: 34px !important;
        height: 34px !important;
        border-radius: 14px !important;
        background: #eff6ff !important;
    }

    .app-content .calendar-mobile-summary article.training > span {
        background: #dcfce7 !important;
    }

    .app-content .calendar-mobile-summary article.match > span {
        background: #dbeafe !important;
    }

    .app-content .calendar-mobile-summary article.task > span {
        background: #ffedd5 !important;
    }

    .app-content .calendar-mobile-summary img {
        width: 22px !important;
        height: 22px !important;
        object-fit: contain !important;
    }

    .app-content .calendar-mobile-summary strong {
        grid-area: value !important;
        color: #07142d !important;
        font-size: 25px !important;
        line-height: 1 !important;
        font-weight: 950 !important;
    }

    .app-content .calendar-mobile-summary small {
        grid-area: label !important;
        color: #64748b !important;
        font-size: 13px !important;
        line-height: 1.1 !important;
        font-weight: 900 !important;
    }
}

/* Absolute final mobile calendar event-card lock 2026-08-24. */
@media (max-width: 779px) {
    .app-content .calendar-event {
        display: grid !important;
        grid-template-columns: 58px 54px minmax(0, 1fr) !important;
        grid-template-areas:
            "time icon body"
            "time icon actions" !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        min-height: 126px !important;
        padding: 14px 12px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 24px !important;
        background: #fff !important;
        box-shadow: 0 18px 40px rgba(15, 23, 42, .06) !important;
        overflow: hidden !important;
        text-align: left !important;
    }

    .app-content .event-time {
        grid-area: time !important;
        display: grid !important;
        place-items: center !important;
        width: 58px !important;
        min-width: 58px !important;
        height: 42px !important;
        padding: 0 !important;
        border-radius: 14px !important;
        background: #f8fafc !important;
        color: #08336d !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
    }

    .app-content .event-kind-icon {
        grid-area: icon !important;
        display: grid !important;
        place-items: center !important;
        width: 54px !important;
        height: 54px !important;
        min-width: 54px !important;
        min-height: 54px !important;
        border-radius: 50% !important;
    }

    .app-content .event-kind-icon img {
        width: 35px !important;
        height: 35px !important;
        object-fit: contain !important;
    }

    .app-content .event-body {
        grid-area: body !important;
        display: grid !important;
        gap: 4px !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    .app-content .event-body strong {
        display: -webkit-box !important;
        max-width: 100% !important;
        overflow: hidden !important;
        color: #07142d !important;
        font-size: 17px !important;
        font-weight: 950 !important;
        line-height: 1.12 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .event-body small {
        display: -webkit-box !important;
        max-width: 100% !important;
        overflow: hidden !important;
        color: #64748b !important;
        font-size: 13px !important;
        font-weight: 850 !important;
        line-height: 1.18 !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 1 !important;
        overflow-wrap: anywhere !important;
    }

    .app-content .event-body small:nth-of-type(n+3) {
        display: none !important;
    }

    .app-content .event-plan-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        min-width: 0 !important;
        margin-top: 4px !important;
    }

    .app-content .event-plan-meta em {
        display: inline-flex !important;
        align-items: center !important;
        min-height: 26px !important;
        max-width: 112px !important;
        padding: 0 10px !important;
        border: 1px solid #dfe7f2 !important;
        border-radius: 999px !important;
        background: #f8fafc !important;
        color: #64748b !important;
        font-size: 12px !important;
        font-style: normal !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .app-content .event-status-stack {
        grid-area: actions !important;
        display: flex !important;
        flex-flow: row wrap !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 8px !important;
        min-width: 0 !important;
        width: 100% !important;
        margin-top: 8px !important;
    }

    .app-content .event-status-stack > em {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 32px !important;
        max-width: 108px !important;
        padding: 0 12px !important;
        border-radius: 999px !important;
        background: #fff7ed !important;
        color: #9a3412 !important;
        font-size: 13px !important;
        font-style: normal !important;
        font-weight: 950 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    .app-content .event-open-plan {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 104px !important;
        max-width: 132px !important;
        min-height: 40px !important;
        padding: 0 14px !important;
        border: 0 !important;
        border-radius: 14px !important;
        background: #0f62fe !important;
        color: #fff !important;
        font-size: 13px !important;
        font-weight: 950 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
        box-shadow: 0 12px 26px rgba(15, 98, 254, .22) !important;
    }
}

@media (max-width: 360px) {
    .app-content .calendar-event {
        grid-template-columns: 52px 48px minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 12px 10px !important;
    }

    .app-content .event-time {
        width: 52px !important;
        min-width: 52px !important;
        font-size: 13px !important;
    }

    .app-content .event-kind-icon {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
    }

    .app-content .event-kind-icon img {
        width: 31px !important;
        height: 31px !important;
    }

    .app-content .event-body strong {
        font-size: 16px !important;
    }

    .app-content .event-open-plan {
        min-width: 94px !important;
        max-width: 112px !important;
        padding: 0 10px !important;
        font-size: 12px !important;
    }
}

/* Absolute final mobile calendar filter readability lock 2026-08-24. */
@media (max-width: 779px) {
    .app-content .calendar-filter-tabs {
        display: grid !important;
        grid-template-columns: .88fr .98fr .98fr 1.36fr !important;
        gap: 8px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .app-content .calendar-filter-tabs button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-width: 0 !important;
        height: 46px !important;
        padding: 0 8px !important;
        border-radius: 22px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: clip !important;
        font-size: 12.5px !important;
        font-weight: 950 !important;
        letter-spacing: 0 !important;
    }

    .app-content .calendar-filter-tabs button img {
        display: none !important;
    }

    .app-content .calendar-head h2,
    .app-content .calendar-head small {
        max-width: 250px !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    .app-content .calendar-head h2 {
        font-size: 24px !important;
        line-height: 1.05 !important;
    }

    .app-content .calendar-head small {
        font-size: 14px !important;
        line-height: 1.1 !important;
    }
}

/* Absolute final mobile calendar typography squeeze 2026-08-24. */
@media (max-width: 779px) {
    body .app-content .calendar-filter-tabs button,
    body .app-content .calendar-filter-tabs button.active {
        font-size: 12.5px !important;
    }

    body .app-content .calendar-head h2 {
        max-width: 270px !important;
        font-size: 24px !important;
    }

    body .app-content .calendar-head small {
        max-width: 270px !important;
        font-size: 14px !important;
    }

    body .app-content .calendar-mobile-summary article,
    body .app-content .calendar-mobile-summary article.wide {
        padding: 12px 8px !important;
    }

    body .app-content .calendar-mobile-summary small {
        font-size: 12.5px !important;
        white-space: nowrap !important;
    }
}

/* Mobile calendar compact mockup fidelity pass 2026-08-24.
   Final override for the accepted web-mobile calendar mockup. */
@media (max-width: 779px) {
    body .app-shell {
        background: #f4f7fc !important;
    }

    body .app-header {
        min-height: 76px !important;
        padding: 13px 20px !important;
        gap: 12px !important;
        background: #082d67 !important;
    }

    body .brand-block {
        min-width: 0 !important;
        gap: 12px !important;
    }

    body .brand-block img,
    body .brand-block .avatar,
    body .brand-block > span:first-child {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        border-radius: 50% !important;
    }

    body .brand-block strong {
        display: block !important;
        max-width: min(66vw, 315px) !important;
        color: #fff !important;
        font-size: 13px !important;
        line-height: 1.15 !important;
        font-weight: 800 !important;
        letter-spacing: 0 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body .brand-block small {
        display: block !important;
        margin-top: 3px !important;
        color: rgba(255, 255, 255, .72) !important;
        font-size: 11px !important;
        line-height: 1.1 !important;
        font-weight: 800 !important;
        letter-spacing: .02em !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    body .notification-button {
        width: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        border-radius: 15px !important;
    }

    body .notification-button svg {
        width: 24px !important;
        height: 24px !important;
    }

    body .app-content {
        padding: 10px 20px 78px !important;
    }

    body .app-content .calendar-page-head {
        margin: 0 0 10px !important;
        min-height: auto !important;
    }

    body .app-content .calendar-page-head h2 {
        font-size: 31px !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        letter-spacing: 0 !important;
    }

    body .app-content .calendar-page-head button {
        min-width: 58px !important;
        min-height: 42px !important;
        padding: 8px 15px !important;
        border-radius: 16px !important;
        font-size: 14px !important;
        font-weight: 900 !important;
    }

    body .app-content .calendar-filter-tabs {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 0 0 10px !important;
        overflow: visible !important;
    }

    body .app-content .calendar-filter-tabs button,
    body .app-content .calendar-filter-tabs button.active {
        min-width: 0 !important;
        min-height: 38px !important;
        padding: 8px 7px !important;
        border-radius: 999px !important;
        font-size: 12px !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
    }

    body .app-content .calendar-filter-tabs button img,
    body .app-content .calendar-filter-tabs button svg,
    body .app-content .calendar-filter-tabs button .iconify {
        display: none !important;
    }

    body .app-content .calendar-head {
        grid-template-columns: 30px minmax(0, 1fr) 30px !important;
        min-height: auto !important;
        margin: 0 !important;
        padding: 9px 12px !important;
        border-radius: 18px !important;
        box-shadow: 0 10px 28px rgba(13, 40, 82, .05) !important;
    }

    body .app-content .calendar-head button {
        width: 30px !important;
        height: 30px !important;
        min-height: 30px !important;
        padding: 0 !important;
        font-size: 22px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    body .app-content .calendar-head h2 {
        max-width: none !important;
        margin: 0 !important;
        color: #07122a !important;
        font-size: 18px !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
        text-align: center !important;
        text-transform: none !important;
    }

    body .app-content .calendar-head p {
        display: none !important;
    }

    body .app-content .calendar-strip {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        gap: 8px !important;
        margin: 12px 0 !important;
    }

    body .app-content .calendar-strip button {
        min-height: 58px !important;
        padding: 6px 3px !important;
        border-radius: 17px !important;
    }

    body .app-content .calendar-strip button span {
        font-size: 13px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    body .app-content .calendar-strip button strong {
        margin-top: 3px !important;
        font-size: 18px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
    }

    body .app-content .calendar-strip button.has-items::after {
        width: 6px !important;
        height: 6px !important;
        margin-top: 3px !important;
    }

    body .app-content .calendar-mobile-summary {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 6px !important;
        margin: 0 0 10px !important;
    }

    body .app-content .calendar-mobile-summary article,
    body .app-content .calendar-mobile-summary article.wide {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 6px !important;
        min-width: 0 !important;
        min-height: 52px !important;
        padding: 9px 9px !important;
        border: 1px solid #dfe8f4 !important;
        border-radius: 16px !important;
        background: #fff !important;
        box-shadow: none !important;
        text-align: left !important;
    }

    body .app-content .calendar-mobile-summary article > span {
        display: none !important;
    }

    body .app-content .calendar-mobile-summary strong {
        min-width: 14px !important;
        color: #07122a !important;
        font-size: 19px !important;
        line-height: 1 !important;
        font-weight: 900 !important;
        text-align: right !important;
    }

    body .app-content .calendar-mobile-summary small {
        min-width: 0 !important;
        color: #64748b !important;
        font-size: 10.5px !important;
        line-height: 1.05 !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    body .app-content .calendar-list h3 {
        margin: 14px 6px 8px !important;
        font-size: 21px !important;
        line-height: 1.08 !important;
        font-weight: 900 !important;
    }

    body .app-content .calendar-list .empty-panel,
    body .app-content .empty-panel {
        padding: 15px 18px !important;
        border-radius: 20px !important;
        font-size: 15px !important;
        line-height: 1.35 !important;
    }

    body .app-nav {
        min-height: 68px !important;
        padding: 8px 18px 10px !important;
        gap: 8px !important;
    }

    body .app-nav button {
        min-height: 50px !important;
        border-radius: 18px !important;
        gap: 3px !important;
        font-size: 11px !important;
    }

    body .app-nav button svg {
        width: 21px !important;
        height: 21px !important;
    }
}

@media (max-width: 420px) {
    body .app-content {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body .app-content .calendar-head h2 {
        font-size: 17px !important;
    }

    body .app-content .calendar-filter-tabs button,
    body .app-content .calendar-filter-tabs button.active {
        font-size: 11.5px !important;
    }
}