/* Android DingTalk / legacy WebView fallback for Tailwind v4 color features. */

@supports not (color: oklch(50% 0.1 180)) {
    .mes-mobile,
    .mes-mobile body {
        width: 100%;
        min-height: 100%;
        overflow-x: hidden;
        background: #f8fafc;
        color: #111827;
        -webkit-text-size-adjust: 100%;
    }

    .mes-mobile *,
    .mes-mobile *::before,
    .mes-mobile *::after,
    .mes-dingtalk-auth *,
    .mes-dingtalk-auth *::before,
    .mes-dingtalk-auth *::after {
        box-sizing: border-box;
    }

    .mes-mobile .mobile-shell {
        width: 100%;
        min-height: 100vh;
        padding: 16px;
        overflow-x: hidden;
        background: #f8fafc;
    }

    .mes-mobile .mobile-page {
        width: 100%;
        max-width: 480px;
        margin: 0 auto;
        overflow-x: hidden;
        word-break: break-word;
    }

    .mes-dingtalk-auth {
        width: 100%;
        color: #111827;
        word-break: break-word;
    }

    .mes-mobile .card,
    .mes-dingtalk-auth .card,
    .mes-dingtalk-auth .bg-white {
        background-color: #ffffff;
        color: #111827;
        border-color: #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 4px 6px rgba(15, 23, 42, 0.08);
    }

    .mes-mobile .text-gray-900,
    .mes-dingtalk-auth .text-gray-900 {
        color: #111827;
    }

    .mes-mobile .text-gray-800,
    .mes-dingtalk-auth .text-gray-800 {
        color: #1f2937;
    }

    .mes-mobile .text-gray-700,
    .mes-dingtalk-auth .text-gray-700 {
        color: #374151;
    }

    .mes-mobile .text-gray-600,
    .mes-dingtalk-auth .text-gray-600 {
        color: #4b5563;
    }

    .mes-mobile .text-gray-500,
    .mes-dingtalk-auth .text-gray-500,
    .mes-mobile .text-gray-400,
    .mes-dingtalk-auth .text-gray-400 {
        color: #6b7280;
    }

    .mes-mobile .text-white,
    .mes-dingtalk-auth .text-white {
        color: #ffffff;
    }

    .mes-mobile .bg-white,
    .mes-dingtalk-auth .bg-white {
        background-color: #ffffff;
    }

    .mes-mobile .bg-gray-50,
    .mes-dingtalk-auth .bg-gray-50 {
        background-color: #f9fafb;
    }

    .mes-mobile .bg-gray-100,
    .mes-dingtalk-auth .bg-gray-100 {
        background-color: #f3f4f6;
    }

    .mes-mobile .border-gray-200,
    .mes-dingtalk-auth .border-gray-200 {
        border-color: #e5e7eb;
    }

    .mes-mobile .border-gray-300,
    .mes-dingtalk-auth .border-gray-300 {
        border-color: #d1d5db;
    }

    .mes-mobile .form-label,
    .mes-dingtalk-auth .form-label {
        display: block;
        margin-bottom: 8px;
        color: #374151;
        font-size: 14px;
        font-weight: 500;
    }

    .mes-mobile .form-input,
    .mes-dingtalk-auth .form-input,
    .mes-mobile input,
    .mes-dingtalk-auth input,
    .mes-mobile textarea,
    .mes-dingtalk-auth textarea,
    .mes-mobile select,
    .mes-dingtalk-auth select {
        min-height: 48px;
        padding: 12px 16px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background-color: #ffffff;
        color: #111827;
        font-size: 16px;
        line-height: 1.5;
    }

    .mes-mobile textarea,
    .mes-dingtalk-auth textarea {
        min-height: 96px;
    }

    .mes-mobile .btn-touch,
    .mes-dingtalk-auth .btn-touch {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
        min-width: 44px;
        padding: 8px 16px;
        border: 1px solid transparent;
        border-radius: 8px;
        color: #ffffff;
        font-size: 14px;
        font-weight: 500;
        line-height: 1.25;
        text-align: center;
        text-decoration: none;
    }

    .mes-mobile .btn-primary,
    .mes-dingtalk-auth .btn-primary,
    .mes-mobile .bg-blue-600,
    .mes-dingtalk-auth .bg-blue-600 {
        background-color: #2563eb;
        color: #ffffff;
        border-color: #2563eb;
    }

    .mes-mobile .btn-secondary,
    .mes-dingtalk-auth .btn-secondary {
        background-color: #4b5563;
        color: #ffffff;
        border-color: #4b5563;
    }

    .mes-mobile .btn-danger,
    .mes-dingtalk-auth .btn-danger,
    .mes-mobile .bg-red-600,
    .mes-dingtalk-auth .bg-red-600 {
        background-color: #dc2626;
        color: #ffffff;
        border-color: #dc2626;
    }

    .mes-mobile .btn-success,
    .mes-dingtalk-auth .btn-success,
    .mes-mobile .bg-green-600,
    .mes-dingtalk-auth .bg-green-600 {
        background-color: #16a34a;
        color: #ffffff;
        border-color: #16a34a;
    }

    .mes-mobile .bg-gray-100.text-gray-700,
    .mes-dingtalk-auth .bg-gray-100.text-gray-700 {
        background-color: #f3f4f6;
        color: #374151;
        border-color: #e5e7eb;
    }

    .mes-mobile .bg-red-50,
    .mes-dingtalk-auth .bg-red-50 {
        background-color: #fef2f2;
    }

    .mes-mobile .text-red-800,
    .mes-dingtalk-auth .text-red-800,
    .mes-mobile .text-red-700,
    .mes-dingtalk-auth .text-red-700,
    .mes-mobile .text-red-600,
    .mes-dingtalk-auth .text-red-600 {
        color: #991b1b;
    }

    .mes-mobile .border-red-200,
    .mes-dingtalk-auth .border-red-200,
    .mes-mobile .border-red-300,
    .mes-dingtalk-auth .border-red-300 {
        border-color: #fecaca;
    }

    .mes-mobile .bg-yellow-50,
    .mes-dingtalk-auth .bg-yellow-50 {
        background-color: #fffbeb;
    }

    .mes-mobile .text-yellow-800,
    .mes-dingtalk-auth .text-yellow-800,
    .mes-mobile .text-yellow-700,
    .mes-dingtalk-auth .text-yellow-700 {
        color: #92400e;
    }

    .mes-mobile .border-yellow-200,
    .mes-dingtalk-auth .border-yellow-200,
    .mes-mobile .border-yellow-300,
    .mes-dingtalk-auth .border-yellow-300 {
        border-color: #fde68a;
    }

    .mes-mobile .bg-blue-50,
    .mes-dingtalk-auth .bg-blue-50 {
        background-color: #eff6ff;
    }

    .mes-mobile .bg-blue-100,
    .mes-dingtalk-auth .bg-blue-100 {
        background-color: #dbeafe;
    }

    .mes-mobile .text-blue-800,
    .mes-dingtalk-auth .text-blue-800,
    .mes-mobile .text-blue-700,
    .mes-dingtalk-auth .text-blue-700,
    .mes-mobile .text-blue-600,
    .mes-dingtalk-auth .text-blue-600 {
        color: #1d4ed8;
    }

    .mes-mobile .border-blue-200,
    .mes-dingtalk-auth .border-blue-200 {
        border-color: #bfdbfe;
    }

    .mes-mobile .border-blue-400,
    .mes-dingtalk-auth .border-blue-400 {
        border-color: #60a5fa;
    }

    .mes-mobile .bg-green-50,
    .mes-dingtalk-auth .bg-green-50 {
        background-color: #f0fdf4;
    }

    .mes-mobile .bg-green-100,
    .mes-dingtalk-auth .bg-green-100 {
        background-color: #dcfce7;
    }

    .mes-mobile .text-green-700,
    .mes-dingtalk-auth .text-green-700,
    .mes-mobile .text-green-600,
    .mes-dingtalk-auth .text-green-600 {
        color: #15803d;
    }

    .mes-mobile .border-green-200,
    .mes-dingtalk-auth .border-green-200,
    .mes-mobile .border-green-400,
    .mes-dingtalk-auth .border-green-400 {
        border-color: #86efac;
    }

    .mes-mobile .bg-purple-100,
    .mes-dingtalk-auth .bg-purple-100 {
        background-color: #f3e8ff;
    }

    .mes-mobile .text-purple-700,
    .mes-dingtalk-auth .text-purple-700 {
        color: #7e22ce;
    }

    .mes-mobile .text-orange-600,
    .mes-dingtalk-auth .text-orange-600 {
        color: #ea580c;
    }

    .mes-mobile .rounded-full,
    .mes-dingtalk-auth .rounded-full {
        border-radius: 9999px;
    }

    .mes-mobile .inline-block,
    .mes-dingtalk-auth .inline-block {
        display: inline-block;
    }

    .mes-mobile .flex,
    .mes-dingtalk-auth .flex {
        display: flex;
    }

    .mes-mobile .grid,
    .mes-dingtalk-auth .grid {
        display: grid;
    }

    .mes-mobile .min-w-0,
    .mes-dingtalk-auth .min-w-0 {
        min-width: 0;
    }

    .mes-mobile .border,
    .mes-dingtalk-auth .border {
        border-width: 1px;
        border-style: solid;
    }

    .mes-mobile a,
    .mes-dingtalk-auth a {
        color: #2563eb;
    }

    /* Pause form: textarea / label / buttons in old WebView */
    .mes-mobile .bg-yellow-500,
    .mes-dingtalk-auth .bg-yellow-500 {
        background-color: #eab308;
        color: #ffffff;
    }

    .mes-mobile .hover\:bg-yellow-600:hover,
    .mes-dingtalk-auth .hover\:bg-yellow-600:hover {
        background-color: #ca8a04;
        color: #ffffff;
    }

    .mes-mobile #pause_reason,
    .mes-dingtalk-auth #pause_reason {
        background-color: #ffffff;
        color: #111827;
        -webkit-text-fill-color: #111827;
        border-color: #d1d5db;
        opacity: 1;
    }

    .mes-mobile #pause_reason::placeholder,
    .mes-dingtalk-auth #pause_reason::placeholder {
        color: #9ca3af;
        -webkit-text-fill-color: #9ca3af;
        opacity: 1;
    }

    .mes-mobile label[for="pause_reason"],
    .mes-dingtalk-auth label[for="pause_reason"] {
        color: #374151;
        -webkit-text-fill-color: #374151;
        opacity: 1;
    }

    .mes-auth-login {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        color: #111827;
        word-break: break-word;
    }

    .mes-auth-login *,
    .mes-auth-login *::before,
    .mes-auth-login *::after {
        box-sizing: border-box;
    }

    .mes-auth-login h2 {
        margin-bottom: 20px;
        color: #1f2937;
        font-size: 24px;
        line-height: 1.25;
    }

    .mes-auth-login form {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    .mes-auth-login .mb-4 {
        margin-bottom: 14px;
    }

    .mes-auth-login .mb-6 {
        margin-bottom: 18px;
    }

    .mes-auth-login .form-label {
        display: block;
        margin-bottom: 8px;
        color: #374151;
        font-size: 14px;
        font-weight: 500;
    }

    .mes-auth-login .form-input,
    .mes-auth-login input[type="text"],
    .mes-auth-login input[type="password"] {
        display: block;
        width: 100%;
        min-height: 48px;
        padding: 12px 16px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background-color: #ffffff;
        color: #111827;
        font-size: 16px;
        line-height: 1.5;
    }

    .mes-auth-login input[type="checkbox"] {
        width: 20px;
        height: 20px;
        min-width: 20px;
        min-height: 20px;
        padding: 0;
        border: 1px solid #9ca3af;
        border-radius: 4px;
        background-color: #ffffff;
    }

    .mes-auth-login label {
        color: #374151;
    }

    .mes-auth-login .btn-touch,
    .mes-auth-login button[type="submit"] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        padding: 10px 16px;
        border: 1px solid #2563eb;
        border-radius: 8px;
        background-color: #2563eb;
        color: #ffffff;
        font-size: 16px;
        font-weight: 600;
        line-height: 1.25;
        text-align: center;
    }

    .mes-auth-login button[type="button"] {
        min-height: 40px;
        padding: 8px 12px;
        border-radius: 6px;
        color: #374151;
        font-size: 14px;
    }

    .mes-auth-login .bg-gray-100 {
        background-color: #f3f4f6;
    }

    .mes-auth-login .bg-white {
        background-color: #ffffff;
    }

    .mes-auth-login .text-gray-800 {
        color: #1f2937;
    }

    .mes-auth-login .text-gray-700 {
        color: #374151;
    }

    .mes-auth-login .text-gray-600,
    .mes-auth-login .text-gray-500,
    .mes-auth-login .text-gray-400 {
        color: #6b7280;
    }

    .mes-auth-login .text-red-600 {
        color: #dc2626;
    }

    .mes-auth-login .text-blue-600 {
        color: #2563eb;
    }

    .mes-auth-login .border-red-500 {
        border-color: #ef4444;
    }

    .mes-auth-login .rounded-lg {
        border-radius: 8px;
    }

    .mes-auth-login .rounded-md {
        border-radius: 6px;
    }

    .mes-auth-login .flex {
        display: flex;
    }

    .mes-auth-login .items-center {
        align-items: center;
    }

    .mes-auth-login .justify-center {
        justify-content: center;
    }

    .mes-auth-login .w-full {
        width: 100%;
    }

    .mes-auth-login .flex-1 {
        flex: 1 1 0%;
    }

    .mes-auth-login .opacity-50 {
        opacity: 0.5;
    }
}

