/* model compare*/
.data-table {
    border-collapse: collapse;
    font-size: 0.9rem;
    width: max-content;
    min-width: 100%;
}

.data-table thead th {
    background-color: #f9fafb;
    color: #374151;
    font-weight: 600;
    text-align: center;
    border-bottom: 2px solid #e5e7eb;
    white-space: normal;
}

.data-table thead th.mode-col {
    padding: 1rem 0.5rem;
    min-width: 140px;
}

.model-mode-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    line-height: 1.2;
}

.model-mode-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
}

.data-table tbody td {
    text-align: center;
    border-bottom: 1px solid #f3f4f6;
    color: #4b5563;
}

.data-table tbody tr:hover {
    background-color: #f7faff;
    transition: background-color 0.2s ease-in-out;
}

.data-table .item-col {
    text-align: left;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
}

.data-table .item-col i {
    margin-right: 0.5rem;
    color: #9ca3af;
    width: 1.25em;
    text-align: center;
}

.data-table .highlight-col {
    background: #f0f9ff;
}

.data-table thead .highlight-col {
    color: #1d4ed8;
}

.data-table thead th a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.data-table thead th a:hover {
    color: #1d4ed8;
}

.external-link-icon {
    font-size: 0.8em;
    margin-left: 5px;
    opacity: 0.6;
    transition: opacity 0.2s ease;
}

a:hover .external-link-icon {
    opacity: 1;
}

.action-link {
    display: inline-block;
    padding: 0.3rem 0.8rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    background-color: #eef2ff;
    color: #4338ca;
    border: 1px solid transparent;
    white-space: nowrap;
}

.action-link:hover {
    background-color: #e0e7ff;
    color: #3730a3;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}

.action-link i {
    margin-right: 0.3rem;
}

.org-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    vertical-align: middle;
}

.related-links a {
    color: #4b5563;
    font-size: 1.2rem;
    margin-left: 0.75rem;
    transition: color 0.2s;
}

.related-links a:hover {
    color: #1f2937;
}

.huggingface-icon {
    font-weight: bold;
    font-size: 1.2rem;
    line-height: 1;
    vertical-align: middle;
}

body {
    background-color: #f9fafb;
}

.model-comparison-container {
    display: flex;
    flex-wrap: nowrap;
    gap: 1.25rem;
    width: 100%;
    min-width: fit-content;
}

.model-card {
    background-color: #ffffff;
    border-radius: 1rem;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
    flex: 1 1 clamp(280px, 32vw, 600px);
}

.model-header-name {
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    text-align: left;
    display: block;
    font-weight: 600;
    font-size: 1.1rem;   /* 初始字号，短名能放下就保持 */
    line-height: 1.3;
    white-space: nowrap; /* 单行 */
    box-sizing: border-box; /* 避免自身 padding 影响测量 */
    overflow: visible;   /* 让 scrollWidth 反映真实内容宽度 */
    /* 可选：数字等宽，长串看起来更稳 */
    font-variant-numeric: tabular-nums;
}

.model-banner {
    position: relative;
    min-height: 120px;
    padding: 1rem 1.25rem;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    color: white;
    --title-line-height: 1.2;
    --title-max-lines: 2;
    max-height: calc(var(--title-line-height) * var(--title-max-lines) * 1em + 6px);
}

