@media (max-width: 47.999rem) {
    :root {
        --mobile-header-bg: #33383e;
        --mobile-accent: #006be8;
        --mobile-accent-dark: #004ba7;
        --mobile-panel: rgba(255, 255, 255, 0.86);
        --mobile-panel-border: #cdd3d8;
        --mobile-text: #303942;
        --mobile-muted: #59616a;
    }

    html {
        font-size: 15px;
    }

    body {
        color: var(--mobile-text);
        font-family: Arial, Helvetica, sans-serif;
        background:
            radial-gradient(circle at 0 0, rgba(0, 0, 0, 0.045) 0 1px, transparent 1px),
            radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.9) 0 1px, transparent 1px),
            #eeeeee;
        background-size: 4px 4px;
    }

    a {
        color: #0067b1;
    }

    .app-shell {
        padding-bottom: 4.25rem;
    }

    .app-header {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 0.75rem;
        align-items: center;
        padding: 0.8rem 0.9rem 0;
        color: #ffffff;
        background: var(--mobile-header-bg);
        border-bottom: 5px solid var(--mobile-accent);
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
    }

    .app-brand {
        color: #ffffff;
        font-size: 1.65rem;
        font-weight: 700;
        line-height: 1;
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.7);
    }

    .mobile-menu-toggle {
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
    }

    .mobile-menu-button {
        width: 2.75rem;
        height: 2.4rem;
        display: inline-flex;
        flex-direction: column;
        gap: 0.28rem;
        align-items: center;
        justify-content: center;
        justify-self: end;
        background: var(--mobile-accent);
        border: 1px solid #2b8cff;
        border-radius: 4px 4px 0 0;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 1px 2px rgba(0, 0, 0, 0.35);
        cursor: pointer;
    }

    .mobile-menu-button span {
        width: 1.35rem;
        height: 2px;
        display: block;
        background: #ffffff;
        border-radius: 999px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
    }

    .app-nav {
        grid-column: 1 / -1;
        display: none;
        margin: 0.1rem -0.9rem 0;
        padding: 0.35rem 0.55rem 0.7rem;
        background: var(--mobile-accent);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }

    .mobile-menu-toggle:checked ~ .app-nav {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.35rem;
    }

    .app-nav a {
        min-height: 2.65rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.35rem 0.45rem;
        color: #ffffff;
        background: rgba(0, 44, 112, 0.26);
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 4px;
        font-size: 0.86rem;
        font-weight: 700;
        text-align: center;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    }

    .app-nav a.is-active {
        background: var(--mobile-accent);
        border-color: color-mix(in srgb, var(--mobile-accent) 78%, #ffffff);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
        text-decoration: none;
    }

    .logout-form {
        grid-column: 1 / -1;
        justify-content: flex-end;
        margin-top: 0.2rem;
        color: #dce7f3;
        font-size: 0.78rem;
    }

    .logout-form button,
    .app-header > a[href$="login"] {
        min-height: 1.8rem;
        padding: 0 0.6rem;
        color: #ffffff;
        background: linear-gradient(#8ac34a, #4b8f1f);
        border: 1px solid #315d13;
        border-radius: 3px;
        font-size: 0.68rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .global-search {
        grid-column: 1 / -1;
        margin-bottom: 0.8rem;
    }

    .global-search label {
        display: block;
    }

    .global-search span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
    }

    .global-search input,
    input[type="search"] {
        min-height: 2.35rem;
        color: #d8d8d8;
        background: linear-gradient(#222222, #0c0c0c);
        border: 1px solid #1d1f22;
        border-radius: 4px;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.8);
    }

    .sub-nav {
        display: flex;
        gap: 0.6rem;
        overflow-x: auto;
        align-items: center;
        padding: 0.6rem 0.75rem;
        color: #ffffff;
        background: var(--mobile-accent);
        border-bottom: 1px solid #004ba7;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
    }

    .sub-nav a,
    .sub-nav label,
    .assigned-filter,
    .assigned-filter label {
        flex: 0 0 auto;
        color: #ffffff;
        font-size: 0.78rem;
        font-weight: 700;
        white-space: nowrap;
    }

    .sub-nav label,
    .assigned-filter label {
        display: flex;
        gap: 0.35rem;
        align-items: center;
    }

    .assigned-filter {
        margin: 0;
    }

    .app-main {
        width: calc(100% - 1rem);
        margin: 0.9rem auto 1.25rem;
    }

    .crm-panel,
    .crm-form-panel,
    .record-hero,
    .record-history-panel,
    .record-details,
    .sidebar-box,
    .placeholder-panel,
    .task-item,
    .contact-table {
        background: var(--mobile-panel);
        border: 1px solid var(--mobile-panel-border);
        border-radius: 4px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    }

    .crm-form-panel > header,
    .record-details header,
    .contact-table th {
        color: #304050;
        background: #e6e7e8;
        border-bottom: 1px solid #d5d9dd;
    }

    .tasks-page {
        display: grid;
        gap: 0.9rem;
    }

    .tasks-page .crm-panel h1 {
        margin: 0 0 0.75rem;
        color: #000000;
        font-size: 1rem;
    }

    .task-table td strong,
    .task-table td span {
        display: block;
    }

    .record-tabs {
        background: #0864e6;
        border-bottom: 1px solid #013b97;
    }

    .record-tabs a {
        color: #ffffff;
        background: rgba(0, 44, 112, 0.25);
    }

    .record-tabs .is-active {
        color: #ffffff;
        background: #07101a;
    }

    .activity-badge {
        color: #ffffff;
        background: #4d5d6d;
    }

    .activity-badge-system {
        color: #000000;
        background: #c9dde7;
    }

    .primary-button,
    .auth-form button[type="submit"] {
        color: #ffffff;
        background: linear-gradient(#4d8eb5, #1f5c82);
        border: 1px solid #0e3148;
        border-radius: 3px;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    }

    .mobile-nav {
        background: #33383e;
        border-top: 4px solid var(--mobile-accent);
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.35);
    }

    .mobile-nav a {
        min-height: 3.55rem;
        color: #ffffff;
        font-size: 0.72rem;
        font-weight: 700;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    }
}