.mes-auth-login-shell,
.mes-dingtalk-auth-shell {
    min-height: 100vh;
    margin: 0;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eff6ff;
    color: #111827;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-text-size-adjust: 100%;
}

.mes-auth-login-page,
.mes-dingtalk-auth-page {
    width: 100%;
    max-width: 448px;
}

.mes-auth-login-page img,
.mes-dingtalk-auth-page img {
    display: block;
    max-width: 96px;
    height: auto;
    margin: 0 auto;
    object-fit: contain;
}

.mes-auth-login-page .mes-auth-header,
.mes-dingtalk-auth-page .mes-auth-header {
    margin-bottom: 24px;
    text-align: center;
}

.mes-auth-login-page .mes-auth-header img,
.mes-dingtalk-auth-page .mes-auth-header img {
    width: auto;
    max-width: 96px;
    height: auto;
    margin: 0 auto 8px;
}

.mes-auth-login-page .mes-auth-header p,
.mes-dingtalk-auth-page .mes-auth-header p {
    margin: 8px 0 0;
    color: #4b5563;
    font-size: 14px;
}

.mes-auth-login-page .mes-auth-card,
.mes-dingtalk-auth-page .mes-auth-card {
    padding: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.16);
}

.mes-auth-login-page .mes-auth-footer,
.mes-dingtalk-auth-page .mes-auth-footer {
    margin-top: 24px;
    color: #4b5563;
    text-align: center;
    font-size: 14px;
}