.model-card:nth-child(5n+1) .model-banner {
    /*background: linear-gradient(135deg, #F6A16B, #E49444); !* 深黄色渐变，温暖且充满活力 *!*/
    background: radial-gradient(100% 80% at 80% 20%, rgba(255,255,255,0.3), transparent 60%),
    linear-gradient(135deg, #1da1f2, #3bb2ff, #69d2ff);;
}

.model-card:nth-child(5n+3) .model-banner {
    /*background: linear-gradient(135deg, #F06D58, #D97A4E); !* 深粉橙渐变 *!*/
    background: radial-gradient(100% 80% at 85% 15%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(80% 80% at 7% 80%,  #FF8D78 0%, rgba(255,141,120,0) 70%),
    linear-gradient(110deg,#F59DC0 0%,#F4A88F 48%,#FFE08A 100%)
}

.model-card:nth-child(5n) .model-banner {
    /*background: linear-gradient(135deg, #6A8DFF, #4178D4); !* 深蓝渐变，呈现冷静感 *!*/
    background: radial-gradient(100% 85% at 88% 12%, rgba(255,255,255,.34), transparent 60%),
    radial-gradient(80% 80% at 8% 82%,  #6EE7B7 0%, rgba(110,231,183,0) 60%),
    linear-gradient(120deg,#06B6D4,#22D3EE,#34D399)
}

.model-card:nth-child(5n+4) .model-banner {
    background:
            radial-gradient(100% 85% at 88% 12%, rgba(255,255,255,.32), transparent 60%),
            radial-gradient(80% 80% at 8% 82%,  #FF8A65 0%, rgba(255,138,101,0) 60%),
            linear-gradient(120deg,#FF7043,#FF8A65,#FFB74D);
}

.model-card:nth-child(5n+2) .model-banner {
    background:radial-gradient(100% 85% at 88% 12%, rgba(255,255,255,.33), transparent 60%),
    radial-gradient(80% 80% at 10% 85%, #B388FF 0%, rgba(179,136,255,0) 65%),
    linear-gradient(120deg,#7C4DFF,#C158DC,#64B5F6)
}



.model-description {
    color: #4b5563;
    font-size: 0.9rem;
    min-height: 40px;
}

.model-actions {
    display: flex;
    gap: 1rem;
}

.btn-action {
    flex-grow: 1;
    text-align: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.btn-learn-more {
    background-color: #ffffff;
    color: #1f2937;
    border: 1px solid #d1d5db;
}

.btn-learn-more:hover {
    background-color: #f3f4f6;
}

.btn-playground {
    background-color: #1f2937;
    color: #ffffff;
    border: 1px solid #1f2937;
}

.btn-playground:hover {
    background-color: #374151;
    color: white;
}

.btn-learn-more:hover{
    color: black;
}

.btn-playground.disabled {
    background-color: rgba(100, 116, 139, 0.9);
    border-color: rgba(100, 116, 139, 0.9);
    cursor: not-allowed;
}

.comparison-section {
    border-top: 1px solid #e5e7eb;
    padding-top: 1.5rem;
}

.feature-group-title {
    font-size: 1.05rem;
    font-weight: 350;
    color: rgba(100, 116, 139, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding-bottom: 0.75rem;
    margin-top: 2.5rem;
}

.feature-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.9rem;
}

.feature-row:last-child {
    border-bottom: none;
}

.feature-name {
    color: #374151;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.feature-value {
    color: #1f2937;
    font-weight: 500;
    text-align: right;
}

.feature-value a {
    color: #1f2937;
    text-decoration: none;
}

.feature-value a:hover {
    text-decoration: underline;
}

.speed-bolts .fa-bolt {
    color: #d1d5db;
}

.speed-bolts .fa-bolt.active {
    color: #111827;
}

.check-icon {
    color: #10B981;
    font-size: 1.2rem;
}

.cross-icon {
    color: #EF4444;
    font-size: 1.2rem;
}

.positive-text {
    color: #111827;
    font-weight: 500;
}

.negative-text {
    color: rgba(100, 116, 139, 0.9);
}

.org-logo-small {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 0.5rem;
}

.modality-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.45rem;
    font-size: 1rem;
    justify-content: center;
    align-items: center;
    min-height: 48px;
}

.modality-icon {
    position: relative;
    color: #d1d5db;
    width: 1.2em;
    height: 1.2em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modality-icon.active {
    color: #1f2937;
}

/*.modality-icon:not(.active)::after {*/
/*    content: '';*/
/*    position: absolute;*/
/*    display: block;*/
/*    width: 110%;*/
/*    height: 1.5px;*/
/*    background: #d1d5db;*/
/*    left: -5%;*/
/*    top: 50%;*/
/*    transform: translateY(-50%) rotate(45deg);*/
/*    transform-origin: center;*/
/*}*/

.model-banner > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;          /* 最多两行 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-weight: 700;
    line-height: var(--title-line-height);
    /* 初始字号给一个稍大的范围，JS 会按需下调 */
    font-size: clamp(1rem, 4.5vw + .2rem, 2rem);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    text-shadow: 1px 1px 3px rgba(0,0,0,.1);
}

.model-banner.long-text > span {
    font-size: clamp(1rem, 5vw + .25rem, 1.8rem);
}

.data-table th,
.data-table td {
    white-space: nowrap;
    padding: .5rem .75rem;
    vertical-align: middle;
}

.data-table th .text-xs {
    display: inline-block;
    margin-left: .25rem;
    vertical-align: middle;
}

.comparison-table-wrapper {
    --table-border: rgba(148, 163, 184, 0.16);
    --table-strong-border: rgba(148, 163, 184, 0.22);
    --table-font-size: 0.92rem;
    --table-line-height: 1.55;
    background: #ffffff;
    border: 1px solid var(--table-border);
    border-radius: 1.25rem;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.02);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
}

.section-title {
    display: block;
    margin: 1.35rem 0 1rem;
}

.section-title .section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: #0f172a;
    line-height: 1;
    width: 2.1rem;
    height: 2.1rem;
    flex-shrink: 0;
}

.section-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.7rem;
    border-radius: 0.75rem;
    background: #eef2ff;
    color: #4338ca;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-heading-wrap h2 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    flex-wrap: wrap;
}

.section-heading-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.section-heading-wrap p {
    margin: 0.2rem 0 0;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
    padding-left: 0;
}

.section-subtitle-en {
    font-size: 0.95rem;
    color: #64748b;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.comparison-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.2rem 0.75rem 0.75rem;
}

.comparison-table {
    width: 100%;
    min-width: 780px;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--table-font-size);
    line-height: var(--table-line-height);
    color: #334155;
}

.comparison-table thead th {
    background: #f9fafb;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--table-border);
    text-align: left;
    font-weight: 600;
    color: #1f2937;
    letter-spacing: 0.01em;
    font-size: 0.9rem;
    line-height: 1.4;
}

.table-feature-col {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 200px;
    min-width: 180px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(71, 85, 105, 0.95); /* slate-700 */
    background: #fbfcfe;
}

.table-model-col {
    min-width: 200px;
    color: rgba(71, 85, 105, 0.95);
}

.table-model-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.table-logo {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: linear-gradient(135deg, #3b82f6, #60a5fa);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    letter-spacing: 0.08em;
    font-size: 0.95rem;
    box-shadow: 0 8px 16px rgba(59, 130, 246, 0.18);
    text-transform: uppercase;
}

.comparison-table th:nth-child(3n+2) .table-logo {
    background: linear-gradient(135deg, #a855f7, #c084fc);
    box-shadow: 0 8px 16px rgba(168, 85, 247, 0.18);
}

.comparison-table th:nth-child(3n) .table-logo {
    background: linear-gradient(135deg, #f97316, #fb923c);
    box-shadow: 0 8px 16px rgba(249, 115, 22, 0.18);
}

.table-model-name {
    font-size: 0.98rem;
    font-weight: 600;
    color: #0f172a;
}

.table-org {
    font-size: 0.76rem;
    color: rgba(100, 116, 139, 0.9);
}

.comparison-table tbody tr:hover td {
    background: #f8fafc;
}

.comparison-table td {
    padding: 0.68rem 0.95rem;
    border-bottom: none;
    font-size: var(--table-font-size);
    color: #334155;
    text-align: center;
    vertical-align: middle;
    background: #fff;
    font-weight: 500;
    line-height: var(--table-line-height);
    border-left: none;
}

.comparison-table .table-feature {
    position: sticky;
    left: 0;
    z-index: 2;
    text-align: left;
    font-weight: 600;
    color: rgba(55, 65, 81, 0.92); /* slate */
    background: #fff;
    min-width: 180px;
    border-right: none;
    border-left: none;
    box-shadow: 1px 0 0 rgba(148, 163, 184, 0.1);
}

.table-section td {
    background: #f8fafc;
    color: rgba(55, 65, 81, 0.95);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.76rem;
    text-align: left;
    padding-left: 1rem;
    border-top: 1px solid var(--table-strong-border);
    border-bottom: 1px solid var(--table-strong-border);
}

.table-value {
    font-weight: 500;
}

.table-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: #2563eb;
    font-weight: 600;
}

.table-link.link-strong {
    color: #1f2937;
}

.table-value.icon-cell {
    color: #0f172a;
}

.metric-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    /*margin: 0 1px;*/
    color: rgba(30, 41, 59, 0.95);
}

.metric-icon svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.modality-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.55rem;
    border-radius: 9999px;
    background: #f9fafb;
    border: 1px solid #edf2f7;
    font-size: 0.76rem;
    color: #475569;
    margin: 0 0.1rem 0.2rem;
    font-weight: 500;
    line-height: 1.3;
    min-height: 28px;
    min-width: 58px;
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.modality-icon svg {
    width: 24px;  /* Or your desired size */
    height: 24px; /* Or your desired size */
    vertical-align: middle; /* Aligns icon with text nicely */
    margin: 0 2px; /* Optional: adds a little space between icons */
}

/* 容器左侧布局 */
.mode-filter-wrap{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:.5rem;
    margin: .5rem 0 1rem;
}

.mode-filter-hint .hint-title{
    font-size:.9rem;
    font-weight:600;
    color:#111827; /* gray-900 */
    line-height:1.35;
    margin-bottom:.1rem;
}
.mode-filter-hint .hint-desc{
    font-size:.8rem;
    color:#6b7280; /* gray-500 */
    line-height:1.5;
}

/* 按钮行（自动换行） */
.mode-filter-row{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:.75rem;
    width:100%;
}

.mode-filter-group{
    display:flex;
    flex-direction:column;
    gap:.35rem;
    padding:.25rem .5rem .5rem;
    border-radius:.75rem;
    /*background-color:#f9fafb;*/
    width:100%;
}

.mode-filter-group-title{
    font-size:.75rem;
    font-weight:600;
    color:#374151;
    letter-spacing:.02em;
}

.mode-filter-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem;
}

/* 独立按钮 + 微动效 + 可访问焦点 */
.mode-btn{
    --btn-bg:#fff; --btn-bd:#e5e7eb; --btn-fg:#111827;
    --btn-bg-hover:#111827; --btn-fg-hover:#fff;
    --btn-shadow:0 1px 2px rgba(0,0,0,.06), 0 1px 1px rgba(0,0,0,.04);
    appearance:none; border:1px solid var(--btn-bd); background:var(--btn-bg);
    color:var(--btn-fg); padding:.45rem .7rem; border-radius:.7rem;
    font-size:.85rem; line-height:1.1rem; cursor:pointer; user-select:none;
    transition:transform .12s ease, box-shadow .12s ease,
    background-color .12s ease, color .12s ease, border-color .12s ease;
    box-shadow:var(--btn-shadow);
    display:inline-flex; align-items:center; gap:.4rem;
}
.mode-btn i{ font-size:.95em; }
.mode-btn:hover{ background:var(--btn-bg-hover); color:var(--btn-fg-hover); transform:translateY(-1px); }
.mode-btn:active{ transform:translateY(0); }
.mode-btn:focus-visible{ outline:2px solid #2563eb; outline-offset:2px; }
.mode-btn.active{
    background:#111827; border-color:#111827; color:#fff;
    box-shadow:0 6px 14px rgba(0,0,0,.12);
}

@media (prefers-reduced-motion: reduce){
    .mode-btn{ transition:none; }
}

/* ===== Model Compare Result: Header & Feedback Styling ===== */
header.relative.isolate {
    padding-top: 3rem;
    padding-bottom: 3rem;
    position: relative;
    text-align: center;
}

header .inline-flex {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    transition: all 0.3s ease;
}

header .inline-flex:hover {
    background-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

header h1 {
    line-height: 1.25;
    margin-bottom: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

@media (min-width: 768px) {
    header h1 {
        font-size: 2.7rem;
    }
}

@media (min-width: 1024px) {
    header h1 {
        font-size: 3rem;
    }
}

.hero-title {
    display: block;
    width: 100%;
}

.hero-title-muted {
    color: #475569;
    font-size: 0.92em;
    font-weight: 600;
    margin-left: 0.3rem;
}

.hero-gradient {
    display: inline-block;
    background: linear-gradient(120deg, #3b82f6, #a855f7, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

header p,
header ol,
header li {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #4b5563;
}

.hero-desc {
    max-width: 760px;
    color: #4b5563;
    font-size: 1.02rem;
    line-height: 1.75;
    letter-spacing: 0.01em;
    text-align: justify;
    text-align-last: center;
}

@media (min-width: 768px) {
    .hero-desc {
        font-size: 1.08rem;
    }
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.9rem;
    margin: 0 auto 1rem;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: rgba(255, 255, 255, 0.82);
    color: #475569;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
}

.hero-badge .h-1 {
    background: #cbd5e1;
}

header p {
    margin-bottom: 1rem;
}

header ol {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    padding-left: 1.2rem;
}

header li {
    margin-bottom: 0.75rem;
}

header li strong {
    color: #111827;
    font-weight: 700;
}

header .mx-auto.mt-6 {
    height: 3px;
    border-radius: 9999px;
    background-size: 200% 100%;
    animation: gradientMove 3s ease infinite;
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

header .pointer-events-none > div {
    animation: bgFloat 8s ease-in-out infinite alternate;
}

@keyframes bgFloat {
    0% { transform: translateY(0); }
    100% { transform: translateY(10px); }
}

.scroll-hint-mobile {
    display: none;
}

@media (max-width: 768px) {
    .scroll-hint-mobile {
        display: block;
        font-size: 0.85rem;
        color: rgba(100, 116, 139, 0.9);
        text-align: center;
        padding: 0.5rem 0;
        background-color: #f9fafb;
        border: 1px dashed #d1d5db;
        border-radius: 0.375rem;
        margin-bottom: 0.5rem;
    }
}

.feature-row-column {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
}

.feature-row-column .feature-name {
    margin-bottom: 0;
}

.feature-row-column .feature-value div {
    line-height: 1.4;
}

.mode-filter-feedback {
    display: none;
    margin-top: 1.25rem;
    padding: 0.85rem 1rem;
    border: 1px solid #bfdbfe;
    border-radius: 0.75rem;
    background: #eff6ff;
    color: #1d4ed8;
    gap: 0.75rem;
    align-items: flex-start;
    font-size: 0.9rem;
    line-height: 1.6;
}

.mode-filter-feedback.show {
    display: flex;
}

.mode-filter-feedback .feedback-icon {
    font-size: 1.1rem;
    line-height: 1;
    margin-top: 0.1rem;
}

.mode-filter-feedback .feedback-body {
    flex: 1;
}

.mode-filter-feedback .feedback-message {
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.mode-filter-feedback .feedback-list {
    margin: 0;
    padding-left: 1.25rem;
    color: #1f2937;
}

.data-table tr.row-no-data td.item-col {
    background: linear-gradient(120deg, rgba(59, 130, 246, 0.05), rgba(37, 99, 235, 0.05));
}

.data-table tr.row-no-data .no-data-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    padding: 0.3rem 0.6rem;
    border-radius: 9999px;
    background: #e5edff;
    color: #1d4ed8;
    font-size: 0.75rem;
    font-weight: 500;
}

.modality-chip.muted {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
}

.data-table tr.row-no-data .no-data-label i {
    font-size: 0.85rem;
}

/* ===== Model Summary Cards (top overview) ===== */
.model-summary-section {
    margin: 0 0 2.75rem;
}

.model-summary-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.model-summary-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
}

.model-summary-desc {
    color: #4b5563;
    font-size: 0.9rem;
    margin-top: 0.35rem;
}

.model-summary-grid {
    display: flex;
    flex-wrap: nowrap;
    --card-gap: 1.35rem;
    gap: var(--card-gap);
    align-items: stretch;
    padding: 0.2rem 0.6rem 0.6rem;
    margin: 0 -0.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    justify-content: center;
}

.model-summary-card {
    --brand-base: #3B82F6;
    --brand-base-rgb: 59, 130, 246;
    --brand-gradient-start: #60A5FA;
    --brand-gradient-end: #2563EB;
    --brand-bg-top: #E7F0FF;
    --brand-bg-bottom: #FFFFFF;
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 1.15rem;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    min-width: 300px;
    max-width: 420px;
    flex: 0 0 clamp(300px, calc((100% - (max(var(--model-count, 1) - 1, 0) * var(--card-gap))) / max(var(--model-count, 1), 1)), 420px);
    margin: 0;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.model-summary-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
    border-color: rgba(var(--brand-base-rgb), 0.28);
}

.model-summary-accent {
    height: 6px;
    width: 100%;
    background: var(--brand-base);
}

.model-summary-card-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    height: 100%;
    padding: 1.35rem 1.45rem 1.25rem;
    background: linear-gradient(180deg, rgba(var(--brand-base-rgb), 0.06), #ffffff 60%);
}

.model-summary-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.model-summary-org {
    font-size: 0.76rem;
    color: rgba(100, 116, 139, 0.9);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
    margin-bottom: 0.1rem;
}

.model-summary-name {
    font-size: 1.24rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
}

.model-summary-logo {
    min-width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--brand-base);
    border: 1px solid rgba(255, 255, 255, 0.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 800;
    font-size: 1rem;
    box-shadow: 0 10px 22px rgba(var(--brand-base-rgb), 0.22);
    padding: 0 0.85rem;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.model-summary-brief {
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.5;
    margin: 0.35rem 0 0;
    min-height: 54px;
}

.model-summary-meta {
    display: grid;
    gap: 0.3rem;
    margin-top: 0.1rem;
}

.model-summary-meta .meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88rem;
    color: #0f172a;
    padding: 0.2rem 0.05rem;
}

.model-summary-meta dt {
    color: rgba(100, 116, 139, 0.9);
    font-weight: 600;
}

.model-summary-meta dd {
    margin: 0;
    font-weight: 600;
    color: #0f172a;
}

.model-summary-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.35rem;
}

.model-summary-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.62rem;
    font-size: 0.79rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.75);
    color: #475569;
    border: 1px solid rgba(226, 232, 240, 0.9);
    font-weight: 600;
    letter-spacing: 0.005em;
}

.model-summary-tag.muted {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
    box-shadow: none;
}

.model-summary-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 0.5rem;
}

.model-summary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    padding: 0.6rem 0.85rem;
    border-radius: 0.9rem;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: all 0.2s ease;
    background: #ffffff;
    color: #0f172a;
    border: 1px solid #e5e7eb;
}

.model-summary-link.primary {
    background: var(--brand-base);
    color: #ffffff;
    border-color: var(--brand-base);
    box-shadow: 0 10px 22px rgba(var(--brand-base-rgb), 0.22);
}

.model-summary-link.disabled {
    background: #f8fafc;
    color: #94a3b8;
    border-color: #e2e8f0;
    cursor: not-allowed;
    box-shadow: none;
}

.model-summary-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(15, 23, 42, 0.08);
}

.model-summary-link:active {
    transform: translateY(0);
}

.model-summary-grid .model-summary-card:nth-child(6n+1) {
    --brand-base: #3B82F6;
    --brand-base-rgb: 59, 130, 246;
    --brand-gradient-start: #60A5FA;
    --brand-gradient-end: #2563EB;
    --brand-bg-top: #E8F1FF;
    --brand-bg-bottom: #FFFFFF;
}

.model-summary-grid .model-summary-card:nth-child(6n+2) {
    --brand-base: #A855F7;
    --brand-base-rgb: 168, 85, 247;
    --brand-gradient-start: #C084FC;
    --brand-gradient-end: #9333EA;
    --brand-bg-top: #F4E8FF;
    --brand-bg-bottom: #FFFFFF;
}

.model-summary-grid .model-summary-card:nth-child(6n+3) {
    --brand-base: #F97316;
    --brand-base-rgb: 249, 115, 22;
    --brand-gradient-start: #FDBA74;
    --brand-gradient-end: #EA580C;
    --brand-bg-top: #FFECDD;
    --brand-bg-bottom: #FFFFFF;
}

.model-summary-grid .model-summary-card:nth-child(6n+4) {
    --brand-base: #10B981;
    --brand-base-rgb: 16, 185, 129;
    --brand-gradient-start: #34D399;
    --brand-gradient-end: #059669;
    --brand-bg-top: #E4F7EF;
    --brand-bg-bottom: #FFFFFF;
}

.model-summary-grid .model-summary-card:nth-child(6n+5) {
    --brand-base: #06B6D4;
    --brand-base-rgb: 6, 182, 212;
    --brand-gradient-start: #67E8F9;
    --brand-gradient-end: #0891B2;
    --brand-bg-top: #E2F8FD;
    --brand-bg-bottom: #FFFFFF;
}

.model-summary-grid .model-summary-card:nth-child(6n) {
    --brand-base: #EF4444;
    --brand-base-rgb: 239, 68, 68;
    --brand-gradient-start: #F87171;
    --brand-gradient-end: #DC2626;
    --brand-bg-top: #FFE7E7;
    --brand-bg-bottom: #FFFFFF;
}

@media (max-width: 640px) {
    .model-summary-card {
        border-radius: 1.15rem;
    }
}

/* Desktop: let summary cards share the same span as the table */
@media (min-width: 1024px) {
    .model-summary-grid {
        display: grid;
        grid-template-columns: repeat(var(--model-count, 1), minmax(280px, 1fr));
        gap: var(--card-gap);
        padding: 0;
        margin: 0;
        justify-content: stretch;
    }

    .model-summary-card {
        min-width: 0;
        max-width: none;
        width: 100%;
        flex: 1 1 auto;
    }
}