.row { display: flex; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 12px; padding: 14px 18px; background: var(--glass-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--glass-border); border-radius: var(--radius); box-shadow: var(--glass-shadow); } .row:first-of-type { margin-top: 24px; } .rowTitle { margin: 0; font-size: 15px; font-weight: 600; color: var(--text-primary); } .rowName { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; flex: 1 1 auto; min-width: 0; } .rowTitleEn { font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); font-family: var(--font-en), var(--font-ui); line-height: 1.2; } .chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex: 0 0 auto; } .chip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 76px; padding: 8px 14px; border-radius: 16px; background: rgba(var(--primary-rgb) / 0.1); color: var(--primary); } .chipValue { font-family: var(--font-en), var(--font-ui); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; color: inherit; } .chipLabel { font-size: 11px; font-weight: 500; line-height: 1.2; color: inherit; opacity: 0.85; white-space: nowrap; } .error { margin-top: 20px; padding: 12px 16px; font-size: 14px; color: #b91c1c; background: rgba(239, 68, 68, 0.08); border: 1px solid rgba(239, 68, 68, 0.25); border-radius: var(--radius-sm); } .error + .row { margin-top: 16px; } @media (max-width: 768px) { .row { flex-direction: column; align-items: stretch; gap: 12px; } .chips { justify-content: flex-start; } }