.mes-auth-login,
.mes-dingtalk-auth-content {
    width: 100%;
}

.mes-auth-login {
    max-width: 100%;
    color: #111827;
    overflow-x: hidden;
    word-break: break-word;
}

.mes-auth-login *,
.mes-auth-login *::before,
.mes-auth-login *::after {
    box-sizing: border-box;
}

.mes-auth-login [x-cloak] {
    display: none;
}

.mes-auth-login h2 {
    margin-bottom: 20px;
    color: #1f2937;
    font-size: 24px;
    line-height: 1.25;
    text-align: center;
}

.mes-auth-login form {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
}

.mes-auth-login .mb-4 {
    margin-bottom: 14px;
}

.mes-auth-login .mb-6 {
    margin-bottom: 18px;
}

.mes-auth-login .form-label {
    display: block;
    margin-bottom: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
}

.mes-auth-login .form-input,
.mes-auth-login input[type="text"],
.mes-auth-login input[type="password"] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #ffffff;
    color: #111827;
    font-size: 16px;
    line-height: 1.5;
}

.mes-auth-login input[type="checkbox"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin: 0;
}

.mes-auth-login label {
    color: #374151;
}

.mes-auth-login .flex {
    display: flex;
}

.mes-auth-login .items-center {
    align-items: center;
}

.mes-auth-login .justify-center {
    justify-content: center;
}

.mes-auth-login .flex-1 {
    flex: 1 1 0%;
}

.mes-auth-login .w-full {
    width: 100%;
}

.mes-auth-login .btn-touch,
.mes-auth-login button[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    min-width: 44px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.mes-auth-login button[type="button"] {
    min-height: 40px;
    padding: 8px 12px;
    border: 0;
    border-radius: 6px;
    background-color: transparent;
    color: #4b5563;
}

.mes-auth-login .btn-primary,
.mes-auth-login .bg-blue-600 {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.mes-auth-login .bg-gray-100 {
    background-color: #f3f4f6;
}

.mes-auth-login .bg-white {
    background-color: #ffffff;
}

.mes-auth-login .text-gray-800 {
    color: #1f2937;
}

.mes-auth-login .text-gray-700 {
    color: #374151;
}

.mes-auth-login .text-gray-600,
.mes-auth-login .text-gray-500,
.mes-auth-login .text-gray-400 {
    color: #6b7280;
}

.mes-auth-login .text-red-600 {
    color: #dc2626;
}

.mes-auth-login .text-blue-600 {
    color: #2563eb;
}

.mes-auth-login .border-red-500 {
    border-color: #ef4444;
}

.mes-auth-login .rounded-lg {
    border-radius: 8px;
}

.mes-auth-login .rounded-md {
    border-radius: 6px;
}

.mes-auth-login .opacity-50 {
    opacity: 0.5;
}

.mes-dingtalk-auth {
    width: 100%;
    max-width: 100%;
    color: #111827;
    word-break: break-word;
}

.mes-dingtalk-auth *,
.mes-dingtalk-auth *::before,
.mes-dingtalk-auth *::after {
    box-sizing: border-box;
}

.mes-dingtalk-auth h2 {
    margin-bottom: 16px;
    color: #1f2937;
    font-size: 24px;
    line-height: 1.25;
}

.mes-dingtalk-auth form {
    width: 100%;
    max-width: 100%;
}

.mes-dingtalk-auth .bg-white {
    background-color: #ffffff;
}

.mes-dingtalk-auth .bg-red-50 {
    background-color: #fef2f2;
}

.mes-dingtalk-auth .bg-yellow-50 {
    background-color: #fffbeb;
}

.mes-dingtalk-auth .bg-blue-50 {
    background-color: #eff6ff;
}

.mes-dingtalk-auth .border-red-200 {
    border-color: #fecaca;
}

.mes-dingtalk-auth .border-yellow-200 {
    border-color: #fde68a;
}

.mes-dingtalk-auth .border-blue-200 {
    border-color: #bfdbfe;
}

.mes-dingtalk-auth .text-gray-800 {
    color: #1f2937;
}

.mes-dingtalk-auth .text-red-800 {
    color: #991b1b;
}

.mes-dingtalk-auth .text-yellow-800 {
    color: #92400e;
}

.mes-dingtalk-auth .text-blue-800,
.mes-dingtalk-auth .text-blue-600,
.mes-dingtalk-auth a {
    color: #2563eb;
}

.mes-dingtalk-auth .form-label {
    display: block;
    margin-bottom: 8px;
    color: #374151;
    font-size: 14px;
    font-weight: 500;
}

.mes-dingtalk-auth .form-input,
.mes-dingtalk-auth input,
.mes-dingtalk-auth textarea,
.mes-dingtalk-auth select {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background-color: #ffffff;
    color: #111827;
    font-size: 16px;
    line-height: 1.5;
}

.mes-dingtalk-auth .btn-touch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 44px;
    padding: 10px 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
}

.mes-dingtalk-auth .btn-primary,
.mes-dingtalk-auth .bg-blue-600 {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #2563eb;
}

.mes-mobile .btn-handoff,
.mes-dingtalk-auth .btn-handoff {
    background-color: #f97316 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #ea580c !important;
    opacity: 1 !important;
    -webkit-appearance: none;
    appearance: none;
}

.mes-mobile .btn-handoff:hover,
.mes-mobile .btn-handoff:focus,
.mes-mobile .btn-handoff:active,
.mes-dingtalk-auth .btn-handoff:hover,
.mes-dingtalk-auth .btn-handoff:focus,
.mes-dingtalk-auth .btn-handoff:active {
    background-color: #ea580c !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #c2410c !important;
}

.mes-dingtalk-auth .rounded-lg {
    border-radius: 8px;
}

.mes-dingtalk-auth .hidden {
    display: none;
}

.mes-android-dingtalk-app,
.mes-android-dingtalk-app body {
    width: 100%;
    height: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #f3f4f6;
    color: #111827;
    -webkit-text-size-adjust: 100%;
}

    .mes-android-dingtalk-app *,
    .mes-android-dingtalk-app *::before,
    .mes-android-dingtalk-app *::after {
        box-sizing: border-box;
    }

    .mes-android-dingtalk-app body > .flex {
        width: 100%;
        height: 100vh;
        max-width: 100vw;
        overflow: hidden;
    }

    .mes-android-dingtalk-app main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px;
    }

    .mes-android-dingtalk-app .flex-1,
    .mes-android-dingtalk-app .min-w-0,
    .mes-android-dingtalk-app .grid,
    .mes-android-dingtalk-app .card,
    .mes-android-dingtalk-app .max-w-7xl,
    .mes-android-dingtalk-app .max-w-6xl,
    .mes-android-dingtalk-app .max-w-5xl,
    .mes-android-dingtalk-app .max-w-4xl {
        min-width: 0;
        max-width: 100%;
    }

    .mes-android-dingtalk-app .max-w-7xl,
    .mes-android-dingtalk-app .max-w-6xl,
    .mes-android-dingtalk-app .max-w-5xl,
    .mes-android-dingtalk-app .max-w-4xl {
        width: 100%;
    }

    .mes-android-dingtalk-app .bg-white,
    .mes-android-dingtalk-app .card {
        background-color: #ffffff;
        color: #111827;
    }

    .mes-android-dingtalk-app .card {
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
        padding: 16px;
        word-break: break-word;
    }

    .mes-android-dingtalk-app .bg-gray-50 {
        background-color: #f9fafb;
    }

    .mes-android-dingtalk-app .bg-gray-100 {
        background-color: #f3f4f6;
    }

    .mes-android-dingtalk-app .bg-gray-200 {
        background-color: #e5e7eb;
    }

    .mes-android-dingtalk-app .bg-slate-900 {
        background-color: #0f172a;
    }

    .mes-android-dingtalk-app .bg-slate-700,
    .mes-android-dingtalk-app .hover\:bg-slate-700:hover {
        background-color: #334155;
    }

    .mes-android-dingtalk-app .bg-blue-50 {
        background-color: #eff6ff;
    }

    .mes-android-dingtalk-app .bg-blue-100 {
        background-color: #dbeafe;
    }

    .mes-android-dingtalk-app .bg-blue-500 {
        background-color: #3b82f6;
    }

    .mes-android-dingtalk-app .bg-blue-600,
    .mes-android-dingtalk-app .btn-primary {
        background-color: #2563eb;
        color: #ffffff;
        border-color: #2563eb;
    }

    .mes-android-dingtalk-app .bg-green-50 {
        background-color: #f0fdf4;
    }

    .mes-android-dingtalk-app .bg-green-100 {
        background-color: #dcfce7;
    }

    .mes-android-dingtalk-app .bg-green-500,
    .mes-android-dingtalk-app .bg-green-600,
    .mes-android-dingtalk-app .btn-success {
        background-color: #16a34a;
        color: #ffffff;
        border-color: #16a34a;
    }

    .mes-android-dingtalk-app .bg-red-50 {
        background-color: #fef2f2;
    }

    .mes-android-dingtalk-app .bg-red-100 {
        background-color: #fee2e2;
    }

    .mes-android-dingtalk-app .bg-red-500,
    .mes-android-dingtalk-app .bg-red-600,
    .mes-android-dingtalk-app .btn-danger {
        background-color: #dc2626;
        color: #ffffff;
        border-color: #dc2626;
    }

    .mes-android-dingtalk-app .bg-yellow-50 {
        background-color: #fffbeb;
    }

    .mes-android-dingtalk-app .bg-yellow-100 {
        background-color: #fef3c7;
    }

    .mes-android-dingtalk-app .bg-indigo-100 {
        background-color: #e0e7ff;
    }

    .mes-android-dingtalk-app .bg-orange-100 {
        background-color: #ffedd5;
    }

    .mes-android-dingtalk-app .bg-purple-100 {
        background-color: #f3e8ff;
    }

    .mes-android-dingtalk-app .bg-pink-100,
    .mes-android-dingtalk-app .bg-rose-100 {
        background-color: #ffe4e6;
    }

    .mes-android-dingtalk-app .bg-slate-100 {
        background-color: #f1f5f9;
    }

    .mes-android-dingtalk-app .bg-orange-50 {
        background-color: #fff7ed;
    }

    .mes-android-dingtalk-app .text-white {
        color: #ffffff;
    }

    .mes-android-dingtalk-app .text-gray-900 {
        color: #111827;
    }

    .mes-android-dingtalk-app .text-gray-800 {
        color: #1f2937;
    }

    .mes-android-dingtalk-app .text-gray-700 {
        color: #374151;
    }

    .mes-android-dingtalk-app .text-gray-600 {
        color: #4b5563;
    }

    .mes-android-dingtalk-app .text-gray-500,
    .mes-android-dingtalk-app .text-gray-400 {
        color: #6b7280;
    }

    .mes-android-dingtalk-app .text-slate-100 {
        color: #f1f5f9;
    }

    .mes-android-dingtalk-app .text-slate-300 {
        color: #cbd5e1;
    }

    .mes-android-dingtalk-app .text-slate-400 {
        color: #94a3b8;
    }

    .mes-android-dingtalk-app .text-blue-800,
    .mes-android-dingtalk-app .text-blue-700,
    .mes-android-dingtalk-app .text-blue-600 {
        color: #1d4ed8;
    }

    .mes-android-dingtalk-app .text-green-800,
    .mes-android-dingtalk-app .text-green-700,
    .mes-android-dingtalk-app .text-green-600 {
        color: #15803d;
    }

    .mes-android-dingtalk-app .text-red-800,
    .mes-android-dingtalk-app .text-red-700,
    .mes-android-dingtalk-app .text-red-600 {
        color: #991b1b;
    }

    .mes-android-dingtalk-app .text-yellow-800,
    .mes-android-dingtalk-app .text-yellow-700,
    .mes-android-dingtalk-app .text-yellow-600 {
        color: #92400e;
    }

    .mes-android-dingtalk-app .text-orange-600,
    .mes-android-dingtalk-app .text-orange-500,
    .mes-android-dingtalk-app .text-orange-800 {
        color: #ea580c;
    }

    .mes-android-dingtalk-app .text-pink-700,
    .mes-android-dingtalk-app .text-rose-800 {
        color: #be123c;
    }

    .mes-android-dingtalk-app .text-slate-800 {
        color: #1e293b;
    }

    .mes-android-dingtalk-app .text-purple-700,
    .mes-android-dingtalk-app .text-purple-600 {
        color: #7e22ce;
    }

    .mes-android-dingtalk-app .text-emerald-600 {
        color: #059669;
    }

    .mes-android-dingtalk-app .text-indigo-700,
    .mes-android-dingtalk-app .text-indigo-600,
    .mes-android-dingtalk-app .text-indigo-800 {
        color: #4f46e5;
    }

    .mes-android-dingtalk-app .border,
    .mes-android-dingtalk-app .border-gray-100,
    .mes-android-dingtalk-app .border-gray-200,
    .mes-android-dingtalk-app .border-gray-300 {
        border-color: #e5e7eb;
    }

    .mes-android-dingtalk-app .border-blue-200,
    .mes-android-dingtalk-app .border-blue-300,
    .mes-android-dingtalk-app .border-blue-400 {
        border-color: #93c5fd;
    }

    .mes-android-dingtalk-app .border-green-200,
    .mes-android-dingtalk-app .border-green-400 {
        border-color: #86efac;
    }

    .mes-android-dingtalk-app .border-red-200,
    .mes-android-dingtalk-app .border-red-300,
    .mes-android-dingtalk-app .border-red-400,
    .mes-android-dingtalk-app .border-red-600 {
        border-color: #fca5a5;
    }

    .mes-android-dingtalk-app .border-yellow-200,
    .mes-android-dingtalk-app .border-yellow-400 {
        border-color: #facc15;
    }

    .mes-android-dingtalk-app a {
        color: inherit;
        touch-action: manipulation;
    }

    .mes-android-dingtalk-app .text-blue-600,
    .mes-android-dingtalk-app a.text-blue-600,
    .mes-android-dingtalk-app a.text-blue-700 {
        color: #2563eb;
    }

    .mes-android-dingtalk-app .form-label {
        display: block;
        margin-bottom: 8px;
        color: #374151;
        font-size: 14px;
        font-weight: 500;
    }

    .mes-android-dingtalk-app input:not([type="checkbox"]):not([type="radio"]),
    .mes-android-dingtalk-app select,
    .mes-android-dingtalk-app textarea,
    .mes-android-dingtalk-app .form-input {
        display: block;
        width: 100%;
        max-width: 100%;
        min-height: 44px;
        padding: 10px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        background-color: #ffffff;
        color: #111827;
        font-size: 16px;
        line-height: 1.4;
    }

    .mes-android-dingtalk-app textarea {
        min-height: 96px;
    }

    .mes-android-dingtalk-app input[type="checkbox"],
    .mes-android-dingtalk-app input[type="radio"] {
        width: 22px;
        height: 22px;
        min-width: 22px;
        min-height: 22px;
    }

    .mes-android-dingtalk-app button,
    .mes-android-dingtalk-app .btn-touch {
        touch-action: manipulation;
    }

    .mes-android-dingtalk-app .btn-touch {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 9px 14px;
        border: 1px solid transparent;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 600;
        line-height: 1.25;
        text-align: center;
        text-decoration: none;
        white-space: normal;
    }

    .mes-android-dingtalk-app .btn-secondary {
        background-color: #4b5563;
        color: #ffffff;
        border-color: #4b5563;
    }

    .mes-android-dingtalk-app [data-tip] {
        min-width: 40px;
        min-height: 40px;
    }

    .mes-android-dingtalk-app aside {
        z-index: 60;
        width: 18rem;
        max-width: 86vw;
        height: 100vh;
        overflow: hidden;
        background-color: #0f172a;
        color: #f1f5f9;
        pointer-events: auto;
    }

    .mes-android-dingtalk-app aside nav {
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .mes-android-dingtalk-app aside a,
    .mes-android-dingtalk-app aside button {
        min-height: 44px;
        color: inherit;
    }

    .mes-android-dingtalk-app aside .bg-blue-600,
    .mes-android-dingtalk-app aside .bg-red-600 {
        color: #ffffff;
    }

    .mes-android-dingtalk-app .fixed.inset-0 {
        touch-action: manipulation;
    }

    .mes-android-dingtalk-app .overflow-x-auto {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }

    .mes-android-dingtalk-app .overflow-x-auto table {
        width: 100%;
        min-width: 0;
        border-collapse: collapse;
        table-layout: auto;
    }

    .mes-android-dingtalk-app .overflow-x-auto table.min-w-full {
        min-width: 680px;
    }

    .mes-android-dingtalk-app th,
    .mes-android-dingtalk-app td {
        white-space: normal;
        word-break: break-word;
    }

    .mes-android-dingtalk-app .whitespace-nowrap {
        white-space: nowrap;
        word-break: normal;
    }

    .mes-android-dingtalk-app .dashboard-summary-table,
    .mes-android-dingtalk-app .dashboard-summary-table .overflow-x-auto {
        width: 100%;
        max-width: 100%;
        overflow-x: visible;
    }

    .mes-android-dingtalk-app .dashboard-summary-table table {
        width: 100%;
        min-width: 0;
        table-layout: auto;
    }

    .mes-android-dingtalk-app .dashboard-summary-table th,
    .mes-android-dingtalk-app .dashboard-summary-table td {
        white-space: normal;
        word-break: break-word;
    }

    .mes-android-dingtalk-app .grid {
        display: grid;
        gap: 16px;
    }

    .mes-android-dingtalk-app .grid-cols-1 {
        grid-template-columns: 1fr;
    }

    .mes-android-dingtalk-app .grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mes-android-dingtalk-app .space-y-1 > * + * {
        margin-top: 4px;
    }

    .mes-android-dingtalk-app .space-y-2 > * + * {
        margin-top: 8px;
    }

    .mes-android-dingtalk-app .space-y-3 > * + * {
        margin-top: 12px;
    }

    .mes-android-dingtalk-app .space-y-4 > * + * {
        margin-top: 16px;
    }

    .mes-android-dingtalk-app .space-y-6 > * + * {
        margin-top: 24px;
    }

    .mes-android-dingtalk-app canvas {
        max-width: 100%;
        height: auto;
    }

    .mes-android-dingtalk-app .truncate {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mes-android-dingtalk-app .break-words {
        overflow-wrap: break-word;
        word-break: break-word;
    }

    .mes-android-dingtalk-app .rounded,
    .mes-android-dingtalk-app .rounded-md {
        border-radius: 6px;
    }

    .mes-android-dingtalk-app .rounded-lg,
    .mes-android-dingtalk-app .rounded-xl {
        border-radius: 8px;
    }

    .mes-android-dingtalk-app .rounded-full {
        border-radius: 9999px;
    }

    @media (max-width: 1023px) {
        .mes-android-dingtalk-app body > .flex > .flex-col {
            width: 100%;
            min-width: 0;
        }

        .mes-android-dingtalk-app aside.\-translate-x-full {
            transform: translateX(-100%);
        }

        .mes-android-dingtalk-app aside.translate-x-0 {
            transform: translateX(0);
        }

        .mes-android-dingtalk-app header.lg\:hidden {
            position: relative;
            z-index: 50;
            min-height: 56px;
            background-color: #ffffff;
        }

        .mes-android-dingtalk-app header.lg\:hidden button {
            min-width: 44px;
            min-height: 44px;
            pointer-events: auto;
        }

        .mes-android-dingtalk-app [x-show="mobileOpen"] {
            pointer-events: auto;
        }

        .mes-android-dingtalk-app main {
            padding: 12px;
        }

        .mes-android-dingtalk-app h1 {
            font-size: 24px;
            line-height: 1.25;
            word-break: break-word;
        }

        .mes-android-dingtalk-app h2 {
            font-size: 18px;
            line-height: 1.3;
            word-break: break-word;
        }

        .mes-android-dingtalk-app .card {
            padding: 14px;
        }

        .mes-android-dingtalk-app .card.p-0 {
            padding: 0;
        }

        .mes-android-dingtalk-app form.card {
            overflow: visible;
        }

        .mes-android-dingtalk-app form .flex,
        .mes-android-dingtalk-app .card .flex {
            min-width: 0;
            flex-wrap: wrap;
        }

        .mes-android-dingtalk-app form .gap-2,
        .mes-android-dingtalk-app form .gap-3 {
            row-gap: 10px;
        }

        .mes-android-dingtalk-app form .btn-touch,
        .mes-android-dingtalk-app form button[type="submit"],
        .mes-android-dingtalk-app form a.btn-touch {
            flex: 1 1 auto;
        }

        .mes-android-dingtalk-app .grid-cols-2,
        .mes-android-dingtalk-app .sm\:grid-cols-3,
        .mes-android-dingtalk-app .md\:grid-cols-3,
        .mes-android-dingtalk-app .lg\:grid-cols-2,
        .mes-android-dingtalk-app .lg\:grid-cols-3,
        .mes-android-dingtalk-app .lg\:grid-cols-6,
        .mes-android-dingtalk-app .xl\:grid-cols-4 {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .mes-android-dingtalk-app .lg\:col-span-2,
        .mes-android-dingtalk-app .lg\:col-span-3,
        .mes-android-dingtalk-app .col-span-2,
        .mes-android-dingtalk-app .md\:col-span-3 {
            grid-column: auto;
        }

        .mes-android-dingtalk-app .overflow-x-auto table {
            min-width: 0;
        }

        .mes-android-dingtalk-app .overflow-x-auto table.min-w-full {
            min-width: 720px;
        }
    }

    @media (max-width: 420px) {
        .mes-android-dingtalk-app main {
            padding: 10px;
        }

        .mes-android-dingtalk-app .card {
            padding: 12px;
        }

        .mes-android-dingtalk-app .grid-cols-2,
        .mes-android-dingtalk-app .sm\:grid-cols-3,
        .mes-android-dingtalk-app .md\:grid-cols-3,
        .mes-android-dingtalk-app .lg\:grid-cols-2,
        .mes-android-dingtalk-app .lg\:grid-cols-3,
        .mes-android-dingtalk-app .lg\:grid-cols-6,
        .mes-android-dingtalk-app .xl\:grid-cols-4 {
            grid-template-columns: 1fr;
        }

        .mes-android-dingtalk-app .overflow-x-auto table {
            min-width: 0;
        }

        .mes-android-dingtalk-app .overflow-x-auto table.min-w-full {
            min-width: 640px;
        }

        .mes-android-dingtalk-app .btn-touch {
            width: auto;
            max-width: 100%;
        }
    }

    /* P5: Handoff buttons - Android DingTalk only */
    .mes-android-dingtalk-app .btn-handoff {
        background-color: #f97316 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border-color: #ea580c !important;
        opacity: 1 !important;
        -webkit-appearance: none;
        appearance: none;
    }

    .mes-android-dingtalk-app .btn-handoff:hover,
    .mes-android-dingtalk-app .btn-handoff:focus,
    .mes-android-dingtalk-app .btn-handoff:active {
        background-color: #ea580c !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        border-color: #c2410c !important;
    }

/* ============================================================
   P9: Mobile step-detail redesign (operator / inspector views)
   New layout primitives — appended only, no existing rule touched.
   ============================================================ */

/* Sticky task summary bar: full-bleed inside .mobile-shell padding */
.mes-step-summary-bar {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 30;
    margin: -16px -16px 16px;
    padding: 10px 16px 12px;
}

/* Two-line clamp for instructions / long texts */
.mes-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Horizontal evidence thumbnail strip */
.mes-evidence-strip {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.mes-evidence-thumb {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
}

.mes-evidence-thumb img,
.mes-evidence-expired {
    display: block;
    width: 84px;
    height: 84px;
    border-radius: 8px;
    object-fit: cover;
}

.mes-evidence-expired {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 11px;
    text-align: center;
}

.mes-evidence-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    max-width: 76px;
    padding: 1px 6px;
    border-radius: 9999px;
    background: rgba(17, 24, 39, 0.72);
    color: #ffffff;
    font-size: 10px;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mes-evidence-meta {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.4;
    color: #6b7280;
    word-break: break-all;
}

/* Secondary action row: pause / handoff share one row below primary */
.mes-action-secondary-row {
    display: flex;
    gap: 8px;
}

.mes-action-secondary-row > button {
    flex: 1 1 0;
    min-width: 0;
    white-space: normal;
}

/* Android DingTalk fallbacks: solid backgrounds so sticky bar never
   renders transparent over scrolled content */
.mes-android-dingtalk-app .mes-step-summary-bar {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb !important;
}

.mes-android-dingtalk-app .mes-evidence-strip {
    display: flex;
    overflow-x: auto;
}

.mes-android-dingtalk-app .mes-action-secondary-row {
    display: flex;
}

.mes-android-dingtalk-app .mes-action-secondary-row > button {
    width: auto;
    max-width: 100%;
}